/* ============================================================
   TheTravelValley — Core Stylesheet
   Design tokens: Navy #0B1F3A, Blue #2563EB, Gold #FFC107
   Display: 'Fraunces' (used sparingly) / Body & UI: 'Inter'
   ============================================================ */

:root{
  --navy: #0B1F3A;
  --navy-light: #142d52;
  --blue: #2563EB;
  --blue-dark: #1946b3;
  --gold: #FFC107;
  --gold-dark: #e6a800;
  --ink: #0F172A;
  --slate: #5B6472;
  --slate-light: #8A93A3;
  --line: #E4E8F0;
  --mist: #F5F7FB;
  --white: #FFFFFF;
  --success: #16A34A;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(11,31,58,0.06);
  --shadow-md: 0 12px 30px rgba(11,31,58,0.12);
  --shadow-lg: 0 24px 60px rgba(11,31,58,0.18);

  --container: 1240px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, select{ font-family: inherit; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0; line-height:1.15; }
.eyebrow{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--gold);
  display:inline-block;
}
.section-head{ max-width: 640px; margin-bottom: 26px; }
.section-head p{ color: var(--slate); font-size: 16px; margin-top: 10px; }
.section{ padding: 48px 0; }
.section.tight{ padding: 36px 0; }
.section + .section{ padding-top: 0; }
.bg-mist{ background: var(--mist); }
.bg-navy{ background: var(--navy); color: rgba(255,255,255,.85); }
.bg-navy h2, .bg-navy h3{ color: var(--white); }

:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-gold{ background: var(--gold); color: var(--navy); box-shadow: 0 10px 24px rgba(255,193,7,.35); }
.btn-gold:hover{ background: var(--gold-dark); box-shadow: 0 14px 30px rgba(255,193,7,.45); }
.btn-outline{ background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.55); }
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color: var(--white); }
.btn-navy{ background: var(--navy); color: var(--white); }
.btn-navy:hover{ background: var(--navy-light); }
.btn-ghost{ background: var(--mist); color: var(--navy); }
.btn-ghost:hover{ background: var(--line); }
.btn-sm{ padding: 10px 20px; font-size: 13px; }
.btn-block{ width: 100%; }

/* ============ NAVBAR ============ */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 14px 0;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(11,31,58,.10);
  transition: padding .35s ease, box-shadow .35s ease;
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.navbar.scrolled{
  padding: 9px 0;
  box-shadow: 0 6px 24px rgba(11,31,58,.14);
}
.brand{ display:flex; align-items:center; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy); }
.brand .brand-logo-full{
  height: 46px; width:auto; object-fit: contain; display:block;
}

.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  color: var(--navy);
  font-size: 14.5px; font-weight: 600;
  position: relative; padding: 6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--gold); transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--blue); }

.nav-right{ display:flex; align-items:center; gap:16px; }
.support-btn{
  display:flex; align-items:center; gap:10px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700;
}
.support-btn:hover{ background: var(--line); }
.support-btn .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }

.footer-support-badge{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700;
  margin: 16px 0 20px;
}
.footer-support-badge .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--navy); border-radius:2px; }

.phone-pill{
  display:flex; align-items:center; gap:9px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-weight: 800; font-size: 14.5px;
  white-space: nowrap;
}
.phone-pill i{ font-size:15px; }
.phone-pill:hover{ background: rgba(37,99,235,.08); color: var(--blue); }

.nav-whatsapp{
  width: 38px; height: 38px; border-radius:50%;
  background:#25D366; color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  flex-shrink:0;
}
.nav-whatsapp:hover{ color:var(--white); filter:brightness(1.08); }

/* ============ CALL TO BOOK POPUP ============ */
.call-popup{
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.94);
  width: min(420px, 90vw);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1600; display:none;
  opacity:0; transition: opacity .25s ease, transform .25s ease;
  text-align:center;
  overflow:hidden;
}
.call-popup.open{ display:block; opacity:1; transform: translate(-50%,-50%) scale(1); }
.call-popup-banner{
  position:relative;
  background: linear-gradient(140deg, var(--navy) 0%, var(--blue) 100%);
  padding:36px 32px 46px;
  overflow:hidden;
}
.call-popup-banner::before{
  content:""; position:absolute; top:-40px; right:-40px; width:150px; height:150px;
  background: radial-gradient(circle, rgba(255,193,7,.35), transparent 70%);
  border-radius:50%;
}
.call-popup-banner::after{
  content:""; position:absolute; bottom:-60px; left:-30px; width:140px; height:140px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  border-radius:50%;
}
.call-popup-icon{
  position:relative; z-index:2;
  width:68px; height:68px; border-radius:50%; margin:0 auto;
  background: linear-gradient(160deg, var(--gold), var(--gold-dark));
  color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.15);
  animation: callPulse 2.2s ease-in-out infinite;
}
@keyframes callPulse{
  0%, 100%{ box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.15); }
  50%{ box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 10px rgba(255,255,255,.08); }
}
.call-popup-body{ padding:26px 32px 32px; margin-top:-22px; position:relative; z-index:2; }
.call-popup-body h3{ font-size:21px; color:var(--navy); margin-bottom:10px; }
.call-popup-body p{ font-size:14px; color:var(--slate); line-height:1.65; margin-bottom:22px; }
.call-popup-body .btn-block{ box-shadow: 0 10px 26px rgba(255,193,7,.4); }
.call-popup-alt{
  display:inline-block; margin-top:16px; font-size:13px; color:var(--blue); font-weight:600;
  padding:8px 16px; border-radius:999px; background: var(--mist); text-decoration:none;
  transition: background .2s ease;
}
.call-popup-alt:hover{ background:var(--line); }

/* ============ INQUIRY MODAL ============ */
.modal-backdrop{
  position: fixed; inset:0; background: rgba(6,12,26,.6);
  z-index: 1500; display:none; backdrop-filter: blur(2px);
}
.modal-backdrop.open{ display:block; }
.inquiry-modal{
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.96);
  width: min(880px, 92vw); max-height: 90vh; overflow-y:auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1501; display:none;
  opacity:0; transition: opacity .25s ease, transform .25s ease;
}
.inquiry-modal.open{ display:block; opacity:1; transform: translate(-50%,-50%) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:36px; height:36px; border-radius:50%; background: var(--white);
  border:1px solid var(--line); color: var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow: var(--shadow-sm);
}
.inquiry-grid{ display:grid; grid-template-columns: 1fr 1.15fr; }
.inquiry-visual{
  background-size:cover; background-position:center;
  min-height: 360px; position:relative;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  display:flex; align-items:flex-end;
}
.inquiry-visual::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,19,38,.05), rgba(11,19,38,.85));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.inquiry-call{ position:relative; z-index:2; padding:26px; color:var(--white); }
.inquiry-call span{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: rgba(255,255,255,.75); margin-bottom:8px; }
.inquiry-call a{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--white); }
.inquiry-call a i{ background: var(--blue); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.inquiry-form{ padding: 30px 32px; }
.inquiry-form h3{ font-size:22px; margin-bottom:18px; }
.inquiry-form input[type="text"], .inquiry-form input[type="email"], .inquiry-form input[type="tel"], .inquiry-form input[type="number"], .inquiry-form select, .inquiry-form textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-size:14.5px; color:var(--navy); margin-bottom:12px; font-family:var(--font-body);
}
.inquiry-form textarea{ resize:vertical; min-height:70px; }
.inquiry-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inquiry-pref{ display:flex; align-items:center; gap:16px; font-size:13.5px; color:var(--slate); margin-bottom:14px; flex-wrap:wrap; }
.inquiry-pref label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
@media (max-width:768px){
  .inquiry-grid{ grid-template-columns:1fr; }
  .inquiry-visual{ min-height:160px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .inquiry-visual::before{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.enquire-fab{
  width:auto;
  background: var(--gold); color:var(--navy);
  border-radius: var(--radius-pill);
  padding: 0 20px; height:56px;
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:14.5px; white-space:nowrap;
  box-shadow: var(--shadow-lg);
}
.enquire-fab:hover{ background: var(--gold-dark); color:var(--navy); }

/* ============ EXIT-INTENT POPUP ============ */
.exit-popup{
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.94);
  width: min(420px, 90vw);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1600; display:none;
  opacity:0; transition: opacity .25s ease, transform .25s ease;
  overflow:hidden;
  text-align:center;
}
.exit-popup.open{ display:block; opacity:1; transform: translate(-50%,-50%) scale(1); }
.exit-popup-hero{
  background: linear-gradient(160deg, var(--navy), var(--blue-dark));
  padding: 26px 26px 22px; color:var(--white); position:relative;
}
.exit-popup-agent{
  width: 84px; height:84px; border-radius:50%; object-fit:cover;
  border: 3px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md);
  margin-bottom: 12px;
}
.exit-popup-hero .agent-dot{
  position:absolute; width:16px; height:16px; border-radius:50%; background:#22c55e;
  border:2.5px solid var(--navy);
  top: 80px; left: calc(50% + 22px);
}
.exit-popup-hero h3{ color:var(--white); font-size:20px; margin-top:6px; }
.exit-popup-body{ padding: 22px 26px 26px; }
.exit-popup-body p{ font-size:14px; color:var(--slate); line-height:1.6; margin-bottom:20px; }
.exit-popup-actions{ display:flex; flex-direction:column; gap:10px; }
.exit-popup .modal-close{ background: rgba(255,255,255,.15); border-color:transparent; color:var(--white); }

.call-callout{
  display:inline-flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 10px 22px 10px 10px;
  margin-top: 22px;
  color: var(--white);
}
.call-callout-icon{
  width:42px; height:42px; border-radius:50%; background: var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.call-callout small{ display:block; font-size:11.5px; color:rgba(255,255,255,.75); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.call-callout strong{ display:block; font-size:18px; font-weight:800; color:var(--white); }
.call-callout:hover{ background: rgba(255,255,255,.18); color:var(--white); }

.mini-dest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mini-dest-card{ position:relative; height:130px; border-radius:var(--radius-md); overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:12px; }
.mini-dest-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(6,12,26,.75) 100%); }
.mini-dest-card span{ position:relative; z-index:1; color:var(--white); font-weight:700; font-size:14px; }
@media (max-width:900px){ .mini-dest-grid{ grid-template-columns:repeat(2,1fr); } }

.stay-chip-row{ display:flex; gap:12px; flex-wrap:wrap; }
.stay-chip{ display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-pill); padding:10px 20px; font-weight:700; font-size:13.5px; color:var(--navy); transition:border-color .2s ease, background .2s ease; }
.stay-chip:hover{ border-color:var(--blue); background:var(--mist); }
.stay-chip i{ color:var(--blue); font-size:15px; }


/* ============ FLOATING CONTACT BUTTONS ============ */
.floating-contact{ position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; gap:12px; }
.fab{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff;
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease;
}
.fab:hover{ transform: scale(1.08); color:#fff; }
.fab-whatsapp{ background:#25D366; }
.fab-call{ background: var(--blue); }
.fab-chat{ background: var(--navy); border:none; cursor:pointer; }
@media (max-width:560px){
  .floating-contact{ right:14px; bottom:14px; }
  .fab{ width:50px; height:50px; font-size:22px; }
  .enquire-fab{ width:auto; height:48px; padding:0 16px; font-size:13px; }
}

.hero{
  position: relative;
  z-index: 10;
  min-height: 620px;
  box-sizing: border-box;
  padding-top: 108px;
  padding-bottom: 40px;
  display:flex; align-items:flex-start;
  color: var(--white);
}
.hero-slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity:0; transition: opacity 1.4s ease;
}
.hero-slide.active{ opacity:1; }

.hero-visual{
  position:absolute;
  top: 130px;
  right: 6%;
  width: 380px;
  max-width: 34vw;
  z-index: 4;
  transform: rotate(3deg);
  pointer-events: none;
}
.hero-visual img{
  width:100%; display:block;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  border: 6px solid rgba(255,255,255,.18);
}
.hero-visual .hero-visual-badge{
  position:absolute; bottom:-16px; left:-16px;
  background: var(--gold); color:var(--navy);
  font-weight:800; font-size:12.5px;
  padding:8px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transform: rotate(-4deg);
}
@media (max-width: 992px){ .hero-visual{ display:none; } }
.page-hero .hero-visual{ top: 60px; width: 300px; }

.hero-collage{
  position:absolute; top: 90px; right: 5%; width: 420px; max-width: 36vw; height: 280px;
  z-index: 4; pointer-events:none;
}
.hero-collage img{
  position:absolute; border-radius:16px; object-fit:cover;
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
  border: 5px solid rgba(255,255,255,.2);
}
.hero-collage .c-main{ width:62%; height:190px; top:20px; left:0; transform: rotate(-3deg); z-index:3; }
.hero-collage .c-top{ width:48%; height:120px; top:-30px; right:0; transform: rotate(4deg); z-index:2; }
.hero-collage .c-bottom{ width:44%; height:130px; bottom:-20px; right:6%; transform: rotate(-5deg); z-index:4; }
.hero-collage .hero-visual-badge{
  position:absolute; bottom:10px; left:6px; z-index:5;
  background: var(--gold); color:var(--navy);
  font-weight:800; font-size:12.5px;
  padding:8px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transform: rotate(-4deg);
}
@media (max-width: 992px){ .hero-collage{ display:none; } }
.page-hero .hero-collage{ top: 45px; width: 340px; height: 220px; }
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,19,38,.55) 0%, rgba(11,19,38,.35) 40%, rgba(6,12,26,.88) 100%);
}
.hero-content{ position: relative; z-index: 3; width:100%; padding-top: 0; }
.hero-content .eyebrow{ color: var(--gold); }
.hero-content .eyebrow::before{ background: var(--white); }
.hero-content h1{
  font-size: clamp(34px, 5vw, 58px);
  color: var(--white);
  max-width: 780px;
  font-weight: 600;
}
.hero-content .sub{
  margin-top: 18px;
  font-size: 18px;
  max-width: 560px;
  color: rgba(255,255,255,.86);
}
.hero-ctas{ display:flex; gap:16px; margin-top: 32px; flex-wrap: wrap; }

.hero-dots{ position:absolute; z-index:4; bottom: 26px; left:0; right:0; display:flex; justify-content:center; gap:10px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.4); border:none; padding:0; }
.hero-dots button.active{ background: var(--gold); width:26px; border-radius:5px; transition: all .3s ease; }

/* ============ SEARCH BOX (glass / pill style) ============ */
.search-wrap{ position: relative; z-index: 5; margin-top: 40px; }
.search-card{
  background: rgba(10,20,35,.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px 24px;
  color: var(--white);
}

.trip-tabs{ display:flex; gap: 10px; padding: 0 0 16px; }
.trip-tabs button{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,.85);
  transition: background .2s ease, color .2s ease;
}
.trip-tabs button.active{ background: var(--white); color: var(--blue-dark); border-color: var(--white); }

.search-bar{
  display:flex; align-items:stretch; gap:0;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 8px;
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
}
.route-fields{ display:flex; align-items:center; position:relative; flex: 2.4 1 340px; min-width:0; }
.route-fields .field-inline{ flex:1 1 0; min-width:0; }

.field-inline{
  display:flex; align-items:center; gap:10px;
  padding: 10px 16px;
  position: relative;
  min-width: 0;
}
.field-inline > i{ color: var(--blue); font-size:16px; flex-shrink:0; }
.field-inline input{
  border:none; outline:none; width:100%; font-size: 14.5px; font-weight: 600; color: var(--navy); background: transparent;
  min-width: 0; text-overflow: ellipsis;
}
.field-inline input::placeholder{ color: var(--slate-light); font-weight: 500; }
.field-icon{ color: var(--slate-light); font-size:14px; margin-left:2px; }

.swap-btn-inline{
  width: 30px; height:30px; border-radius:50%;
  background: var(--mist); border: 1px solid var(--line);
  color: var(--blue); display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; transition: transform .3s ease, background .2s ease;
}
.swap-btn-inline:hover{ transform: rotate(180deg); background:var(--line); }

.divider-v{ width:1px; align-self:center; height: 30px; background: var(--line); flex-shrink:0; }

.date-inline{ flex: 1 1 220px; }
.date-inline input[type="date"]{ font-size:13.5px; max-width:104px; }
.date-inline .date-sep{ display:flex; align-items:center; gap:8px; min-width:0; }
.date-inline .date-sep::before{ content:"–"; color:var(--slate-light); font-weight:700; }

.traveller-box{ cursor:pointer; flex: 1 1 190px; position: relative; }
.traveller-box input{ padding-right: 4px; font-size: 13.5px; cursor:pointer; }

.search-submit-pill{
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-pill);
  border:none;
  font-weight: 700;
  font-size: 15px;
  padding: 0 30px;
  display:flex; align-items:center; gap:8px;
  box-shadow: 0 10px 24px rgba(37,99,235,.4);
  transition: background .2s ease, transform .2s ease;
  flex-shrink:0;
  margin-left: 6px;
}
.search-submit-pill:hover{ background: var(--blue-dark); transform: translateY(-1px); }

.autocomplete-list{
  position:absolute; top: calc(100% + 10px); left:0; right:auto; width: 320px; max-width: 90vw;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  max-height: 320px; overflow-y:auto;
  z-index: 40;
  display:none;
  color: var(--ink);
}
.autocomplete-list.open{ display:block; }
.autocomplete-list .group-label{
  padding: 10px 16px 4px; font-size: 11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--slate-light);
}
.autocomplete-item{
  display:flex; align-items:center; gap:14px;
  padding: 12px 16px; cursor:pointer;
  border-bottom: 1px solid var(--line);
}
.autocomplete-item:last-child{ border-bottom:none; }
.autocomplete-item:hover{ background: var(--mist); }
.autocomplete-item .code{
  width:40px; height:40px; border-radius:50%; background: rgba(37,99,235,.1); color: var(--blue);
  font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.autocomplete-item .name{ font-weight:700; font-size: 14.5px; color: var(--navy); }
.autocomplete-item .country{ font-size:12.5px; color: var(--slate); margin-top:1px; }


/* Traveller popup */
.traveller-popup{
  position:absolute; top: calc(100% + 8px); right:0; width: 400px; max-width: 92vw;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  z-index: 50;
  display:none;
}
.traveller-popup.open{ display:block; }
.pop-row{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pop-row:last-of-type{ border-bottom:none; }
.pop-title{ font-weight:700; font-size:15px; color:var(--navy); }
.pop-sub{ font-size:12px; color: var(--slate); }
.counter{ display:flex; align-items:center; gap: 14px; }
.counter button{
  width: 30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background: var(--white);
  font-size:16px; font-weight:700; color: var(--navy); display:flex; align-items:center; justify-content:center;
}
.counter button:disabled{ opacity:.35; cursor:not-allowed; }
.counter span{ width: 16px; text-align:center; font-weight:800; color: var(--blue); font-size:15px; }
.class-select{
  width:100%; margin-top:14px; padding:12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); font-weight:600; color: var(--navy); background: var(--white);
}
.pop-apply{ margin-top:16px; }

/* ============ DESTINATIONS ============ */
.dest-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.dest-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; height: 340px;
  box-shadow: var(--shadow-sm);
}
.dest-card img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.dest-card:hover img{ transform: scale(1.08); }
.dest-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,12,26,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding: 22px;
}
.dest-card h3{ color: var(--white); font-size: 22px; }
.dest-card p{ color: rgba(255,255,255,.8); font-size: 13.5px; margin: 6px 0 14px; }
.dest-card .explore{
  color: var(--gold); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:6px;
}

/* ============ DEALS ============ */
.deals-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.deal-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.deal-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.deal-img{ height: 160px; background-size: cover; background-position:center; position:relative; }
.deal-tag{
  position:absolute; top:14px; left:14px; background: var(--gold); color: var(--navy);
  font-size: 11px; font-weight:800; padding:5px 10px; border-radius: var(--radius-pill);
}
.deal-body{ padding: 18px 20px 22px; }
.route{ display:flex; align-items:center; gap:8px; font-weight:700; color: var(--navy); font-size:15px; }
.route .plane-ico{ color: var(--blue); font-size: 13px; }
.airline-name{ font-size:12.5px; color: var(--slate); margin-top:6px; }
.deal-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.deal-price{ font-size:22px; font-weight:800; color: var(--navy); font-variant-numeric: tabular-nums; }
.deal-price small{ font-size:12px; font-weight:600; color: var(--slate); }

/* ============ AIRLINE SLIDER ============ */
.airline-strip{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.airline-track{ display:flex; gap: 40px; width: max-content; animation: scrollTrack 45s linear infinite; align-items:center; }
.airline-track:hover{ animation-play-state: paused; }
@keyframes scrollTrack{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* Dependency-free airline badges (no external logo API) */
.airline-badge{
  display:flex; align-items:center; gap:10px;
  padding: 10px 18px 10px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.airline-badge:hover{ border-color: var(--blue); background: var(--mist); transform: translateY(-2px); }
.airline-badge .logo{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 3px;
}
.airline-badge .logo img{ width:100%; height:100%; object-fit: contain; }
.airline-badge .name{ font-size: 13.5px; font-weight: 700; color: var(--navy); }

/* Compact variant used inside flight result rows */
.airline-badge-sm{ display:flex; align-items:center; gap:10px; }
.airline-badge-sm .code{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--navy); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  flex-shrink:0;
}

/* ============ WHY CHOOSE ============ */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.why-card{
  position:relative; overflow:hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 26px 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--accent, var(--blue));
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.why-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.why-card:hover::before{ transform: scaleX(1); }
.why-card .why-num{
  position:absolute; top:10px; right:16px; font-family:var(--font-display); font-weight:700;
  font-size:52px; color: var(--accent, var(--blue)); opacity:.07; line-height:1; pointer-events:none;
}
.why-card:nth-child(1){ --accent: #F4B400; }
.why-card:nth-child(2){ --accent: #2563EB; }
.why-card:nth-child(3){ --accent: #16A34A; }
.why-card:nth-child(4){ --accent: #1E3A8A; }
.why-icon{
  position:relative; width:72px; height:72px; border-radius:50%;
  background: color-mix(in srgb, var(--accent, var(--blue)) 12%, white); color: var(--accent, var(--blue));
  display:flex; align-items:center; justify-content:center; font-size: 30px; margin-bottom: 20px;
  transition: transform .25s ease;
}
.why-card:hover .why-icon{ transform: scale(1.08) rotate(-4deg); }
.why-card h3{ font-size: 18px; position:relative; }
.why-card p{ color: var(--slate); font-size: 14px; margin-top: 8px; line-height:1.6; position:relative; }
@media (max-width:900px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns: 1fr; } }

/* ============ TESTIMONIALS ============ */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testi-card{ background: var(--white); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.stars{ color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.testi-card p{ margin: 14px 0 20px; color: var(--ink); font-size: 15px; }
.testi-user{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%; background: var(--navy); color: var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display);
}
.testi-avatar-img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.testi-name{ font-weight:700; font-size: 14.5px; color: var(--navy); }
.testi-country{ font-size:12.5px; color: var(--slate); }

/* ============ CTA STRIP ============ */
.cta-strip{
  background: linear-gradient(120deg, var(--navy), var(--blue-dark));
  border-radius: var(--radius-lg);
  padding: 50px 56px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  color: var(--white);
  flex-wrap: wrap;
}
.cta-strip h3{ color: var(--white); font-size: 26px; max-width: 480px; }
.cta-strip p{ color: rgba(255,255,255,.8); margin-top:8px; }

/* ============ FOOTER ============ */
.footer{ background: var(--navy); color: rgba(255,255,255,.75); padding-top: 76px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand p{ margin-top:14px; font-size: 14px; color: rgba(255,255,255,.6); max-width: 280px; }
.footer h4{ color: var(--white); font-size: 15px; margin-bottom: 18px; font-family: var(--font-body); }
.footer-links li{ margin-bottom: 12px; }
.footer-links a{ font-size: 14px; color: rgba(255,255,255,.65); }
.footer-links a:hover{ color: var(--gold); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size: 14px; color:var(--white);
  transition: transform .2s ease, filter .2s ease;
}
.social-row a:hover{ transform: translateY(-3px); color:var(--white); filter: brightness(1.1); }
.social-row a.fb{ background:#1877F2; }
.social-row a.ig{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-row a.x{ background:#000000; }
.social-row a.yt{ background:#FF0000; }
.footer-phone{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-weight:600; font-size:13.5px; margin-top:10px; }
.footer-phone:first-of-type{ margin-top:16px; }
.footer-phone:hover{ color:var(--white); }
.footer-phone i{ color: var(--gold); }

.footer-destinations{
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 24px 0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:10px 20px;
}
.footer-destinations a{ font-size:13px; color: rgba(255,255,255,.6); }
.footer-destinations a:hover{ color: var(--gold); }
@media (max-width:900px){ .footer-destinations{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px){ .footer-destinations{ grid-template-columns: repeat(2,1fr); } }
.newsletter-form{ display:flex; gap:8px; margin-top: 6px; }
.newsletter-form input{
  flex:1; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: var(--white); font-size:13.5px;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,.45); }
.newsletter-form button{ padding: 12px 18px; border-radius: var(--radius-sm); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding: 22px 0; font-size: 13px; color: rgba(255,255,255,.5); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color: rgba(255,255,255,.5); margin-left: 18px; }
.footer-bottom a:hover{ color: var(--gold); }

/* ============ PAGE HEADER (sub pages) ============ */
.page-hero{
  position:relative; overflow:hidden;
  padding: 150px 0 56px;
  color: var(--white);
}
.page-hero .container{ position:relative; z-index:3; }
.page-hero .eyebrow{ color: var(--gold); }
.page-hero .eyebrow::before{ background: var(--white); }
.page-hero h1{ color: var(--white); font-size: clamp(30px, 4vw, 44px); }
.breadcrumb{ font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 10px; }
.breadcrumb a{ color: var(--gold); }

/* Utility */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top: 60px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.badge{ display:inline-block; background: rgba(37,99,235,.1); color: var(--blue); font-size:12px; font-weight:700; padding:5px 12px; border-radius: var(--radius-pill); }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ============ INTRO TEXT ============ */
.intro-content{ padding-top: 56px; padding-bottom: 20px; }
.intro-content .container{ max-width: 640px; }
.intro-heading{
  font-family: var(--font-body);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--blue);
  margin: 0 0 18px;
}
.intro-content h3{
  font-family: var(--font-body);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 800;
  color: var(--navy);
  margin: 30px 0 12px;
}
.intro-content p{
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 14px;
}

/* ============ FAQ (shared across product pages, matches route-page style) ============ */
.faq-block{ max-width: 900px; }
.faq-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq-item:first-child{ padding-top:0; }
.faq-item summary{ font-weight:700; color:var(--navy); font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"\f282"; font-family:"bootstrap-icons"; color:var(--blue); font-size:14px; flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(180deg); }
.faq-item p{ font-size:14px; color:var(--slate); line-height:1.7; margin-top:10px; }
.faq-landmark-visual{ position:relative; height: 460px; }
.faq-landmark-visual .lm-card{ position:absolute; border-radius: var(--radius-md); background-size:cover; background-position:center; box-shadow: var(--shadow-md); border: 4px solid var(--white); }
.faq-landmark-visual .lm-1{ width:56%; height:60%; left:0; top:6%; z-index:2; }
.faq-landmark-visual .lm-2{ width:46%; height:42%; right:0; top:0; z-index:1; transform: rotate(4deg); }
.faq-landmark-visual .lm-3{ width:42%; height:40%; right:2%; bottom:16%; z-index:3; transform: rotate(-5deg); }
.faq-landmark-visual .lm-4{ width:40%; height:36%; left:10%; bottom:0; z-index:4; transform: rotate(3deg); }
@media (max-width:900px){ .faq-landmark-visual{ height:360px; margin-top:24px; } }