/* =========================================================================
   ARBENI TOURS — Landing Page Design System
   Pure front-end. No framework. Brand: red #ED1B23 (from logo).
   Style frymëzuar nga sharrtravel.com (navy + foto + CTA të theksuar).
   ========================================================================= */

/* ----------------------------- Tokens ---------------------------------- */
:root{
  /* Brand */
  --brand:        #ED1B23;   /* e kuqja e Arbeni Tours (logo) */
  --brand-strong: #c8141b;
  --brand-soft:   #fdeaeb;
  --brand-glow:   rgba(237,27,35,.30);

  /* Ink / neutrals */
  --ink:        #0e1b39;     /* navy headings */
  --ink-2:      #243456;
  --muted:      #667085;
  --line:       #e7eaf1;
  --line-2:     #d9deea;

  /* Surfaces */
  --bg:         #ffffff;
  --bg-soft:    #f5f7fb;
  --bg-soft-2:  #eef2f9;

  /* Accents */
  --teal:       #14b8a6;
  --teal-soft:  #e6fbf8;
  --gold:       #f5b324;
  --green:      #16a34a;

  /* Shape */
  --r:    14px;
  --r-sm: 10px;
  --r-lg: 22px;
  --pill: 999px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(16,24,40,.06);
  --sh:    0 8px 24px rgba(16,24,40,.08);
  --sh-lg: 0 20px 48px rgba(16,24,40,.14);

  --maxw: 1200px;
  --nav-h: 76px;

  --ff-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ----------------------------- Reset ----------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink-2);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* kill horizontal scroll from off-canvas drawer / wide sections (keeps position:sticky working) */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--ff-head); color:var(--ink); margin:0 0 .4em; line-height:1.2; font-weight:700; }
p{ margin:0 0 1rem; }
:focus-visible{ outline:3px solid var(--brand-glow); outline-offset:2px; }

/* ----------------------------- Layout ---------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.section{ padding:72px 0; }
.section--soft{ background:var(--bg-soft); }
.section--tight{ padding:48px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  padding:6px 14px; border-radius:var(--pill); margin-bottom:16px;
}
.section-head{ max-width:680px; margin-bottom:38px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.section-head p{ color:var(--muted); font-size:1.05rem; margin:0; }

.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:38px; flex-wrap:wrap;
}
.section-head-row .section-head{ margin-bottom:0; }

/* ----------------------------- Buttons --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:600; font-size:.97rem;
  padding:13px 24px; border-radius:var(--pill); border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap; line-height:1;
}
.btn i{ font-size:1.05em; }
.btn:active{ transform:translateY(1px); }
.btn-brand{ background:var(--brand); color:#fff; box-shadow:0 8px 18px var(--brand-glow); }
.btn-brand:hover{ background:var(--brand-strong); box-shadow:0 10px 26px var(--brand-glow); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#1a2c57; transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-white:hover{ background:#fff; color:var(--ink); }
.btn-lg{ padding:16px 30px; font-size:1.02rem; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }

/* ----------------------------- Top bar --------------------------------- */
.topbar{
  background:var(--ink); color:#cdd6ea; font-size:.85rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.topbar a{ color:#cdd6ea; transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar .tb-left{ display:flex; align-items:center; gap:22px; }
.topbar .tb-left span i{ color:var(--brand); margin-right:6px; }
.topbar .tb-social{ display:flex; align-items:center; gap:14px; }
.topbar .tb-social a:hover{ color:var(--brand); }

/* ----------------------------- Navbar ---------------------------------- */
.nav{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.nav.is-stuck{ box-shadow:var(--sh); }
.nav .container{ display:flex; align-items:center; gap:24px; height:var(--nav-h); }
.nav-logo{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo img{ height:30px; width:auto; }
.nav-menu{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-menu > li > a{
  font-family:var(--ff-head); font-weight:500; font-size:.95rem; color:var(--ink-2);
  padding:10px 14px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:6px;
  transition:color .2s, background .2s;
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a{ color:var(--brand); background:var(--brand-soft); }
.nav-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-actions .btn{ padding:11px 20px; }

/* dropdown */
.nav-has-drop{ position:relative; }
.nav-drop{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s ease;
}
.nav-has-drop:hover .nav-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop a{ display:block; padding:9px 12px; border-radius:8px; font-size:.92rem; color:var(--ink-2); white-space:nowrap; }
.nav-drop a:hover{ background:var(--bg-soft); color:var(--brand); }

/* burger */
.nav-burger{
  display:none; margin-left:auto; background:none; border:0; color:var(--ink);
  font-size:1.6rem; padding:6px; border-radius:8px;
}

/* mobile drawer */
.nav-drawer-backdrop{
  position:fixed; inset:0; background:rgba(8,14,32,.5); z-index:90;
  opacity:0; visibility:hidden; transition:.25s;
}
.nav-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,340px);
  background:#fff; z-index:100; transform:translateX(100%);
  transition:transform .3s ease; padding:22px; overflow-y:auto;
  box-shadow:var(--sh-lg);
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer-backdrop.open{ opacity:1; visibility:visible; }
.nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.nav-drawer-head img{ height:22px; }
.nav-drawer-head button{ background:none; border:0; font-size:1.7rem; color:var(--ink); }
.nav-drawer a{
  display:block; padding:13px 12px; border-radius:10px; font-family:var(--ff-head);
  font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line);
}
.nav-drawer a:hover{ color:var(--brand); }
.nav-drawer .btn{ margin-top:18px; }

/* ----------------------------- Hero ------------------------------------ */
.hero{
  position:relative; color:#fff; isolation:isolate;
  background:linear-gradient(120deg,#0e1b39 0%, #16264f 55%, #1f2f5e 100%);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.30;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(237,27,35,.55), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(20,184,166,.45), transparent 60%);
}
.hero-inner{ padding:70px 0 130px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); padding:7px 16px; border-radius:var(--pill);
  font-size:.82rem; font-weight:500; margin-bottom:22px; backdrop-filter:blur(4px);
}
.hero-badge i{ color:var(--gold); }
.hero h1{
  color:#fff; font-size:clamp(2.1rem,5vw,3.7rem); line-height:1.07; max-width:14ch;
  margin-bottom:18px; letter-spacing:-.01em;
}
.hero h1 .accent{ color:#fff; position:relative; white-space:nowrap; }
.hero h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.28em;
  background:var(--brand); z-index:-1; border-radius:3px; opacity:.9;
}
.hero p.lead{ font-size:1.16rem; color:#d6deef; max-width:46ch; margin-bottom:30px; }
.hero-stats{ display:flex; gap:38px; flex-wrap:wrap; margin-top:38px; }
.hero-stats .num{ font-family:var(--ff-head); font-weight:700; font-size:1.9rem; color:#fff; }
.hero-stats .lbl{ color:#aeb9d4; font-size:.88rem; }

/* ----------------------- Search / Filter widget ------------------------ */
.search-wrap{ position:relative; margin-top:-72px; z-index:30; }
.search-card{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:10px; border:1px solid var(--line);
}
.search-tabs{ display:flex; gap:6px; padding:8px 8px 0; }
.search-tab{
  display:inline-flex; align-items:center; gap:8px; background:transparent; border:0;
  font-family:var(--ff-head); font-weight:600; font-size:.92rem; color:var(--muted);
  padding:10px 18px; border-radius:var(--pill); transition:.2s;
}
.search-tab.active{ background:var(--ink); color:#fff; }
.search-tab i{ font-size:1.05em; }

.search-grid{
  display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1.1fr auto; gap:10px;
  padding:12px 8px; align-items:end;
}
.field{ position:relative; }
.field > label{
  display:block; font-family:var(--ff-head); font-weight:600; font-size:.74rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 6px 4px;
}
.field-box{
  display:flex; align-items:center; gap:10px; background:var(--bg-soft);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  transition:border-color .2s, box-shadow .2s; min-height:54px;
}
.field-box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); background:#fff; }
.field-box > i{ color:var(--brand); font-size:1.15rem; flex-shrink:0; }
.field-box select,
.field-box input{
  border:0; background:transparent; width:100%; font-family:var(--ff-body);
  font-size:.98rem; color:var(--ink); outline:none; padding:0;
}
.field-box select{ appearance:none; cursor:pointer; }
.field-box .sub{ font-size:.72rem; color:var(--muted); }
.field-stack{ display:flex; flex-direction:column; justify-content:center; }
.field-stack .val{ font-weight:600; color:var(--ink); font-size:.98rem; }

/* swap button between nisja/arritja */
.swap-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:#fff; border:1.5px solid var(--line-2);
  color:var(--brand); z-index:5; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm); transition:.2s;
}
.swap-btn:hover{ transform:translate(-50%,-50%) rotate(180deg); border-color:var(--brand); }

/* passengers popover */
.pax-pop{
  position:absolute; top:calc(100% + 8px); left:0; right:0; min-width:280px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:16px; z-index:40; display:none;
}
.pax-pop.open{ display:block; }
.pax-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.pax-row:last-child{ border-bottom:0; }
.pax-row .pax-name{ font-weight:600; color:var(--ink); font-size:.95rem; }
.pax-row .pax-sub{ font-size:.78rem; color:var(--muted); }
.stepper{ display:flex; align-items:center; gap:12px; }
.stepper button{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-2);
  background:#fff; color:var(--ink); font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.stepper button:hover{ border-color:var(--brand); color:var(--brand); }
.stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.stepper .count{ min-width:28px; display:inline-flex; justify-content:center; text-align:center; font-weight:600; }
.stepper .count input{ width:28px !important; color:var(--ink); -moz-appearance:textfield; appearance:textfield; }
.stepper .count input::-webkit-outer-spin-button,
.stepper .count input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.search-submit{ height:54px; padding-inline:30px; }

/* trip type radios */
.trip-toggle{ display:inline-flex; background:var(--bg-soft); border-radius:var(--pill); padding:4px; gap:2px; }
.trip-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.trip-toggle label{
  font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:var(--muted);
  padding:8px 18px; border-radius:var(--pill); cursor:pointer; transition:.2s; display:inline-flex; gap:6px; align-items:center;
}
.trip-toggle input:checked + label{ background:#fff; color:var(--brand); box-shadow:var(--sh-sm); }

/* ----------------------------- Cards ----------------------------------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-sm); transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-media img{ transform:scale(1.07); }
.card-badge{
  position:absolute; top:12px; left:12px; background:var(--brand); color:#fff;
  font-family:var(--ff-head); font-weight:600; font-size:.74rem; padding:6px 12px; border-radius:var(--pill);
  box-shadow:var(--sh-sm);
}
.card-badge.alt{ background:#fff; color:var(--ink); }
.card-fav{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--brand); border:0; display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; box-shadow:var(--sh-sm);
}
.card-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-loc{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted); }
.card-loc i{ color:var(--brand); }
.card-title{ font-family:var(--ff-head); font-weight:600; font-size:1.12rem; color:var(--ink); margin:0; }
.card-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:.83rem; color:var(--muted); }
.card-meta span{ display:inline-flex; align-items:center; gap:5px; }
.card-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.price{ font-family:var(--ff-head); }
.price .from{ font-size:.74rem; color:var(--muted); display:block; }
.price .amt{ font-size:1.35rem; font-weight:700; color:var(--brand); }
.price .amt small{ font-size:.7rem; color:var(--muted); font-weight:500; }

.rating{ display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:.86rem; color:var(--ink); }
.rating i{ color:var(--gold); }
.stars i{ color:var(--gold); font-size:.85rem; }

/* destinations (image tiles) */
.dest{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; display:block; box-shadow:var(--sh-sm); }
.dest img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dest:hover img{ transform:scale(1.08); }
.dest::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,32,.78), transparent 55%); }
.dest-cap{ position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff; z-index:2; }
.dest-cap h4{ color:#fff; margin:0 0 2px; font-size:1.15rem; }
.dest-cap span{ font-size:.82rem; color:#dbe2f1; }
.dest.tall{ aspect-ratio:auto; }

/* ----------------------- Feature / "why us" ---------------------------- */
.feature{ text-align:center; padding:6px; }
.feature .ic{
  width:62px; height:62px; border-radius:18px; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin:0 auto 16px;
}
.feature h4{ font-size:1.1rem; margin-bottom:6px; }
.feature p{ color:var(--muted); font-size:.93rem; margin:0; }

/* ----------------------- Route line strip ------------------------------ */
.routeline{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 22px;
  transition:.2s;
}
.routeline:hover{ border-color:var(--brand); box-shadow:var(--sh); }
.routeline .rl-route{ display:flex; align-items:center; gap:12px; font-family:var(--ff-head); font-weight:600; color:var(--ink); }
.routeline .rl-route i{ color:var(--brand); }
.routeline .rl-arrow{ color:var(--muted); }
.routeline .rl-meta{ display:flex; align-items:center; gap:18px; font-size:.85rem; color:var(--muted); flex-wrap:wrap; }
.routeline .rl-price{ font-family:var(--ff-head); font-weight:700; color:var(--brand); }

/* ----------------------- Offer wide banner ----------------------------- */
.cta-band{
  position:relative; color:#fff; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(120deg,#0e1b39,#1f2f5e); padding:54px;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.25;
  background:radial-gradient(600px 300px at 90% 10%, var(--brand), transparent 60%);
}
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); }
.cta-band p{ color:#cdd6ea; max-width:52ch; }

/* ----------------------- Booking results page -------------------------- */
.results-head{ background:var(--ink); color:#fff; padding:26px 0; }
.results-head h1{ color:#fff; font-size:1.4rem; margin:0; }
.results-head .crumb{ color:#aeb9d4; font-size:.85rem; }
.results-layout{ display:grid; grid-template-columns:280px 1fr; gap:26px; align-items:start; }
.filters-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px;
  position:sticky; top:96px;
}
.filters-panel h5{ font-size:1rem; margin-bottom:14px; }
.filter-group{ padding:14px 0; border-top:1px solid var(--line); }
.filter-group h6{ font-family:var(--ff-head); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:10px; }
.check{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:.92rem; color:var(--ink-2); cursor:pointer; }
.check input{ accent-color:var(--brand); width:17px; height:17px; }

.trip-row{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
  transition:.2s; margin-bottom:16px;
}
.trip-row:hover{ box-shadow:var(--sh); border-color:var(--line-2); }
.trip-main{ display:flex; flex-direction:column; gap:14px; }
.trip-time{ display:flex; align-items:center; gap:18px; }
.trip-time .pt{ text-align:center; }
.trip-time .pt .t{ font-family:var(--ff-head); font-weight:700; font-size:1.5rem; color:var(--ink); line-height:1; }
.trip-time .pt .c{ font-size:.82rem; color:var(--muted); margin-top:3px; }
.trip-line{ flex:1; min-width:120px; position:relative; text-align:center; }
.trip-line .dur{ font-size:.76rem; color:var(--muted); margin-bottom:4px; }
.trip-line .bar{ height:2px; background:var(--line-2); position:relative; }
.trip-line .bar::before,.trip-line .bar::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%); width:9px; height:9px;
  border-radius:50%; background:var(--brand);
}
.trip-line .bar::before{ left:0; }
.trip-line .bar::after{ right:0; }
.trip-line .bus-ic{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:#fff; padding:0 6px; color:var(--brand); }
.trip-info{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.84rem; color:var(--muted); }
.trip-info span{ display:inline-flex; align-items:center; gap:6px; }
.trip-tag{ background:var(--teal-soft); color:#0f766e; font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:var(--pill); }
.trip-tag.seats{ background:var(--brand-soft); color:var(--brand); }
.trip-cta{ text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:160px; }
.trip-cta .p-from{ font-size:.74rem; color:var(--muted); }
.trip-cta .p-amt{ font-family:var(--ff-head); font-weight:700; font-size:1.7rem; color:var(--ink); }
.trip-cta .p-amt small{ font-size:.8rem; color:var(--muted); font-weight:500; }
.trip-cta .p-alt{ font-size:.82rem; color:var(--muted); }

/* mini search summary bar on results page */
.minibar{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:14px; margin-top:-26px; position:relative; z-index:5; }
.minibar .mini-grid{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:10px; align-items:end; }

/* ----------------------------- Gallery --------------------------------- */
.gallery{ columns:3; column-gap:16px; }
.gallery img{ width:100%; border-radius:var(--r); margin-bottom:16px; break-inside:avoid; box-shadow:var(--sh-sm); transition:.25s; cursor:pointer; }
.gallery img:hover{ transform:scale(1.02); box-shadow:var(--sh); }

.lightbox{
  position:fixed; inset:0; background:rgba(8,14,32,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:var(--r); box-shadow:var(--sh-lg); }
.lightbox .lb-close{ position:absolute; top:24px; right:30px; background:none; border:0; color:#fff; font-size:2.4rem; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:0; color:#fff; width:54px; height:54px; border-radius:50%; font-size:1.6rem; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-prev{ left:24px; } .lightbox .lb-next{ right:24px; }

/* ----------------------------- About / generic ------------------------- */
.page-hero{
  background:linear-gradient(120deg,#0e1b39,#1f2f5e); color:#fff; padding:130px 0 58px;
  position:relative; overflow:hidden;
}
.page-hero::before{ content:""; position:absolute; inset:0; opacity:.25; background:radial-gradient(700px 320px at 85% -20%, var(--brand), transparent 60%); }
.page-hero > .container{ position:relative; }
.page-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin-bottom:10px; }
.page-hero .crumb{ color:#aeb9d4; font-size:.9rem; }
.page-hero .crumb a:hover{ color:#fff; }
.page-hero .crumb .sep{ margin:0 8px; opacity:.5; }

.prose{ max-width:760px; }
.prose h2{ font-size:1.6rem; margin-top:1.6em; }
.prose p{ color:var(--ink-2); }

.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-band .s-num{ font-family:var(--ff-head); font-weight:700; font-size:2.4rem; color:var(--brand); }
.stat-band .s-lbl{ color:var(--muted); font-size:.92rem; }

.media-split{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.media-split img{ border-radius:var(--r-lg); box-shadow:var(--sh-lg); }

/* team / values */
.value{ display:flex; gap:16px; }
.value .ic{ width:50px; height:50px; flex-shrink:0; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.value h4{ font-size:1.05rem; margin-bottom:4px; }
.value p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ----------------------------- Contact --------------------------------- */
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; gap:16px; align-items:flex-start; }
.contact-card .ic{ width:50px; height:50px; flex-shrink:0; border-radius:14px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.contact-card h4{ font-size:1.02rem; margin-bottom:3px; }
.contact-card p{ margin:0; color:var(--muted); font-size:.93rem; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field label{ display:block; font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:var(--ink); margin-bottom:7px; }
.form-field input,.form-field select,.form-field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  font-family:var(--ff-body); font-size:.96rem; color:var(--ink); background:#fff; transition:.2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);
}
.form-field.full{ grid-column:1/-1; }
.form-field textarea{ min-height:130px; resize:vertical; }

.map-embed{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); height:100%; min-height:340px; }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ----------------------------- Footer ---------------------------------- */
.footer{ background:var(--ink); color:#aeb9d4; padding-top:52px; }
.footer a{ color:#aeb9d4; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:40px; }
.footer-logo img{ height:30px !important; width:auto !important; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p{ color:#9fa9c4; font-size:.9rem; line-height:1.7; max-width:36ch; }
.footer p{ font-size:.92rem; line-height:1.7; }
.footer h5{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-links li{ margin-bottom:11px; font-size:.92rem; }
.footer-contact li{ display:flex; gap:11px; margin-bottom:13px; font-size:.92rem; }
.footer-contact i{ color:var(--brand); margin-top:3px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.footer-social a:hover{ background:var(--brand); color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; }
.footer-bottom .pays{ display:flex; gap:8px; align-items:center; color:#7e89a8; }

/* newsletter */
.newsletter{ display:flex; gap:10px; margin-top:14px; }
.newsletter input{ flex:1; padding:13px 16px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; }
.newsletter input::placeholder{ color:#8b96b5; }
.newsletter input:focus{ outline:none; border-color:var(--brand); }

/* ----------------------------- Utilities ------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem } .mt-4{ margin-top:2.5rem }
.muted{ color:var(--muted); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.in{ opacity:1; transform:none; }
.badge-soft{ display:inline-flex; align-items:center; gap:6px; background:var(--teal-soft); color:#0f766e; padding:5px 12px; border-radius:var(--pill); font-size:.78rem; font-weight:600; }
.partners{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:46px; opacity:.55; }
.partners span{ font-family:var(--ff-head); font-weight:700; font-size:1.3rem; color:var(--ink); letter-spacing:.02em; }

/* ----------------------------- Responsive ------------------------------ */
@media (max-width:1024px){
  .nav-menu{ display:none; }
  .nav-burger{ display:inline-flex; }
  .nav-actions .btn-brand{ display:none; }
  .search-grid{ grid-template-columns:1fr 1fr; }
  .search-submit{ grid-column:1/-1; }
  .results-layout{ grid-template-columns:1fr; }
  .filters-panel{ position:static; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .media-split{ grid-template-columns:1fr; gap:28px; }
  .stat-band{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .gallery{ columns:2; }
}
@media (max-width:640px){
  .section{ padding:54px 0; }
  .topbar .tb-left span:not(:first-child){ display:none; }
  .search-grid{ grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .hero-stats{ gap:24px; }
  .trip-row{ grid-template-columns:1fr; }
  .trip-cta{ text-align:left; align-items:center; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; width:100%; padding-top:14px; border-top:1px solid var(--line); }
  .trip-cta .p-alt{ width:100%; order:3; }
  .trip-cta .btn{ flex-shrink:0; }
  /* mini search bar: stack into one clean column so date/passenger fields & popovers fit */
  .minibar{ margin-top:-18px; padding:12px; }
  .minibar .mini-grid{ grid-template-columns:1fr; gap:12px; }
  .minibar .search-submit{ width:100%; }
  .pax-pop{ min-width:0; }
  .cta-band{ padding:34px 24px; }
  .stat-band{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery{ columns:1; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* =========================================================================
   Komponentë shtesë — për faqen kryesore sipas strukturës sharr-style
   ========================================================================= */

/* Titull seksioni i centruar, uppercase (TOP HOTELET / TOP DESTINACIONET) */
.sec-title{ text-align:center; margin-bottom:34px; }
.sec-title h2{ font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:.02em; text-transform:uppercase; }
.sec-title p{ color:var(--muted); margin:6px auto 0; max-width:620px; }
.sec-title .line{ width:64px; height:3px; background:var(--brand); border-radius:3px; margin:14px auto 0; }

/* Tabs/pills për kategoritë e ofertave */
.offer-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px; }
.offer-cats a{
  font-family:var(--ff-head); font-weight:600; font-size:.88rem; color:var(--ink-2);
  padding:9px 18px; border-radius:var(--pill); border:1.5px solid var(--line-2); background:#fff; transition:.2s;
}
.offer-cats a:hover, .offer-cats a.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* Karta oferte me foto (overlay) si sharr */
.promo{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); display:block; min-height:300px; }
.promo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .5s ease; }
.promo:hover img{ transform:scale(1.07); }
.promo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,32,.85) 8%, rgba(8,14,32,.15) 60%, transparent); }
.promo-body{ position:relative; z-index:2; padding:22px; color:#fff; height:100%; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; }
.promo-body .days{ font-family:var(--ff-head); font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:.02em; }
.promo-body .from{ font-size:.92rem; color:#e7ecf7; margin:4px 0 14px; }
.promo-body .from b{ color:#fff; font-size:1.15rem; }
.promo-body .btn{ align-self:flex-start; }

/* Linja e rregullt — banner */
.regular-line{ position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff; min-height:380px; display:flex; align-items:center; }
.regular-line img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.regular-line::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,14,32,.88) 30%, rgba(8,14,32,.35)); }
.regular-line .rl-inner{ position:relative; z-index:2; padding:48px; max-width:560px; }
.regular-line .kicker{ font-family:var(--ff-head); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.8; font-size:.8rem; }
.regular-line h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); margin:8px 0 6px; }
.regular-line .route{ font-family:var(--ff-head); font-weight:700; font-size:1.2rem; color:var(--brand); background:#fff; display:inline-block; padding:4px 14px; border-radius:var(--pill); margin-bottom:14px; }
.regular-line p{ color:#dbe2f1; }

/* Orari & linjat — listë e thjeshtë */
.route-list{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.route-list a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-family:var(--ff-head); font-weight:500; color:var(--ink); transition:.15s; }
.route-list a:hover{ background:var(--bg-soft); color:var(--brand); }
.route-list a i{ color:var(--brand); }
.route-list a .go{ color:var(--muted); }
.route-list a:hover .go{ color:var(--brand); }

/* Discover band */
.discover{ position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff; min-height:300px; display:flex; align-items:center; text-align:center; }
.discover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.discover::after{ content:""; position:absolute; inset:0; background:rgba(8,14,32,.6); }
.discover .d-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; padding:50px 24px; }
.discover h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); }
.discover p{ color:#dbe2f1; }

/* Call center */
.callcenter{ background:var(--ink); color:#fff; text-align:center; padding:46px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.callcenter .kicker{ font-family:var(--ff-head); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); font-size:.82rem; }
.callcenter h2{ color:#fff; font-size:2rem; margin:6px 0 4px; }
.callcenter .hours{ color:#aeb9d4; margin-bottom:20px; }
.callcenter .nums{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; }
.callcenter .nums a{ font-family:var(--ff-head); font-weight:700; font-size:1.5rem; color:#fff; display:inline-flex; align-items:center; gap:10px; }
.callcenter .nums a i{ color:var(--brand); }
/* country contact cards */
.callcenter .cc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:920px; margin:10px auto 0; }
.cc-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:24px 20px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .25s var(--ease-out), border-color .25s, background .25s;
}
.cc-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.1); }
.cc-country{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-family:var(--ff-head); font-weight:700; font-size:.92rem; letter-spacing:.08em;
  text-transform:uppercase; color:#fff;
}
.cc-country i{ color:var(--brand); }
.cc-nums{ display:flex; flex-direction:column; gap:11px; }
.cc-nums a{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:700; font-size:1.3rem; color:#fff;
  transition:transform .25s var(--ease-spring), color .2s;
}
.cc-nums a i{ color:var(--brand); }
.cc-nums a:hover{ color:var(--brand); transform:translateY(-3px); }

/* "ose shiko të gjitha" link nën formë */
.search-alt{ text-align:center; padding:4px 0 10px; }
.search-alt a{ color:var(--brand); font-weight:600; font-size:.9rem; }
.search-alt a:hover{ text-decoration:underline; }

/* Footer legal (sharr-style) */
.footer-legal{ text-align:center; max-width:760px; margin:0 auto; padding-bottom:40px; }
.footer-legal h5{ color:#fff; }
.footer-linkrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:26px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.footer-linkrow a{ font-size:.92rem; }
.footer-social.center{ justify-content:center; }

@media (max-width:1024px){
  .route-list{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .callcenter .cc-cards{ grid-template-columns:1fr; max-width:420px; }
}
@media (max-width:640px){
  .regular-line .rl-inner{ padding:30px 22px; }
  .callcenter .nums{ gap:18px; }
}

/* =========================================================================
   FAQJA KRYESORE — Hero full-image me header transparent + widget tabs
   (identik me sharrtravel.com)
   ========================================================================= */
.home-hero{ position:relative; min-height:780px; color:#fff; background:#0e1b39; overflow:hidden; }
.home-hero .hh-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.home-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,16,38,.62) 0%, rgba(10,16,38,.32) 38%, rgba(10,16,38,.55) 100%); }
.home-hero > *{ position:relative; z-index:2; }

/* Header i përbashkët: navy si default; transparent kur është mbi foton e hero-s */
.site-header{ position:relative; z-index:40; background:var(--ink); color:#fff; }
.site-header .hh-cc, .site-header .hh-cc .cc-num, .site-header .hh-toplinks{ color:#fff; }
.home-hero .site-header{ background:transparent; z-index:50; }
.hh-menu > li.active > a{ color:var(--brand); opacity:1; }
.hh-toplinks a.active{ color:var(--brand); opacity:1; }
/* drawer-i bëhet fëmijë i .home-hero → rikthe position:fixed (që .home-hero > * e prish) + z-index */
.home-hero .nav-drawer-backdrop{ position:fixed; inset:0; z-index:1000; }
.home-hero .nav-drawer{ position:fixed; z-index:1001; }

/* top bar (overlay) */
.hh-top{ padding-top:16px; }
.hh-top .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.2); }
.hh-cc{ display:flex; align-items:center; gap:10px; }
.hh-cc .cc-ic{ width:29px; height:29px; border-radius:50%; border:1px solid rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; font-size:.82rem; }
.hh-cc .cc-label{ font-family:var(--ff-head); font-weight:600; letter-spacing:.12em; font-size:.68rem; opacity:.8; }
.hh-cc .cc-num{ font-family:var(--ff-head); font-weight:700; font-size:.88rem; }
.hh-toplinks{ display:flex; align-items:center; gap:3px; font-family:var(--ff-head); font-weight:500; font-size:.8rem; }
.hh-toplinks a{ color:#fff; padding:0 6px; opacity:.88; transition:.2s; } .hh-toplinks a:hover{ color:var(--brand); opacity:1; }
.hh-toplinks .dot{ opacity:.4; font-size:.65rem; }

/* main nav (overlay) */
.hh-nav{ position:relative; z-index:40; }
.hh-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; }
.hh-logo img{ height:32px; width:auto; filter:brightness(0) invert(1); }
.hh-menu{ display:flex; align-items:center; gap:20px; }
.hh-menu > li{ position:relative; }
.hh-menu > li > a{ display:inline-flex; align-items:center; gap:5px; color:#fff; font-family:var(--ff-head); font-weight:500; font-size:.88rem; padding:6px 0; opacity:.95; transition:.2s; }
.hh-menu > li > a:hover{ color:var(--brand); opacity:1; }
.hh-menu .nav-drop{ top:calc(100% + 8px); }
.hh-actions{ display:flex; align-items:center; gap:8px; }
.hh-soc{ width:33px; height:33px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.92rem; transition:.2s; }
.hh-soc:hover{ background:var(--brand-strong); transform:translateY(-2px); }
.hh-burger{ display:none; background:none; border:0; color:#fff; font-size:1.7rem; }

/* center title */
.hh-title{ text-align:center; padding:54px 0 24px; }
.hh-title h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:700; letter-spacing:.02em; text-transform:uppercase; }

/* search panels (një për çdo tab) */
.hh-panel{ display:none; }
.hh-panel.active{ display:block; }
.hh-head{ margin-bottom:14px; }
.hh-head label{ display:block; font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--ink); }
.hh-head .sub{ font-size:.8rem; color:var(--muted); }

/* search widget — tabs */
.hh-search{ max-width:1180px; margin:0 auto; padding:0 20px; position:relative; z-index:30; }
.hh-tabs{ display:flex; align-items:flex-end; gap:6px; padding-left:54px; position:relative; }
.hh-tabs .tab-search{ position:absolute; left:0; bottom:14px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; }
.hh-tab{ display:inline-flex; align-items:center; gap:9px; background:transparent; border:0; color:#fff; font-family:var(--ff-head); font-weight:600; font-size:1rem; padding:14px 26px; border-radius:12px 12px 0 0; transition:.2s; cursor:pointer; }
.hh-tab i{ font-size:1.15rem; }
.hh-tab:hover{ background:rgba(255,255,255,.12); }
.hh-tab.active{ background:#fff; color:var(--ink); }
.hh-tab.active i{ color:var(--brand); }

/* search widget — card */
.hh-card{ background:#fff; border-radius:0 14px 14px 14px; box-shadow:var(--sh-lg); padding:26px 24px; }
.hh-fields{ display:flex; align-items:flex-end; gap:16px; }
.hh-f{ flex:1 1 0; min-width:0; }
.hh-f > label{ display:block; font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--ink); margin:0 0 1px; }
.hh-f > .sub{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:9px; }
.hh-f select, .hh-f input{ width:100%; border:1.5px solid #dde3ee; border-radius:8px; padding:13px 14px; font-family:var(--ff-body); font-size:.96rem; color:var(--ink); background:#fff; outline:none; transition:.2s; appearance:none; }
.hh-f select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2399a' %3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:32px; cursor:pointer; }
.hh-f select:focus, .hh-f input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.hh-f.num{ flex:0 0 92px; }
.hh-sep{ flex:0 0 auto; color:var(--brand); font-size:1.5rem; padding-bottom:12px; align-self:flex-end; }
.hh-kerko{ flex:0 0 auto; align-self:flex-end; padding:14px 30px; font-size:1rem; }
.hh-alt{ padding:14px 0 0; }
.hh-alt a{ color:var(--brand); font-family:var(--ff-head); font-weight:600; font-size:.95rem; }
.hh-alt a:hover{ text-decoration:underline; }

/* bottom tagline */
.hh-tagline{ text-align:center; padding:56px 0 46px; }
.hh-tagline h1{ color:#fff; font-size:clamp(1.9rem,4.6vw,3.4rem); font-weight:700; text-transform:uppercase; letter-spacing:.01em; margin:0; text-shadow:0 2px 18px rgba(0,0,0,.3); }

@media (max-width:1100px){
  .hh-menu{ display:none; }
  .hh-burger{ display:inline-flex; }
  .hh-toplinks{ display:none; }
  .hh-fields{ flex-wrap:wrap; }
  .hh-f{ flex:1 1 30%; }
  .hh-f.num{ flex:1 1 30%; }
  .hh-kerko{ flex:1 1 100%; }
  .hh-sep{ display:none; }
}
@media (max-width:640px){
  .home-hero{ min-height:auto; }
  .hh-tabs{ padding-left:0; flex-wrap:wrap; }
  .hh-tab{ padding:11px 16px; font-size:.9rem; }
  .hh-card{ border-radius:14px; }
  .hh-f{ flex:1 1 100%; }
  .hh-cc .cc-label{ display:none; }

  /* homepage search: clean 2x2 tab grid (no broken folder-tabs) + fully rounded card */
  .searchbar{ margin-top:-34px; }
  .searchbar .hh-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .searchbar .hh-tab{ justify-content:center; border-radius:12px; padding:12px 10px; font-size:.92rem; }
  .searchbar .hh-tab.active{ box-shadow:0 8px 22px -12px rgba(0,0,0,.45); }
  .searchbar .hh-card{ border-radius:18px; margin-top:10px; padding:18px 16px; }
}

/* =========================================================================
   Date picker shqip (custom, pa librari)
   ========================================================================= */
.datepicker{ position:relative; }
.dp-input{ width:100%; display:flex; align-items:center; gap:10px; border:1.5px solid #dde3ee; border-radius:8px;
  padding:13px 14px; background:#fff; font-family:var(--ff-body); font-size:.96rem; color:var(--ink); cursor:pointer; text-align:left; transition:.2s; }
.dp-input:hover{ border-color:var(--brand); }
.dp-input > i{ color:var(--brand); font-size:1.05rem; flex-shrink:0; }
.dp-input .dp-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-input .dp-text.placeholder{ color:#9aa3b2; }
.dp-input .dp-caret{ margin-left:auto; color:var(--muted); font-size:.8rem; }
.datepicker.open .dp-input{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

.dp-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:200; width:264px; max-width:88vw; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-lg); padding:13px; display:none; }
.datepicker.open .dp-pop{ display:block; animation:dpIn .16s ease; }
@keyframes dpIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.dp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dp-title{ font-family:var(--ff-head); font-weight:600; color:var(--ink); font-size:.88rem; }
.dp-nav{ width:27px; height:27px; border-radius:7px; border:1px solid var(--line-2); background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.82rem; transition:.15s; }
.dp-nav:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.dp-week{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.dp-week span{ text-align:center; font-size:.62rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
.dp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.dp-day{ aspect-ratio:1; border:0; background:none; border-radius:7px; font-family:var(--ff-body); font-size:.8rem;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; }
.dp-day:hover{ background:var(--brand-soft); color:var(--brand); }
.dp-day.out{ color:#c3cad6; }
.dp-day.today{ box-shadow:inset 0 0 0 1.5px var(--line-2); font-weight:700; }
.dp-day.selected{ background:var(--brand); color:#fff; font-weight:600; box-shadow:0 4px 10px var(--brand-glow); }
.dp-day.selected:hover{ background:var(--brand-strong); color:#fff; }
.dp-day.past{ color:#d6dbe4; cursor:not-allowed; pointer-events:none; }
.dp-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.dp-foot button{ background:none; border:0; font-family:var(--ff-head); font-size:.78rem; font-weight:600; cursor:pointer; }
.dp-foot .dp-today-btn{ color:var(--brand); }
.dp-foot .dp-clear{ color:var(--muted); }
.dp-foot button:hover{ text-decoration:underline; }

/* =========================================================================
   ███  MODERN 2026 LAYER  ███
   Glassmorphism · aurora gradients · kinetic type · scroll reveals ·
   micro-interactions. Additive + scoped overrides — pure CSS, GPU-only
   (transform/opacity), respects prefers-reduced-motion. Stack unchanged.
   ========================================================================= */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --grad-brand: linear-gradient(120deg,#ED1B23 0%, #ff5a3c 100%);
  --grad-ink: linear-gradient(120deg,#0e1b39 0%, #1f2f5e 60%, #2a3f73 100%);
  --glass: rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.55);
  --sh-glow: 0 24px 70px -18px rgba(237,27,35,.45);
  --sh-float: 0 30px 80px -24px rgba(14,27,57,.45);
}

/* ---- Headings: tighter, more confident ---- */
h1,h2,h3{ letter-spacing:-.018em; }

/* ---------------- Scroll-reveal engine ---------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px) scale(.985);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity;
}
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal="blur"]{ filter:blur(14px); }
[data-reveal].in{
  opacity:1; transform:none; filter:none;
}
/* keep legacy fade-up working with the new observer too */
.fade-up{ transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ---------------- Buttons: sheen sweep + spring ---------------- */
.btn{ position:relative; overflow:hidden; transition:transform .25s var(--ease-spring), box-shadow .3s var(--ease-out), background .25s ease, color .25s ease; }
.btn::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease-out); pointer-events:none;
}
.btn:hover::after{ left:130%; }
.btn-brand:hover{ transform:translateY(-3px); box-shadow:var(--sh-glow); }
.btn-dark:hover{ transform:translateY(-3px); box-shadow:0 22px 50px -16px rgba(14,27,57,.6); }

/* =========================================================================
   HERO 3 — inset rounded image card, clean & compact
   ========================================================================= */
.hero3{ padding:0; }
.hero3-card{
  position:relative; width:100%; margin:0; min-height:620px;
  border-radius:0; overflow:hidden;
  background:#0a1024; box-shadow:none; isolation:isolate;
}
/* carousel: stack all slides in one grid cell, crossfade between them */
.hero3-slides{ display:grid; }
.hero3-slide{
  grid-area:1 / 1; position:relative; min-height:620px;
  display:flex; align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 1s var(--ease-out), visibility 1s var(--ease-out);
}
.hero3-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.hero3-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1.06); animation:heroKen 24s ease-in-out infinite alternate;
}
@keyframes heroKen{ from{ transform:scale(1.06); } to{ transform:scale(1.14) translate3d(-1%,-1.5%,0); } }
.hero3-shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,12,30,.86) 0%, rgba(8,12,30,.55) 38%, rgba(8,12,30,.05) 70%),
             linear-gradient(0deg, rgba(8,12,30,.5), transparent 40%);
}
.hero3-content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:140px 20px 60px; }
.hero3-content > *{ max-width:620px; }
.hero3-pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  padding:8px 16px; border-radius:var(--pill); font-family:var(--ff-head);
  font-weight:600; font-size:.8rem; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero3-pill i{ color:var(--gold); }
.hero3-title{
  color:#fff; font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; font-weight:700;
  letter-spacing:-.025em; margin:0 0 16px; text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero3-title .grad{
  background:linear-gradient(100deg,#ffd0a8 0%, #ED1B23 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#ED1B23;
}
.hero3-sub{ color:#e3e8f5; font-size:clamp(1rem,1.4vw,1.15rem); max-width:46ch; margin:0 0 26px; }
.hero3-cta{ box-shadow:var(--sh-glow); }
.hero3-cta i{ transition:transform .3s var(--ease-out); }
.hero3-cta:hover i{ transform:translateX(5px); }
/* feature strip in a glass bar at the card bottom */
.hero3-features{
  position:absolute; left:clamp(28px,5vw,64px); bottom:26px; z-index:2;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:13px 22px; border-radius:16px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.hero3-features span{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--ff-head); font-weight:600; font-size:.86rem; white-space:nowrap; }
.hero3-features i{ color:var(--brand); font-size:1.05rem; }

/* hero entrance (no per-word complexity — single clean rise) */
.hero3-content > *{ opacity:0; transform:translateY(22px); animation:heroRise .8s var(--ease-out) forwards; }
.hero3-pill{ animation-delay:.05s; } .hero3-title{ animation-delay:.15s; }
.hero3-sub{ animation-delay:.28s; } .hero3-cta{ animation-delay:.4s; }
.hero3-features{ opacity:0; transform:translateY(22px); animation:heroRise .8s var(--ease-out) .5s forwards; }
@keyframes heroRise{ to{ opacity:1; transform:none; } }

/* =========================================================================
   SEARCH BAR — compact glass widget, overlaps the hero bottom
   ========================================================================= */
.searchbar{ position:relative; z-index:40; margin-top:-78px; padding:0 0 8px; scroll-margin-top:110px; }
.searchbar .hh-search{ max-width:none; padding:0; }
.searchbar .hh-tabs{ padding-left:0; gap:6px; }
.searchbar .hh-tabs .tab-search{ display:none; }
.searchbar .hh-tab{ color:#fff; background:rgba(14,27,57,.55); border-radius:12px 12px 0 0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.searchbar .hh-tab:hover{ background:rgba(14,27,57,.7); }
.searchbar .hh-tab.active{ background:#fff; color:var(--ink); box-shadow:0 -6px 20px -10px rgba(0,0,0,.3); }
.searchbar .hh-tab.active i{ color:var(--brand); }
.searchbar .hh-card{
  border-radius:0 18px 18px 18px; box-shadow:var(--sh-float);
  background:rgba(255,255,255,.9); border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.searchbar .hh-panel{ animation:panelIn .35s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

@media (max-width:860px){
  .hero3{ padding:0; }
  .hero3-card{ min-height:520px; border-radius:0; }
  .hero3-slide{ min-height:520px; align-items:center; }
  /* darker overlay so centered text stays readable over any image */
  .hero3-shade{
    background:linear-gradient(90deg, rgba(8,12,30,.78) 0%, rgba(8,12,30,.45) 60%, rgba(8,12,30,.2) 100%),
               linear-gradient(0deg, rgba(8,12,30,.6), transparent 55%);
  }
  /* balanced padding: clears the fixed navbar on top and the overlapping search bar at the bottom */
  .hero3-content{ padding:96px 22px 96px; text-align:left; }
  .hero3-content > *{ max-width:100%; }
  .hero3-title{ font-size:clamp(2rem,8vw,2.6rem); line-height:1.1; overflow-wrap:break-word; }
  .hero3-sub{ max-width:100%; }
  .hero3-features{ position:static; margin:0 22px 26px; left:auto; bottom:auto; gap:12px 16px; }
  .hero3-features span{ font-size:.82rem; }
}

@media (max-width:480px){
  .hero3-card, .hero3-slide{ min-height:460px; }
  .hero3-content{ padding:88px 18px 88px; }
  .hero3-title{ font-size:clamp(1.7rem,8.5vw,2.2rem); }
}

/* =========================================================================
   Section polish + modern section heading
   ========================================================================= */
.section{ position:relative; }
.sec-title h2{ position:relative; display:inline-block; }
.sec-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:var(--ff-head); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand);
}
.sec-eyebrow::before{ content:""; width:26px; height:2px; background:var(--grad-brand); border-radius:2px; }

/* ---- Slogan band (Tradita) ---- */
.slogan-band{ text-align:center; }
.slogan-band .sec-eyebrow{ justify-content:center; margin-bottom:14px; }
.slogan-inner{ max-width:820px; margin:0 auto; }
.slogan-title{ font-size:clamp(1.7rem,4.2vw,2.7rem); line-height:1.18; letter-spacing:-.015em; margin:0; }
.slogan-title .grad{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--brand);
}
.slogan-sub{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--muted); margin:14px auto 0; max-width:60ch; }

/* ---- Promo / offer cards: glow lift + kinetic ---- */
.promo{ transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.promo:hover{ transform:translateY(-8px); box-shadow:var(--sh-float); }
.promo .promo-body .btn{ transform:translateY(8px); opacity:.92; transition:.35s var(--ease-out); }
.promo:hover .promo-body .btn{ transform:none; opacity:1; }

/* ---- Cards lift ---- */
.card{ transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s ease; }
.card:hover{ transform:translateY(-10px); box-shadow:var(--sh-float); border-color:transparent; }

/* ---- Destination tiles: zoom + caption rise ---- */
.dest{ transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.dest:hover{ transform:translateY(-6px); box-shadow:var(--sh-float); }
.dest-cap{ transition:transform .4s var(--ease-out); }
.dest:hover .dest-cap{ transform:translateY(-4px); }
.dest::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:0; transition:.4s;
  background:linear-gradient(120deg, rgba(237,27,35,.35), transparent 60%);
}
.dest:hover::before{ opacity:1; }

/* offer category pills */
.offer-cats a{ transition:transform .25s var(--ease-spring), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.offer-cats a:hover{ transform:translateY(-2px); }
.offer-cats a.active{ box-shadow:0 10px 24px -8px var(--brand-glow); }

/* route list rows: slide arrow */
.route-list a .go{ transition:transform .3s var(--ease-out); }
.route-list a:hover .go{ transform:translateX(6px); }
.route-list a{ transition:background .2s, color .2s, padding-left .25s var(--ease-out); }
.route-list a:hover{ padding-left:26px; }

/* marquee strip (destinations ticker) */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:48px; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:12px; font-family:var(--ff-head); font-weight:700; font-size:1.25rem; color:var(--ink); white-space:nowrap; opacity:.75; }
.marquee-item i{ color:var(--brand); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* animated counters band */
.stats2{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat2{ text-align:center; padding:8px; }
.stat2 .n{ font-family:var(--ff-head); font-weight:700; font-size:clamp(2rem,4vw,3rem); background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.stat2 .l{ color:var(--muted); font-size:.9rem; margin-top:6px; }

/* call center: gradient sheen */
.callcenter{ position:relative; overflow:hidden; }
.callcenter::before{ content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(600px 280px at 85% -20%, rgba(237,27,35,.5), transparent 60%), radial-gradient(500px 260px at 10% 120%, rgba(20,184,166,.4), transparent 60%); }
.callcenter > *{ position:relative; }
.callcenter .nums a{ transition:transform .25s var(--ease-spring); }
.callcenter .nums a:hover{ transform:translateY(-3px); }

@media (max-width:900px){ .stats2{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================================
   GNAV — floating pure-glassmorphism header (all pages)
   ========================================================================= */
.gnav{ position:fixed; top:0; left:0; right:0; z-index:90; padding:16px 0; transition:padding .35s var(--ease-out); }
.gnav-bar{
  display:flex; align-items:center; gap:20px; height:62px; padding-inline:14px 14px;
  border-radius:18px;
  background:rgba(12,18,40,.42);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 14px 44px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.gnav.is-float{ padding:10px 0; }
.gnav.is-float .gnav-bar{ background:rgba(12,18,40,.62); box-shadow:0 18px 50px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); }

.gnav-logo{ display:flex; align-items:center; flex-shrink:0; padding-left:6px; }
.gnav-logo img{ height:30px; width:auto; filter:brightness(0) invert(1); transition:transform .3s var(--ease-spring); }
.gnav-logo:hover img{ transform:scale(1.05); }

.gnav-menu{ margin:0 auto; }
.gnav-menu .hh-menu{ display:flex; align-items:center; gap:6px; }
.gnav-menu .hh-menu > li > a{
  display:inline-flex; align-items:center; gap:5px; position:relative;
  color:rgba(255,255,255,.92); font-family:var(--ff-head); font-weight:500; font-size:.9rem;
  padding:9px 14px; border-radius:10px; transition:color .2s, background .2s;
}
.gnav-menu .hh-menu > li > a i{ font-size:.66rem; opacity:.7; }
.gnav-menu .hh-menu > li > a:hover, .gnav-menu .hh-menu > li.active > a{ color:#fff; background:rgba(255,255,255,.1); }
.gnav-menu .hh-menu .nav-drop{
  top:calc(100% + 12px); border-radius:14px; border:1px solid var(--line);
  box-shadow:var(--sh-float); overflow:hidden;
}
.gnav-menu .hh-menu .nav-drop a{ color:var(--ink-2); transition:padding-left .2s var(--ease-out), background .2s, color .2s; }
.gnav-menu .hh-menu .nav-drop a:hover{ padding-left:18px; background:var(--bg-soft); color:var(--brand); }

.gnav-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.gnav-phone{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-family:var(--ff-head); font-weight:600; font-size:.85rem; opacity:.92; transition:.2s; }
.gnav-phone i{ color:var(--brand); }
.gnav-phone:hover{ opacity:1; }
.gnav-actions .hh-burger{ display:none; background:none; border:0; color:#fff; font-size:1.7rem; padding:0 4px; }

@media (max-width:1024px){
  .gnav{ padding-inline:12px; }
  .gnav-menu, .gnav-phone, .gnav-cta{ display:none; }
  .gnav-bar{ justify-content:space-between; gap:12px; background:rgba(12,18,40,.7); }
  .gnav.is-float .gnav-bar{ background:rgba(12,18,40,.82); }
  .gnav-actions{ margin-left:auto; }
  .gnav-actions .hh-burger{ display:inline-flex; align-items:center; justify-content:center; }
}

@media (max-width:560px){
  .gnav{ padding:10px 12px; }
  .gnav.is-float{ padding:8px 12px; }
  .gnav-bar{ height:54px; padding-inline:14px; gap:8px; border-radius:14px; }
  .gnav-logo{ padding-left:2px; }
  .gnav-logo img{ height:25px; }
  .gnav-actions .hh-burger{ font-size:1.5rem; padding:0; }
}

/* =========================================================================
   Clear the fixed glass header on pages that start with a banner/section
   ========================================================================= */
.results-head{ padding-top:120px; }
.book-page{ padding-top:118px; }

/* =========================================================================
   BOOKING FLOW — steps, details form, summary sidebar, success
   ========================================================================= */
.book-steps{ display:flex; align-items:center; gap:8px; max-width:720px; margin:0 auto 34px; }
.book-step{ display:flex; align-items:center; gap:11px; }
.book-step .num{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-head); font-weight:700; font-size:.95rem;
  background:var(--bg-soft-2); color:var(--muted); border:1.5px solid var(--line-2);
  flex-shrink:0; transition:.35s var(--ease-out);
}
.book-step .lbl{ font-family:var(--ff-head); font-weight:600; font-size:.88rem; color:var(--muted); white-space:nowrap; }
.book-step .bar{ width:100%; min-width:24px; height:2px; background:var(--line-2); border-radius:2px; margin:0 4px; }
.book-step--line{ flex:1; }
.book-step.active .num{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 6px 18px -4px var(--brand-glow); }
.book-step.active .lbl{ color:var(--ink); }
.book-step.done .num{ background:var(--green); color:#fff; border-color:var(--green); }
.book-step.done .lbl{ color:var(--ink); }

.book-layout{ display:grid; grid-template-columns:1fr 360px; gap:26px; align-items:start; }
.book-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:20px; box-shadow:var(--sh-sm); }
.book-card > h3{ font-size:1.12rem; display:flex; align-items:center; gap:9px; margin:0 0 18px; }
.book-card > h3 i{ color:var(--brand); }
.book-note{ font-size:.84rem; color:var(--muted); margin:10px 0 0; display:flex; align-items:center; gap:7px; }
.book-note i{ color:var(--brand); }

/* trip recap strip */
.trip-recap{ display:flex; flex-wrap:wrap; gap:10px 28px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-bottom:22px; }
.trip-recap .it{ display:flex; flex-direction:column; }
.trip-recap .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.trip-recap .v{ font-family:var(--ff-head); font-weight:700; color:var(--ink); font-size:.98rem; }

/* passenger card */
.pax-card{ border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; margin-bottom:14px; }
.pax-card:last-child{ margin-bottom:0; }
.pax-card .pax-hd{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pax-card .pax-hd .pn{ width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-weight:700; font-family:var(--ff-head); font-size:.85rem; }
.pax-card .pax-hd .pt{ font-family:var(--ff-head); font-weight:700; color:var(--ink); font-size:.95rem; }
.pax-card .pax-hd .badge-soft{ margin-left:auto; }
.pax-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 120px; gap:12px; }

/* passport upload */
.file-drop{
  display:flex; align-items:center; gap:14px; margin-top:14px; padding:13px 16px; cursor:pointer;
  border:1.5px dashed var(--line-2); border-radius:var(--r-sm); background:var(--bg-soft);
  transition:border-color .2s, background .2s;
}
.file-drop:hover{ border-color:var(--brand); background:var(--brand-soft); }
.file-drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-drop .fd-ic{ width:40px; height:40px; flex-shrink:0; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-size:1.25rem; }
.file-drop .fd-txt{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.file-drop .fd-txt b{ font-family:var(--ff-head); font-size:.9rem; color:var(--ink); }
.file-drop .fd-name{ font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop .fd-btn{ margin-left:auto; flex-shrink:0; font-family:var(--ff-head); font-weight:600; font-size:.82rem; color:var(--brand); border:1.5px solid var(--line-2); border-radius:var(--pill); padding:8px 16px; background:#fff; transition:.2s; }
.file-drop:hover .fd-btn{ border-color:var(--brand); }
.file-drop.has-file{ border-style:solid; border-color:var(--green); background:var(--teal-soft); }
.file-drop.has-file .fd-ic{ background:#d6f5ec; color:var(--green); }
.file-drop.has-file .fd-name{ color:var(--green); font-weight:600; }
@media (max-width:640px){ .file-drop .fd-btn{ display:none; } }

/* summary sidebar */
.book-summary{ position:sticky; top:108px; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
.book-summary .total{ background:linear-gradient(120deg,#0e1b39,#1f2f5e); color:#fff; padding:20px 22px; }
.book-summary .total .lab{ font-size:.8rem; color:#aeb9d4; }
.book-summary .total .amt{ font-family:var(--ff-head); font-weight:700; font-size:2.1rem; line-height:1.1; }
.book-summary .rows{ padding:16px 22px; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:.9rem; border-bottom:1px dashed var(--line); }
.sum-row:last-child{ border-bottom:0; }
.sum-row .k{ color:var(--muted); } .sum-row .v{ font-weight:600; color:var(--ink); text-align:right; }
.sum-block{ padding:16px 22px; border-top:1px solid var(--line); }
.sum-block label.h{ display:block; font-family:var(--ff-head); font-weight:600; font-size:.82rem; color:var(--ink); margin-bottom:9px; }
.pay-toggle{ display:flex; gap:8px; }
.pay-toggle button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:var(--r-sm); border:1.5px solid var(--line-2); background:#fff; font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:var(--ink-2); transition:.2s; }
.pay-toggle button.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.book-actions{ padding:18px 22px 22px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); }

/* success */
.book-success{ display:none; max-width:660px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:52px 32px; box-shadow:var(--sh-lg); }
.book-success .ok-ic{ width:88px; height:88px; border-radius:50%; background:var(--teal-soft); color:var(--green); display:grid; place-items:center; font-size:2.8rem; margin:0 auto 22px; animation:okPop .55s var(--ease-spring); }
@keyframes okPop{ 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
.book-success h2{ font-size:1.7rem; margin-bottom:6px; }
.book-success p{ color:var(--muted); }
.book-code{ display:inline-block; font-family:var(--ff-head); font-weight:700; font-size:1.3rem; letter-spacing:.06em; color:var(--brand); background:var(--brand-soft); padding:11px 24px; border-radius:var(--pill); margin:10px 0 22px; }
.book-recap-mini{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; padding:20px 0; margin:6px 0 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; }

@media (max-width:900px){
  .book-layout{ grid-template-columns:1fr; }
  .book-summary{ position:static; }
}
@media (max-width:640px){
  .pax-grid{ grid-template-columns:1fr 1fr; }
  .book-step .lbl{ display:none; }
}

/* =========================================================================
   OFFER DETAILS — oferta.php
   ========================================================================= */
.offer-layout{ display:grid; grid-template-columns:1fr 350px; gap:30px; align-items:start; }
.offer-figure{ position:relative; border-radius:var(--r-lg); overflow:hidden; margin-bottom:26px; box-shadow:var(--sh); }
.offer-figure img{ width:100%; height:auto; max-height:460px; object-fit:cover; display:block; }
.offer-figure .card-badge{ font-size:.95rem; padding:8px 16px; }
.offer-block{ margin-bottom:30px; }
.offer-block > h2{ font-size:1.35rem; display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.offer-block > h2 i{ color:var(--brand); }
.offer-incl{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; }
.offer-incl li{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; font-size:.94rem; color:var(--ink-2); }
.offer-incl li i{ margin-top:3px; font-size:1rem; flex-shrink:0; }
.offer-incl li i.yes{ color:var(--green); }
.offer-incl li i.no{ color:var(--muted); }
.offer-itin .itin-item{ position:relative; padding:0 0 22px 32px; }
.offer-itin .itin-item::before{ content:""; position:absolute; left:7px; top:5px; bottom:-2px; width:2px; background:var(--line-2); }
.offer-itin .itin-item:last-child::before{ display:none; }
.offer-itin .itin-item .dot{ position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.offer-itin .itin-item h4{ font-size:1rem; margin:0 0 3px; }
.offer-itin .itin-item p{ margin:0; color:var(--muted); font-size:.92rem; }

.offer-buy{ position:sticky; top:108px; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
.offer-buy .ob-head{ padding:22px; }
.offer-buy .ob-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:#fff; font-family:var(--ff-head); font-weight:600; font-size:.78rem; padding:5px 12px; border-radius:var(--pill); margin-bottom:12px; }
.offer-buy .ob-price{ display:flex; align-items:baseline; gap:10px; }
.offer-buy .ob-old{ text-decoration:line-through; color:var(--muted); font-size:1.05rem; }
.offer-buy .ob-new{ font-family:var(--ff-head); font-weight:700; font-size:2.3rem; color:var(--brand); line-height:1; }
.offer-buy .ob-per{ color:var(--muted); font-size:.9rem; }
.offer-buy .ob-rows{ padding:6px 22px 8px; }
.offer-buy .ob-actions{ padding:14px 22px 22px; display:flex; flex-direction:column; gap:10px; }
.offer-buy .ob-trust{ padding:14px 22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; font-size:.85rem; color:var(--muted); }
.offer-buy .ob-trust span{ display:flex; align-items:center; gap:9px; }
.offer-buy .ob-trust i{ color:var(--green); }

@media (max-width:900px){
  .offer-layout{ grid-template-columns:1fr; }
  .offer-buy{ position:static; }
}
@media (max-width:640px){ .offer-incl{ grid-template-columns:1fr; } }

/* ---------------- Reduced motion: turn it all off ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero3-img{ animation:none; transform:scale(1.04); }
  .hero3-content > *, .hero3-features{ opacity:1 !important; transform:none !important; animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
}