/* ===========================
   The Wanderer Outdoors
   Base styles + responsive
   =========================== */

:root{
  --bg:#FAF7F2;
  --bg-soft:#F1ECE3;
  --text:#1A1F1B;
  --muted:#5C6663;
  --line:#E4DED2;
  --forest:#1F4D36;
  --forest-dark:#163826;
  --ember:#D9582B;
  --ember-soft:#F3A776;
  --ink:#0F1410;
  --shadow:0 10px 30px rgba(20,30,25,.08);
  --shadow-lg:0 30px 80px rgba(20,30,25,.18);
  --radius:14px;
  --radius-sm:8px;
  --wrap:1200px;

  /* ============================================================
     HERO BACKGROUND OPACITY  —  CHANGE THIS ONE VALUE
     ============================================================
     0    = hero photo fully transparent (only the dark base colour shows)
     0.5  = photo at half strength
     1    = photo at full strength

     Hero text stays readable at ANY value, because a separate
     dark "scrim" layer always sits between the photo and the text
     (see --hero-scrim below). You never need to touch the scrim.
     ============================================================ */
  --hero-bg-opacity: 0.75;

  /* Strength of the readability scrim that sits above the photo
     and below the text (0 = no scrim, 1 = fully dark).
     0.55 is a good default; raise it if you use a very bright photo. */
  --hero-scrim: 0.55;

  /* ============================================================
     Typography + theme
     These are overwritten at runtime by the Theme settings panel
     (see app.js: applyTheme). Editing them here only changes the
     fallback used before any theme has been saved.
     ============================================================ */
  --font-heading: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body   : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --heading-size  : 2.5rem;   /* base size; h1/h2/h3 scale from this */
  --heading-weight: 700;
  --heading-color : var(--text);
  --body-size     : 1rem;
  --body-weight   : 400;
  --body-color    : var(--text);

  /* Per-section colours — each .svc can override these inline */
  --sec-bg   : transparent;
  --sec-text : var(--text);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--body-size);
  font-weight:var(--body-weight);
  background:var(--bg);
  color:var(--body-color);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* All headings follow the theme's typography settings */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--heading-weight);
  color:var(--heading-color);
  line-height:1.15;
}
img{max-width:100%;display:block}
a{color:var(--forest);text-decoration:none}
a:hover{color:var(--ember)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;border-radius:999px;
  font:600 14px/1 inherit;cursor:pointer;border:none;transition:.2s;
}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{background:#b9461f;color:#fff}
.btn-ghost{background:transparent;color:var(--forest);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:var(--forest)}
.btn-ghost.light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost.light:hover{background:rgba(255,255,255,.1)}
.cta{
  display:inline-block;margin-top:14px;
  padding:14px 26px;border-radius:999px;
  background:var(--ember);color:#fff;font-weight:700;letter-spacing:.2px;
  transition:.2s;
}
.cta:hover{background:#b9461f;color:#fff;transform:translateY(-1px)}

/* ---------- Top Bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--topbar-bg, rgba(250,247,242,.92));
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:24px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand img{height:48px;width:auto}
.brand-text strong{display:block;font:700 18px/1.1 inherit;letter-spacing:.5px}
.brand-text small{display:block;color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.primary-nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-weight:600;font-size:14px}
.primary-nav a{color:var(--text)}
.primary-nav a:hover{color:var(--ember)}
.primary-nav a.nav-book{background:var(--ember);color:#fff;padding:9px 18px;border-radius:999px}
.primary-nav a.nav-book:hover{background:#b9461f;color:#fff}
.nav-toggle{display:none;background:none;border:none;font-size:24px;margin-left:auto}

/* ---------- Hero ---------- */
/* Layer order (bottom → top):
     1. base colour   (.hero background — always opaque, so opacity 0 is still safe)
     2. photo         (.hero::before   → opacity: var(--hero-bg-opacity))
     3. scrim         (.hero-overlay   → keeps text readable at ANY photo opacity)
     4. text          (.hero-inner)                                              */
.hero{
  --hero-bg-image:url("https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=1800&q=70");
  position:relative;min-height:72vh;display:flex;align-items:center;
  background:#143527;
  color:#fff;
  overflow:hidden;
}
/* Photo layer — its transparency is controlled by --hero-bg-opacity */
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--hero-bg-image) center/cover no-repeat;
  opacity:var(--hero-bg-opacity);
}
/* Readability scrim — independent of the photo, so text never loses contrast */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,18,14,.9),rgba(10,18,14,.95));
  opacity:var(--hero-scrim);
}
.hero-inner{position:relative;z-index:2;max-width:760px;padding:80px 24px;text-align:left}
.hero h1{font-size:clamp(32px, calc(var(--heading-size) * 1.45), 68px);line-height:1.05;margin:0 0 16px;letter-spacing:-1px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero p{font-size:clamp(16px,1.7vw,19px);opacity:.95;max-width:620px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:3}
.hero-actions .cta{margin-top:0}

/* ---------- Sections ---------- */
/* Section colours come from --sec-bg / --sec-text, which the theme panel can
   set per section. The .alt rule is only a fallback when no colour is chosen. */
.svc{
  position:relative;padding:80px 0;border-bottom:1px solid var(--line);
  background:var(--sec-bg);
  color:var(--sec-text);
}
.svc.alt{--sec-bg:var(--bg-soft)}
/* Scrim behind a photo section background so text stays readable */
.sec-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.svc > .svc-grid{position:relative;z-index:1}
.svc > .bg-replace,.svc > .section-remove{position:relative;z-index:2}
.svc .kicker,.svc h2,.svc p{color:inherit}
/* --sec-heading is set by the theme panel when a section gets its own colours,
   otherwise headings simply follow the site-wide heading colour. */
.svc h2{color:var(--sec-heading, var(--heading-color))}
.svc .svc-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;
}
.svc .kicker{display:inline-block;font:700 12px/1 inherit;letter-spacing:2px;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.svc h2{font-size:clamp(26px, var(--heading-size), 52px);margin:0 0 12px;letter-spacing:-.5px}
.svc p{font-size:17px;margin:0 0 22px;color:var(--sec-muted, var(--muted));max-width:60ch}

.items{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.item{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:8px 18px;padding:16px 18px;background:var(--card-bg,#fff);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.item .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.item .name{font-weight:700;font-size:17px}
.item .meta-info{color:var(--muted);font-size:13px}
.item .price{
  font-weight:800;color:var(--forest);font-size:18px;white-space:nowrap;
}
.item .price small{font-weight:500;color:var(--muted);font-size:12px;margin-left:2px}
.item .actions{display:flex;gap:4px}

.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.gallery .ph{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;background:#ddd;background-size:cover;background-position:center;
  transition:transform .25s,box-shadow .25s;
}
.gallery .ph:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gallery .ph.empty{
  background:linear-gradient(135deg,#e8e2d4,#d6cebd);
  color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;
}
.gallery-tools{margin-top:14px;display:flex;align-items:center;gap:12px}
.gallery-tools .hint{color:var(--muted);font-size:13px}

/* ---------- Highlights ---------- */
.highlights{padding:90px 0;background:var(--ink);color:#fff;text-align:center}
.highlights .kicker.light{color:var(--ember-soft)}
.highlights h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 10px}
.highlights p{max-width:60ch;margin:0 auto 36px;color:rgba(255,255,255,.75)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.vc{
  position:relative;background:#000;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  aspect-ratio:9/16;
  box-shadow:var(--shadow-lg);
}
.vc iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vc video,.vc .vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc .vc-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
  color:#fff;font-size:42px;text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.vc .vc-caption{
  position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));
  text-align:left;font:600 14px/1.3 inherit;
}

/* ---------- Contact ---------- */
.contact{padding:80px 0;background:var(--card-bg,#fff);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.contact .kicker{color:var(--ember);font:700 12px/1 inherit;letter-spacing:2px;text-transform:uppercase}
.contact h2{font-size:clamp(28px,3.4vw,40px);margin:6px 0 12px}
.contact-info p{font-size:16px;margin:8px 0}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:24px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer p{margin:0;font-size:14px}
.footer .muted{color:rgba(255,255,255,.4)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(5,10,8,.92);
  display:none;align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
.lb-content{max-width:min(95vw,1100px);max-height:88vh;position:relative}
.lb-content img,.lb-content video,.lb-content iframe{
  display:block;max-width:100%;max-height:88vh;border-radius:6px;background:#000;
}
.lb-content iframe{width:min(95vw,500px);height:min(88vh,888px);max-height:88vh}
.lb-caption{
  position:absolute;left:0;right:0;bottom:-44px;color:#fff;
  text-align:center;font-size:15px;opacity:.85;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;border:none;background:rgba(0,0,0,.5);
  color:#fff;font-size:30px;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,.85)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-card{
  background:var(--card-bg,#fff);color:var(--text);width:min(560px,100%);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-lg);
}
.modal-card h3{margin:0 0 14px;font-size:20px}
.modal-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
.modal-card input,.modal-card textarea,.modal-card select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:var(--text);
}
.modal-card textarea{min-height:80px;resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- Admin bar ---------- */
.admin-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#1f2937;color:#fff;display:none;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
}
.admin-bar.open{display:block}
.admin-bar-inner{display:flex;align-items:center;gap:14px;padding:12px 24px;flex-wrap:wrap;font-size:14px}
.admin-bar .dot{width:10px;height:10px;background:#22c55e;border-radius:50%;box-shadow:0 0 10px #22c55e}
.admin-bar button{
  background:rgba(255,255,255,.08);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font:inherit;cursor:pointer;
}
.admin-bar button:hover{background:rgba(255,255,255,.18)}
.admin-bar .spacer{flex:1}
.admin-bar .danger{background:#dc2626}
.admin-bar .danger:hover{background:#b91c1c}
.admin-bar .accent{background:var(--ember)}
.admin-bar .accent:hover{filter:brightness(1.12)}

.admin-toggle{
  position:fixed;right:18px;bottom:18px;z-index:80;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--forest);color:#fff;font-size:22px;box-shadow:var(--shadow);
  transition:.2s;
}
.admin-toggle:hover{transform:scale(1.06)}
.admin-toggle.active{background:var(--ember)}

.admin-floating-btn{
  display:none;position:fixed;left:18px;bottom:78px;z-index:80;
  background:#fff;color:var(--forest);border:1px solid var(--line);
  padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);
}
.admin-mode .admin-floating-btn{display:inline-flex}

/* ============================================================
   Theme & typography settings panel (right-hand drawer)
   ============================================================ */
.theme-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:130;
  width:min(430px,100%);display:flex;flex-direction:column;
  background:var(--card-bg,#fff);color:var(--text);
  border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(0,0,0,.22);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.theme-panel.open{transform:translateX(0)}
.tp-scrim{
  position:fixed;inset:0;z-index:125;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.tp-scrim.open{opacity:1;pointer-events:auto}

.tp-head{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 20px 16px;border-bottom:1px solid var(--line);
}
.tp-head h3{margin:0 0 4px;font-size:19px}
.tp-head p{margin:0;font-size:13px;line-height:1.4}
.tp-close{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--text);
  font-size:22px;line-height:1;cursor:pointer;
}
.tp-close:hover{background:rgba(127,127,127,.14)}

.tp-body{flex:1;overflow-y:auto;padding:18px 20px 24px}
.tp-foot{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line);background:transparent;
}
.tp-foot .spacer{flex:1}

.tp-group{margin-bottom:26px}
.tp-group > h4{
  margin:0 0 12px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.tp-hint{margin:-4px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.45}

/* Preset swatches */
.tp-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.tp-preset{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:11px;background:transparent;
  color:var(--text);font:inherit;font-size:13px;font-weight:600;text-align:left;
}
.tp-preset:hover{border-color:var(--ember)}
.tp-preset.active{border-color:var(--ember);box-shadow:0 0 0 3px rgba(217,88,43,.18)}
.tp-preset .chip{
  width:34px;height:34px;flex:none;border-radius:8px;border:1px solid rgba(0,0,0,.14);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;
}
.tp-preset .chip i{display:block}

/* Colour rows */
.tp-row{
  display:flex;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.tp-row:last-child{border-bottom:none}
.tp-row label{flex:1;font-size:13.5px;color:var(--text);min-width:0}
.tp-row .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.tp-row input[type="color"]{
  width:44px;height:32px;flex:none;padding:0;border:1px solid var(--line);
  border-radius:7px;background:transparent;cursor:pointer;
}
.tp-row input[type="range"]{width:120px;flex:none;accent-color:var(--ember)}
.tp-row .num{
  width:64px;flex:none;padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:13px;background:transparent;color:var(--text);
}
.tp-row select{
  flex:none;min-width:150px;max-width:190px;padding:7px 9px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text);
}
.tp-row .stack{flex:none;display:flex;gap:6px;align-items:center}
.tp-mini{
  padding:5px 9px;font-size:12px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;
}
.tp-mini:hover{color:var(--text);border-color:var(--ember)}

/* Booking inbox rows */
.bk-item{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px;background:rgba(127,127,127,.04)}
.bk-top{display:flex;align-items:baseline;gap:10px}
.bk-top strong{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-ref{
  flex:none;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--ember);
  background:rgba(217,88,43,.10);border-radius:999px;padding:3px 9px;
}
.bk-when{font-size:12px;color:var(--muted);margin:2px 0 9px}
.bk-rows{display:grid;grid-template-columns:1fr;gap:2px}
.bk-rows div{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:3px 0;border-bottom:1px dashed var(--line)}
.bk-rows div:last-child{border-bottom:none}
.bk-rows span:first-child{color:var(--muted);flex:none}
.bk-rows span:last-child{text-align:right;word-break:break-word}
.bk-item .tp-mini{display:inline-flex;margin-top:10px;text-decoration:none}

/* Per-section colour override list */
.tp-sec{
  border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:9px;
  background:rgba(127,127,127,.04);
}
.tp-sec-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tp-sec-top strong{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-sec-top .tp-mini{padding:4px 8px;font-size:11.5px}
.tp-sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-sec-grid .cell{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.tp-sec-grid input[type="color"]{width:38px;height:28px}

@media (max-width:520px){
  .theme-panel{width:100%}
  .tp-row{flex-wrap:wrap}
  .tp-row select{max-width:none;width:100%}
  .tp-sec-grid{grid-template-columns:1fr}
}

/* ============================================================
   Dark-theme fixes
   A few surfaces ship with a fixed light colour of their own
   (form fields, the payment box, the modal). When the chosen
   theme is dark they flip too, so nothing becomes unreadable.
   ============================================================ */
body.is-dark .field input,
body.is-dark .field select,
body.is-dark .field textarea{
  background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line);
}
body.is-dark .field input::placeholder,
body.is-dark .field textarea::placeholder{color:rgba(231,237,233,.45)}
body.is-dark .field.invalid input,
body.is-dark .field.invalid select,
body.is-dark .field.invalid textarea{background:rgba(192,57,43,.20);border-color:#c0392b}
body.is-dark .field .err{color:#fca5a5}
body.is-dark .pay-block{background:rgba(255,255,255,.045)}
body.is-dark .modal-card input,
body.is-dark .modal-card select,
body.is-dark .modal-card textarea{
  background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line);
}
body.is-dark .admin-floating-btn{background:#181E1A;color:#E7EDE9;border-color:var(--line)}
body.is-dark ::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)}

/* ---------- Admin-only nodes ---------- */
.admin-only{display:none !important}
.admin-mode .admin-only{display:inline-flex !important}
.admin-mode .bg-replace,.admin-mode .section-remove{display:block !important}
.admin-mode [data-edit]{
  outline:1px dashed rgba(217,88,43,.55);
  outline-offset:4px;cursor:text;
  transition:background .15s;
}
.admin-mode [data-edit]:hover{background:rgba(217,88,43,.07)}
.admin-mode [data-edit]:focus{background:rgba(217,88,43,.12);outline-color:var(--ember)}
.admin-mode .item{
  outline:1px dashed rgba(31,77,54,.45);
}
.admin-mode .item .actions{display:flex !important}

.section-remove{
  display:none;position:absolute;top:8px;right:8px;z-index:5;
  background:rgba(220,38,38,.92);color:#fff;border:none;border-radius:6px;
  padding:6px 10px;font:600 12px/1 inherit;cursor:pointer;
}
.bg-replace{
  display:none;position:absolute;left:8px;top:8px;z-index:5;
  background:rgba(31,77,54,.92);color:#fff;border:none;border-radius:6px;
  padding:6px 10px;font:600 12px/1 inherit;cursor:pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .svc .svc-grid{grid-template-columns:1fr;gap:28px}
  .svc{padding:56px 0}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .item{grid-template-columns:1fr auto}
  .item .actions{grid-column:1/-1;justify-content:flex-end}
}
@media (max-width: 720px){
  .primary-nav{
    display:none;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--line);padding:14px 24px;
    box-shadow:var(--shadow);
  }
  .primary-nav.open{display:flex}
  .primary-nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block;margin-left:auto}
  .hero-inner{padding:80px 20px}
  .brand-text strong{font-size:15px}
  .brand-text small{font-size:10px}
  .brand img{height:38px}
  .form-grid{grid-template-columns:1fr}
  .booking-card{padding:22px}
  .wa-float{width:50px;height:50px;font-size:26px}
}

/* ============================================================
   Book Now button (one per trek / tour / outing card)
   ============================================================ */
.item-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.book-now{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:999px;border:none;cursor:pointer;
  background:var(--forest);color:#fff;font:700 13px/1 inherit;transition:.2s;
}
.book-now:hover{background:var(--ember);color:#fff;transform:translateY(-1px)}

/* ============================================================
   Movable text holders (drag in admin mode)
   ============================================================ */
.admin-mode [data-edit]{cursor:grab}
.admin-mode [data-edit]:focus{cursor:text}
.admin-mode [data-edit].dragging{
  cursor:grabbing;z-index:60;user-select:none;
  box-shadow:0 16px 40px rgba(20,30,25,.28);
  background:rgba(217,88,43,.14);
  outline:2px solid var(--ember) !important;
}
.admin-mode [data-edit].moved::after{
  content:"";position:absolute;top:-6px;right:-6px;
  width:8px;height:8px;border-radius:50%;background:var(--ember);
}
.admin-mode [data-edit]{position:relative}

/* ============================================================
   Booking form
   ============================================================ */
.booking{padding:90px 0;background:var(--bg-soft);border-top:1px solid var(--line)}
.booking .kicker{display:inline-block;font:700 12px/1 inherit;letter-spacing:2px;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.booking-head{max-width:660px;margin-bottom:30px}
.booking-head h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 12px;letter-spacing:-.5px}
.booking-head p{color:var(--muted);font-size:17px;margin:0}
.booking-card{background:var(--card-bg,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:600 13px/1.3 inherit;color:var(--muted)}
.field label .req{color:var(--ember);margin-left:2px}
.field input,.field select,.field textarea{
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;color:var(--text);background:#fff;width:100%;transition:.15s;
}
.field textarea{min-height:80px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(31,77,54,.12);
}
.field .err{color:#c0392b;font-size:12px;min-height:15px;line-height:1.25}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b;background:#fdf3f2}

/* Optional payment block */
.pay-block{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:18px;background:#FCFAF6}
.pay-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pay-head h4{margin:0;font-size:16px}
.pay-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;font-size:14px}
.pay-body{margin-top:16px;display:none;padding-top:16px;border-top:1px solid var(--line)}
.pay-block.open .pay-body{display:block}
.pay-choice{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:4px}
.pay-choice label,.pay-methods label{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:14px;cursor:pointer}
.pay-methods{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.pay-note{color:var(--muted);font-size:13px;margin:8px 0 0}

.booking-actions{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.submit-btn{padding:15px 32px;border-radius:999px;border:none;background:var(--ember);color:#fff;font:700 16px/1 inherit;cursor:pointer;transition:.2s}
.submit-btn:hover{background:#b9461f;transform:translateY(-1px)}
.skip-note{color:var(--muted);font-size:13px}

/* Success state */
.success-card{text-align:center;padding:36px 20px}
.success-card .tick{
  width:68px;height:68px;border-radius:50%;background:#22c55e;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px;
}
.success-card h3{font-size:26px;margin:0 0 10px;letter-spacing:-.3px}
.success-card > p{color:var(--muted);margin:0 0 22px}
.success-summary{
  text-align:left;max-width:520px;margin:0 auto 24px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
}
.success-summary div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:15px;border-bottom:1px solid rgba(0,0,0,.06)}
.success-summary div:last-child{border-bottom:none}
.success-summary span:first-child{color:var(--muted)}
.success-summary span:last-child{font-weight:600;text-align:right}
.success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* "Saving your enquiry…" / "Saved ✓" line under the success actions */
.saved-note{margin:16px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.msg-preview{max-width:520px;margin:10px auto 0;text-align:left}
.msg-preview summary{
  cursor:pointer;font-size:13px;color:var(--muted);font-weight:600;padding:6px 0;
}
.msg-preview pre{
  white-space:pre-wrap;word-break:break-word;margin:8px 0 0;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-size:13px;line-height:1.5;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:280px;overflow:auto;
}

/* ============================================================
   WhatsApp
   ============================================================ */
.wa-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;font-weight:700;
  padding:15px 24px;border-radius:999px;text-decoration:none;transition:.2s;
  box-shadow:0 8px 22px rgba(37,211,102,.32);
}
.wa-btn:hover{background:#1ebe5b;color:#fff;transform:translateY(-2px)}
.wa-btn svg{width:22px;height:22px;fill:#fff;flex:none}
.wa-big{font-size:17px;padding:17px 28px}
.wa-inline{color:#128C3E;font-weight:700}
.wa-inline:hover{color:#0f7a35}
.wa-hero{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);color:#fff;
  padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;transition:.2s;
  backdrop-filter:blur(4px);
}
.wa-hero:hover{background:rgba(37,211,102,.9);color:#fff;border-color:transparent}
.wa-hero svg{width:20px;height:20px;fill:#fff}
.wa-float{
  position:fixed;left:18px;bottom:18px;z-index:85;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);transition:.2s;text-decoration:none;
}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float svg{width:32px;height:32px;fill:#fff}
@media (max-width:920px){ .admin-floating-btn{bottom:86px} }

/* ---- Reviews / testimonials (injected by the Control Room; hidden by default) ---- */
.reviews{ padding:72px 0; background:var(--bg-soft,#F1ECE3); }
.reviews .kicker{ display:block; color:var(--ember,#D9582B); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px; margin-bottom:6px; }
.reviews h2{ font-size:clamp(26px,4vw,38px); margin:0 0 28px; color:var(--text,#1A1F1B); }
.review-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.review-card{ background:#fff; border:1px solid var(--line,rgba(0,0,0,.1)); border-radius:16px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.review-photo{ width:54px; height:54px; border-radius:50%; object-fit:cover; margin-bottom:12px; }
.review-text{ font-size:15px; line-height:1.6; color:var(--text,#1A1F1B); margin:0 0 14px; }
.review-by{ font-size:14px; }
.review-by .muted{ color:var(--muted,#5C6663); }

/* ============================================================
   The Wanderer Outdoors — Modular SPA & Trip Detail Styles
   ============================================================ */

/* Views switching */
.spa-view { display: none; }
.spa-view.active { display: block; animation: viewFadeIn .22s ease; }
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Nav active state */
.primary-nav a.active-link {
  color: var(--ember);
  position: relative;
}
.primary-nav a.active-link::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--ember);
  border-radius: 2px;
}

/* Breadcrumbs */
.breadcrumbs {
  padding: 16px 0 10px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--forest); font-weight: 600; }
.breadcrumbs a:hover { color: var(--ember); text-decoration: underline; }
.breadcrumbs span.sep { color: var(--line); font-size: 11px; }

/* Category view headers */
.category-header {
  padding: 48px 0 28px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.category-header .kicker {
  display: inline-block;
  font: 700 12px/1 inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
}
.category-header h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 10px;
  letter-spacing: -.5px;
}
.category-header p {
  color: var(--muted);
  font-size: 16px;
  max-width: 760px;
  margin: 0;
}

/* Filter and search bar */
.filter-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 32px;
}
.filter-search {
  flex: 1;
  min-width: 240px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.filter-search:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31,77,54,.12);
}

/* Trips Grid */
.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
  margin-bottom: 60px;
}
.trip-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.trip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.trip-card-media {
  position: relative;
  height: 220px;
  background: #253328 center/cover no-repeat;
  overflow: hidden;
}
.trip-card-media .trip-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(15,20,16,.82);
  color: #fff;
  backdrop-filter: blur(4px);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.trip-card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.trip-card-body h3 {
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -.3px;
  line-height: 1.25;
}
.trip-card-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.trip-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trip-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.trip-card-price {
  display: flex;
  flex-direction: column;
}
.trip-card-price strong {
  font-size: 20px;
  color: var(--text);
  line-height: 1;
}
.trip-card-price small {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.trip-card-actions {
  display: flex;
  gap: 8px;
}

/* Trip Detail View */
.trip-detail-wrap {
  padding-bottom: 80px;
}
.trip-hero {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 0 28px;
  background: #1a2a20 center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  color: #fff;
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}
.trip-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,14,.2) 0%, rgba(10,18,14,.88) 100%);
}
.trip-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.trip-hero-content .kicker {
  display: inline-block;
  background: var(--ember);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.trip-hero-content h1 {
  color: #fff;
  font-size: clamp(30px, 4.5vw, 48px);
  margin: 0 0 14px;
  letter-spacing: -.5px;
}
.trip-pills-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: #e4eee7;
}
.trip-pills-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 999px;
}

.trip-main-grid {
  display: grid;
  grid-template-columns: 2fr 1.15fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 960px) {
  .trip-main-grid { grid-template-columns: 1fr; }
}

.trip-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.trip-block h3 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--forest-dark);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.trip-block p {
  color: var(--text);
  line-height: 1.65;
  font-size: 15.5px;
  margin: 0 0 12px;
}
.trip-block p:last-child { margin-bottom: 0; }

/* Highlights checklist */
.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (max-width: 600px) { .highlights-list { grid-template-columns: 1fr; } }
.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
}
.highlights-list li::before {
  content: "✦";
  color: var(--ember);
  font-weight: 700;
  flex: none;
}

/* Day-by-day Itinerary */
.itinerary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.itinerary-item {
  border-left: 3px solid var(--forest);
  padding-left: 18px;
  position: relative;
}
.itinerary-item .day-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ember);
  margin-bottom: 4px;
  display: block;
}
.itinerary-item h4 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.itinerary-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Inclusions & Exclusions */
.incl-excl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .incl-excl-grid { grid-template-columns: 1fr; } }
.incl-box, .excl-box {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.incl-box h4 { color: #166534; margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.excl-box h4 { color: #991b1b; margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.incl-box ul, .excl-box ul { list-style: none; padding: 0; margin: 0; }
.incl-box li, .excl-box li { font-size: 14px; margin-bottom: 8px; line-height: 1.4; display: flex; gap: 8px; align-items: baseline; }
.incl-box li::before { content: "✓"; color: #166534; font-weight: 800; flex: none; }
.excl-box li::before { content: "✕"; color: #991b1b; font-weight: 800; flex: none; }

/* Things to Carry pills */
.carry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}
.carry-pill {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.carry-pill::before { content: "🎒"; font-size: 12px; }

/* FAQs Accordion */
.faq-wrap { margin-top: 12px; }
.faq-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
}
.faq-card summary {
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after {
  content: "+";
  font-size: 18px;
  color: var(--forest);
  font-weight: 700;
  transition: transform .2s;
}
.faq-card[open] summary::after {
  content: "–";
}
.faq-card .faq-answer {
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Trip Detail Sticky Booking Sidebar */
.trip-sidebar {
  position: sticky;
  top: 90px;
}
.trip-book-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-lg);
}
.trip-book-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.trip-book-card .price-row .cost {
  font-size: 32px;
  font-weight: 800;
  color: var(--forest-dark);
}
.trip-book-card .price-row .cost small {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.trip-book-cta {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  justify-content: center;
}
.trip-sidebar-wa {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Blog Styles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  margin-bottom: 60px;
}
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s;
}
.blog-card:hover { transform: translateY(-3px); }
.blog-card-media {
  height: 200px;
  background: #1f2d24 center/cover no-repeat;
}
.blog-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 8px;
}
.blog-card-body h3 {
  font-size: 20px;
  margin: 0 0 10px;
  line-height: 1.3;
}
.blog-card-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}
.blog-meta {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
}
.blog-article {
  max-width: 780px;
  margin: 0 auto 60px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
@media (max-width: 600px) { .blog-article { padding: 24px 18px; } }
.blog-article-hero {
  height: 360px;
  border-radius: var(--radius-sm);
  background: #1f2d24 center/cover no-repeat;
  margin-bottom: 28px;
}
.blog-article-body {
  font-size: 16.5px;
  line-height: 1.75;
  color: #242c26;
}
.blog-article-body h2, .blog-article-body h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--forest-dark);
}
.blog-article-body ul, .blog-article-body ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.blog-article-body li { margin-bottom: 8px; }

/* Google Reviews Card & Badge */
.google-reviews-banner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}
.google-reviews-badge {
  display: flex;
  align-items: center;
  gap: 16px;
}
.google-stars {
  color: #f59e0b;
  font-size: 20px;
  letter-spacing: 2px;
}
.google-score {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.google-caption {
  font-size: 13px;
  color: var(--muted);
}

/* Receipt Modal & Sheet */
.receipt-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.receipt-modal-scrim.open { display: flex; }
.receipt-sheet {
  background: #fff;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  position: relative;
  padding: 36px 32px;
  color: #1a1f1b;
}
.receipt-close {
  position: absolute;
  top: 16px; right: 18px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
}
.receipt-header {
  border-bottom: 2px solid var(--forest);
  padding-bottom: 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.receipt-brand strong {
  display: block;
  font-size: 20px;
  color: var(--forest);
}
.receipt-brand small {
  color: var(--muted);
  font-size: 12px;
}
.receipt-meta {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
}
.receipt-meta strong {
  display: block;
  font-size: 16px;
  color: var(--ember);
}
.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.receipt-table th, .receipt-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  text-align: left;
}
.receipt-table th {
  background: var(--bg-soft);
  color: var(--forest-dark);
  font-weight: 700;
}
.receipt-status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.status-verif { background: #fef3c7; color: #92400e; }
.status-paid { background: #dcfce7; color: #166534; }
.status-pending { background: #f1f5f9; color: #475569; }

.receipt-note {
  background: var(--bg-soft);
  border-left: 3px solid var(--ember);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 24px;
}
.receipt-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Print Styles */
@media print {
  body * { visibility: hidden; }
  .receipt-sheet, .receipt-sheet * { visibility: visible; }
  .receipt-sheet {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
  }
  .receipt-actions, .receipt-close { display: none !important; }
}


/* ---------- Final responsive polish: public site, blog, booking and receipts ---------- */
html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.blog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.blog-card { min-width: 0; }
.blog-article-body { overflow-wrap: anywhere; }
.blog-article-body img { height: auto; max-width: 100%; }
.receipt-sheet { width: 100%; max-width: 100%; }
.receipt-table { width: 100%; table-layout: fixed; }
.receipt-table th, .receipt-table td { overflow-wrap: anywhere; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-actions > * { min-width: 0; }
.success-summary > div { min-width: 0; overflow-wrap: anywhere; }
.success-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.success-actions > * { max-width: 100%; }
@media (max-width: 720px) {
  .wrap { width: min(100% - 28px, 100%); }
  .category-header h1 { font-size: clamp(26px, 7vw, 38px); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-article { padding: 24px 16px; }
  .receipt-modal-scrim { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .receipt-sheet { padding: 18px 14px; }
  .receipt-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .receipt-table th { width: 38%; }
  .receipt-table th, .receipt-table td { padding: 8px 6px; font-size: 12px; }
  .receipt-actions button, .success-actions button, .success-actions a { flex: 1 1 100%; justify-content: center; }
  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .booking-card, .success-card { width: 100%; min-width: 0; }
  .item { min-width: 0; }
  .item img { max-width: 100%; }
}
@media (max-width: 420px) {
  .hero-inner { padding: 64px 14px; }
  .booking-card { padding: 16px; }
  .receipt-meta strong { overflow-wrap: anywhere; }
  .receipt-close { right: 8px; top: 8px; }
  .wa-float { right: 14px; bottom: 14px; }
}


/* Responsive payment QR and per-card customization */
.payment-qr-image { width: min(100%, 220px) !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; max-width: 100%; }
.trip-card h3 { color: var(--trip-heading-color, var(--text)); overflow-wrap: anywhere; }
.trip-card .btn-ghost, .trip-card .book-now { background-color: var(--trip-button-bg, initial); color: var(--trip-button-text, inherit); }
.custom-trip-cta { width: 100%; padding: clamp(20px, 5vw, 56px) 0 60px; }
.custom-trip-card { box-sizing: border-box; width: 100%; max-width: 960px; margin: 0 auto; border-radius: 20px; padding: clamp(24px, 6vw, 56px); text-align: center; overflow-wrap: anywhere; }
.custom-trip-card h2 { color: inherit; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; margin: 8px 0 16px; }
.custom-trip-card p { color: inherit; max-width: 680px; margin: 0 auto 24px; line-height: 1.75; }
.custom-trip-card .btn-primary { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.footer { background: var(--footer-bg, var(--bg-soft)); color: var(--footer-text, var(--text)); }
@media (max-width: 600px) {
  .payment-qr-image { width: min(72vw, 220px) !important; max-width: 100% !important; }
  .trip-detail-grid, .trip-detail-wrap, .trip-sidebar, .trip-detail-left, .trip-detail-right { min-width: 0; max-width: 100%; }
  .trip-detail-wrap * { overflow-wrap: anywhere; }
  .custom-trip-card { border-radius: 14px; padding: 24px 18px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-inner > div:last-child { text-align: left !important; }
  .filter-bar { flex-wrap: wrap; }
  .filter-search { width: 100%; min-width: 0; }
}


/* Mobile hardening: payment/QR layouts must never widen the viewport. */
html, body, #app, .view, .view-category, .trip-detail-wrap { max-width:100%; }
body { overflow-x:hidden; }
.modal { padding:clamp(8px, 3vw, 20px); overflow-y:auto; align-items:center; }
.modal-card { min-width:0; max-width:100%; max-height:calc(100dvh - 24px); overflow-y:auto; overflow-x:hidden; }
#upiDetailBox, .upi-detail-box, .upi-layout, #upiQrWrap { min-width:0 !important; max-width:100% !important; }
#upiDetailBox { overflow:hidden; }
#upiQrWrap { width:min(100%, 240px); margin-inline:auto; flex:0 1 240px; }
.payment-qr-image { display:block; width:clamp(140px, 58vw, 220px) !important; max-width:100% !important; height:auto !important; aspect-ratio:1 / 1; object-fit:contain; margin:0 auto; }
#upiIdDisplay, #upiCustomInstructions, #upiLinkWrap, #upiPayLinkBtn, code { overflow-wrap:anywhere; word-break:break-word; }
#upiPayLinkBtn { max-width:100%; white-space:normal; }
.section-custom-cta { margin-top:12px; }
.view-category { overflow-wrap:anywhere; }
.view-category .category-header, .view-category .category-header * { min-width:0; overflow-wrap:anywhere; }
.view-category .category-header h1 { color:var(--heading-color, inherit); }
.trip-card .trip-card-body { min-width:0; }
.trip-card .trip-card-actions { display:flex; flex-wrap:wrap; gap:8px; }
.trip-card .trip-card-actions > * { min-width:0; max-width:100%; }
@media (max-width:600px) {
  .modal { align-items:flex-start; }
  .modal-card { width:100%; padding:16px; margin:auto 0; }
  .upi-layout { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  #upiQrWrap { width:100%; flex:0 0 auto; }
  .payment-qr-image { width:min(64vw, 200px) !important; }
  #upiDetailBox { padding:12px !important; }
  #upiDetailBox > div { max-width:100%; }
  .trip-card-footer { align-items:flex-start; flex-direction:column; gap:12px; }
  .trip-card-actions { width:100%; }
  .trip-card-actions > * { flex:1 1 auto; justify-content:center; }
  .section-block, .grid2, .card { min-width:0; }
  .admin-bar-inner { max-height:42dvh; overflow:auto; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Mobile Responsive Polish for Booking Success Card & Actions
   (Preserves 100% of original texts, markup, status & structure)
   ============================================================ */
@media (max-width: 600px) {
  .success-card {
    padding: 24px 8px;
  }
  .success-summary {
    padding: 14px 16px;
    margin: 0 auto 18px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .success-summary div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .success-summary div span:first-child {
    font-size: 13px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .success-summary div span:last-child {
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 14px;
  }
  .success-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    align-items: stretch;
    box-sizing: border-box;
  }
  .success-actions .wa-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 14px 18px;
    font-size: 14.5px;
    border-radius: 999px;
  }
  .success-actions .btn-ghost,
  .success-actions .btn-primary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 13px 18px;
    border-radius: 999px;
    font-size: 14px;
  }
}