/* ============================================================
   FLEXYPASS — SITE STYLESHEET
   ------------------------------------------------------------
   Adapted from the flexcitypass-template city landing page.
   Palette: blue #1C83ED · CTA orange #f97316.

   TABLE OF CONTENTS
     1.  Reset & design tokens (:root variables)
     2.  Base elements (body, headings, links, images)
     3.  Buttons (.btn)
     4.  Promo bar
     5.  Header / navigation
     6.  Language dropdown
     7.  Mobile hamburger menu
     8.  Hero + slideshow
     9.  Trust strip
     10. Booking module (widget + tier picker)
     11. Layout grid (main + sticky rail)
     12. Destination gallery
     13. Attractions browser (filters + cards)
     14. Savings comparison
     15. Why us / offer / steps / info cards
     16. Reviews
     17. FAQ
     18. Payment methods
     19. Mobile sticky bottom bar
     20. Footer
     21. Responsive breakpoints
     22. Simple content pages (Privacy, Error, ...)
   ============================================================ */

/* ------------------------------------------------------------
   1. RESET & DESIGN TOKENS
   Change colors, radii and fonts here — they cascade site-wide.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root{
  --teal:#1C83ED; --teal-dark:#1567c4; --teal-soft:#e8f2fe; --teal-ink:#0e3a6b;
  --gold:#6EAEEF; --gold-dark:#3f8fe0; --gold-soft:#e8f2fe; --star:#f5a623;
  --cta:#f97316; --cta-dark:#e05e06;
  --ink:#0e2a47; --ink-2:#3a4d63; --ink-3:#6b7a8c; --ink-4:#9aa6b4;
  --bg:#ffffff; --bg-2:#f4f8fd; --bg-3:#eaf1fb; --line:#e6edf5; --line-2:#d8e2ee;
  --green:#16a34a; --green-soft:#dcfce7;
  --shadow-sm:0 2px 12px rgba(16,42,60,.06); --shadow:0 14px 44px rgba(16,42,60,.12); --shadow-lg:0 30px 80px rgba(16,42,60,.20);
  --r:14px; --r-sm:12px; --r-lg:22px; --r-xl:30px; --pill:999px;
  --r-btn:12px; /* unified button radius */
  --font:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --hilite-bg:#fffaf2; --hilite-bd:#f3e2c6; --tag-bg:#fff0e0; --tag-fg:#b15c00;
}

/* ------------------------------------------------------------
   2. BASE ELEMENTS
   ------------------------------------------------------------ */
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); font-size:16px; line-height:1.6; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ max-width:100%; display:block; }
a{ color:var(--teal-dark); text-decoration:none; } a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ color:var(--ink); line-height:1.1; letter-spacing:-.02em; font-weight:800; margin:0 0 14px; }
h1{ font-size:clamp(36px,5vw,60px); } h2{ font-size:clamp(24px,3vw,34px); } h3{ font-size:clamp(18px,1.8vw,22px); }
p{ margin:0 0 14px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } html{ scroll-behavior:auto; } }

/* ------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; font-family:var(--font); font-size:15px; font-weight:700; border-radius:var(--r-btn); border:2px solid transparent; cursor:pointer; transition:all .2s ease; text-decoration:none; line-height:1; white-space:nowrap; }
.btn:focus-visible{ outline:3px solid var(--cta); outline-offset:2px; }
.btn--cta{ background:var(--cta); color:#fff !important; box-shadow:0 8px 20px rgba(249,115,22,.35); }
.btn--cta:hover{ background:var(--cta-dark); transform:translateY(-2px); color:#fff !important; text-decoration:none; }
.btn--lg{ padding:14px 28px; font-size:15.5px; }

/* ------------------------------------------------------------
   4. PROMO BAR
   ------------------------------------------------------------ */
.promo{ background:var(--ink); color:#fff; font-size:13.5px; padding:10px 24px; text-align:center; font-weight:600; }
.promo strong{ color:var(--gold); }

/* ------------------------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------------------------ */
.header{ position:sticky; top:0; z-index:400; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav{ max-width:1280px; margin:0 auto; padding:0 30px; display:flex; align-items:center; gap:20px; height:72px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:21px; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.brand b{ color:var(--teal); } .logomark{ flex-shrink:0; }
.nav-links{ display:flex; gap:24px; list-style:none; margin:0 auto; }
.nav-links a{ color:var(--ink-2); font-weight:600; font-size:14.5px; } .nav-links a:hover{ color:var(--teal-dark); text-decoration:none; }
.nav-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; margin-left:auto; }

/* ------------------------------------------------------------
   6. LANGUAGE & CURRENCY DROPDOWNS
   .curr-* mirrors .lang-* exactly — same widget, different data.
   ------------------------------------------------------------ */
.lang-dd, .curr-dd{ position:relative; }
.lang-switch, .curr-switch{ display:inline-flex; align-items:center; gap:8px; background:var(--teal-soft); color:var(--teal-ink); font-weight:700; font-size:14.5px; padding:9px 15px; border-radius:var(--r-btn); cursor:pointer; border:none; font-family:var(--font); }
.lang-switch svg, .curr-switch svg{ width:15px; height:15px; } .lang-switch .chev, .curr-switch .chev{ transition:transform .2s ease; }
.lang-dd.open .chev, .curr-dd.open .chev{ transform:rotate(180deg); }
.lang-menu, .curr-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:7px; display:none; z-index:500; }
.lang-dd.open .lang-menu, .curr-dd.open .curr-menu{ display:block; }
.lang-menu a, .curr-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); color:var(--ink); font-weight:600; font-size:14.5px; }
.lang-menu a:hover, .curr-menu a:hover{ background:var(--teal-soft); color:var(--teal-dark); text-decoration:none; }
.lang-menu a.cur, .curr-menu a.cur{ background:var(--teal-soft); color:var(--teal-dark); }

/* ------------------------------------------------------------
   7. MOBILE HAMBURGER MENU
   Hamburger is drawn in pure CSS so theme rules can't strip it.
   ------------------------------------------------------------ */
.menu-btn{ display:none; width:40px; height:40px; border:none; background:var(--teal-soft); color:var(--teal-ink); border-radius:var(--r-btn); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }
.menu-btn .bars{ position:relative; display:block; width:18px; height:2.5px; border-radius:2px; background:var(--teal-ink) !important; }
.menu-btn .bars::before, .menu-btn .bars::after{ content:""; position:absolute; left:0; width:18px; height:2.5px; border-radius:2px; background:var(--teal-ink) !important; }
.menu-btn .bars::before{ top:-6px; }
.menu-btn .bars::after{ top:6px; }
.mobmenu{ display:none; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 10px 24px rgba(16,42,60,.08); }
.mobmenu.open{ display:block; }
.mobmenu a{ display:block; padding:14px 18px; font-weight:700; font-size:15px; color:var(--ink); border-top:1px solid var(--line); }
.mobmenu a:hover{ background:var(--teal-soft); color:var(--teal-dark); text-decoration:none; }

/* ------------------------------------------------------------
   8. HERO + AUTO-FADING SLIDESHOW
   ------------------------------------------------------------ */
.hero{ position:relative; padding:56px 30px; overflow:visible; }
.hero-photo{ position:absolute; inset:0; overflow:hidden; }
.hero-photo .slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }
.hero-photo .slide.on{ opacity:1; }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(8,28,52,.84),rgba(14,42,71,.44)); }
.hero-in{ position:relative; z-index:2; max-width:1280px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:start; }
.hero-copy{ color:#fff; padding-top:6px; }
.hero-offer{ display:inline-flex; align-items:center; gap:9px; background:var(--teal); color:#fff; font-size:13px; font-weight:800; padding:7px 15px; border-radius:var(--pill); margin-bottom:18px; }
.hero-offer svg{ width:15px; height:15px; }
.hero-copy h1{ color:#fff; margin-bottom:14px; text-shadow:0 2px 14px rgba(0,0,0,.32); }
.hero-sub{ font-size:17px; color:rgba(255,255,255,.95); margin-bottom:18px; line-height:1.5; max-width:560px; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.hero-sub strong{ color:#fff; }
.hero-benefits{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0 0 18px; }
.hero-benefits li{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; font-weight:600; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.hero-benefits li svg{ width:19px; height:19px; color:#7ee2a0; flex-shrink:0; margin-top:3px; }
.hero-benefits li b{ color:#ffd9b0; }
.hero-rating{ display:flex; align-items:center; gap:9px; font-size:14px; color:rgba(255,255,255,.95); flex-wrap:wrap; }
.hero-rating .stars{ display:flex; gap:1px; } .hero-rating .stars svg{ width:16px; height:16px; color:var(--star); }
.hero-rating b{ color:#fff; }
.hero-guar{ display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); }
.hero-guar .g{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.96); }
.hero-guar .g svg{ width:18px; height:18px; color:#fff; flex-shrink:0; }

/* ------------------------------------------------------------
   9. TRUST STRIP (under hero)
   ------------------------------------------------------------ */
.truststrip{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.truststrip-in{ max-width:1280px; margin:0 auto; padding:16px 30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; }
.tst{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.tst svg{ width:18px; height:18px; color:var(--teal); flex-shrink:0; }
.tst b{ color:var(--ink); }

/* ------------------------------------------------------------
   10. BOOKING MODULE (compact widget + tier picker)
   ------------------------------------------------------------ */
.bookslot{ position:relative; z-index:10; } /* card may overflow the locked hero without pushing it */
.bookcard{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px; }
.bookcard.floating{ position:fixed; z-index:350; }
.bookcard.flash{ box-shadow:0 0 0 3px var(--cta), var(--shadow-lg); transition:box-shadow .3s ease; }
.bc-title{ font-size:17px; font-weight:800; color:var(--ink); margin-bottom:12px; }
.bc-field{ margin-bottom:11px; }
.bc-flabel{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.bc-date{ width:100%; min-width:0; }
.bc-date input{ display:block; width:100%; max-width:100%; min-width:0; height:42px; appearance:none; -webkit-appearance:none; font-family:var(--font); font-size:13.5px; font-weight:600; color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; }
.bc-date input::-webkit-date-and-time-value{ text-align:left; }
.bc-date input:focus{ outline:none; border-color:var(--teal); }

/* collapsible field (travelers / attractions) */
.accbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; transition:border-color .15s ease; text-align:left; }
.accbtn:hover{ border-color:var(--teal); }
.accbtn .accval{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.accbtn .accval small{ font-weight:600; color:var(--ink-3); }
.accbtn .chev{ width:16px; height:16px; color:var(--ink-3); flex-shrink:0; transition:transform .2s ease; }
.acc.open .accbtn{ border-color:var(--teal); }
.acc.open .accbtn .chev{ transform:rotate(180deg); }
.accpanel{ display:none; margin-top:8px; }
.acc.open .accpanel{ display:block; }
.pax{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pax .p{ min-width:0; }
.pax label{ display:block; font-size:11px; font-weight:700; color:var(--ink-2); margin-bottom:4px; }
.pax .sel{ position:relative; }
.pax select{ width:100%; min-width:0; appearance:none; -webkit-appearance:none; font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-sm); padding:9px 24px 9px 10px; cursor:pointer; }
.pax select:focus{ outline:none; border-color:var(--teal); }
.pax .sel::after{ content:""; position:absolute; right:9px; top:50%; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.bc-note{ font-size:11px; color:var(--ink-3); margin-top:7px; display:flex; align-items:flex-start; gap:6px; line-height:1.4; }
.bc-note svg{ width:13px; height:13px; color:var(--teal); flex-shrink:0; margin-top:1px; }
.bc-div{ height:1px; background:var(--line); margin:11px 0; }
.bc-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; }
.bc-row b{ color:var(--ink); font-weight:700; text-align:right; }
.bc-total{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:10px; padding-top:11px; border-top:1px solid var(--line); }
.bc-total .lbl{ font-size:11.5px; color:var(--ink-3); } .bc-total .amt{ font-size:25px; font-weight:800; color:var(--ink); } .bc-total .amt small{ font-size:12.5px; font-weight:600; color:var(--ink-3); }
.bc-save{ font-size:11.5px; color:var(--green); text-align:right; font-weight:700; line-height:1.4; } .bc-save b{ font-size:13.5px; }
.bc-book{ width:100%; background:var(--cta); color:#fff; border:none; font-family:var(--font); font-size:15.5px; font-weight:800; padding:14px; border-radius:var(--r-btn); cursor:pointer; transition:all .2s ease; margin-top:11px; box-shadow:0 10px 24px rgba(249,115,22,.35); }
.bc-book:hover{ background:var(--cta-dark); transform:translateY(-1px); }
.bc-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.bc-trust span{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--ink-3); }
.bc-trust svg{ width:13px; height:13px; color:var(--green); }

/* tier picker — 3 compact boxes side by side, always visible */
.tsel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding-top:9px; }
.topt{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:13px 6px 11px; border:2px solid var(--line); border-radius:var(--r-btn); background:#fff; cursor:pointer; transition:all .15s ease; font-family:var(--font); min-width:0; }
.topt:hover{ border-color:var(--teal); } .topt.active{ border-color:var(--teal); background:var(--teal-soft); }
.ttl{ display:block; font-size:13px; font-weight:800; color:var(--ink); line-height:1.2; }
.tprice{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
.tprice small{ font-size:10px; font-weight:600; color:var(--ink-3); }
.tbadge2{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:8.5px; font-weight:800; background:var(--teal); color:#fff; padding:2px 7px; border-radius:var(--pill); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }

/* ------------------------------------------------------------
   11. LAYOUT GRID (main column + reserved rail for widget)
   ------------------------------------------------------------ */
.layout{ max-width:1280px; margin:0 auto; padding:54px 30px 90px; display:grid; grid-template-columns:1fr 400px; gap:48px; align-items:start; }
.sec{ margin-bottom:48px; scroll-margin-top:88px; }
.sec h2{ margin-bottom:6px; } .sec-intro{ color:var(--ink-2); font-size:15px; margin-bottom:22px; } .sec-intro strong{ color:var(--ink); }

/* ------------------------------------------------------------
   12. DESTINATION GALLERY
   ------------------------------------------------------------ */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.gcard{ position:relative; border-radius:var(--r); overflow:hidden; grid-column:span 2; aspect-ratio:4/3; background:linear-gradient(135deg,#1c83ed,#0e3a6b); }
.gcard:nth-child(1), .gcard:nth-child(2){ grid-column:span 3; aspect-ratio:16/9; }
.gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gcard:hover img{ transform:scale(1.05); }
.gname{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 13px; background:linear-gradient(transparent,rgba(4,16,32,.78)); color:#fff; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.gname small{ display:block; font-size:11.5px; font-weight:600; color:rgba(255,255,255,.85); margin-top:2px; }

/* ------------------------------------------------------------
   13. ATTRACTIONS BROWSER (filters + cards)
   ------------------------------------------------------------ */
.filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.fbtn{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-family:var(--font); font-size:12.5px; font-weight:700; color:var(--ink-2); background:#fff; border:1.5px solid var(--line-2); border-radius:10px; cursor:pointer; transition:all .15s ease; }
.fbtn svg{ width:14px; height:14px; flex-shrink:0; }
.fbtn:hover{ border-color:var(--teal); color:var(--teal-dark); }
.fbtn.active{ background:var(--teal); border-color:var(--teal); color:#fff; }
.fcount{ font-size:10px; font-weight:800; background:var(--bg-3); color:var(--ink-3); padding:1px 6px; border-radius:var(--pill); }
.fbtn.active .fcount{ background:rgba(255,255,255,.22); color:#fff; }
.cat-desc{ font-size:13.5px; color:var(--ink-3); margin-bottom:14px; }
.attr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.acard{ border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:#fff; }
.acard.hi{ background:var(--hilite-bg); border-color:var(--hilite-bd); }
.aname{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
.atags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.atag2{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--pill); background:var(--teal-soft); color:var(--teal-ink); white-space:nowrap; }
.atag2.hi{ background:var(--tag-bg); color:var(--tag-fg); }
.ameta{ font-size:11px; color:var(--ink-3); }
.postpay{ display:flex; gap:13px; align-items:flex-start; background:var(--teal-soft); border:1px solid #cfe3fb; border-radius:var(--r); padding:16px 18px; margin-bottom:20px; font-size:14px; color:var(--ink-2); }
.postpay svg{ width:24px; height:24px; color:var(--teal); flex-shrink:0; margin-top:1px; } .postpay strong{ color:var(--ink); }

/* ------------------------------------------------------------
   14. SAVINGS COMPARISON (side-by-side cards + VS marker)
   ------------------------------------------------------------ */
.savewrap{ display:grid; grid-template-columns:1fr 52px 1fr; align-items:stretch; }
.savecol{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); }
.savecol .sc-head{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.savelist{ list-style:none; }
.savelist li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); padding:9px 0; border-bottom:1px solid var(--line); }
.savelist li:last-of-type{ border-bottom:none; }
.savelist li svg{ width:15px; height:15px; color:var(--ink-4); flex-shrink:0; }
.savelist li span{ flex:1; min-width:0; }
.savelist li b{ color:var(--ink); font-weight:700; }
.sc-total{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:2px solid var(--line-2); font-size:15px; font-weight:800; color:var(--ink); }
.sc-total .strike{ font-size:20px; color:#c2434f; text-decoration:line-through; text-decoration-thickness:2px; }
.vscol{ display:grid; place-items:center; }
.vsdot{ width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center; box-shadow:var(--shadow); z-index:2; }
.savecol.pass{ background:linear-gradient(150deg,var(--teal) 0%,#0e3a6b 100%); border:none; color:#fff; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.savecol.pass .sc-head{ color:rgba(255,255,255,.75); }
.savecol.pass .passprice{ font-size:48px; font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; }
.savecol.pass .passprice small{ font-size:14px; font-weight:600; color:rgba(255,255,255,.75); }
.savecol.pass .passsub{ font-size:13px; color:rgba(255,255,255,.85); margin-top:6px; }
.savebadge{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--green); color:#fff; font-size:16px; font-weight:800; padding:11px 22px; border-radius:var(--r-btn); margin:18px auto 14px; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.savebadge svg{ width:18px; height:18px; }
.savecol.pass .btn{ width:100%; max-width:250px; margin:0 auto; }
.savenote{ font-size:11.5px; color:rgba(255,255,255,.66); margin-top:12px; }

/* ------------------------------------------------------------
   15. WHY US / OFFER / STEPS / INFO CARDS
   ------------------------------------------------------------ */
.whygrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.whyitem{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; }
.whyitem svg{ width:22px; height:22px; color:var(--green); flex-shrink:0; margin-top:2px; }
.whyitem h4{ font-size:15px; margin-bottom:2px; } .whyitem p{ font-size:13.5px; color:var(--ink-2); margin:0; }
.offer{ display:flex; gap:16px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; }
.offer .oic{ width:52px; height:52px; border-radius:14px; background:var(--teal); color:#fff; display:grid; place-items:center; flex-shrink:0; } .offer .oic svg{ width:26px; height:26px; }
.offer h3{ font-size:18px; margin-bottom:4px; } .offer p{ font-size:14.5px; color:var(--ink-2); margin:0; }
.step{ display:flex; gap:16px; } .step-col{ display:flex; flex-direction:column; align-items:center; }
.step-n{ width:38px; height:38px; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); display:grid; place-items:center; font-weight:800; font-size:15px; flex-shrink:0; }
.step-line{ width:2px; flex:1; background:var(--line); margin:6px 0; }
.step-b{ padding-bottom:22px; } .step-b h4{ font-size:16px; margin-bottom:3px; } .step-b p{ font-size:14px; color:var(--ink-2); margin:0; }
.icards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.icard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.icard .ii{ width:42px; height:42px; border-radius:11px; background:var(--teal-soft); color:var(--teal-dark); display:grid; place-items:center; margin-bottom:12px; } .icard .ii svg{ width:21px; height:21px; }
.icard h4{ font-size:15px; margin-bottom:3px; } .icard p{ font-size:13.5px; color:var(--ink-2); margin:0; }
.cancel{ display:flex; gap:12px; align-items:flex-start; background:var(--green-soft); border:1px solid #b6e7c4; border-radius:var(--r); padding:14px 16px; font-size:14px; color:var(--ink-2); }
.cancel svg{ width:20px; height:20px; color:var(--green); flex-shrink:0; margin-top:1px; }

/* ------------------------------------------------------------
   16. REVIEWS
   ------------------------------------------------------------ */
.rev-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.rev-num{ font-size:46px; font-weight:800; color:var(--ink); line-height:1; }
.rev-stars{ display:flex; gap:2px; } .rev-stars svg{ width:17px; height:17px; color:var(--star); } .rev-meta{ font-size:13px; color:var(--ink-3); margin-top:4px; }
.rev-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.rev-stat{ font-size:12.5px; font-weight:700; color:var(--teal-ink); background:var(--teal-soft); padding:6px 13px; border-radius:var(--pill); }
.rev-quote{ background:var(--green-soft); border:1px solid #b6e7c4; border-radius:var(--r); padding:18px 20px; margin-bottom:18px; }
.rev-quote .q-stars{ display:flex; gap:2px; margin-bottom:6px; } .rev-quote .q-stars svg{ width:15px; height:15px; color:var(--star); }
.rev-quote p{ font-size:16px; font-weight:600; color:var(--ink); margin:0 0 4px; line-height:1.5; }
.rev-quote span{ font-size:12.5px; color:var(--ink-3); }
.rev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.rcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.rtop{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rwho{ display:flex; align-items:center; gap:10px; } .rav{ width:36px; height:36px; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); display:grid; place-items:center; font-size:13px; font-weight:800; }
.rnm{ font-size:14px; font-weight:700; color:var(--ink); } .rct{ font-size:12px; color:var(--ink-3); }
.rst{ display:flex; gap:1px; } .rst svg{ width:13px; height:13px; color:var(--star); }
.rtx{ font-size:14px; color:var(--ink-2); margin-bottom:8px; line-height:1.55; } .rdt{ font-size:12px; color:var(--ink-3); }

/* ------------------------------------------------------------
   17. FAQ
   ------------------------------------------------------------ */
.faq{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; font-family:var(--font); font-size:15.5px; font-weight:700; color:var(--ink); padding:18px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition:transform .2s ease; color:var(--teal); }
.faq.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ font-size:14.5px; color:var(--ink-2); line-height:1.6; max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease; } .faq.open .faq-a{ max-height:400px; padding-bottom:18px; }

/* ------------------------------------------------------------
   18. PAYMENT METHODS
   ------------------------------------------------------------ */
.pay{ display:flex; flex-wrap:wrap; gap:10px; } .pbadge2{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2); }

/* ------------------------------------------------------------
   19. MOBILE STICKY BOTTOM BAR
   ------------------------------------------------------------ */
.mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:300; background:#fff; border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(16,42,60,.12); align-items:center; justify-content:space-between; gap:12px; }
.mbar .mp{ font-size:20px; font-weight:800; color:var(--ink); } .mbar .mp small{ font-size:12px; color:var(--ink-3); font-weight:600; display:block; }
.mbar .mbook{ flex:1; background:var(--cta); color:#fff; border:none; font-family:var(--font); font-size:16.5px; font-weight:800; padding:16px; border-radius:var(--r-btn); cursor:pointer; box-shadow:0 10px 24px rgba(249,115,22,.3); }
.mbar .mbook:hover{ background:var(--cta-dark); }

/* ------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------ */
footer{ background:var(--ink); color:#fff; padding:56px 30px 28px; }
.f-in{ max-width:1280px; margin:0 auto; } .f-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.13); }
.f-brand .brand{ color:#fff; } .f-brand .brand b{ color:var(--teal); } .f-brand p{ color:rgba(255,255,255,.66); font-size:14px; max-width:280px; margin-top:12px; }
.f-grid h5{ color:#fff; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; } .f-grid ul{ list-style:none; } .f-grid li{ margin-bottom:9px; }
.f-grid a{ color:rgba(255,255,255,.66); font-size:14px; } .f-grid a:hover{ color:var(--gold); text-decoration:none; }
.f-bot{ margin-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:rgba(255,255,255,.5); font-size:13px; } .f-bot a{ color:rgba(255,255,255,.5); }

/* ------------------------------------------------------------
   21. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .nav-links{ display:none; }
  .menu-btn{ display:inline-flex; }
  .layout{ grid-template-columns:1fr; gap:0; padding-bottom:120px; }
  .rail{ display:none; }
  .hero-in{ grid-template-columns:1fr; gap:26px; } .bookcard{ max-width:520px; }
  .bookcard.floating{ position:static; }
  .hero-guar{ max-width:520px; }
  .rev-grid{ grid-template-columns:1fr; } .f-grid{ grid-template-columns:1fr 1fr; }
  .savewrap{ grid-template-columns:1fr; }
  .vscol{ padding:10px 0; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gcard, .gcard:nth-child(1), .gcard:nth-child(2){ grid-column:span 1; aspect-ratio:4/3; }
  .rev-stats{ margin-left:0; }
}
@media (max-width:640px){
  .nav{ padding:0 12px; height:58px; gap:8px; }
  .brand{ min-width:0; flex-shrink:1; font-size:17px; gap:6px; }
  .brand .logomark{ width:30px; height:30px; }
  .nav-right{ gap:8px; }
  .nav-right .btn{ padding:10px 12px; font-size:13px; }
  .lang-switch, .curr-switch{ padding:8px 10px; font-size:13px; gap:5px; }
  .hero{ padding:36px 14px; } .bookcard{ padding:16px; width:100%; max-width:100%; }
  .hero h1{ font-size:34px; }
  .hero-guar{ gap:10px 18px; }
  .truststrip-in{ padding:14px; gap:10px 20px; } .tst{ font-size:12.5px; }
  .layout{ padding:36px 14px 120px; } .hero-in{ gap:22px; } .attr-grid{ grid-template-columns:1fr; } .icards{ grid-template-columns:1fr; }
  .whygrid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; gap:8px; }
  .gcard:nth-child(1){ grid-column:span 2; aspect-ratio:16/9; }
  .bc-book{ padding:16px; font-size:16.5px; }
  .mbar{ display:flex; }
  .f-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:430px){
  /* very small screens: the sticky bottom bar carries the CTA,
     and the currency switcher steps aside for the language one */
  .nav-right .btn{ display:none; }
  .curr-dd{ display:none; }
  .lang-switch{ font-size:12.5px; padding:8px 9px; }
}

/* ------------------------------------------------------------
   22. SIMPLE CONTENT PAGES (Privacy, Error, ...)
   Lightweight single-column wrapper for pages that don't need
   the two-column .layout grid used by the landing page.
   ------------------------------------------------------------ */
.simple-page{ max-width:860px; margin:0 auto; padding:54px 30px 90px; min-height:50vh; }
.simple-page h1{ margin-bottom:18px; }
.simple-page h2{ margin-top:28px; }