/* Small additions for the Laravel build (form feedback, empty states). */
.form-alert{ padding:14px 18px; margin-bottom:20px; border-radius:var(--radius); font-size:.92rem; line-height:1.5; }
.form-alert ul{ margin:6px 0 0; padding-left:18px; }
.form-alert-ok{ background:rgba(63,74,52,.12); border:1px solid var(--green-lt); color:var(--green); }
.form-alert-err{ background:rgba(198,53,91,.08); border:1px solid var(--cerise); color:var(--cerise-dp); }
.empty-state{ text-align:center; color:var(--ink-soft); padding:40px 0; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Book & Pay (checkout) ---------------------------------------- */
.checkout{ padding: 56px 0 72px; }
.checkout-grid{ display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 40px; align-items:start; }

.checkout-form{ display:flex; flex-direction:column; gap: 34px; }
.checkout-step h2{ font-family: var(--font-display); font-weight:400; font-size: 1.5rem; margin: 0 0 4px; }
.checkout-step > p{ color: var(--ink-soft); margin: 0 0 20px; font-size: .95rem; }
.checkout-step .field{ margin-bottom: 0; }
.checkout-step .field-row:last-child{ margin-bottom: 0; }
.field .hint{ font-size:.8rem; color: var(--ink-soft); margin-top: 6px; }

.pay-options{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px){ .pay-options{ grid-template-columns: 1fr; } }
.pay-option{ position:relative; display:block; border:1px solid var(--line); border-radius: 6px; padding: 16px 18px 16px 46px; background: var(--bg); cursor:pointer; }
.pay-option input{ position:absolute; left:16px; top:19px; accent-color: var(--cerise); width:18px; height:18px; }
.pay-option b{ display:block; font-weight:600; }
.pay-option span{ font-size:.88rem; color: var(--ink-soft); }
.pay-option:has(input:checked){ border-color: var(--cerise); box-shadow: 0 0 0 1px var(--cerise); background: var(--card); }
.pay-option:has(input:focus-visible){ outline: 2px solid var(--cerise); outline-offset: 2px; }

.order-summary{ position: sticky; top: calc(var(--header-h) + 20px); background: var(--card); border:1px solid var(--line); border-radius: 6px; overflow:hidden; }
.order-summary-media{ aspect-ratio: 16 / 9; background: var(--bg-deep-2) center/cover no-repeat; }
.order-summary-body{ padding: 22px 24px 24px; }
.order-summary h3{ font-family: var(--font-display); font-weight:400; font-size: 1.35rem; line-height:1.25; margin: 0 0 4px; }
.order-summary .meta{ color: var(--ink-soft); font-size: .9rem; margin: 0 0 18px; }
.order-lines{ margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display:grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: .95rem; }
.order-lines dt{ color: var(--ink-soft); }
.order-lines dd{ margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.order-due{ display:flex; justify-content:space-between; align-items:baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-due span{ font-weight:600; }
.order-due strong{ font-family: var(--font-display); font-weight:400; font-size: 2rem; color: var(--cerise-dp); font-variant-numeric: tabular-nums; }
.order-balance{ font-size: .85rem; color: var(--ink-soft); margin: 6px 0 0; text-align: right; }
.order-secure{ margin: 20px 0 0; font-size: .85rem; color: var(--ink-soft); }
.order-secure img{ display:block; max-width: 220px; margin-top: 10px; }
.order-empty{ padding: 28px 24px; color: var(--ink-soft); }

.checkout-submit{ display:flex; flex-direction:column; gap: 10px; align-items:flex-start; }
.checkout-submit .btn{ padding: 15px 34px; }
.checkout-submit small{ color: var(--ink-soft); }

.trip-info-link{ display:block; margin-top: 8px; font-size: .85rem; color: var(--ink-soft); text-decoration: underline; }

/* Result page */
.pay-result{ max-width: 640px; margin: 0 auto; text-align:center; padding: 72px 0 88px; }
.pay-result-icon{ width: 64px; height: 64px; border-radius: 50%; display:grid; place-items:center; margin: 0 auto 22px; }
.pay-result-icon svg{ width: 30px; height: 30px; }
.pay-result-icon.ok{ background: rgba(63,74,52,.14); color: var(--green); }
.pay-result-icon.wait{ background: rgba(199,154,70,.18); color: var(--terracotta-dp); }
.pay-result-icon.fail{ background: rgba(198,53,91,.12); color: var(--cerise-dp); }
.pay-result h1{ font-family: var(--font-display); font-weight:400; font-size: 2.2rem; margin: 0 0 12px; }
.pay-result .receipt{ text-align:left; background: var(--card); border:1px solid var(--line); border-radius: 6px; padding: 20px 24px; margin: 28px 0; }
.pay-result .receipt dl{ display:grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin:0; }
.pay-result .receipt dt{ color: var(--ink-soft); }
.pay-result .receipt dd{ margin:0; text-align:right; }
.checkout-legend{ padding:0; margin: 18px 0 10px; font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.order-fee{ font-size: .85rem; color: var(--ink-soft); margin: 10px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 6px; line-height: 1.5; }
.fee-notice{ font-size: .85rem; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 6px 0 0; max-width: 42em; line-height: 1.55; }
.fee-notice strong{ color: var(--ink); }
.departure-box{ display:flex; justify-content:space-between; align-items:center; gap:16px; background: var(--card); border:1px solid var(--line); border-left:3px solid var(--cerise); border-radius:6px; padding:14px 18px; margin:0 0 18px; }
.departure-box strong{ display:block; }
.departure-box span{ color: var(--ink-soft); font-size:.92rem; }
.departure-box a{ font-size:.88rem; color: var(--terracotta-dp); text-decoration: underline; white-space:nowrap; }
.field input[readonly]{ background: var(--card); color: var(--ink-soft); cursor: default; }
.depart-card .btn-departed{ background: transparent; border:1px solid var(--line); color: var(--ink-soft); cursor: default; pointer-events: none; }
.depart-card .btn-departed-link{ background: transparent; border:1px solid var(--ink-soft); color: var(--ink); }
.depart-dates small{ font-size:.7rem; color: var(--ink-soft); }
.listing-price{ font-weight:600; color: var(--cerise-dp); margin: -4px 0 12px; }
.listing-price span{ font-weight:400; font-size:.85rem; color: var(--ink-soft); }
.footer-bottom a{ display:inline; margin:0; font-size:inherit; color: var(--ink-on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover{ color: var(--ink-on-dark); }

/* ---- Checkout on phones and small tablets --------------------------
   Placed last on purpose: it must come after the .order-summary rule so
   "position: static" wins and the summary no longer floats over the form. */
.mobile-due{ display:none; }
@media (max-width: 900px){
  .checkout{ padding: 36px 0 56px; }
  .checkout-grid{ grid-template-columns: 1fr; gap: 28px; }
  .order-summary{ position: static; top: auto; order: 0; }   /* form first, summary after */
  .order-summary-media{ aspect-ratio: 21 / 9; }
  .mobile-due{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%;
    padding: 12px 14px; background: var(--card); border:1px solid var(--line); border-radius:6px; }
  .mobile-due span{ font-size:.9rem; color: var(--ink-soft); }
  .mobile-due strong{ font-family: var(--font-display); font-weight:400; font-size:1.4rem; color: var(--cerise-dp); }
  .checkout-submit .btn{ width:100%; justify-content:center; }
  .departure-box{ flex-wrap: wrap; }
}
.mobile-due[hidden]{ display:none !important; }

/* ---- Licences & certificates (About page) ------------------------- */
.cred-grid{ list-style:none; margin: 36px 0 0; padding:0; display:grid; gap: 28px 22px;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cred-card{ display:flex; flex-direction:column; gap: 10px; width:100%; padding:0; margin:0; border:0;
            background:none; text-align:left; font:inherit; color:inherit; text-decoration:none; cursor: zoom-in; }
a.cred-card{ cursor: pointer; }
.cred-paper{ position:relative; display:block; aspect-ratio: 3 / 4; background:#fff; border:1px solid var(--line);
             border-radius: 4px; overflow:hidden; box-shadow: 0 1px 2px rgba(42,32,22,.06), 0 8px 22px -12px rgba(42,32,22,.35);
             transition: transform .25s ease, box-shadow .25s ease; }
.cred-paper img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; }
.cred-card:hover .cred-paper, .cred-card:focus-visible .cred-paper{ transform: translateY(-3px);
             box-shadow: 0 1px 2px rgba(42,32,22,.08), 0 16px 30px -14px rgba(42,32,22,.45); }
.cred-card:focus-visible{ outline: 2px solid var(--cerise); outline-offset: 6px; border-radius: 4px; }
.cred-doc{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
           color: var(--ink-soft); background: var(--card); }
.cred-doc svg{ width: 46px; height: 46px; }
.cred-doc span{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; }
.cred-zoom{ position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
            background: rgba(42,32,22,.78); color:#fff; opacity:.9; transition: opacity .2s; }
.cred-zoom svg{ width:18px; height:18px; }
.cred-title{ font-weight:600; line-height:1.3; }
.cred-meta{ font-size:.82rem; color: var(--ink-soft); margin-top:-6px; line-height:1.4; }
@media (max-width: 560px){ .cred-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 14px; } }
@media (prefers-reduced-motion: reduce){ .cred-paper{ transition:none; } }

/* Full-screen viewer */
.cred-viewer{ position:fixed; inset:0; z-index:1000; background: rgba(20,15,10,.94); display:flex; flex-direction:column; }
.cred-viewer[hidden]{ display:none; }
.cred-viewer-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 16px;
                  padding-top: calc(12px + env(safe-area-inset-top, 0px)); color:#F2E8D6; }
.cred-viewer-bar > span{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cred-viewer-tools{ display:flex; gap:8px; align-items:center; flex-shrink:0; }
.cred-viewer-tools button, .cred-viewer-tools a{ background: rgba(255,255,255,.12); color:#fff; border:0; border-radius: 999px;
            padding: 8px 14px; font: inherit; font-size:.85rem; cursor:pointer; text-decoration:none; }
.cred-viewer-tools button:hover, .cred-viewer-tools a:hover{ background: rgba(255,255,255,.22); }
.cred-viewer-stage{ flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding: 8px 16px 16px;
                    touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.cred-viewer-stage img{ max-width:100%; max-height:100%; object-fit:contain; cursor: zoom-in; background:#fff; border-radius:2px;
                        box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cred-viewer.is-zoomed .cred-viewer-stage{ display:block; }
.cred-viewer.is-zoomed .cred-viewer-stage img{ max-width:none; max-height:none; width: 200%; cursor: zoom-out; }
@media (min-width: 900px){ .cred-viewer.is-zoomed .cred-viewer-stage img{ width: 160%; } }
.cred-viewer-hint{ text-align:center; color: rgba(242,232,214,.7); font-size:.8rem; margin:0; padding: 0 16px 14px;
                   padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 480px){ .cred-viewer-tools a{ display:none; } } /* keep the bar tidy on small phones */

/* ---- Policy pages (Terms, Privacy) --------------------------------- */
.policy{ padding: calc(var(--header-h, 80px) + 48px) 0 80px; }
.policy-wrap{ max-width: 760px; }
.policy-head{ margin-bottom: 28px; }
.policy-head h1{ font-family: var(--font-display); font-weight:400; font-size: clamp(2rem, 5vw, 2.8rem); line-height:1.15; margin: 6px 0 14px; }
.policy-meta{ display:flex; flex-wrap:wrap; gap: 8px 20px; align-items:center; font-size:.9rem; color: var(--ink-soft); }
.policy-meta a{ color: var(--cerise-dp); }
.policy-pdf::before{ content: "↓ "; }
.policy-toc{ background: var(--card); border:1px solid var(--line); border-radius: 6px; padding: 18px 22px; margin: 0 0 36px; }
.policy-toc strong{ display:block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.policy-toc ol{ margin:0; padding-left: 20px; columns: 2; column-gap: 32px; }
.policy-toc li{ margin: 4px 0; break-inside: avoid; }
.policy-toc a{ color: var(--ink); }
@media (max-width: 600px){ .policy-toc ol{ columns: 1; } }
.policy-body{ font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.policy-body h2{ font-family: var(--font-display); font-weight:400; font-size: 1.55rem; line-height:1.25; margin: 2.2em 0 .6em;
                 padding-top: .8em; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
.policy-body h2:first-child{ margin-top: 0; }
.policy-body h3{ font-size: 1.1rem; margin: 1.6em 0 .4em; scroll-margin-top: calc(var(--header-h, 80px) + 20px); }
.policy-body p, .policy-body ul, .policy-body ol{ margin: 0 0 1em; }
.policy-body ul, .policy-body ol{ padding-left: 1.4em; }
.policy-body li{ margin: .3em 0; }
.policy-body a{ color: var(--cerise-dp); overflow-wrap: anywhere; }
.policy-body table{ width:100%; border-collapse: collapse; margin: 0 0 1.2em; font-size:.95rem; display:block; overflow-x:auto; }
.policy-body th, .policy-body td{ border:1px solid var(--line); padding: 8px 10px; text-align:left; }
.policy-body blockquote{ margin: 0 0 1em; padding: 12px 16px; background: var(--card); border-left: 3px solid var(--cerise); }
.policy-body h2:target, .policy-body h3:target{ color: var(--cerise-dp); }
.policy-empty{ background: var(--card); border:1px solid var(--line); border-radius: 6px; padding: 24px; }

/* ---- Quick enquiry (opens in place) ------------------------------- */
html.qe-open{ overflow:hidden; }
.qe{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; }
.qe[hidden]{ display:none; }
.qe-backdrop{ position:absolute; inset:0; background: rgba(28,20,12,.55); }
.qe-sheet{ position:relative; width:100%; max-width: 540px; max-height: calc(100vh - 40px); overflow-y:auto; overscroll-behavior: contain;
           background: var(--bg); border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 26px 26px 22px; }
.qe-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; margin-bottom: 16px; }
.qe-eyebrow{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--cerise-dp); }
.qe-head h2{ font-family: var(--font-display); font-weight:400; font-size: 1.55rem; line-height:1.2; margin: 4px 0 0; }
.qe-close{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background: var(--card);
           font-size: 1rem; cursor:pointer; color: var(--ink); }
.qe-form .field{ margin-bottom: 14px; }
.qe-form .field label{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:6px; }
.qe-form input, .qe-form select, .qe-form textarea{ width:100%; padding: 11px 12px; border:1px solid var(--line); border-radius: 4px;
           background:#fff; font: inherit; font-size: 16px; color: var(--ink); }
.qe-form input:focus, .qe-form select:focus, .qe-form textarea:focus{ outline: 2px solid var(--cerise); outline-offset: 1px; border-color: transparent; }
.qe-group{ border:0; padding:0; margin:0; min-width:0; }
.qe-group[hidden]{ display:none; }
.qe-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.qe-row-3{ grid-template-columns: 1.4fr 1fr 1fr; }
.qe-note{ margin: -4px 0 14px; font-size:.85rem; color: var(--green); min-height: 1em; }
.qe-opt{ text-transform:none; letter-spacing:0; font-family: var(--font-body); }
.qe-submit{ width:100%; justify-content:center; padding: 14px; margin-top: 4px; }
.qe-privacy{ font-size:.8rem; color: var(--ink-soft); text-align:center; margin: 10px 0 0; }
.qe-done{ text-align:center; padding: 10px 0 6px; }
.qe-done h3{ font-family: var(--font-display); font-weight:400; font-size: 1.5rem; margin: 0 0 8px; }
.qe-done p{ color: var(--ink-soft); margin: 0 0 18px; }
.qe-toast{ position:fixed; left:50%; bottom: 24px; transform: translateX(-50%); z-index:1200; background: var(--green); color:#fff;
           padding: 12px 20px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size:.92rem; max-width: calc(100% - 32px);
           animation: qeToast 6s forwards; }
@keyframes qeToast{ 0%,85%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }

/* Phones: a full-height sheet sliding up from the bottom */
@media (max-width: 600px){
  .qe{ padding:0; align-items:flex-end; }
  .qe-sheet{ max-width:none; max-height: 94vh; border-radius: 14px 14px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
             animation: qeUp .25s ease-out; }
  .qe-row, .qe-row-3{ grid-template-columns: 1fr 1fr; }
  .qe-row-3 .field:first-child{ grid-column: 1 / -1; }
  .qe-head h2{ font-size: 1.3rem; }
}
@keyframes qeUp{ from{ transform: translateY(40px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .qe-sheet{ animation:none; } }

/* Buttons that open the quick form look exactly like the links they replace */
button.route-back-cta{ width:100%; border:0; cursor:pointer; }
button.card-link{ font-family: var(--font-mono); font-size: .72rem; letter-spacing:.05em; text-transform:uppercase;
  background: var(--ink); color:#fff; padding: 7px 15px; border-radius: 999px; margin-top:auto; display:inline-block;
  border:0; cursor:pointer; align-self:flex-start; transition: background .2s ease; }
button.card-link:hover{ background: var(--cerise); }
.btn-inline{ background:none; border:0; padding:0; font:inherit; color: var(--cerise-dp); text-decoration: underline; cursor:pointer; }

/* Kilimanjaro calendar: arriving from a route card */
.depart-card.is-highlight{ outline: 2px solid var(--cerise); outline-offset: 3px; box-shadow: 0 10px 30px -12px rgba(198,53,91,.45); }
.depart-card{ scroll-margin-top: calc(var(--header-h, 66px) + 24px); }
.depart-notice{ background: var(--card); border:1px solid var(--line); border-left: 3px solid var(--cerise); border-radius: 6px;
                padding: 14px 18px; margin: 0 0 20px; line-height: 1.55; }
.depart-notice-ok{ border-left-color: var(--green); }

/* Destination page: centred Book Now before Related Itineraries */
.book-now-band{ text-align:center; background: var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.book-now-band .wrap{ max-width: 620px; }
.book-now-band h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 10px; }
.book-now-band p{ color: var(--ink-soft); margin: 0 0 22px; }
.book-now-btn{ padding: 16px 44px; font-size: 1rem; }
.book-now-note{ font-size: .9rem; margin: 18px 0 0 !important; }
.trip-info-link.btn-inline{ display:block; margin: 8px auto 0; font-size:.85rem; color: var(--ink-soft); }
@media (max-width: 600px){ .book-now-btn{ width:100%; justify-content:center; } }