/* ============================================================
   Wavion Lanka — template-header.css v10.0 (Wavion Rebuild)
   Prefix: tt- | All colors/fonts/spacing/radius/shadow via main.css
   variables only — nothing hardcoded here.

   Design signature: a jewellery-box header on Onyx, with a shimmering
   24K-gold lining, glass (backdrop-blur) dropdown panels, and a
   light-sweep "shine" pass on primary CTAs and featured cards. Motion
   is deliberate and restrained — three moments only: the lining
   shimmer, the mega-menu/drawer glass-in, and the CTA shine-sweep on
   hover — rather than scattered effects everywhere.

   Structure:
     1. Announcement marquee strip (trust badges, no CTA)
     2. Utility bar (single SL office, email, hours, socials, language)
     3. Main navigation (mega menu, dropdown, CTA button)
     4. Mobile drawer
     5. WhatsApp floating widget
   ============================================================ */

:root{
    /* v5.0: was a hand-picked hex palette disconnected from main.css — now
       derived from the Sapphire & Gold tokens so header text/panels stay
       in sync with the rest of the site. (--tt-onlight-* is reserved for
       any future light-surface panel added to the header.) */
    --tt-onlight-text:       var(--color-navy, #071A3D);
    --tt-onlight-text-soft:  var(--color-navy-light, #1D4884);
    --tt-onlight-muted:      var(--text-muted, #7A7468);
    --tt-onlight-border:     var(--border-primary, #E2D5C0);
    --tt-onlight-surface:    var(--bg-secondary, #EFE4D4);

    --tt-header-h:          100px;
    --tt-header-h-scrolled: 72px;
    --tt-ann-h:             42px;
    --tt-util-h:            48px;

    /* Glass panel tokens — used by mega menu, dropdown, language panel,
       mobile drawer and the WhatsApp popup, so every floating surface
       in the header reads as one consistent "glass on Deep Navy" material. */
    --tt-glass-bg:          rgba(var(--color-navy-rgb), 0.82);
    --tt-glass-border:      rgba(var(--color-gold-rgb), 0.22);
    --tt-glass-blur:        blur(22px) saturate(160%);
    --tt-glass-shadow:      0 24px 60px rgba(var(--color-navy-rgb), 0.45), 0 2px 0 rgba(var(--color-gold-rgb), 0.15) inset;
}

*{box-sizing:border-box;}

/* z-index map: ann 500 | util 490 | header 480 | mega/dd/lang 470 | drawer 600 | overlay 590 | wa 1200 */

/* ============================================================ 0. SHARED MOTION — the header's signature effects */
@keyframes tt-lining-shimmer{0%{background-position:220% 0;}100%{background-position:-220% 0;}}
@keyframes tt-marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@keyframes tt-glow-pulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
@keyframes tt-glass-in{from{opacity:0;transform:translateY(-10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes tt-shine-sweep{0%{transform:translateX(-140%) skewX(-18deg);}100%{transform:translateX(240%) skewX(-18deg);}}
@keyframes tt-wa-pulse-ring{0%{transform:scale(1);opacity:.55;}100%{transform:scale(2.15);opacity:0;}}

.tt-gold-lining{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-gold) 15%,var(--color-gold) 30%,var(--color-gold-light) 50%,var(--color-gold) 70%,var(--color-gold) 85%,transparent 100%);background-size:220% 100%;box-shadow:0 0 10px rgba(var(--color-gold-rgb),.55);animation:tt-lining-shimmer 6s linear infinite;pointer-events:none;}

/* Shine-sweep utility — a light diagonal band that sweeps across an
   element on hover. Applied to the booking CTA and featured cards. */
.tt-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;}
.tt-shine::before{content:'';position:absolute;top:-40%;left:0;width:32%;height:180%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-140%) skewX(-18deg);transition:none;}
a:hover>.tt-shine::before,button:hover>.tt-shine::before{animation:tt-shine-sweep 900ms ease;}

/* ============================================================ 1. ANNOUNCEMENT STRIP — trust marquee only, no CTA */
.tt-ann{position:relative;display:flex;align-items:center;height:var(--tt-ann-h);background:var(--color-navy-deep);border-bottom:1px solid var(--color-white-05);overflow:hidden;transition:height .35s ease,opacity .3s ease;}
.tt-ann::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-gold) 15%,var(--color-gold) 30%,var(--color-gold-light) 50%,var(--color-gold) 70%,var(--color-gold) 85%,transparent 100%);background-size:220% 100%;box-shadow:0 0 8px rgba(var(--color-gold-rgb),.5);animation:tt-lining-shimmer 6s linear infinite;pointer-events:none;}
.tt-ann.ann-hidden{height:0;opacity:0;border-bottom:none;pointer-events:none;}
.tt-ann.ann-hidden::before{display:none;}
.tt-ann-track{flex:1;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.tt-ann-set{display:inline-flex;align-items:center;animation:tt-marquee 32s linear infinite;}
.tt-ann-track:hover .tt-ann-set{animation-play-state:paused;}
.tt-ann-item{display:inline-flex;align-items:center;gap:9px;padding:0 24px;font-size:12.5px;font-weight:var(--font-weight-semibold);letter-spacing:.03em;color:var(--color-white-80);white-space:nowrap;border-right:1px solid var(--border-gold);}
.tt-ann-item i{color:var(--color-gold-light);font-size:12px;}
.tt-ann-item--gold{color:var(--color-gold-light);}
.tt-ann-close{flex-shrink:0;width:24px;height:24px;margin-right:16px;display:flex;align-items:center;justify-content:center;background:var(--color-white-10);border:none;border-radius:50%;color:var(--color-white-70);cursor:pointer;font-size:10px;transition:background .2s ease,color .2s ease;}
.tt-ann-close:hover{background:var(--color-white-20);color:var(--color-white);}

/* ============================================================ 2. UTILITY BAR */
.tt-util{position:relative;height:var(--tt-util-h);background:var(--color-navy-deep);transition:height .3s ease,opacity .3s ease,transform .3s ease;overflow:visible;}
.tt-util.util-hidden{height:0;opacity:0;transform:translateY(-8px);overflow:hidden;}
.tt-util-inner{max-width:var(--container-wide);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px;}
.tt-util-left,.tt-util-right{display:flex;align-items:center;gap:18px;}

.tt-util-office{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--font-weight-medium);color:var(--color-white-80);padding:5px 11px 5px 8px;border-radius:var(--radius-full);background:var(--color-white-05);border:1px solid var(--border-light);transition:all .2s ease;white-space:nowrap;}
.tt-util-office:hover{border-color:var(--border-gold);background:var(--color-gold-bg);color:var(--color-gold-light);}
.tt-util-office-flag{font-size:14px;line-height:1;}

.tt-util-link{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-white-70);white-space:nowrap;transition:color .2s ease;}
.tt-util-link:hover{color:var(--color-gold-light);}
.tt-util-link i{font-size:11px;color:var(--color-gold);}
.tt-util-hours{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-white-60);}
.tt-util-hours i{color:var(--color-gold);font-size:11px;}

.tt-util-socials{display:flex;align-items:center;gap:9px;}
.tt-util-social{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-white-08);border:1px solid var(--border-light);color:var(--color-white-70);font-size:12.5px;transition:all .2s ease;}
.tt-util-social:hover{background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold));color:var(--color-navy-deep);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-gold);}

/* ── Language selector — glass dropdown, 23 languages, scrollable ── */
.tt-lang{position:relative;}
.tt-lang-btn{display:flex;align-items:center;gap:7px;background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-full);padding:6px 12px;color:var(--color-white-85,rgba(255,255,255,.85));font-size:12px;font-weight:var(--font-weight-medium);cursor:pointer;transition:all .2s ease;}
.tt-lang-btn:hover,.tt-lang.lang-open .tt-lang-btn{border-color:var(--border-gold);background:var(--color-gold-bg);color:var(--color-gold-light);}
.tt-lang-btn i:first-child{color:var(--color-gold);font-size:11px;}
.tt-lang-arrow{font-size:8px;transition:transform .25s ease;}
.tt-lang.lang-open .tt-lang-arrow{transform:rotate(180deg);}
.tt-lang-panel{position:absolute;top:calc(100% + 12px);right:0;width:240px;max-height:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--tt-glass-bg);backdrop-filter:var(--tt-glass-blur);-webkit-backdrop-filter:var(--tt-glass-blur);border:1px solid var(--tt-glass-border);border-radius:var(--radius-xl);box-shadow:var(--tt-glass-shadow);transition:max-height .3s ease,opacity .25s ease,visibility .25s;z-index:1000;}
.tt-lang.lang-open .tt-lang-panel{max-height:360px;opacity:1;visibility:visible;animation:tt-glass-in .22s ease;}
.tt-lang-options{max-height:360px;overflow-y:auto;padding:8px;}
.tt-lang-options::-webkit-scrollbar{width:5px;}
.tt-lang-options::-webkit-scrollbar-thumb{background:var(--color-gold-dark);border-radius:var(--radius-full);}
.tt-lang-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md);font-size:12.5px;color:var(--color-white-80);cursor:pointer;transition:background .15s ease,color .15s ease;}
.tt-lang-option:hover,.tt-lang-option.lang-active{background:var(--color-gold-bg);color:var(--color-gold-light);}
.tt-lang-flag{font-size:15px;}

/* ============================================================ 3. HEADER SHELL — fixed wrapper for ann + util + header
   On pages with a hero (#heroSection present), template-header.js adds
   .hero-mode to this shell: ONLY the announcement marquee (pure
   marketing ticker, not functional) hides. The utility bar — email,
   phone, hours, socials, and critically the language switcher — stays
   visible at all times, just transparent, so translation is always
   reachable the instant someone lands on the page, never only after
   scrolling. The main nav also goes transparent, floating over the
   hero image/video with a soft top-down scrim for text legibility.
   Once scrolled past the hero — or immediately on any page with no
   hero — the shell carries .scrolled-solid and reverts to the full
   solid header (announcement bar included). */
.tt-header-shell{position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed);transition:background .4s ease;}

/* One continuous scrim across the whole shell (utility bar + nav bar
   together) instead of two separate treatments, so there is no visible
   seam between them while floating over the hero. The scrim also
   extends well past the shell's own bottom edge and fades all the way
   to fully transparent, rather than stopping abruptly at the header's
   height — that hard cutoff was exactly what read as a visible line
   between the header and the hero image below it. */
.tt-header-shell.hero-mode{background:transparent;}
.tt-header-shell.hero-mode::before{content:'';position:absolute;top:0;left:0;right:0;bottom:-160px;background:linear-gradient(180deg,rgba(var(--color-navy-rgb),.62) 0%,rgba(var(--color-navy-rgb),.42) 38%,rgba(var(--color-navy-rgb),.16) 68%,transparent 100%);pointer-events:none;z-index:-1;}
.tt-header-shell.hero-mode .tt-ann{display:none;}
.tt-header-shell.hero-mode .tt-util{background:transparent;border-bottom:none;}
.tt-header-shell.hero-mode .tt-header{background:transparent;box-shadow:none;}
.tt-header-shell.hero-mode .tt-book-btn{box-shadow:0 4px 20px rgba(var(--color-navy-rgb),.4);}

.tt-header-shell.hero-mode.scrolled-solid{background:var(--color-navy-deep);}
.tt-header-shell.hero-mode.scrolled-solid::before{display:none;}
.tt-header-shell.hero-mode.scrolled-solid .tt-ann{display:flex;}
.tt-header-shell.hero-mode.scrolled-solid .tt-util{background:var(--color-navy-deep);border-bottom:1px solid var(--color-white-05);}
.tt-header-shell.hero-mode.scrolled-solid .tt-header{background:var(--color-navy-deep);box-shadow:0 10px 30px rgba(0,0,0,.35);}
.tt-header-shell.hero-mode:not(.scrolled-solid){box-shadow:none;}

/* ============================================================ 4. MAIN NAVIGATION */
.tt-header{position:relative;z-index:0;left:0;right:0;height:var(--tt-header-h);background:var(--color-navy-deep);transition:height .3s ease,box-shadow .3s ease,background .4s ease;box-shadow:0 1px 0 var(--color-white-08);}
.tt-header.scrolled{height:var(--tt-header-h-scrolled);box-shadow:0 10px 30px rgba(0,0,0,.35);}
.tt-header-inner{max-width:var(--container-wide);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:24px;}

/* Brand — logo with a slow-pulsing gold glow ring behind it */
.tt-brand{display:flex;align-items:center;gap:13px;flex-shrink:0;}
.tt-brand-logo-wrap{position:relative;flex-shrink:0;width:52px;height:52px;}
.tt-brand-logo-ring{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(var(--color-gold-rgb),.45),transparent 70%);animation:tt-glow-pulse 3.2s ease-in-out infinite;pointer-events:none;}
.tt-brand-logo{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 4px 18px rgba(var(--color-gold-rgb),.35);transition:height .3s ease;}
.tt-brand-text{display:flex;flex-direction:column;}
.tt-brand-name{font-family:var(--font-display);font-size:19px;font-weight:var(--font-weight-semibold);color:var(--color-white);line-height:1.15;}
.tt-brand-tag{font-family:var(--font-elegant);font-style:italic;font-size:11.5px;color:var(--color-gold-light);margin-top:2px;}
.tt-header.scrolled .tt-brand-tag{display:none;}

/* Nav list */
.tt-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.tt-nav-item{position:relative;}
.tt-nav-link{display:flex;align-items:center;gap:6px;padding:10px 15px;font-family:var(--font-primary);font-size:13.5px;font-weight:var(--font-weight-medium);color:var(--color-white-85,rgba(255,255,255,.85));border:none;background:none;cursor:pointer;white-space:nowrap;position:relative;transition:color .2s ease;}
.tt-nav-link::after{content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;background:linear-gradient(90deg,var(--color-gold-light),var(--color-gold));transform:scaleX(0);transform-origin:left;transition:transform .3s ease;border-radius:var(--radius-full);}
.tt-nav-link:hover,.tt-nav-link.active{color:var(--color-white);}
.tt-nav-link:hover::after,.tt-nav-link.active::after{transform:scaleX(1);}
.tt-nav-arrow{font-size:9px;transition:transform .25s ease;color:var(--color-gold);}
.tt-mega-parent:hover .tt-nav-arrow,.tt-dd-parent:hover .tt-nav-arrow,.tt-mega-parent.mega-open .tt-nav-arrow,.tt-dd-parent.dd-open .tt-nav-arrow{transform:rotate(180deg);}

/* ── Simple dropdown (Company) — glass panel ── */
.tt-dd{position:absolute;top:calc(100% + 14px);left:0;min-width:280px;max-height:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--tt-glass-bg);backdrop-filter:var(--tt-glass-blur);-webkit-backdrop-filter:var(--tt-glass-blur);border:1px solid var(--tt-glass-border);border-radius:var(--radius-xl);box-shadow:var(--tt-glass-shadow);transition:max-height .32s ease,opacity .25s ease,visibility .25s;z-index:1000;padding:10px;}
.tt-dd-parent.dd-open .tt-dd{max-height:520px;opacity:1;visibility:visible;animation:tt-glass-in .22s ease;}
.tt-dd-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);font-size:13px;color:var(--color-white-80);transition:background .15s ease,color .15s ease,padding-left .15s ease;}
.tt-dd-link i{width:16px;text-align:center;color:var(--color-gold);font-size:12px;}
.tt-dd-link:hover{background:var(--color-gold-bg);color:var(--color-gold-light);padding-left:16px;}

/* ── Mega menu (Our Packages) — two-column glass panel + featured rail ── */
.tt-mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:min(920px,88vw);max-height:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--tt-glass-bg);backdrop-filter:var(--tt-glass-blur);-webkit-backdrop-filter:var(--tt-glass-blur);border:1px solid var(--tt-glass-border);border-radius:var(--radius-2xl);box-shadow:var(--tt-glass-shadow);transition:max-height .32s ease,opacity .25s ease,visibility .25s;z-index:1000;}
.tt-mega-parent.mega-open .tt-mega{max-height:720px;opacity:1;visibility:visible;animation:tt-glass-in .22s ease;}
.tt-mega-inner{display:flex;gap:0;}
.tt-mega-main-col{flex:1;min-width:0;padding:26px 8px 20px 28px;}
.tt-mega-head{margin-bottom:16px;}
.tt-mega-eyebrow{display:block;font-family:var(--font-accent);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gold-light);margin-bottom:6px;}
.tt-mega-title{font-family:var(--font-display);font-size:19px;color:var(--color-white);margin:0 0 6px;}
.tt-mega-sub{font-size:12px;line-height:1.5;color:var(--color-white-55,rgba(255,255,255,.55));margin:0;max-width:420px;}
.tt-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.tt-mega-section-label{display:flex;align-items:center;gap:7px;font-family:var(--font-accent);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold);margin-bottom:10px;}

/* Grouped category → package listing. Each category is a small non-link
   heading, followed by the actual package titles under it — every
   package appears exactly once, under its primary category, so the
   full set is browsable without ever stating a count. */
.tt-mega-col--scroll .tt-mega-catlist{max-height:400px;overflow-y:auto;padding-right:6px;}
.tt-mega-col--scroll .tt-mega-catlist::-webkit-scrollbar{width:5px;}
.tt-mega-col--scroll .tt-mega-catlist::-webkit-scrollbar-thumb{background:var(--color-gold-dark);border-radius:var(--radius-full);}
.tt-mega-loading{font-size:12px;color:var(--color-white-40,rgba(255,255,255,.40));}
.tt-mega-group{margin-bottom:14px;}
.tt-mega-group:last-child{margin-bottom:0;}
.tt-mega-group-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:var(--font-weight-semibold);color:var(--color-white-90,rgba(255,255,255,.9));padding:4px 9px;margin-bottom:2px;}
.tt-mega-group-head i{width:14px;text-align:center;color:var(--color-gold);font-size:11px;}
.tt-mega-group-head .tt-mega-group-flag{font-size:13px;}
.tt-mega-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.tt-mega-links a{display:flex;align-items:center;gap:9px;padding:6px 9px 6px 30px;border-radius:var(--radius-md);font-size:12px;color:var(--color-white-65,rgba(255,255,255,.65));transition:background .15s ease,color .15s ease,padding-left .15s ease;}
.tt-mega-links a:hover{background:var(--color-gold-bg);color:var(--color-gold-light);padding-left:34px;}
.tt-mega-viewall{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:var(--font-weight-semibold);color:var(--color-green-light);}
.tt-mega-viewall i{font-size:9px;transition:transform .18s ease;}
.tt-mega-viewall:hover{color:var(--color-gold-light);}
.tt-mega-viewall:hover i{transform:translateX(3px);}

.tt-mega-featured-col{width:280px;flex-shrink:0;background:linear-gradient(165deg,rgba(var(--color-gold-rgb),.08),transparent 60%);border-left:1px solid var(--border-navy);padding:26px 24px;display:flex;flex-direction:column;}
.tt-mega-featured-label{display:flex;align-items:center;gap:7px;font-family:var(--font-accent);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold-light);margin-bottom:14px;}
.tt-mega-featured-list{display:flex;flex-direction:column;gap:10px;flex:1;}
.tt-mega-feat-card{position:relative;overflow:hidden;display:block;padding:12px 14px;border-radius:var(--radius-lg);background:var(--color-white-05);border:1px solid var(--border-light);transition:border-color .2s ease,transform .2s ease;}
.tt-mega-feat-card:hover{border-color:var(--border-gold);transform:translateY(-2px);}
.tt-mega-feat-name{display:block;font-size:12.5px;font-weight:var(--font-weight-semibold);color:var(--color-white);line-height:1.3;margin-bottom:4px;}
.tt-mega-feat-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--color-gold-light);}
.tt-mega-cta{position:relative;overflow:hidden;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold));color:var(--color-navy-deep);font-size:12px;font-weight:var(--font-weight-bold);transition:transform .2s ease;}
.tt-mega-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold-lg);}

/* ── Header actions — CTA button with shine-sweep + burger ── */
.tt-header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.tt-book-btn{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold));color:var(--color-navy-deep);font-size:13px;font-weight:var(--font-weight-bold);letter-spacing:.01em;box-shadow:var(--shadow-gold);transition:transform .2s ease,box-shadow .2s ease;}
.tt-book-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold-lg);}
.tt-book-btn-shine{position:absolute;top:-40%;left:0;width:26%;height:180%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);transform:translateX(-160%) skewX(-18deg);pointer-events:none;}
.tt-book-btn:hover .tt-book-btn-shine{animation:tt-shine-sweep 850ms ease;}

.tt-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:var(--color-white-08);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;}
.tt-burger span{display:block;width:18px;height:2px;margin:0 auto;background:var(--color-gold-light);border-radius:var(--radius-full);transition:all .3s ease;}
.tt-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.tt-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.tt-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================ 4. MOBILE DRAWER — glass surface, accordion mirror of desktop */
.tt-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:590;}
.tt-drawer-overlay.open{opacity:1;visibility:visible;}
.tt-drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);background:var(--tt-glass-bg);backdrop-filter:var(--tt-glass-blur);-webkit-backdrop-filter:var(--tt-glass-blur);border-left:1px solid var(--tt-glass-border);transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.8,.25,1);z-index:600;display:flex;flex-direction:column;overflow-y:auto;}
.tt-drawer.open{transform:translateX(0);}
.tt-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border-navy);flex-shrink:0;}
.tt-drawer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:16px;color:var(--color-white);}
.tt-drawer-brand img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.tt-drawer-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--color-white-08);border:none;border-radius:50%;color:var(--color-white-70);cursor:pointer;}
.tt-drawer-body{padding:18px 20px 32px;display:flex;flex-direction:column;gap:18px;}
.tt-mob-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border-navy);padding-bottom:14px;}
.tt-mob-list>li>a{display:block;padding:12px 6px;font-size:14.5px;font-weight:var(--font-weight-medium);color:var(--color-white-85,rgba(255,255,255,.85));}
.tt-mob-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 6px;background:none;border:none;font-size:14.5px;font-weight:var(--font-weight-medium);color:var(--color-white-85,rgba(255,255,255,.85));cursor:pointer;}
.tt-mob-acc-trigger i{font-size:11px;color:var(--color-gold);transition:transform .25s ease;}
.tt-mob-accordion.open .tt-mob-acc-trigger i{transform:rotate(180deg);}
.tt-mob-acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;padding-left:10px;}
.tt-mob-accordion.open .tt-mob-acc-panel{max-height:900px;}
.tt-mob-acc-panel a{display:flex;align-items:center;padding:9px 8px;font-size:13px;color:var(--color-white-65,rgba(255,255,255,.65));}
.tt-mob-acc-panel a:hover{color:var(--color-gold-light);}
.tt-mob-acc-label{font-family:var(--font-accent);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold);margin:10px 8px 4px;}
.tt-mob-viewall{display:inline-flex;align-items:center;gap:6px;margin:8px;font-size:12px;font-weight:var(--font-weight-semibold);color:var(--color-green-light);}
.tt-mob-cta-row{display:flex;gap:10px;}
.tt-mob-book,.tt-mob-wa{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:var(--radius-md);font-size:13px;font-weight:var(--font-weight-bold);}
.tt-mob-book{background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold));color:var(--color-navy-deep);}
.tt-mob-wa{background:rgba(var(--wa-green-rgb, 37,211,102),.14);border:1px solid rgba(var(--wa-green-rgb, 37,211,102),.4);color:var(--wa-green, #25D366);}
.tt-mob-office{font-size:12.5px;color:var(--color-white-70);}
.tt-mob-office b{color:var(--color-white);font-weight:var(--font-weight-medium);}
.tt-mob-contact-row{display:flex;gap:10px;}
.tt-mob-chip{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-white-75,rgba(255,255,255,.75));padding:9px 11px;border-radius:var(--radius-md);background:var(--color-white-05);border:1px solid var(--border-light);}
.tt-mob-chip i{color:var(--color-gold);}
.tt-mob-trust-row{display:flex;flex-wrap:wrap;gap:8px;}
.tt-mob-trust{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-white-65,rgba(255,255,255,.65));background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-full);padding:5px 10px;}
.tt-mob-trust i{color:var(--color-gold);}
.tt-mob-lang-row{display:flex;align-items:center;gap:10px;}
.tt-mob-lang-row label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-white-70);flex-shrink:0;}
.tt-mob-lang-row label i{color:var(--color-gold);}
.tt-mob-lang-row select{flex:1;background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-md);color:var(--color-white-85,rgba(255,255,255,.85));padding:9px 10px;font-size:12.5px;}

/* ============================================================ 5. WHATSAPP FLOATING WIDGET */
.tt-wa{position:fixed;right:28px;bottom:28px;z-index:1200;}
.tt-wa-fab{position:relative;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--wa-green, #25D366),var(--wa-green-dark, #1da851));border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;cursor:pointer;box-shadow:0 8px 24px rgba(var(--wa-green-rgb, 37,211,102),.4);transition:transform .2s ease;}
.tt-wa-fab:hover{transform:translateY(-3px) scale(1.04);}
.tt-wa-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);animation:tt-wa-pulse-ring 2.2s ease-out infinite;pointer-events:none;}
.tt-wa-popup{position:absolute;right:0;bottom:76px;width:340px;max-height:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--tt-glass-bg);backdrop-filter:var(--tt-glass-blur);-webkit-backdrop-filter:var(--tt-glass-blur);border:1px solid var(--tt-glass-border);border-radius:var(--radius-2xl);box-shadow:var(--tt-glass-shadow);transition:max-height .32s ease,opacity .25s ease,visibility .25s;display:flex;flex-direction:column;}
.tt-wa.wa-open .tt-wa-popup{max-height:640px;opacity:1;visibility:visible;animation:tt-glass-in .22s ease;}
.tt-wa-popup-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;}
.tt-wa-agent{display:flex;align-items:center;gap:10px;}
.tt-wa-avatar{position:relative;width:38px;height:38px;flex-shrink:0;}
.tt-wa-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.tt-wa-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--wa-green, #25D366);border:2px solid var(--color-navy-deep);}
.tt-wa-agent-name{display:block;font-size:13.5px;font-weight:var(--font-weight-semibold);color:var(--color-white);}
.tt-wa-agent-status{display:block;font-size:11px;color:#5FE38A;}
.tt-wa-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--color-white-08);border:none;border-radius:50%;color:var(--color-white-70);cursor:pointer;}
.tt-wa-trust{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;}
.tt-wa-trust-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--color-white-65,rgba(255,255,255,.65));background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-full);padding:4px 9px;}
.tt-wa-trust-item i{color:var(--color-gold);}
.tt-wa-response-hint{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--color-white-50);padding:0 16px 10px;}
.tt-wa-body{flex:1;overflow-y:auto;padding:0 16px;max-height:320px;}
.tt-wa-bubble{background:var(--color-white-08);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--color-white-85,rgba(255,255,255,.85));margin-bottom:14px;}
.tt-wa-time{display:block;margin-top:6px;font-size:10px;color:var(--color-white-40,rgba(255,255,255,.40));}
.tt-wa-featured-label{display:block;font-family:var(--font-accent);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-gold-light);margin-bottom:8px;}
.tt-wa-pkg-row,.tt-wa-cat-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;margin-bottom:6px;background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:12px;color:var(--color-white-80);text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.tt-wa-pkg-row:hover,.tt-wa-cat-row:hover{border-color:var(--border-gold);background:var(--color-gold-bg);}
.tt-wa-pkg-row em{font-style:normal;font-size:10px;color:var(--color-gold-light);flex-shrink:0;}
.tt-wa-cat-row{justify-content:flex-start;}
.tt-wa-cat-row i{color:var(--color-gold);width:16px;}
.tt-wa-back{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--color-white-65,rgba(255,255,255,.65));font-size:12px;cursor:pointer;margin-bottom:10px;padding:0;}
.tt-wa-view-all-link{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--color-green-light);margin-top:8px;padding-bottom:8px;}
.tt-wa-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px;}
.tt-wa-qr{display:flex;align-items:center;gap:6px;padding:9px 10px;background:var(--color-white-05);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:11px;color:var(--color-white-75,rgba(255,255,255,.75));cursor:pointer;transition:all .2s ease;}
.tt-wa-qr:hover{border-color:var(--border-gold);color:var(--color-gold-light);}
.tt-wa-qr i{color:var(--color-gold);}
.tt-wa-input-row{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--border-navy);}
.tt-wa-input{flex:1;background:var(--color-white-08);border:1px solid var(--border-light);border-radius:var(--radius-full);padding:10px 14px;font-size:12.5px;color:var(--color-white);}
.tt-wa-input::placeholder{color:var(--color-white-40,rgba(255,255,255,.40));}
.tt-wa-send{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--wa-green, #25D366),var(--wa-green-dark, #1da851));border:none;color:#fff;font-size:16px;cursor:pointer;}

/* ============================================================ RESPONSIVE */
@media (max-width: 1180px){
    .tt-nav{display:none;}
    .tt-burger{display:flex;}
    .tt-mega,.tt-dd{display:none;}
}
@media (max-width: 768px){
    :root{ --tt-header-h:76px; --tt-ann-h:0px; --tt-util-h:0px; }
    .tt-ann,.tt-util{display:none;}
    .tt-header-inner{padding:0 16px;}
    .tt-brand-logo-wrap{width:42px;height:42px;}
    .tt-brand-name{font-size:16px;}
    .tt-brand-tag{display:none;}
    .tt-book-btn span{display:none;}
    .tt-book-btn{padding:11px 14px;}
    .tt-wa{right:16px;bottom:16px;}
    .tt-wa-popup{width:calc(100vw - 32px);right:-8px;}
}