/* =====================================================================
   TrainPizza — Navy / Light-blue palette override
   Palette: #1A1A2E  #16213E  #0F3460  #00A8E1  #000000
   Loaded AFTER main.css to re-skin the whole storefront.
   ===================================================================== */

:root {
    --theme:  #0F3460;   /* primary (links, accents, headings on light bg) */
    --theme2: #00A8E1;   /* light-blue highlight / hover */
    --header: #16213E;   /* dark navy */
    --button: #0F3460;
    --button2:#16213E;
    --base:   #00A8E1;
    --ratting:#00A8E1;
}

/* ---------- Top strip (was invisible) ---------- */
header .header-top {
    background: #16213E !important;
}
header .header-top,
header .header-top * ,
header .header-top ul li,
header .header-top .top-right,
header .header-top span {
    color: #ffffff !important;
}
header .header-top .social-icon a,
header .header-top .social-icon a i,
header .header-top .social-icon a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
header .header-top .social-icon a:hover,
header .header-top .social-icon a:hover i { color: #00A8E1 !important; }

/* ---------- Main header bar = light blue ---------- */
header.section-bg,
#header-sticky,
#header-sticky.header-1,
.header-1 {
    background: #00A8E1 !important;
}

/* Header nav / text / icons -> dark navy for contrast on light blue */
#header-sticky .main-menu nav > ul > li > a,
#header-sticky .main-menu ul li a,
.header-1 .main-menu ul li a,
#header-sticky .header-logo,
#header-sticky h6,
.mean__menu-wrapper .main-menu ul li a {
    color: #16213E !important;
    font-weight: 600;
}
#header-sticky .main-menu ul li a:hover,
.header-1 .main-menu ul li a:hover { color: #ffffff !important; }

/* submenu dropdown stays readable (dark text on white) */
.main-menu ul li .submenu { background: #ffffff !important; }
.main-menu ul li .submenu li a { color: #16213E !important; }
.main-menu ul li .submenu li a:hover { color: #0F3460 !important; background:#eef6fb !important; }

/* cart + lang + currency on header */
.menu-cart .cart-icon svg { fill: #16213E !important; }
.menu-cart .cart-icon[data-quantity]:after,
.cart-icon[data-quantity]:after { background: #0F3460 !important; color:#fff !important; }
#header-sticky .header__hamburger .header-bar span { background:#16213E !important; }

/* ---------- Buttons ---------- */
.theme-btn,
.theme-btn.bg-red-2,
.bg-red-2,
.header-button .theme-btn {
    background: #0F3460 !important;
    color: #ffffff !important;
    border-color: #0F3460 !important;
}
.theme-btn:hover,
.bg-red-2:hover { background: #00A8E1 !important; color:#fff !important; }

/* ---------- Accent text / headings that used the orange theme var ---------- */
.theme-color, .text-theme, .sub-title, .section-title span,
span.text-red, .title span { color: #0F3460 !important; }

/* common literal oranges from the theme */
[style*="#d73400"], [style*="#FF5722"], [style*="#ff5722"] { color:#0F3460 !important; }

/* ---------- Footer = dark navy ---------- */
footer.section-bg,
.footer-section,
.footer-section.section-bg {
    background: #16213E !important;
}
.footer-section, .footer-section *,
.footer-section a, .footer-section p, .footer-section li,
.footer-section h1,.footer-section h2,.footer-section h3,.footer-section h4,.footer-section h5,.footer-section h6 {
    color: #e8eef5 !important;
}
.footer-section a:hover { color:#00A8E1 !important; }
.footer-section .social-icon a, .footer-section .social-icon a i { color:#fff !important; }

/* offcanvas / mobile menu */
.offcanvas__info { background:#16213E !important; }
.offcanvas__info, .offcanvas__info * { color:#e8eef5 !important; }

/* breadcrumb / page headings accent */
.breadcrumb-wrapper .page-heading h1 { color:#fff !important; }

/* links site-wide hover */
a:hover { color:#00A8E1; }

/* =====================================================================
   "Order Food Delivery…" search section — MagicBricks-style pill bar
   ===================================================================== */
.check_pnr { padding: 55px 0 40px; background:#fff !important; }
.check_pnr .brand-wrapper { text-align:center; }
.check_pnr .section-title span {
    display:block; font-size:30px; line-height:1.25; font-weight:800;
    color:#16213E !important; margin-bottom:28px;
}
@media(max-width:600px){ .check_pnr .section-title span{ font-size:22px; } }

/* the search bar container */
.check_pnr .booking-items.order-check {
    background:#fff;
    border:1px solid #e3e8ef;
    border-radius:55px;
    box-shadow:0 14px 44px rgba(15,52,96,.13);
    padding:8px 8px 8px 12px;
    display:inline-flex !important;
    align-items:center !important;
    gap:0;
    max-width:100%;
    margin:0 auto;
}

/* segments */
.check_pnr .booking-items .form-clt { border:none !important; margin:0 !important; }
.check_pnr .booking-items .form-clt.d-flex { flex:0 1 auto; gap:0 !important; }
.check_pnr .booking-items .form-clt.d-flex > div {
    padding:8px 24px; position:relative; min-width:170px; text-align:left;
}
.check_pnr .booking-items .form-clt.d-flex > div + div::before,
.check_pnr .booking-items #orderNowWrapper::before {
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    height:36px; width:1px; background:#e6eaf0;
}

/* small uppercase labels */
.check_pnr .booking-items h5,
.check_pnr .booking-items h6 {
    font-size:11px !important; text-transform:uppercase; letter-spacing:.6px;
    color:#8a94a6 !important; margin:0 0 3px 0 !important; font-weight:700;
}

/* borderless inputs/selects inside the bar */
.check_pnr .booking-items .form-control,
.check_pnr .booking-items .form-select {
    border:none !important; box-shadow:none !important; outline:none !important;
    padding:0 !important; height:auto !important; min-height:24px;
    background:transparent !important; font-size:15px; font-weight:600; color:#16213E !important;
}
.check_pnr .booking-items .dropdown-list { border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); }

/* Order Now / search button */
.check_pnr #orderNowWrapper { position:relative; margin-left:6px; }
.check_pnr #orderNowBtn.theme-btn {
    border-radius:50px !important; padding:0 34px; height:54px;
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
    background:#0F3460 !important; color:#fff !important; font-weight:700; font-size:15px;
    box-shadow:0 6px 18px rgba(15,52,96,.25);
}
.check_pnr #orderNowBtn.theme-btn:hover { background:#00A8E1 !important; }
.check_pnr #orderNowBtn.theme-btn::before { content:"\1F50D"; font-size:15px; }

/* responsive: stack into a card on mobile */
@media(max-width:768px){
    .check_pnr .booking-items.order-check {
        flex-direction:column !important; align-items:stretch !important;
        border-radius:18px; padding:10px; gap:4px;
    }
    .check_pnr .booking-items .form-clt.d-flex { flex-direction:column; }
    .check_pnr .booking-items .form-clt.d-flex > div { min-width:0; padding:12px 16px; border-bottom:1px solid #eef1f5; }
    .check_pnr .booking-items .form-clt.d-flex > div + div::before,
    .check_pnr .booking-items #orderNowWrapper::before { display:none; }
    .check_pnr #orderNowWrapper { margin:8px 0 0; }
    .check_pnr #orderNowBtn.theme-btn { width:100%; }
}

/* =====================================================================
   Header layout
   • Mobile (≤991px): minimal bar — logo (left) · cart + language icon
     (centre) · menu icon (right). Currency + full nav live in the menu.
   • Desktop (≥992px): logo (left) · nav links · cart + language icon +
     currency switcher (right). No hamburger.
   ===================================================================== */

/* ---------- shared ---------- */
#header-sticky { padding: 8px 0 !important; }
#header-sticky .header-main {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 62px;
}
#header-sticky .header-main > .logo {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}
#header-sticky .tp-lang-switch { display: none !important; }   /* icon-only language, both breakpoints */

/* base styling for the currency input (was tied to #currencyInput before) */
.js-currency-input {
    padding: 8px 12px;
    font-size: 14px;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* ---------- MOBILE (≤991px): minimal bar ---------- */
@media (max-width: 991px) {
    /* slim top promo bar */
    header .header-top { padding: 5px 0 !important; }
    header .header-top .header-top-wrapper { justify-content: center !important; }
    header .header-top .header-top-wrapper > ul { display: none !important; }
    header .header-top .top-right { width: 100%; justify-content: center !important; }
    header .header-top .social-icon a { margin: 0 5px !important; font-size: 13px !important; }

    #header-sticky .header-main { justify-content: flex-start !important; }  /* overrides theme ≤575px centre */
    #header-sticky .header-main > .logo img { width: 78px !important; height: auto !important; }

    /* .d-flex must not be a positioning context, so header-right + hamburger
       resolve their absolute position against .header-main */
    #header-sticky .header-main > .d-flex { position: static !important; }

    /* cart + language icon — absolutely centred on the bar */
    #header-sticky .header-right {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        margin: 0 !important;
    }

    /* nav + currency hidden from the bar (they live in the hamburger menu) */
    #header-sticky .header-main > .d-flex > .header-left { display: none !important; }

    /* hamburger — visible, pinned right */
    #header-sticky .header__hamburger {
        display: block !important;
        position: absolute !important;
        right: 12px; top: 50%;
        transform: translateY(-50%);
        margin: 0 !important; z-index: 5;
    }
    #header-sticky .header__hamburger .header-bar { cursor: pointer; }
}

/* ---------- DESKTOP (≥992px): logo · nav · cart + lang + currency ---------- */
@media (min-width: 992px) {
    #header-sticky .header-main { justify-content: space-between !important; }
    #header-sticky .header-main > .logo img { width: 100px !important; height: auto !important; }

    /* controls row fills the space after the logo */
    #header-sticky .header-main > .d-flex {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center !important;
        gap: 22px !important;
        margin-left: 40px;
    }
    /* nav sits left, pushing cart / language / currency to the right */
    #header-sticky .hl-nav { margin-right: auto; display: block !important; }
    #header-sticky .hl-currency { display: block !important; }
    #header-sticky .header-right {
        position: static !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
    }
    /* no hamburger on desktop — nav is inline */
    #header-sticky .header__hamburger { display: none !important; }

    /* desktop header currency — compact inline field with its "Currency" title */
    .header-currency .currency-switch { display: flex; align-items: center; gap: 8px; }
    .header-currency .currency-switch__label {
        margin: 0 !important; font-size: 12px !important; color: #16213E !important;
        text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; font-weight: 700;
    }
    .header-currency .dropdown-container { width: 110px; }
    .header-currency .js-currency-input { width: 100% !important; padding: 6px 10px !important; font-size: 13px; }
    .header-currency .dropdown-list { min-width: 170px; }

    /* the offcanvas currency copy isn't used on desktop */
    .offcanvas__currency { display: none !important; }
}

/* ---------------------------------------------------------------------
   Inner-page breadcrumb banner (Contact / About / Blog …) — keep it a
   slim strip on phones so it doesn't dominate the viewport like the old
   tall header did.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading { padding: 12px 0 !important; }
    .breadcrumb-wrapper .page-heading h1 { font-size: 24px !important; margin: 0 !important; line-height: 1.2; }
    .breadcrumb-wrapper .page-heading .breadcrumb-items { margin-top: 4px !important; }
}
@media (max-width: 575px) {
    .breadcrumb-wrapper .page-heading { padding: 10px 0 !important; }
    .breadcrumb-wrapper .page-heading h1 { font-size: 20px !important; }
    .breadcrumb-wrapper .page-heading .breadcrumb-items li,
    .breadcrumb-wrapper .page-heading .breadcrumb-items li i { font-size: 13px !important; }
}

/* =====================================================================
   Language switcher — hide the "Select Language ▼" text and swap the
   Google "G" for a translate icon. The gadget stays clickable (clicking
   the icon opens the language menu).
   ===================================================================== */
#google_translate_element { line-height: 0; }
#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget-simple {
    font-size: 0 !important;      /* hides all text nodes ("Select Language", the arrow) */
    line-height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#google_translate_element .goog-te-gadget-simple {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
/* replace the Google "G" sprite with a translate icon (dark navy to match
   the cart + menu icons) */
#google_translate_element img.goog-te-gadget-icon {
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316213E'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E") !important;
    background-position: 50% 50% !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
}
/* Google injects a "Powered by" text node after the gadget — keep it hidden */
#google_translate_element .goog-te-gadget > span { display: none !important; }

/* =====================================================================
   Currency switcher now lives inside the offcanvas (hamburger) menu.
   The menu panel forces light text on everything, so re-assert dark text
   on the white input + dropdown so it stays readable.
   ===================================================================== */
.offcanvas__currency { max-width: 260px; }
.offcanvas__currency .currency-switch__label {
    color: #e8eef5 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 8px 0 !important;
    font-weight: 700;
}
.offcanvas__currency .dropdown-container { width: 100%; }
.offcanvas__currency .js-currency-input {
    width: 100% !important;
    color: #16213E !important;
    background: #fff !important;
}
.offcanvas__currency .dropdown-list { background: #fff !important; }
.offcanvas__currency .dropdown-item { color: #16213E !important; }
.offcanvas__currency .dropdown-item:hover { background: #f1f1f1 !important; color: #0F3460 !important; }

/* =====================================================================
   Mobile / app top header — language + currency dropdowns.
   Sits in the dark top bar; hidden on desktop (which uses the header
   icon + inline currency instead).
   ===================================================================== */
.tp-mobile-switchers { display: none; }
@media (max-width: 991px) {
    .tp-mobile-switchers {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }
    /* the social icons make the dark bar too busy on phones — hide them there */
    header .header-top .social-icon { display: none !important; }
    header .header-top .top-right { width: auto; }
}
.tp-mobile-switchers .tp-switch {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px; padding: 3px 8px 3px 10px;
}
.tp-mobile-switchers .tp-switch__ico { color: #fff; font-size: 12px; line-height: 1; }
.tp-mobile-switchers .tp-mini-select {
    background: transparent; border: none; color: #fff; font-size: 12px;
    font-weight: 600; padding: 3px 4px; outline: none; cursor: pointer; max-width: 120px;
}
/* the native option list renders on white in most browsers — keep it readable */
.tp-mobile-switchers .tp-mini-select option { color: #16213E; background: #fff; }