/* Egypt X Diving — design v2, single trip page. Scoped under .v2t: it re-skins the existing markup
   (no markup, SEO, structured-data or booking-engine change) so it cannot touch any other page.
   Same tokens as design-v2.css so listing and trip pages read as one identity. Uses the site's own Inter. */
.v2t{--ink:#003a5a;--brand:#0073b0;--brand-2:#0090d4;--coral:#ff5233;--coral-2:#e83c1f;--text:#1f2937;--muted:#4b5563;--line:#e5edf3;--bg:#f4f9fc;
  background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
.v2t .font-display{font-family:Inter,system-ui,sans-serif;letter-spacing:-.02em}
.v2t .font-black{font-weight:700}

/* hero: shorter, rounded foot, same ink gradient as the listing banner */
.v2t>div:first-of-type{height:auto;min-height:clamp(340px,52vh,500px);border-end-end-radius:clamp(24px,5vw,40px);border-end-start-radius:clamp(24px,5vw,40px)}
.v2t>div:first-of-type>.absolute.inset-0.bg-gradient-to-t{background:linear-gradient(0deg,rgba(0,34,56,.94),rgba(0,58,90,.55) 55%,rgba(0,115,176,.08))}
.v2t>div:first-of-type h1{font-weight:700;font-size:clamp(28px,6vw,46px);line-height:1.12;letter-spacing:-.02em;max-width:820px;text-wrap:balance}
.v2t>div:first-of-type nav{font-size:14px}
.v2t>div:first-of-type nav a{display:inline-flex;align-items:center;min-height:24px}

/* section headings: same accent rule as the listing */
.v2t h2.font-display{font-size:clamp(20px,3.4vw,24px);font-weight:700;color:var(--ink);padding-inline-start:12px;border-inline-start:6px solid var(--brand);line-height:1.25}
.v2t #related-trips h2.font-display{font-size:clamp(24px,4vw,30px)}

/* cards: white on the pale page, soft line + shadow, never the old flat tint */
.v2t .bg-ocean-50.rounded-2xl,.v2t .bg-ocean-50.rounded-xl{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,58,90,.05),0 8px 22px rgba(0,58,90,.05)}
.v2t .bg-ocean-50.rounded-2xl{border-radius:22px}
.v2t .bg-white.rounded-2xl{border-radius:24px;border-color:var(--line)}
.v2t p.text-gray-600{color:var(--muted);line-height:1.7}

/* booking card */
.v2t #tripBookingCol .bg-white.rounded-3xl{border-radius:28px;border:1px solid var(--line);box-shadow:0 2px 4px rgba(0,58,90,.06),0 24px 48px rgba(0,58,90,.14)}
.v2t #tripBookingCol .bg-gradient-to-br{background:linear-gradient(135deg,var(--ink),var(--brand))}
.v2t #tripBookingCol input,.v2t #tripBookingCol select,.v2t #tripBookingCol textarea{border-radius:14px}
.v2t #tripBookingCol input:focus,.v2t #tripBookingCol select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,115,176,.15)}
.v2t .btn-coral{background:linear-gradient(135deg,#ff6b47,var(--coral-2))}

/* related trips */
.v2t #related-trips a.card-hover{border-radius:24px;border-color:var(--line);box-shadow:0 1px 2px rgba(0,58,90,.06),0 10px 28px rgba(0,58,90,.07);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.v2t #related-trips a.card-hover:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,58,90,.06),0 20px 40px rgba(0,58,90,.14)}

/* phones */
@media (max-width:640px){
  .v2t>div:first-of-type{min-height:300px}
  .v2t>div:first-of-type>.relative{padding-bottom:28px}
  .v2t #tripBookingCol .bg-white.rounded-3xl{border-radius:24px}
}
@media (prefers-reduced-motion:reduce){.v2t #related-trips a.card-hover{transition:none}.v2t #related-trips a.card-hover:hover{transform:none}}

/* no sideways scroll: the single mobile grid track was sized by its widest child (min-content) */
@media (max-width:1023.98px){
  .v2t .grid.lg\:grid-cols-3{grid-template-columns:minmax(0,1fr)}
  .v2t .grid.lg\:grid-cols-3>*{min-width:0}
}
.v2t{overflow-x:clip}

/* trust row: icon above label (the utility classes were not in the purged build) + readable contrast */
.v2t #tripBookingCol .justify-around>div{flex:1 1 0;min-width:0;color:var(--muted);line-height:1.3}
.v2t #tripBookingCol .justify-around>div>:first-child{display:block;margin:0 auto 4px;width:1.25em;height:1.25em}

/* ---- easier to scan: jump bar, anchors ---- */
html:has(.v2t){scroll-behavior:smooth}
.v2t [id]{scroll-margin-top:132px}
.v2t-jump{position:sticky;top:68px;z-index:30;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;margin:-4px 0 0;scrollbar-width:none;background:linear-gradient(var(--bg) 78%,transparent)}
.v2t-jump::-webkit-scrollbar{display:none}
.v2t-jump a{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid #dbe5ec;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:#374151;text-decoration:none;white-space:nowrap;transition:all .25s}
.v2t-jump a:hover,.v2t-jump a:focus-visible{border-color:var(--brand);color:var(--ink);outline:none}
.v2t-jump a:focus-visible{box-shadow:0 0 0 3px rgba(0,115,176,.25)}

/* ---- booking card: never taller than the screen (its pay button must stay reachable) ---- */
/* The card never scrolls inside itself (no inner scrollbar, no clipped corners). It is pinned only while it
   fits the screen — a tiny script adds .v2t-fit — and otherwise scrolls away with the page like any block. */
@media (min-width:1024px){
  .v2t #tripBookingCol>.sticky{position:static}
  .v2t #tripBookingCol>.sticky.v2t-fit{position:sticky;top:84px}
}

/* ---- checkout form: thumb-sized fields, 16px so iOS does not zoom on focus ---- */
.v2t #checkoutForm input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.v2t #checkoutForm select{font-size:16px;min-height:48px}
.v2t #checkoutForm input[type=checkbox],.v2t #checkoutForm input[type=radio]{width:20px;height:20px}
.v2t #checkoutSubmitBtn{min-height:56px;font-size:17px;border-radius:999px}

/* ---- images and boxes: nothing may be cropped by its own frame ---- */
.v2t img{max-width:100%}
.v2t #related-trips a.card-hover{align-items:center}
.v2t #related-trips a.card-hover>div:first-child{width:88px;height:88px;border-radius:16px;overflow:hidden}
.v2t #related-trips a.card-hover img.object-cover{width:100%;height:100%;object-fit:cover}
.v2t #related-trips a.card-hover img.object-contain{width:64px;height:64px;object-fit:contain}
.v2t #gallery .grid>*{border-radius:18px;overflow:hidden}
.v2t #gallery .grid img,.v2t #gallery .grid video{width:100%;height:100%;object-fit:cover;display:block}
.v2t #included>div{border-radius:24px}
.v2t details,.v2t #faq details{border-radius:18px}
.v2t #faq .rounded-xl,.v2t #faq .rounded-2xl{border-radius:18px}

/* ---- shorter booking card: tighter rhythm, and the pay button stays in view while the card scrolls ---- */
.v2t #checkoutForm.space-y-4>*+*{margin-top:14px}
.v2t #checkoutForm #checkoutSubmitBtn{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 0 0 8px #fff,0 10px 24px rgba(232,60,31,.35)}
html:has(.exdp-bar.exdp-in) .v2t #checkoutForm #checkoutSubmitBtn{bottom:calc(var(--exdp-bar-h,3.75rem) + 12px)}

/* ---- the transparent nav (white links) must stay readable on any hero photo, including a bright one ---- */
.v2t>div:first-of-type::before{content:"";position:absolute;inset:0 0 auto 0;height:160px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,34,56,.72),rgba(0,34,56,0))}

/* ---- checkout card: shorter, and the pay button always reachable ---- */
/* overflow:hidden on the card made it a scroll container, so nothing inside could stick; clip rounds the corners without that */
.v2t #tripBookingCol .overflow-hidden{overflow:clip}
/* optional add-ons fold away behind their title (the pay button stays within reach) */
.v2t #extrasBox>p:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;min-height:32px}
.v2t #extrasBox>p:first-child::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:#e0f2fe;color:#0073b0;font-size:20px;line-height:28px;text-align:center;font-weight:700}
.v2t #extrasBox:not(.v2t-collapsed)>p:first-child::after{content:"‘2"}
.v2t #extrasBox.v2t-collapsed>*:not(:first-child){display:none}
.v2t #extrasBox.v2t-collapsed{padding-top:10px;padding-bottom:10px}

/* phone row: the number box may shrink, so it never pushes past the card edge */
.v2t #bkPhoneWrap .flex{min-width:0}
.v2t #bkPhoneWrap .flex>select{flex:0 0 auto;max-width:7.5rem}
.v2t #bkPhoneWrap .flex>input{flex:1 1 0;min-width:0;width:100%}

/* ---- "Book now": one control, phone bar + desktop pill (shown only while the booking card is off screen) ---- */
html:has(.v2t-book){--book-bar-h:76px}
.v2t-book{height:auto;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -10px 30px rgba(0,58,90,.16);font-family:Inter,system-ui,sans-serif}
.v2t-book>button{height:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.v2t-book__price{display:grid;line-height:1.15;min-width:0}
.v2t-book__price small{font-size:12px;font-weight:600;color:#4b5563}
.v2t-book__price b{font-size:24px;font-weight:700;color:#003a5a;letter-spacing:-.01em}
.v2t-book__cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;background:linear-gradient(135deg,#ff6b47,#e83c1f);color:#fff;font-size:16px;font-weight:700;white-space:nowrap;box-shadow:0 8px 20px rgba(232,60,31,.35);transition:transform .2s}
.v2t-book>button:hover .v2t-book__cta{transform:translateY(-2px)}
.v2t-book>button:focus-visible{outline:3px solid #0090d4;outline-offset:3px;border-radius:999px}
@media (min-width:1024px){
  #v2BookBar.v2t-book{display:block;left:50%;right:auto;bottom:24px;width:auto;padding:8px 8px 8px 24px;border-radius:999px;transform:translate(-50%,calc(100% + 48px));box-shadow:0 14px 40px rgba(0,58,90,.28);border:1px solid #e5edf3}
  #v2BookBar.v2t-book.show{transform:translate(-50%,0)}
  .v2t-book>button{gap:28px}
  .v2t-book__price b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.v2t-book__cta{transition:none}}