/* ============================================================
   The Laundry Company — SHARED DESIGN SYSTEM
   Loaded on every page BEFORE page-specific CSS.
   Contains: tokens, resets, nav styles, footer styles.
   ============================================================ */

/* ── TOKENS ── */
:root {
  --cream:#F6F1E9;--cream-dark:#EDE5D4;--parchment:#FAF7F2;
  --gold:#B8975A;--gold-light:#D4B97A;--gold-pale:#F2E9D0;
  --charcoal:#272018;--charcoal-mid:#3C3226;--charcoal-light:#574A38;
  --warm-gray:#8A8178;--warm-gray-light:#C4BAB0;--white:#FFFFFF;
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:72px;}
body{font-family:'Jost',sans-serif;background:var(--parchment);color:var(--charcoal);overflow-x:clip;padding-top:50px;position:relative;}


/* ── NAV CONTAINER ── */
#nav-container{position:fixed;top:0;left:0;right:0;z-index:1000;}

/* ── NAV (injected by main.js) ── */
#nav-container nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:5px 1rem 5px clamp(1rem, 3vw, 4rem);height:100%;background:rgba(246,241,233,0.96);backdrop-filter:blur(16px);border-bottom:none; flex-wrap: nowrap; }
.nav-tools { display: flex; align-items: center; gap: 0; flex-shrink: 0; margin-left: auto; position: relative; z-index: 2; }
.nav-signin-btn { 
    background: none; border: none; 
    font-family: 'Jost', sans-serif; font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.15em; 
    text-transform: uppercase; color: var(--charcoal-mid); cursor: pointer; 
    transition: all 0.3s;
    height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0 0.5rem; box-sizing: border-box; font-weight: 500;
}
.nav-signin-btn svg { flex-shrink: 0; }
.nav-signin-btn:hover { color: var(--gold); }
.nav-account-btn {
    background: none; border: none;
    font-family: 'Jost', sans-serif; font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--charcoal-mid); cursor: pointer;
    transition: all 0.3s;
    height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0 0.5rem; box-sizing: border-box; font-weight: 500;
}
.nav-account-btn svg { flex-shrink: 0; }
.nav-account-btn:hover { color: var(--gold); }

/* Logged In Navigation Styles */
.nav-logged-in .nav-links { gap: clamp(0.3rem, 1vw, 1rem); }
.nav-logged-in .nav-links a { font-size: clamp(0.5rem, 0.62vw, 0.62rem); }
.nav-logged-in .nav-tools { justify-content: flex-end; gap: 0.6rem; margin-left: auto; }
.nav-cta-sm {
    font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--white); background: #000000;
    font-weight: 500; text-decoration: none;
    transition: all 0.3s;
    height: 38px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 calc(clamp(0.8rem, 1.2vw, 1.2rem) - 4px); box-sizing: border-box;
    border: 0.5px solid rgba(184,151,90,0.3);
    margin-left: 5px;
}
.nav-cta-sm:hover { background: var(--charcoal-mid); transform: translateY(-1px); border-color: var(--charcoal-mid); }
.nav-logout-btn { 
    background: none; border: none; 
    font-family: 'Jost', sans-serif; font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.15em; 
    text-transform: uppercase; color: var(--charcoal-mid); cursor: pointer; 
    transition: all 0.3s;
    height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0 0.5rem; box-sizing: border-box; font-weight: 500;
}
.nav-logout-btn svg { flex-shrink: 0; }
.nav-logout-btn:hover { color: var(--gold); }

.user-chip { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.4rem 0.8rem; background: var(--charcoal); border-radius: 40px; transition: background 0.3s, transform 0.3s; }
.user-chip:hover { background: var(--charcoal-mid); transform: translateY(-1px); }
.uc-tier { font-size: 0.52rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); background: rgba(184,151,90,0.15); padding: 0.2rem 0.5rem; border-radius: 20px; }
.uc-name { font-size: 0.7rem; letter-spacing: 0.05em; color: var(--parchment); }
#nav-container .logo{display:flex;align-items:center;text-decoration:none; flex-shrink: 0; }
#nav-container .logo-img{height:36px;width:auto;display:block;object-fit:contain;object-position:left center;transition:transform 0.3s ease; filter: brightness(0.65) contrast(1.4) saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.05));}

#nav-container .logo:hover .logo-img{transform:scale(1.02);}

#nav-container .nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(0.4rem, 1.4vw, 1.8rem);list-style:none; flex-wrap: nowrap; white-space: nowrap; flex: 1; min-width: 0; margin: 0 1rem;}

#nav-container .nav-links a{font-size:clamp(0.5rem, 0.68vw, 0.68rem);letter-spacing:clamp(0.08em, 0.15vw, 0.2em);text-transform:uppercase;text-decoration:none;color:var(--charcoal-mid);font-weight:400;transition:color 0.2s;cursor:pointer;}
#nav-container .nav-links a:hover,#nav-container .nav-links a.active{color:var(--gold);}
#nav-container .nav-cta {
    font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; color: var(--charcoal);
    background: var(--gold); 
    font-weight: 500; cursor: pointer; border: none;
    font-family: 'Jost', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 38px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 calc(clamp(1rem, 1.5vw, 1.75rem) - 4px); box-sizing: border-box;
}
#nav-container .nav-cta:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(184, 151, 90, 0.25);
}

/* ── Hide mobile-only elements on desktop ── */
.mobile-only, .mobile-acc-wrap, .mobile-nav-actions { display: none !important; }
.nav-toggle { display: none; }
.nav-mobile-tools { display: none; }

/* ── Hide-until-open: hides nav link on desktop only; visible in mobile drawer ── */
.hide-until-open { display: none !important; }

/* ── Desktop More+ Dropdown ── */
.nav-more-wrap { position: relative; display: list-item !important; }
.nav-more-btn {
    background: none; border: 1px solid rgba(184,151,90,0.3);
    color: var(--charcoal-mid); cursor: pointer;
    font-family: 'Jost', sans-serif; font-size: 0.75rem; font-weight: 400;
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.25s; line-height: 1; padding: 0;
}
.nav-more-btn:hover { border-color: var(--gold); color: var(--gold); }
.nav-more-wrap.open .nav-more-btn {
    background: var(--gold); color: var(--white); border-color: var(--gold);
}
.nav-more-dropdown {
    display: none; position: absolute; top: calc(100% + 18px); right: -100px;
    background: var(--parchment); border: 0.5px solid rgba(184,151,90,0.2);
    box-shadow: 0 12px 40px rgba(39,32,24,0.12);
    padding: 1.75rem 2rem; z-index: 400; min-width: 620px;
    grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.nav-more-wrap.open .nav-more-dropdown { display: grid; }
.nmd-heading {
    font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 0.75rem; font-weight: 500;
    padding-bottom: 0.5rem; border-bottom: 0.5px solid rgba(184,151,90,0.15);
}
.nmd-col a {
    display: block; font-size: 0.72rem; color: var(--charcoal-mid); text-decoration: none;
    padding: 0.35rem 0; transition: color 0.15s; font-weight: 300;
    letter-spacing: 0; text-transform: none;
}
.nmd-col a:hover { color: var(--gold); }

/* ── Desktop "More +" Expandable Nav Menu ── */
.desktop-more-wrap { position: relative; display: flex; align-items: center; }
.desktop-more-btn {
    background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 0; outline: none; margin-left: 0.5rem;
}
.desktop-more-icon {
    display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--gold); color: var(--gold); font-size: 16px; font-weight: 300; transition: all 0.3s; line-height: 1; padding-bottom: 1px;
}
.desktop-more-btn:hover .desktop-more-icon {
    background: var(--gold); color: var(--charcoal);
}
.desktop-more-wrap.open .desktop-more-icon {
    background: var(--gold); color: var(--charcoal); transform: rotate(45deg);
}
.desktop-more-wrap.open::before {
    content: ''; position: fixed; top: 50px; left: 0; right: 0; bottom: 0;
    background: rgba(12, 11, 10, 0.75); backdrop-filter: blur(4px);
    z-index: 299; cursor: default;
}
  #nav-container .nav-links .desktop-more-dropdown {
      display: none; position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
      background: var(--parchment); border: 0.5px solid rgba(184,151,90,0.2);
      width: max-content; max-width: 92vw; z-index: 300; box-shadow: 0 12px 60px rgba(0,0,0,0.35);
      padding: 2rem 2.5rem; border-radius: 2px;
      max-height: calc(100vh - 80px); overflow-y: auto;
  }
  #nav-container .nav-links .desktop-more-dropdown.has-cols {
      display: none; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
  }
  #nav-container .nav-links .desktop-more-wrap.open .desktop-more-dropdown.has-cols { display: grid; }
  .dm-col { display: flex; flex-direction: column; gap: 0.65rem; }
  .dm-head {
      font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--gold);
      margin-bottom: 0.65rem; font-weight: 600; font-family: 'Jost', sans-serif;
  }
  #nav-container .nav-links .desktop-more-dropdown a {
      display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--charcoal-mid); 
      text-decoration: none; font-weight: 300; letter-spacing: 0; text-transform: none; transition: all 0.2s ease; 
      font-family: 'Jost', sans-serif; line-height: 1.4; white-space: normal; padding: 0.25rem 0; width: auto; text-align: left;
  }
  #nav-container .nav-links .desktop-more-dropdown a::before {
      content: ''; display: inline-block; width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
      opacity: 0.3; transition: all 0.2s ease; flex-shrink: 0;
  }
  #nav-container .nav-links .desktop-more-dropdown a:hover { color: var(--gold); background: transparent; transform: translateX(3px); }
  #nav-container .nav-links .desktop-more-dropdown a:hover::before { opacity: 1; background: var(--gold); transform: scale(1.5); }

/* ── Language Selector (Custom UI over Google Translate) ── */
.lang-selector { position: relative; display: flex; align-items: center; }
.lang-btn {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: clamp(0.5rem, 0.62vw, 0.62rem); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--charcoal-mid); font-weight: 500;
    background: transparent; border: none;
    padding: 0 0.5rem; cursor: pointer; transition: all 0.2s;
    font-family: 'Jost', sans-serif; height: 32px; box-sizing: border-box;
}
.lang-btn:hover { color: var(--gold); }
.lang-globe { font-size: 0.8rem; line-height: 1; display: inline-flex; align-items: center; }
.lang-caret { font-size: 0.5rem; opacity: 0.6; transition: transform 0.2s; }
.lang-selector.open .lang-caret { transform: rotate(180deg); }
.lang-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--parchment); border: 0.5px solid rgba(184,151,90,0.25);
    min-width: 180px; z-index: 300;
    box-shadow: 0 8px 24px rgba(39,32,24,0.10);
    max-height: calc(100vh - 80px); overflow-y: auto;
}
.lang-selector.open .lang-dropdown { display: block; }
.lang-option {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 1rem; cursor: pointer;
    font-size: 0.72rem; color: var(--charcoal-mid); font-weight: 300;
    border-bottom: 0.5px solid rgba(184,151,90,0.1);
    transition: background 0.15s; font-family: 'Jost', sans-serif;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: var(--gold-pale); color: var(--charcoal); }
.lang-option.active { color: var(--gold); font-weight: 400; }
.lang-option.active::after { content: '✓'; margin-left: auto; font-size: 0.65rem; }
.lang-flag { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.lang-name { flex: 1; }

/* Hide Google Translate's default UI — we drive it programmatically */
/* The banner frame is left visible so JS can measure its height and adjust offsets */
.goog-te-gadget { display: none !important; }
body { top: 0 !important; }
iframe.goog-te-menu-frame { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }
#google_translate_element { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0 !important; width: 0 !important; overflow: hidden !important; }

/* Additional Tightening for Small Desktop */
@media (max-width: 1280px) {
    #nav-container nav { height: fit-content; }
    #nav-container .nav-links a { font-weight: 500; } /* Thinner font often helps at small sizes */
}
@media (max-width: 1100px) {
    /* First shrink — slightly tighter spacing, 20% larger than before */
    #nav-container .nav-links a { font-size: 0.58rem; letter-spacing: 0.08em; }
    #nav-container .nav-links { gap: clamp(0.3rem, 1vw, 1rem); }
    .nav-cta, .nav-signin-btn, .nav-account-btn, .nav-logout-btn, .nav-cta-sm { height: 30px; padding: 0 0.7rem !important; font-size: 0.55rem !important; }
}
@media (max-width: 960px) {
    /* Tighter shrink — desktop nav still visible but compressed */
    #nav-container .nav-links a { font-size: 0.50rem; letter-spacing: 0.05em; }
    #nav-container .nav-links { gap: clamp(0.2rem, 0.8vw, 0.6rem); margin: 0 0.5rem; }
    .nav-cta, .nav-signin-btn, .nav-account-btn, .nav-logout-btn, .nav-cta-sm { height: 28px; padding: 0 0.55rem !important; font-size: 0.50rem !important; }
    .signin-text, .account-text, .logout-text { display: none; }
    .nav-signin-btn svg, .nav-account-btn svg, .nav-logout-btn svg { margin: 0; }
}

/* ── DARK NAV THEME (used on founders.html etc.) ── */
#nav-container.nav-dark nav {
    background: rgba(39,32,24,0.97);
    border-bottom-color: rgba(184,151,90,0.25);
}
#nav-container.nav-dark .nav-links a {
    color: var(--cream-dark);
}
#nav-container.nav-dark .nav-links a:hover,
#nav-container.nav-dark .nav-links a.active {
    color: var(--gold-light);
}
#nav-container.nav-dark .logo-img {
    filter: brightness(1.6) contrast(1.1) saturate(0.9) drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
#nav-container.nav-dark .nav-signin-btn, #nav-container.nav-dark .nav-account-btn, #nav-container.nav-dark .nav-logout-btn {
    color: var(--cream-dark);
}
#nav-container.nav-dark .nav-cta-sm {
    border-color: rgba(184,151,90,0.35);
}
#nav-container.nav-dark .nav-signin-btn:hover, #nav-container.nav-dark .nav-account-btn:hover, #nav-container.nav-dark .nav-logout-btn:hover {
    color: var(--gold-light);
}
#nav-container.nav-dark .lang-btn {
    color: var(--cream-dark);
}
#nav-container.nav-dark .lang-btn:hover {
    color: var(--gold-light);
}
#nav-container.nav-dark .nav-toggle span {
    background: var(--cream-dark);
}
#nav-container.nav-dark .mob-signin-btn { color: var(--cream-dark); }
#nav-container.nav-dark .mob-signin-btn:hover { color: var(--gold-light); }
#nav-container.nav-dark .mob-lang-btn { color: var(--cream-dark); }
#nav-container.nav-dark .mob-lang-btn:hover { color: var(--gold-light); }
#nav-container.nav-dark .nav-more-btn { color: var(--cream-dark); border-color: rgba(184,151,90,0.35); }
#nav-container.nav-dark .nav-more-wrap:hover .nav-more-btn { background: var(--gold); color: var(--charcoal); }
#nav-container.nav-dark .nav-links a {
    color: var(--cream-dark);
}
#nav-container.nav-dark .nav-links a:hover,
#nav-container.nav-dark .nav-links a.active {
    color: var(--gold-light);
}

@media (max-width: 768px) {
    #nav-container.nav-dark .nav-links.active {
        background: rgba(39,32,24,0.98);
    }
    #nav-container.nav-dark .nav-links a:hover,
    #nav-container.nav-dark .nav-links a.active {
        background: rgba(184,151,90,0.12);
        color: var(--gold-light);
    }
    #nav-container.nav-dark .nav-links li {
        border-bottom-color: rgba(184,151,90,0.15);
    }
    /* Dark theme: Company / Services accordion buttons */
    #nav-container.nav-dark .mobile-acc-btn {
        color: var(--cream-dark);
    }
    #nav-container.nav-dark .mobile-acc-btn:hover {
        background: rgba(184,151,90,0.12);
    }
    #nav-container.nav-dark .mobile-acc-content a {
        color: var(--cream-dark);
    }
    #nav-container.nav-dark .mobile-acc-content a:hover {
        color: var(--gold-light);
        background: rgba(184,151,90,0.12);
    }
    /* Dark theme: All 3 mobile action buttons — outlined style from membership page */
    #nav-container.nav-dark .mobile-action-btn.login,
    #nav-container.nav-dark .mobile-action-btn.reserve,
    #nav-container.nav-dark .mobile-action-btn.pickup {
        background: transparent !important;
        color: var(--gold-light) !important;
        border: 0.5px solid rgba(184,151,90,0.4) !important;
    }
    #nav-container.nav-dark .mobile-action-btn.login:hover,
    #nav-container.nav-dark .mobile-action-btn.reserve:hover,
    #nav-container.nav-dark .mobile-action-btn.pickup:hover {
        border-color: var(--gold-light) !important;
        color: var(--gold) !important;
        background: transparent !important;
    }
}


/* ── FOOTER CONTAINER ── */
#footer-container{background:var(--charcoal);}

/* ── FOOTER (injected by main.js) ── */
#footer-container footer{
    background:var(--charcoal);
    padding:2rem 4rem 0.5rem 4rem;
    border-top:0.5px solid rgba(184,151,90,0.1);
}
#footer-container .f-grid {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 3rem;
    align-items: start;
}
#footer-container .f-links-group {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}
#footer-container .f-col {
    flex: 1;
    min-width: 0; /* Allow shrinking */
}
@media (max-width: 1024px) {
    #footer-container .f-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    #footer-container footer {
        padding: 1.5rem 2rem 0.5rem 2rem;
    }
    #footer-container .f-links-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 768px) {
    #footer-container .f-links-group {
        grid-template-columns: 1fr;
    }
}



#footer-container .f-brand p{font-size:0.73rem;color:var(--warm-gray);line-height:1.7;font-weight:300;margin-bottom:0.75rem;}
#footer-container .f-brand a{font-size:0.7rem;color:var(--gold-light);text-decoration:none;}
#footer-container .f-brand a:hover{color:var(--gold);}
#footer-container .f-col h4{
    font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gold); margin-bottom:1.1rem; font-weight:400;
    display:flex; justify-content:space-between; align-items:center;
}
#footer-container .f-toggle { display: none; }

#footer-container .f-col ul{list-style:none;}
#footer-container .f-col ul li{margin-bottom:0.55rem; font-size:0.75rem; color:var(--warm-gray); font-weight:300;}
#footer-container .f-col ul li a,
#footer-container .f-col ul li span,
#footer-container .f-brand a,
#footer-container .f-brand p a,
#footer-container .f-address-link {
    font-size:0.75rem; color:var(--warm-gray); text-decoration:none !important; 
    font-weight:300; transition:color 0.2s; display:block;
    font-family: 'Jost', sans-serif !important; /* Force brand font */
}
#footer-container .f-address-link { display: inline !important; }

@media (max-width: 600px) {
    #footer-container .f-col h4 {
        font-size: 0.75rem;
    }
    #footer-container .f-col ul li a,
    #footer-container .f-col ul li span,
    #footer-container .f-brand a,
    #footer-container .f-brand p,
    #footer-container .f-brand p a,
    #footer-container .f-address-link {
        font-size: 0.9rem !important;
    }
}
#footer-container .f-brand p a { font-size: inherit; line-height: inherit; display: inline; }
#footer-container .f-col ul li a:hover,
#footer-container .f-brand a:hover,
#footer-container .f-brand p a:hover { color:var(--cream) !important; }
#footer-container .f-bot{background:var(--charcoal);padding:0.75rem 4rem;display:flex;justify-content:space-between;align-items:center;border-top:0.5px solid rgba(184,151,90,0.08);flex-wrap:wrap;gap:0.5rem;}
#footer-container .f-copy{font-size:0.75rem;color:var(--warm-gray);}
#footer-container .f-legal{display:flex;gap:1.5rem;}
#footer-container .f-legal a{font-size:0.75rem;color:var(--warm-gray);text-decoration:none;cursor:pointer;transition:color 0.2s;}
#footer-container .f-legal a:hover{color:var(--gold);}

.btn-outline-gold {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: transparent;
    border: 0.5px solid var(--gold);
    color: var(--gold);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.btn-outline-gold:hover {
    background: rgba(184, 151, 90, 0.1);
    color: var(--gold-light);
    border-color: var(--gold-light);
}

/* ── GLOBAL MODALS / POPUPS ── */
body.modal-open { overflow:hidden; }
body.modal-open #nav-container { z-index: 10 !important; }
body.modal-open #footer-container { display:none !important; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(12, 11, 10, 0.98);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: none; justify-content: center; align-items: flex-start;
    z-index: 10000; padding: 2rem 1rem;
    overflow-y: auto;
}
.modal-overlay.active { display: flex; }
.modal-overlay.hidden { display: none; }
.modal-card {
    background: var(--charcoal); border: 0.5px solid rgba(184,151,90,0.25);
    width: 100%; max-width: 500px; position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    margin: auto; /* Vertically center if short, scroll if long */
}
.modal-card .f-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 0.5px solid rgba(184, 151, 90, 0.3) !important;
    color: var(--cream) !important;
}
.modal-card .f-input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.modal-card .f-input:-webkit-autofill,
.modal-card .f-input:-webkit-autofill:hover,
.modal-card .f-input:-webkit-autofill:focus,
.modal-card .f-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #272018 inset !important;
    -webkit-text-fill-color: #F6F1E9 !important;
}
.modal-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); 
    color: var(--cream); width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer; transition: all 0.2s;
    z-index: 100; border-radius: 50%;
}
.modal-close:hover { background: rgba(184,151,90,0.2); color: var(--gold); border-color: var(--gold); }

.ms-tab {
    background: transparent; border: 0.5px solid rgba(184,151,90,0.15);
    color: var(--warm-gray); font-family: 'Jost', sans-serif;
    font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
    padding: 0.5rem 0.85rem; cursor: pointer; transition: all 0.2s;
}
.ms-tab:hover { background: rgba(184,151,90,0.05); color: var(--gold); }
.ms-tab.active { background: rgba(184,151,90,0.1); color: var(--cream); border-color: var(--gold); }

/* Form Elements */
.f-input {
    width: 100%; padding: 0.85rem 1rem;
    background: #FFFFFF;
    border: 0.5px solid rgba(184,151,90,0.4);
    color: var(--charcoal);
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.3s, background 0.3s;
}
.f-input:focus {
    outline: none;
    border-color: var(--gold);
    background: #FFFFFF;
}
.f-input:-webkit-autofill,
.f-input:-webkit-autofill:hover,
.f-input:-webkit-autofill:focus,
.f-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: var(--charcoal) !important;
}
.f-label {
    display: block; font-size: 0.65rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--warm-gray);
    margin-bottom: 0.5rem;
}

/* Premium Buttons */
.btn-gold {
    background: var(--gold);
    color: var(--charcoal);
    border: none;
    padding: 1rem 2rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    text-align: center;
}
.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(184, 151, 90, 0.2);
}

.btn-outline-gold {
    background: none;
    border: 0.5px solid var(--gold);
    color: var(--gold);
    padding: 1rem 2rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-outline-gold:hover {
    background: rgba(184, 151, 90, 0.05);
    color: var(--gold-light);
    border-color: var(--gold-light);
}

@media (max-width: 600px) {
    .modal-overlay { padding: 0; align-items: flex-start; overflow-y: auto; }
    .modal-card { margin: 0 auto; min-height: 100vh; max-height: none; border-radius: 0; border: none; }
}


/* ============================================================
   SHARED MOBILE NAV — switches to hamburger at 880px
   Desktop nav fits comfortably down to ~880px in all languages.
   ============================================================ */
@media (max-width: 880px) {
    body { padding-top: 60px; }
    #nav-container nav { padding: 0.5rem 1rem; height: 60px; display: flex; align-items: center; }
    #nav-container .logo { flex-shrink: 0; }
    #nav-container .logo-img { height: 38px; }
    .desktop-only { display: none !important; }
    /* ── Mobile Header Tools (Sign In + Language — in the header bar) ── */
    .nav-mobile-tools {
        display: flex !important; align-items: center; gap: 0;
        margin-left: auto; margin-right: 0.35rem; flex-shrink: 0;
    }
    .mob-signin-btn {
        background: none; border: none; cursor: pointer; color: var(--charcoal-mid);
        padding: 6px; display: flex; align-items: center; justify-content: center;
        transition: color 0.2s;
    }
    .mob-signin-btn:hover { color: var(--gold); }
    .mob-lang-selector { position: relative; }
    .mob-lang-btn {
        display: flex; align-items: center; gap: 0.25rem;
        background: none; border: none; cursor: pointer;
        font-family: 'Jost', sans-serif; font-size: 0.55rem; font-weight: 600;
        letter-spacing: 0.12em; color: var(--charcoal-mid);
        padding: 6px; transition: color 0.2s;
    }
    .mob-lang-btn:hover { color: var(--gold); }
    .mob-lang-flyout {
        display: none; position: absolute; top: calc(100% + 6px); right: 0;
        background: var(--parchment); border: 0.5px solid rgba(184,151,90,0.25);
        min-width: 180px; z-index: 1100;
        box-shadow: 0 8px 24px rgba(39,32,24,0.12);
        max-height: calc(100vh - 80px); overflow-y: auto;
    }
    .mob-lang-selector.open .mob-lang-flyout { display: block; }
    .mob-lang-flyout .lang-option {
        display: flex; align-items: center; gap: 0.65rem;
        padding: 0.65rem 1rem; cursor: pointer;
        font-size: 0.72rem; color: var(--charcoal-mid); font-weight: 300;
        border-bottom: 0.5px solid rgba(184,151,90,0.1);
        transition: background 0.15s; font-family: 'Jost', sans-serif;
    }
    .mob-lang-flyout .lang-option:last-child { border-bottom: none; }
    .mob-lang-flyout .lang-option:hover { background: var(--gold-pale); color: var(--charcoal); }
    .mob-lang-flyout .lang-option.active { color: var(--gold); font-weight: 400; }
    .mob-lang-flyout .lang-option.active::after { content: '✓'; margin-left: auto; font-size: 0.65rem; }
    #nav-container .nav-toggle {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: none; border: none; cursor: pointer; padding: 4px 6px 2px; gap: 4px;
        z-index: 1001; margin-left: 5px;
    }
    #nav-container .nav-toggle span:not(.toggle-label) {
        display: block; width: 22px; height: 1.5px;
        background: var(--charcoal); transition: transform 0.3s, opacity 0.3s;
    }
    #nav-container .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
    #nav-container .nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    #nav-container .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }
    #nav-container .nav-toggle .toggle-label {
        font-family: 'Jost', sans-serif;
        font-size: clamp(0.45rem, 0.55vw, 0.55rem);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--charcoal-mid);
        font-weight: 500;
        margin-top: 2px;
        line-height: 1;
    }
    #nav-container .nav-links { display: none; }
    .desktop-more-wrap { display: none !important; }
    #nav-container .nav-tools .nav-cta-sm { display: none !important; }
    #nav-container nav.menu-active {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgb(246, 241, 233) !important;
    }
    #nav-container .nav-links.active {
        display: flex; flex-direction: column; position: fixed;
        justify-content: flex-start; align-items: stretch;
        top: 60px; left: 0; right: 0; height: calc(100dvh - 60px); width: 100%; max-width: none; margin: 0;
        background: rgba(246,241,233,0.99);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        overflow-y: scroll; -webkit-overflow-scrolling: touch;
        padding: 0 0 5rem 0; gap: 0; list-style: none;
        border-bottom: 0.5px solid rgba(184,151,90,0.2);
        box-shadow: 0 12px 40px rgba(39,32,24,0.15); z-index: 999;
    }
    #nav-container .nav-links li { border-bottom: 0.5px solid rgba(184,151,90,0.1); }
    #nav-container .nav-links li:last-child { border-bottom: none; }
    #nav-container .nav-links li.hide-on-mobile { display: none !important; }
    #nav-container .nav-links li.hide-until-open { display: list-item !important; } /* Contact visible in mobile drawer */
    #nav-container .nav-links li.mobile-only,
    #nav-container .nav-links li.mobile-acc-wrap { display: list-item !important; border-bottom: 0.5px solid rgba(184,151,90,0.1); padding:0; }
    #nav-container .nav-links li.mobile-nav-actions { display: block !important; }
    #nav-container .nav-links a {
        display: block;
        text-align: center;
        padding: clamp(0.6rem, 2.5vh, 1rem) 1.5rem;
        font-size: clamp(0.65rem, 2vw, 0.82rem);
        letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--charcoal-mid); text-decoration: none;
        font-weight: 400; transition: background 0.15s, color 0.15s; width: 100%;
    }
    #nav-container .nav-links a:hover,
    #nav-container .nav-links a.active { background: var(--gold-pale); color: var(--gold); }
    #nav-container .nav-links .mobile-nav-cta { padding: 1rem 1.5rem; border-bottom: none; }
    #nav-container .nav-links .mobile-nav-cta a {
        display: block; text-align: center; background: var(--charcoal);
        color: var(--parchment) !important; padding: 0.75rem 1.25rem !important;
        font-size: 0.65rem !important; letter-spacing: 0.18em; transition: background 0.2s;
    }
    #nav-container .nav-links .mobile-nav-cta a:hover {
        background: var(--gold) !important; color: var(--charcoal) !important;
    }
    #nav-container .nav-links .dashboard-mobile-link {
        padding-left: 2.5rem; color: var(--charcoal-mid); font-size: 0.7rem;
        border-bottom: 0.5px solid rgba(184,151,90,0.05);
    }
    #nav-container .nav-tools { gap: 0; margin-right: 0; }
    .nav-cta-sm { padding: 0.4rem 0.8rem; font-size: 0.5rem; margin-right: 0; }
    .nav-account-btn, .nav-logout-btn { font-size: 0.5rem; padding: 0.4rem 0; }
    #nav-container .mobile-acc-btn {
        display: flex; justify-content: center; align-items: center;
        width: 100%; background: none; border: none;
        padding: clamp(0.6rem, 2.5vh, 1rem) 0;
        font-size: clamp(0.65rem, 2vw, 0.82rem);
        letter-spacing: 0.18em; text-transform: uppercase;
        color: var(--charcoal-mid); font-family: 'Jost', sans-serif;
        font-weight: 400; cursor: pointer; text-align: center; transition: background 0.15s;
        gap: 0.4rem;
    }
    #nav-container .mobile-acc-btn:hover { background: var(--gold-pale); }
    #nav-container .mobile-acc-content {
        display: none; background: none;
        border-top: 0.5px solid rgba(184,151,90,0.15);
    }
    #nav-container .mobile-acc-content.open { display: block; }
    #nav-container .mobile-acc-content a {
        padding: clamp(0.6rem, 2.5vh, 1rem) 0;
        font-size: clamp(0.65rem, 2vw, 0.82rem); color: var(--charcoal-mid);
        letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 0.5px solid rgba(184,151,90,0.07);
        text-align: center;
    }
    #nav-container .mobile-acc-content a:last-child { border-bottom: none; padding-bottom: clamp(0.6rem, 2.5vh, 1rem); }
    #nav-container .mobile-acc-content a:hover { color: var(--charcoal); background: var(--gold-pale); }

    /* Bottom Action Buttons in Mobile Menu */
    #nav-container .mobile-nav-actions {
        padding: 1.5rem 1.5rem 2.5rem 1.5rem;
        display: block !important;
        text-align: center;
        border-top: 0.5px solid rgba(184,151,90,0.1);
    }
    .mobile-action-btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.75rem;
        height: auto !important;
        padding: clamp(0.6rem, 2.5vh, 1rem) 5px !important;
        text-align: center;
        text-transform: uppercase;
        font-size: clamp(0.65rem, 2vw, 0.82rem) !important;
        font-weight: 400 !important;
        letter-spacing: 0.18em !important;
        font-family: 'Jost', sans-serif;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        box-sizing: border-box;
    }
    .mobile-action-btn.login { 
        background: transparent !important; border: 0.5px solid rgba(0,0,0,0.15) !important; 
        color: var(--charcoal) !important; font-weight: 500 !important;
    }
    .mobile-action-btn.reserve { 
        background: var(--gold) !important; color: var(--charcoal) !important; 
        border: none !important; font-weight: 500 !important;
    }
    .mobile-action-btn.pickup { 
        background: #000000 !important; color: #FFFFFF !important; 
        border: 0.5px solid rgba(0,0,0,0.15) !important; font-weight: 500 !important;
    }
    .mobile-action-btn:active { transform: scale(0.98); opacity: 0.9; }

    /* Mobile Language Selector Dropdown */
    .mobile-lang-selector { position: relative; margin-bottom: 0.75rem; }
    .mobile-lang-selector .mobile-action-btn { margin-bottom: 0 !important; }
    .mobile-lang-dropdown {
        display: none;
        background: var(--parchment);
        border: 0.5px solid rgba(184,151,90,0.25);
        border-top: none;
        box-shadow: 0 4px 12px rgba(39,32,24,0.08);
        padding: 0.5rem 0;
        max-height: 50vh; overflow-y: auto;
    }
    .mobile-lang-selector.open .mobile-lang-dropdown { display: block; }
    .mobile-lang-selector.open .lang-caret { transform: rotate(180deg); }
    .mobile-lang-selector .lang-option {
        padding: clamp(0.6rem, 2.5vh, 1rem) 1.5rem;
        justify-content: center;
        border-bottom: 0.5px solid rgba(184,151,90,0.07);
    }
    .mobile-lang-selector .lang-option:last-child { border-bottom: none; }
}

/* Very small phones */
@media (max-width: 380px) {
    #nav-container nav { padding: 0.5rem 1rem; height: 56px; }
    #nav-container .logo-img { height: 34px; }
    body { padding-top: 56px; }
    #nav-container .nav-links.active { top: 56px; height: calc(100dvh - 56px); }
    #nav-container .nav-links a { padding: 0.55rem 1.25rem; font-size: 0.62rem; }
}

/* Short landscape phones — items compress, menu stays scrollable */
@media (max-height: 500px) and (max-width: 768px) {
    #nav-container .nav-links.active { top: 58px; height: calc(100dvh - 58px); }
    #nav-container .nav-links a { padding: 0.45rem 1.25rem; font-size: 0.62rem; }
}

/* ============================================================
   FOOTER LOGO — responsive sizing
   ============================================================ */
#footer-container .f-logo {
    height: 36px;
    width: auto;
    display: block;
    margin-bottom: 1.5rem;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0.65) contrast(1.4) saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}

@media (max-width: 768px) {
    #footer-container footer {
        grid-template-columns: 1fr !important;
        padding: 2.5rem 1.25rem !important;
    }
    #footer-container .f-col h4 { font-size: 0.75rem; margin-bottom: 0.5rem; }
    #footer-container .f-col ul li a { font-size: 0.75rem; word-break: break-word; }
    
    #footer-container .f-bot {
        padding: 1.5rem 1.25rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        text-align: left;
    }
    #footer-container .f-legal { 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #footer-container .f-logo { height: 36px; }

    /* Footer Accordion Mobile */
    #footer-container .f-links-group {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
    }
    #footer-container .f-col {
        border-bottom: 0.5px solid rgba(184,151,90,0.1);
        padding-bottom: 0;
    }
    #footer-container .f-col h4 {
        padding: 1.25rem 0;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 0.875rem !important;
    }
    #footer-container .f-toggle {
        display: block;
        font-size: 1.1rem;
        color: var(--gold);
        transition: transform 0.3s;
    }
    #footer-container .f-col.active .f-toggle {
        transform: rotate(0);
    }
    #footer-container .f-col ul {
        display: none !important;
        padding-bottom: 1.25rem;
    }
    #footer-container .f-col ul li,
    #footer-container .f-col ul li a {
        font-size: 0.875rem !important;
    }
    #footer-container .f-col.active ul {
        display: block !important;
        animation: fFadeIn 0.3s ease;
    }
    @keyframes fFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 380px) {
    #footer-container .f-logo { height: 36px; }
}

/* ============================================================
   HAMBURGER — injected footer section labels & sub-links
   ============================================================ */
#nav-container .mobile-footer-links {
    border-bottom: none !important;
    padding: 0.25rem 0 0 !important;
}
#nav-container .mob-sect-label {
    display: block;
    font-size: 0.48rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 0.7rem 1.5rem 0.35rem;
    border-top: 0.5px solid rgba(184,151,90,0.15);
    background: rgba(184,151,90,0.04);
}
#nav-container .mob-sub-link { border-bottom: 0.5px solid rgba(184,151,90,0.07) !important; }
#nav-container .mob-sub-link a {
    padding: 0.5rem 1.5rem 0.5rem 2rem !important;
    font-size: 0.62rem !important;
    color: var(--warm-gray) !important;
    letter-spacing: 0.12em !important;
}
#nav-container .mob-sub-link a:hover { color: var(--gold) !important; background: var(--gold-pale) !important; }
#nav-container .mob-cta-row {
    padding: 1rem 1.5rem;
    border-top: 0.5px solid rgba(184,151,90,0.2) !important;
    border-bottom: none !important;
}
#nav-container .mob-cta-row a {
    display: block !important;
    text-align: center !important;
    background: var(--charcoal) !important;
    color: var(--parchment) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    transition: background 0.2s !important;
}
#nav-container .mob-cta-row a:hover {
    background: var(--gold) !important;
    color: var(--charcoal) !important;
}

/* ============================================================
   SERVICE NAV BAR — 4-button flex row, no horizontal scroll
   ============================================================ */
.service-nav-bar {
    display: flex;
    width: 100%;
    overflow: hidden;
}
.service-nav-bar .snb-item {
    flex: 1 1 25%;
    min-width: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .service-nav-bar {
        position: sticky;
        top: 64px;
    }
    .snb-item {
        font-size: clamp(0.45rem, 1.8vw, 0.6rem);
        padding: 0.7rem 0.25rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        line-height: 1.3;
    }
}

@media (max-width: 380px) {
    .snb-item {
        font-size: 0.42rem;
        padding: 0.6rem 0.15rem;
        letter-spacing: 0.05em;
    }
}




/* ── Password Fields ── */
.pass-field-wrap { position: relative; width: 100%; }
.pass-field-wrap .f-input { padding-right: 2.5rem; }
.pass-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--warm-gray);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.pass-toggle:hover { opacity: 1; }
.pass-toggle svg { width: 16px; height: 16px; fill: currentColor; }

.modal-foot-link {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--warm-gray);
}
.modal-foot-link a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 500;
}
.modal-foot-link a:hover {
    text-decoration: underline;
}

/* ── FOOTER CONTAINER ── */
#footer-container { background: var(--charcoal); }

#footer-container footer {
    background: var(--charcoal);
    padding: 4rem 4rem 2rem 4rem;
    border-top: 0.5px solid rgba(184,151,90,0.1);
}

#footer-container .f-grid {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 4rem;
    align-items: start;
}

#footer-container .f-brand p {
    font-size: 0.75rem;
    color: var(--warm-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 320px;
}

#footer-container .f-contact-info p {
    font-size: 0.75rem;
    color: var(--warm-gray);
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

#footer-container .f-contact-info a {
    color: var(--gold-light);
    text-decoration: none;
    transition: color 0.2s;
}

#footer-container .f-contact-info a:hover { color: var(--gold); }

#footer-container .f-logo {
    height: 36px;
    width: auto;
    margin-bottom: 1.5rem;
    filter: brightness(0.65) contrast(1.4) saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}

#footer-container .f-links-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

#footer-container .f-col h4 {
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

#footer-container .f-col ul { list-style: none; }

#footer-container .f-col ul li { margin-bottom: 0.65rem; font-size: 0.75rem; color: var(--warm-gray); font-weight: 300; }

#footer-container .f-col ul li a {
    font-size: 0.75rem;
    color: var(--warm-gray);
    text-decoration: none;
    transition: color 0.2s;
}

#footer-container .f-col ul li a:hover { color: var(--cream); }

#footer-container .f-bot {
    background: var(--charcoal);
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.5px solid rgba(184,151,90,0.08);
}

#footer-container .f-copy { font-size: 0.65rem; color: var(--warm-gray); }

#footer-container .f-legal { display: flex; gap: 2rem; }

#footer-container .f-legal a {
    font-size: 0.65rem;
    color: var(--warm-gray);
    text-decoration: none;
    transition: color 0.2s;
}

#footer-container .f-legal a:hover { color: var(--gold); }

/* Simulation Banner */
.preview-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gold);
    color: var(--charcoal);
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

.preview-banner a {
    color: var(--charcoal);
    text-decoration: underline;
    font-weight: 700;
}

@media (max-width: 1024px) {
    #footer-container .f-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    #footer-container .f-links-group { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

@media (max-width: 768px) {
    #footer-container footer { padding: 3rem 1.5rem; }
    #footer-container .f-bot { padding: 1.5rem; flex-direction: column; gap: 1rem; text-align: center; }
    #footer-container .f-legal { gap: 1rem; justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    #footer-container .f-links-group { grid-template-columns: 1fr; gap: 2rem; }
}

/* -- CANCELLATION TABLE -- */
.cancel-table { width:100%; border-collapse:collapse; margin:1.25rem 0; }
.cancel-table th { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--charcoal); font-weight:500; text-align:left; padding:0.65rem 0.85rem; background:var(--cream); border:0.5px solid var(--cream-dark); }
.cancel-table td { font-size:0.78rem; color:var(--warm-gray); line-height:1.6; padding:0.75rem 0.85rem; border:0.5px solid var(--cream-dark); vertical-align:top; font-weight:300; }
.cancel-table tr:nth-child(even) td { background:var(--white); }
.cancel-table td strong { color:var(--charcoal); font-weight:500; }
.tag-full { font-size:0.54rem; letter-spacing:0.12em; text-transform:uppercase; background:var(--gold-pale); color:var(--gold); padding:0.18rem 0.55rem; border:0.5px solid var(--gold-light); white-space:nowrap; border-radius:3px; }
.tag-partial { font-size:0.54rem; letter-spacing:0.12em; text-transform:uppercase; background:#EDF5E8; color:#3B6D11; padding:0.18rem 0.55rem; border:0.5px solid #97C459; white-space:nowrap; border-radius:3px; }
.tag-none { font-size:0.54rem; letter-spacing:0.12em; text-transform:uppercase; background:#FCF0EF; color:#A32D2D; padding:0.18rem 0.55rem; border:0.5px solid #F09595; white-space:nowrap; border-radius:3px; }

@media (max-width: 600px) {
    .cancel-table thead { display: none; }
    .cancel-table, .cancel-table tbody, .cancel-table tr, .cancel-table td { display: block; width: 100%; }
    .cancel-table tr { margin-bottom: 1rem; border: 1px solid var(--cream-dark); }
    .cancel-table td { text-align: left; padding: 0.75rem 0.85rem; border: none; border-bottom: 0.5px solid rgba(184,151,90,0.1); display: flex; flex-direction: column; gap: 0.5rem; }
    .cancel-table td::before { content: attr(data-label); width: 100%; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.55rem; color: var(--gold); text-align: left; display: block; position: static; }
    .cancel-table td:last-child { border-bottom: 0; }
}


/* Hide Google Translate Banner completely and neutralize all spacing side-effects */
.goog-te-banner-frame, iframe.goog-te-banner-frame, iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd, .skiptranslate > iframe.skiptranslate { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; }
html { top: 0 !important; margin-top: 0 !important; }
body { top: 0px !important; margin-top: 0 !important; position: relative !important; }
/* Only hide the banner-level skiptranslate div, not the one containing .goog-te-combo */
body > .skiptranslate { display: none !important; height: 0 !important; overflow: hidden !important; }
.skiptranslate iframe { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; }
/* Prevent Google Translate from repositioning body */
html > body { position: relative !important; top: 0px !important; }


/* Global fix for horizontal scroll */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }