/* =========================================================================
   Gupta Traders — shared modern UI layer (all public pages)
   Same brand colours: red #ce1212 · dark #212529 / #37373f
   Injected automatically by pages/site_boost.php
   ========================================================================= */
:root {
    --gt-red: #ce1212;
    --gt-red-2: #e63939;
    --gt-red-soft: rgba(206, 18, 18, .08);
    --gt-dark: #212529;
    --gt-dark-2: #37373f;
    --gt-muted: #6b7280;
    --gt-border: rgba(15, 23, 42, .08);
    --gt-ease: cubic-bezier(.22, 1, .36, 1);
    --gt-tabbar: 64px;
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(206, 18, 18, .15); }
img { max-width: 100%; height: auto; }
img[loading="lazy"] { content-visibility: auto; }

/* scroll progress bar */
.gt-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 10001; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gt-red), #ff7a59); pointer-events: none; }

/* ------------------------------------------------------------------ HEADER */
.header {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: height .35s var(--gt-ease), box-shadow .35s, border-color .35s, background .35s !important;
}
.header.sticked { height: 72px !important; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35) !important; border-bottom-color: var(--gt-border); background: rgba(255, 255, 255, .92) !important; }
.header .logo h1 { transition: transform .35s var(--gt-ease); }
.header .logo:hover h1 { transform: scale(1.03); }
.header .btn-book-a-table, .header .btn-book-a-table:focus {
    background: linear-gradient(135deg, var(--gt-red), var(--gt-red-2)) !important;
    box-shadow: 0 10px 22px -10px rgba(206, 18, 18, .7) !important; border-radius: 999px !important;
}

/* desktop nav: animated underline + active pill */
@media (min-width: 1280px) {
    .navbar a, .navbar a:focus { position: relative; border-radius: 999px; transition: color .25s, background .25s !important; }
    .navbar > ul > li > a::after {
        content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; border-radius: 2px;
        background: var(--gt-red); transition: left .3s var(--gt-ease), right .3s var(--gt-ease);
    }
    .navbar > ul > li > a:hover::after, .navbar > ul > li > a.active::after { left: 22%; right: 22%; }
    .navbar > ul > li > a.active { color: var(--gt-red) !important; }
}

/* mobile / tablet slide-in menu (keeps the original toggle logic) */
@media (max-width: 1279px) {
    .navbar { border-left: 0 !important; max-width: 340px !important; right: -110% !important; transition: right .45s var(--gt-ease) !important; }
    .mobile-nav-active .navbar { right: 0 !important; }
    .mobile-nav-active .navbar:before { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .navbar ul {
        background: #fff !important; padding: 84px 14px 24px !important; border-radius: 26px 0 0 26px;
        box-shadow: -20px 0 50px -20px rgba(15, 23, 42, .4);
    }
    .navbar ul::before {
        content: 'Menu'; position: absolute; top: 28px; left: 24px;
        font: 800 22px/1 'Outfit', sans-serif; color: var(--gt-dark-2); letter-spacing: -.02em;
    }
    .navbar a, .navbar a:focus {
        justify-content: flex-start !important; gap: 12px; margin: 3px 0; padding: 13px 14px !important;
        border-radius: 14px; border-bottom: 0 !important; color: var(--gt-dark-2) !important; font-size: 16px !important;
        transition: background .2s, color .2s, transform .3s var(--gt-ease) !important;
    }
    .navbar a .gt-ic { width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; background: #f4f4f6; color: var(--gt-red); font-size: 16px !important; margin: 0 !important; line-height: 1 !important; }
    .navbar a:hover { background: var(--gt-red-soft); transform: translateX(-3px); }
    .navbar a.active, .navbar a.active:focus { background: var(--gt-red-soft); color: var(--gt-red) !important; }
    .navbar a.active .gt-ic { background: var(--gt-red); color: #fff; }
    .mobile-nav-active .navbar li { animation: gtSlideIn .45s var(--gt-ease) both; }
    .mobile-nav-active .navbar li:nth-child(2) { animation-delay: .03s; } .mobile-nav-active .navbar li:nth-child(3) { animation-delay: .06s; }
    .mobile-nav-active .navbar li:nth-child(4) { animation-delay: .09s; } .mobile-nav-active .navbar li:nth-child(5) { animation-delay: .12s; }
    .mobile-nav-active .navbar li:nth-child(6) { animation-delay: .15s; } .mobile-nav-active .navbar li:nth-child(7) { animation-delay: .18s; }
    .mobile-nav-active .navbar li:nth-child(8) { animation-delay: .21s; }
    .mobile-nav-hide { width: 42px; height: 42px; border-radius: 12px; background: #f4f4f6; display: inline-flex; align-items: center; justify-content: center; font-size: 26px !important; top: 22px !important; right: 18px !important; }
    .mobile-nav-show { width: 42px; height: 42px; border-radius: 12px; display: inline-flex !important; align-items: center; justify-content: center; background: #f4f4f6; font-size: 24px !important; margin: 0 0 0 12px !important; }
    .mobile-nav-show.d-none { display: none !important; }
}

/* ---------------------------------------------------------- APP TAB BAR */
.gt-tabbar { display: none; }
@media (max-width: 991px) {
    body.gt-has-tabbar { padding-bottom: calc(var(--gt-tabbar) + env(safe-area-inset-bottom)); }
    .gt-tabbar {
        display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 996;
        height: var(--gt-tabbar); padding: 6px; border-radius: 22px;
        background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
        border: 1px solid var(--gt-border); box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
        transform: translateY(0); transition: transform .35s var(--gt-ease);
    }
    body.gt-tabbar-hidden .gt-tabbar { transform: translateY(calc(100% + 24px)); }
    body.mobile-nav-active .gt-tabbar { transform: translateY(calc(100% + 24px)); }
    .gt-tabbar a, .gt-tabbar button {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border: 0; background: transparent; border-radius: 16px; color: var(--gt-muted) !important; text-decoration: none !important;
        font: 600 10.5px 'Outfit', sans-serif; transition: color .2s, background .2s; padding: 0;
    }
    .gt-tabbar i { font-size: 20px; line-height: 1; transition: transform .3s var(--gt-ease); }
    .gt-tabbar .active { color: var(--gt-red) !important; background: var(--gt-red-soft); }
    .gt-tabbar .active i { transform: translateY(-1px) scale(1.1); }
    .gt-tabbar .gt-tab-cta { color: #fff !important; }
    .gt-tabbar .gt-tab-cta i { width: 46px; height: 46px; margin-top: -26px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gt-red), var(--gt-red-2)); box-shadow: 0 12px 24px -10px rgba(206, 18, 18, .8); border: 4px solid #fff; }
    .gt-tabbar .gt-tab-cta span { color: var(--gt-red); }
    /* keep the original "scroll to top" clear of the tab bar */
    .scroll-top { bottom: calc(var(--gt-tabbar) + 26px + env(safe-area-inset-bottom)) !important; right: 16px !important; }
    #footer, .footer { padding-bottom: 20px; }
}

/* ------------------------------------------------- general polish + motion */
.section-header h2, .section-header p { letter-spacing: -.01em; }
.card, .chef-member, .menu-item, .service-item, .team-member, .project-item, .gallery-item, .info-item, .establishment-card {
    transition: transform .4s var(--gt-ease), box-shadow .4s var(--gt-ease);
}
.btn-hero-primary, .btn-watch-video, .btn-book-a-table, .php-email-form button[type=submit] { transition: transform .25s var(--gt-ease), box-shadow .25s, background .25s !important; }
.btn-hero-primary:active, .btn-watch-video:active, .btn-book-a-table:active { transform: scale(.97) !important; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(206, 18, 18, .35); outline-offset: 2px; }

/* light preloader (instead of a long white screen) */
#preloader { background: #fff !important; transition: opacity .35s ease; }

/* smooth page transitions */
body.gt-leaving main, body.gt-leaving #main, body.gt-leaving section { opacity: .35; transition: opacity .18s ease; }

/* ------------------------------------------------------------ MOBILE FIXES */
@media (max-width: 991px) {
    section { padding-top: 56px; padding-bottom: 56px; }
    .hero .hero-buttons { flex-wrap: wrap; gap: 12px; justify-content: center !important; }
    .hero .hero-buttons .btn-hero-primary, .hero .hero-buttons .btn-watch-video {
        flex: 1 1 200px; max-width: 320px; margin: 0 !important; justify-content: center; text-align: center;
        min-height: 52px; display: inline-flex !important; align-items: center;
    }
    .header .btn-book-a-table, .header .btn-book-a-table:focus { margin-left: 0 !important; padding: 9px 20px !important; font-size: 14px !important; }
    .header .logo h1 { font-size: 24px !important; }
}
@media (max-width: 575px) {
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
    h2 { word-break: break-word; }
}

@keyframes gtSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* equal-height hero buttons on phones */
@media (max-width: 991px) {
    .hero .hero-buttons .btn-hero-primary, .hero .hero-buttons .btn-watch-video { height: 52px; min-height: 52px; padding: 0 20px !important; border-radius: 999px !important; font-size: 14px !important; }
}

/* the slide-in menu is position:fixed inside the header — a backdrop-filter on the header would trap it,
   so the glass effect lives on a pseudo-element instead */
.header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; }
.header::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    transition: background .35s;
}
.header.sticked::before { background: rgba(255, 255, 255, .94); }

/* stack the hero buttons on small phones */
@media (max-width: 440px) {
    .hero .hero-buttons { flex-direction: column; align-items: stretch !important; }
    .hero .hero-buttons .btn-hero-primary, .hero .hero-buttons .btn-watch-video { flex: 0 0 auto; width: 100%; max-width: none; }
}

@media (max-width: 1279px) { .navbar ul, .navbar li { list-style: none !important; } .navbar li::marker { content: none; } }

@media (max-width: 440px) {
    body .hero .hero-buttons { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    body .hero .hero-buttons > a { width: 100% !important; max-width: none !important; margin: 0 !important; justify-content: center !important; }
}

/* ---- compact desktop menu: links grouped together next to the Login button ---- */
@media (min-width: 1280px) {
    .header .container { gap: 18px; }
    .header .logo { margin-right: auto !important; }
    .navbar > ul { gap: 2px; }
    .navbar > ul > li { padding: 8px 0 !important; }
    .navbar > ul > li > a, .navbar > ul > li > a:focus { padding: 8px 13px !important; font-size: 15px !important; border-radius: 999px; }
    .navbar > ul > li > a:hover { background: rgba(206, 18, 18, .06); color: var(--gt-red) !important; }
    .navbar > ul > li > a.active { background: rgba(206, 18, 18, .08); }
    .navbar > ul > li > a::after { display: none; }
    .header .btn-book-a-table, .header .btn-book-a-table:focus { margin-left: 6px !important; padding: 10px 24px !important; white-space: nowrap; }
}
/* the menu icons were removed on request */
.navbar a .gt-ic { display: none !important; }

/* ---------------------------------------------------------- MODERN FOOTER */
.gt-footer { background: #15161a !important; color: rgba(255, 255, 255, .72) !important; padding: 0 0 22px !important; font-size: 14.5px; position: relative; overflow: hidden; }
.gt-footer::before { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(206, 18, 18, .18), transparent 65%); pointer-events: none; }
.gt-footer .container { position: relative; }
.gt-foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 32px; margin: 0 0 48px; transform: translateY(-1px); border-radius: 0 0 24px 24px; background: linear-gradient(135deg, #24252b, #1c1d22); border: 1px solid rgba(255, 255, 255, .06); border-top: 0; }
.gt-foot-cta h3 { color: #fff; font: 700 21px/1.3 'Outfit', sans-serif; margin: 0 0 4px; }
.gt-foot-cta p { margin: 0; color: rgba(255, 255, 255, .6); }
.gt-foot-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.gt-foot-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font: 600 14.5px 'Outfit', sans-serif; text-decoration: none; transition: transform .25s var(--gt-ease), background .25s, box-shadow .25s; }
.gt-foot-btn:hover { transform: translateY(-2px); }
.gt-foot-btn-primary { background: var(--gt-red); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(206, 18, 18, .8); }
.gt-foot-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff !important; }
.gt-foot-btn-ghost:hover { background: #25d366; }
.gt-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 36px; padding-bottom: 36px; }
.gt-foot-logo { display: inline-block; font: 800 28px/1 'Outfit', sans-serif; color: #fff !important; letter-spacing: -.02em; margin-bottom: 14px; text-decoration: none; }
.gt-foot-logo span { color: var(--gt-red); }
.gt-foot-brand p { margin: 0 0 18px; max-width: 320px; line-height: 1.65; }
.gt-foot-social { display: flex; gap: 8px; flex-wrap: wrap; }
.gt-foot-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #fff !important; font-size: 17px; transition: background .25s, transform .25s var(--gt-ease); }
.gt-foot-social a:hover { background: var(--gt-red); transform: translateY(-3px); }
.gt-footer h4 { color: #fff !important; font: 700 16px 'Outfit', sans-serif !important; margin: 4px 0 16px !important; padding: 0 !important; letter-spacing: .01em; }
.gt-foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gt-foot-col a { color: rgba(255, 255, 255, .72) !important; text-decoration: none; transition: color .2s, padding .25s var(--gt-ease); }
.gt-foot-col:not(.gt-foot-contact) a:hover { color: #fff !important; padding-left: 4px; }
.gt-foot-contact li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.5; }
.gt-foot-contact i { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(206, 18, 18, .14); color: #ff6b6b; font-size: 14px; }
.gt-foot-contact a:hover { color: #fff !important; }
.gt-foot-bottom { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.gt-foot-bottom strong { color: #fff; }
.gt-foot-bottom .bi-heart-fill { color: var(--gt-red); font-size: 12px; }
@media (max-width: 991px) {
    .gt-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .gt-foot-brand, .gt-foot-contact { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .gt-footer { font-size: 14px; }
    .gt-foot-cta { padding: 22px 18px; margin-bottom: 32px; text-align: center; justify-content: center; border-radius: 0 0 20px 20px; }
    .gt-foot-cta h3 { font-size: 18px; }
    .gt-foot-cta-btns { width: 100%; }
    .gt-foot-btn { flex: 1; justify-content: center; padding: 12px 14px; }
    .gt-foot-grid { gap: 26px 16px; padding-bottom: 26px; }
    .gt-foot-brand { text-align: center; }
    .gt-foot-brand p { margin-left: auto; margin-right: auto; }
    .gt-foot-social { justify-content: center; }
    .gt-foot-contact ul { background: rgba(255, 255, 255, .04); border-radius: 16px; padding: 16px; }
    .gt-foot-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 991px) { .gt-footer { padding-bottom: calc(var(--gt-tabbar) + 30px + env(safe-area-inset-bottom)) !important; } body.gt-has-tabbar:has(.gt-footer) { padding-bottom: 0; } }