/* ============================================================
   LaserBounce Queens Webstore — Complete Branding CSS v2
   Target: Match queens.laserbounce.com as closely as possible

   Brand palette:
     #091028  Very dark navy  (top utility bar)
     #00254E  Dark navy       (nav bar)
     #084991  Brand blue      (body bg, footer, hero)
     #EA2028  Red/accent      (buttons, highlights)
     #FFFFFF  White           (text on dark, logo bg)
     #1B223C  Dark text       (body copy)

   Fonts: Outfit (main site) + Nunito Sans (existing webstore)
   ============================================================ */

/* 1. FONT IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');


/* 2. GLOBAL / BODY
   ============================================================ */
body {
    font-family: 'Outfit', 'Nunito Sans', sans-serif !important;
    font-size: 16px !important;
    background: #084991;
    color: #1B223C;
}

/* Content wrapper — white card on blue body */
.dynamic-content > .container {
    background: white;
    margin-top: 0;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 0 0 8px 8px;
}

.container {
    /* min-width removed — was breaking Bootstrap mobile breakpoints */
}


/* 3. TOP UTILITY BAR (Language / Cart / Register / Login)
   ============================================================ */
nav.navbar,
.navbar,
.navbar-default {
    background-color: #00254E !important;
    border: none !important;
    border-bottom: 3px solid #EA2028 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    min-height: 56px !important;
}

/* Utility links (Language, Register, Log In) */
.navbar-nav > li > a,
.navbar .navbar-right a,
.navbar-right > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.9) !important;
    padding: 18px 12px !important;
}

.navbar-nav > li > a:hover,
.navbar-right > li > a:hover {
    color: #FFFFFF !important;
    background-color: rgba(255,255,255,0.08) !important;
}

/* Show the logo in the top navbar (mobile logo made visible on all screens) */
.navbar-brand,
.navbar-brand.navbar-brand-big,
a.navbar-brand.navbar-brand-big {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
}

.navbar-brand img {
    max-height: 44px !important;
    width: auto !important;
}

/* Cart badge */
.cart-count,
.badge {
    background-color: #EA2028 !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Hamburger toggle (mobile) */
.navbar-toggle {
    border-color: rgba(255,255,255,0.4) !important;
    margin-top: 11px !important;
    margin-bottom: 11px !important;
}
.navbar-toggle .icon-bar {
    background-color: #FFFFFF !important;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: rgba(255,255,255,0.1) !important;
}


/* 4. HERO / HEADER BANNER AREA
   ============================================================
   Hide the CenterEdge hero banner — it creates a duplicate header
   since the logo is already shown in the navbar above.
   ============================================================ */
.site-actions,
.site-actions.hidden-xs,
.site-logo,
.site-logo a,
.template-header-image,
[class*="site-banner"] {
    display: none !important;
}

/* Force navbar-header to match nav background — prevents two-tone logo area */
.navbar-header {
    background-color: #00254E !important;
}

.template-header,
[class*="header-image"],
[class*="hero"] {
    background-color: #084991;
}


/* 5. MAIN NAV PILLS BAR (BUY TICKETS / SIGN A WAIVER / etc.)
   ============================================================
   CRITICAL FIX: Base theme uses Teko 30-40px — way too large.
   Main site uses Outfit 16px — match that here.
   ============================================================ */
.widget-menu,
.widget-menu.collapse,
.widget-menu.navbar-collapse,
div.widget-menu {
    background-color: #00254E !important;
    border-bottom: 3px solid #EA2028 !important;
    padding: 0 !important;
}

/* Nav pill links — override Teko font, reduce from ~40px to 15px */
.nav.nav-pills.main-nav a,
.nav.nav-pills.main-nav li a,
.widget-menu ul.main-nav li a,
.widget-menu ul.main-nav a {
    font-family: 'Outfit', 'Nunito Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    height: auto !important;
    padding: 14px 18px !important;
    background-color: transparent !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

/* Hover / active state */
.nav.nav-pills.main-nav a:hover,
.nav.nav-pills.main-nav li:hover > a,
.nav.nav-pills.main-nav li.active > a,
.widget-menu ul.main-nav li a:hover,
.widget-menu ul.main-nav li.active a {
    color: #EA2028 !important;
    background-color: rgba(255,255,255,0.06) !important;
    border-radius: 4px !important;
}

/* "More" dropdown button */
.nav.nav-pills.main-nav .dropdown-toggle,
.widget-menu .dropdown-toggle {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
}

/* Dropdown menus */
.navbar .dropdown-menu,
.nav .dropdown-menu,
.widget-menu .dropdown-menu {
    background-color: #00254E !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-top: 2px solid #EA2028 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    padding: 4px 0 !important;
}

.navbar .dropdown-menu > li > a,
.nav .dropdown-menu > li > a,
.widget-menu .dropdown-menu > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.9) !important;
    padding: 10px 18px !important;
    text-transform: none !important;
}

.navbar .dropdown-menu > li > a:hover,
.nav .dropdown-menu > li > a:hover,
.widget-menu .dropdown-menu > li > a:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #FFFFFF !important;
}


/* Hide decorative circle images on nav pills bar */
.nav.nav-pills.main-nav::before,
.nav.nav-pills.main-nav::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/* 6. HEADINGS & TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-title,
.widget-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #00254E;
}

p, li, span, label, td, th {
    font-family: 'Outfit', 'Nunito Sans', sans-serif !important;
}

a {
    color: #084991;
    transition: color 0.15s ease;
}
a:hover {
    color: #EA2028;
    text-decoration: none;
}


/* 7. BUTTONS — pill shape matching main site
   ============================================================ */
.btn-primary,
a.btn-primary,
.btn.btn-primary,
.buy-button,
.checkout-btn {
    background-color: #EA2028 !important;
    border-color: #EA2028 !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.checkout-btn:hover {
    background-color: #c41820 !important;
    border-color: #c41820 !important;
    transform: translateY(-1px) !important;
}

/* Secondary / outline */
.btn-default,
.btn-secondary {
    background-color: transparent !important;
    border: 2px solid #EA2028 !important;
    color: #EA2028 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    padding: 10px 22px !important;
    text-transform: none !important;
}
.btn-default:hover,
.btn-secondary:hover {
    background-color: #EA2028 !important;
    color: #FFFFFF !important;
}

/* EXPLORE NOW / item action buttons */
.item-action .btn,
.widget-menu .btn,
.btn-explore,
.explore-button,
button[type="submit"],
input[type="submit"] {
    background-color: #EA2028 !important;
    border-color: #EA2028 !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 14px !important;
    padding: 8px 18px !important;
    text-transform: none !important;
}
.item-action .btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #c41820 !important;
}


/* 8. CONTENT CARDS / ITEM TILES
   ============================================================ */
.item-tile,
.widget-item,
.product-card,
.single-item {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.item-tile:hover,
.widget-item:hover,
.product-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
    transform: translateY(-2px) !important;
}

/* Category/item header strips */
.item-header,
.category-header,
.widget-header {
    background-color: #00254E !important;
    color: #FFFFFF !important;
}
.item-header h2, .item-header h3,
.category-header h2, .category-header h3 {
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
}


/* 9. FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    font-family: 'Outfit', sans-serif !important;
    border: 1px solid #c0d4eb !important;
    border-radius: 6px !important;
    color: #1B223C !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
}
input:focus, select:focus, textarea:focus {
    border-color: #EA2028 !important;
    box-shadow: 0 0 0 3px rgba(234,32,40,0.15) !important;
    outline: none !important;
}

label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    color: #1B223C !important;
}


/* 10. TABS
   ============================================================ */
.nav-tabs > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    color: #00254E !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #EA2028 !important;
    border-color: #EA2028 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
.nav-tabs > li > a:hover {
    background-color: #E6F2FF !important;
    border-color: #c0d4eb !important;
    color: #00254E !important;
}


/* 11. ALERTS
   ============================================================ */
.alert-info  { background: #E6F2FF !important; border-color: #084991 !important; color: #1B223C !important; }
.alert-success { background: #d4f4dd !important; border-color: #28a745 !important; }
.alert-danger, .alert-error { background: #fde8e9 !important; border-color: #EA2028 !important; color: #1B223C !important; }


/* 12. FOOTER — Brand blue (#084991) matching main site
   ============================================================ */
footer,
footer.foot,
.site-footer,
.footer-wrapper {
    background-color: #084991 !important;
    color: rgba(255,255,255,0.9) !important;
    border-top: 3px solid #EA2028 !important;
    padding-top: 40px !important;
    font-family: 'Outfit', sans-serif !important;
}

footer.foot > div {
    padding-top: 35px;
}

footer a,
footer.foot a,
.site-footer a {
    font-family: 'Outfit', sans-serif !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
}
footer a:hover,
footer.foot a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

footer h3, footer h4, footer h5,
footer.foot h3, footer.foot h4,
.footer-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

/* Footer bottom bar */
.footer-bottom,
footer .copyright {
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    padding-top: 16px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.65) !important;
}


/* 13. MISC — Template areas, empty states
   ============================================================ */
.templatearea-empty {
    display: none !important;
}
.templatearea .data-templatearea-content {
    box-shadow: none !important;
}
.templatearea {
    border: 0px;
}

/* Single item description */
.single-item .single-item-description,
.movies .movie.single-item .item-description {
    color: #3f4448;
    padding: 10px 0;
    white-space: pre-wrap;
    font-family: 'Outfit', sans-serif !important;
}

/* Input group button */
.input-group-btn > a {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 14. MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .nav.nav-pills.main-nav a,
    .widget-menu ul.main-nav li a {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }
}

@media (max-width: 767px) {
    /* Collapsed navbar on mobile */
    .navbar-collapse,
    .navbar-nav {
        background-color: #00254E !important;
    }

    /* Nav pills go full-width stacked */
    .widget-menu {
        border-bottom: none !important;
    }
    .nav.nav-pills.main-nav {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .nav.nav-pills.main-nav li {
        width: 100% !important;
        margin: 0 !important;
    }
    .nav.nav-pills.main-nav a,
    .widget-menu ul.main-nav li a {
        font-size: 15px !important;
        padding: 14px 20px !important;
        display: block !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 0 !important;
    }
    .nav.nav-pills.main-nav a:hover,
    .widget-menu ul.main-nav li a:hover {
        border-radius: 0 !important;
    }

    /* Content area — tighter padding on mobile */
    .dynamic-content > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 0 !important;
    }

    /* Cards — prevent overflow on small screens */
    .item-tile,
    .widget-item {
        min-width: 0 !important;
    }

    /* Reduce heading sizes on mobile */
    h1 { font-size: 26px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }

    body { font-size: 15px !important; }
}

@media (max-width: 480px) {
    .dynamic-content > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .btn-primary,
    a.btn-primary {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    .nav.nav-pills.main-nav a,
    .widget-menu ul.main-nav li a {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
}