/* ============================================================================
   CHASING PERSPECTIVES — BOOKING / CHECKOUT MODAL
   A Luma-style in-page checkout: click a Register button, the page blurs behind
   a modal with a soft, slowly drifting glow. Ticket choice happens here; the
   actual payment hands off to Stripe's embedded checkout once the backend is
   live (card data never touches our pages).

   Embed on any page with:
     <a class="cp-checkout-btn" data-cp-checkout data-cp-workshop="iceland-workshop">Register</a>
     <script src="workshops-data.js"></script>
     <script src="booking.js"></script>
   ============================================================================ */

/* The Register button (matches site button styling, usable inline) */
.cp-checkout-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:1rem; line-height:1; padding:14px 26px; border-radius:999px;
  border:none; color:#fff; background:linear-gradient(135deg,#17a34a,#0e7a64); box-shadow:0 8px 22px rgba(14,122,100,.32);
  transition:transform .15s ease, box-shadow .2s ease; text-decoration:none; }
.cp-checkout-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(14,122,100,.4); }
.cp-checkout-btn:active { transform:translateY(0); }

/* ---- Overlay + blurred backdrop ---- */
.cp-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .28s ease; }
.cp-overlay.open { opacity:1; pointer-events:auto; }
.cp-overlay .cp-scrim { position:absolute; inset:0; background:rgba(10,11,16,.55);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); }

/* ---- The soft, slow moving glow (sits above the blur, behind the card) ---- */
.cp-glow { position:absolute; inset:0; overflow:hidden; }
.cp-glow span { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  will-change:transform; mix-blend-mode:screen; }
.cp-glow .g1 { width:46vw; height:46vw; left:8%;  top:6%;   background:#27d98a;
  animation:cpDrift1 22s ease-in-out infinite alternate; }
.cp-glow .g2 { width:42vw; height:42vw; right:6%; top:14%;  background:#5b8cff;
  animation:cpDrift2 26s ease-in-out infinite alternate; }
.cp-glow .g3 { width:40vw; height:40vw; left:24%; bottom:2%; background:#eb5fa0;
  animation:cpDrift3 30s ease-in-out infinite alternate; }
.cp-glow .g4 { width:34vw; height:34vw; right:18%; bottom:6%; background:#f2c14e;
  animation:cpDrift4 24s ease-in-out infinite alternate; }

@keyframes cpDrift1 { from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(8vw,6vh,0) scale(1.15); } }
@keyframes cpDrift2 { from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-7vw,5vh,0) scale(.92); } }
@keyframes cpDrift3 { from{ transform:translate3d(0,0,0) scale(.95); } to{ transform:translate3d(6vw,-7vh,0) scale(1.2); } }
@keyframes cpDrift4 { from{ transform:translate3d(0,0,0) scale(1.05); } to{ transform:translate3d(-6vw,-5vh,0) scale(.9); } }

@media (prefers-reduced-motion: reduce){
  .cp-glow span { animation:none; }
}

/* ---- The modal card ---- */
.cp-card { position:relative; z-index:1; width:min(460px,100%); max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(14px) scale(.98); opacity:0; transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.cp-overlay.open .cp-card { transform:translateY(0) scale(1); opacity:1; }

.cp-card-media { height:128px; background:#0c0f14 center/cover no-repeat; position:relative; }
.cp-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45)); }
.cp-x { position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; cursor:pointer; font-size:1.2rem; color:#222; display:grid; place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.25); }
.cp-x:hover { background:#fff; }

.cp-card-body { padding:22px 24px 24px; }
/* Typing on a touch screen (booking.js adds .cp-typing while a field has focus): room below the content so
   any field can come up clear of the keyboard, landing near the top of the card. */
.cp-overlay.cp-typing .cp-card-body { padding-bottom:55vh; }
.cp-overlay.cp-typing .cp-card { scroll-padding-top:14vh; }
.cp-eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#17a34a; }
.cp-title { font-size:1.45rem; font-weight:900; color:#16181d; margin:6px 0 4px; line-height:1.12; }
.cp-meta { display:flex; flex-direction:column; gap:5px; margin:8px 0 18px; }
.cp-meta-row { display:flex; align-items:center; gap:9px; font-size:.92rem; color:#4a4f57; }
.cp-meta-row svg { width:16px; height:16px; color:#8a93a0; flex:none; }

.cp-section-label { font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a93a0;
  margin:0 0 10px; }

/* Ticket options (radio cards, Luma-style) */
.cp-tickets { display:flex; flex-direction:column; gap:10px; }
.cp-ticket { display:flex; align-items:center; gap:13px; padding:14px 16px; border:1.5px solid #e7e9ee; border-radius:14px;
  cursor:pointer; transition:border-color .15s, background .15s; }
.cp-ticket:hover { border-color:#cdd2db; }
.cp-ticket.sel { border-color:#17a34a; background:#f0fbf4; }
.cp-ticket.sold { opacity:.5; cursor:not-allowed; }
.cp-radio { width:20px; height:20px; border-radius:50%; border:2px solid #cdd2db; flex:none; position:relative; }
.cp-ticket.sel .cp-radio { border-color:#17a34a; }
.cp-ticket.sel .cp-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:#17a34a; }
.cp-ticket .cp-t-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-ticket .cp-t-main b { font-size:1rem; color:#16181d; }
.cp-ticket .cp-t-main span { font-size:.82rem; color:#8a93a0; }
.cp-ticket .cp-t-price { margin-left:auto; font-weight:800; color:#16181d; white-space:nowrap; }
.cp-vip-flag { display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(135deg,#7895f3,#eb5381); color:#fff; padding:2px 7px; border-radius:999px; margin-left:6px; }

/* Date options (shown when a product offers more than one date) */
.cp-dates-wrap { margin-bottom:18px; }
.cp-dates { display:flex; flex-direction:column; gap:10px; }
.cp-date { display:flex; align-items:center; gap:13px; padding:14px 16px; border:1.5px solid #e7e9ee; border-radius:14px;
  cursor:pointer; transition:border-color .15s, background .15s; background:#fff; text-align:left; width:100%; font:inherit; }
.cp-date:hover { border-color:#cdd2db; }
.cp-date.sel { border-color:#17a34a; background:#f0fbf4; }
.cp-date.sold { opacity:.5; cursor:not-allowed; }
.cp-date.sel .cp-radio { border-color:#17a34a; }
.cp-date.sel .cp-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:#17a34a; }
.cp-date .cp-date-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-date .cp-date-main b { font-size:1rem; color:#16181d; }
.cp-date .cp-date-main span { font-size:.82rem; color:#8a93a0; }

/* Quantity */
.cp-qty { display:flex; align-items:center; justify-content:space-between; margin:16px 0 4px; }
.cp-qty .cp-q-ctl { display:flex; align-items:center; gap:14px; }
.cp-q-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #e7e9ee; background:#fff; cursor:pointer;
  font-size:1.2rem; color:#16181d; display:grid; place-items:center; }
.cp-q-btn:hover { border-color:#cdd2db; }
.cp-q-btn:disabled { opacity:.4; cursor:not-allowed; }
.cp-q-num { font-size:1.1rem; font-weight:800; min-width:22px; text-align:center; }

/* Footer / pay */
.cp-total { display:flex; align-items:baseline; justify-content:space-between; margin:18px 0 14px;
  padding-top:16px; border-top:1px solid #eef0f3; }
.cp-total .cp-tl { color:#4a4f57; font-size:.95rem; }
.cp-total .cp-tv { font-size:1.5rem; font-weight:900; color:#16181d; }
.cp-pay { width:100%; padding:15px; border:none; border-radius:14px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:1.02rem; color:#fff; background:linear-gradient(135deg,#17a34a,#0e7a64);
  box-shadow:0 10px 26px rgba(14,122,100,.32); transition:transform .15s, box-shadow .2s; }
.cp-pay:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(14,122,100,.42); }
.cp-fineprint { text-align:center; font-size:.82rem; color:#8a93a0; margin:11px 0 0; }
.cp-fineprint svg { width:13px; height:13px; vertical-align:-2px; margin-right:3px; }

/* ---- Unavailable state (Hidden / Draft / Closed products): hide the booking
   controls, show a notice + a contact link instead ---- */
.cp-unavail { display:none; }
.cp-card-body.unavail #cpTicketLabel,
.cp-card-body.unavail #cpTickets,
.cp-card-body.unavail .cp-qty,
.cp-card-body.unavail .cp-total,
.cp-card-body.unavail #cpPay,
.cp-card-body.unavail .cp-fineprint { display:none; }
.cp-card-body.unavail .cp-unavail { display:block; }
.cp-unavail-msg { font-size:.98rem; line-height:1.55; color:#4a4f57; margin:4px 0 18px; }
.cp-unavail-cta { display:block; text-align:center; text-decoration:none; }
.cp-unavail-close { width:100%; margin-top:10px; padding:13px; border-radius:14px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.95rem; color:#5a626d; background:#f4f6f9; border:1.5px solid #e1e4ea; }
.cp-unavail-close:hover { border-color:#16181d; color:#16181d; }

/* ---- Waitlist form (shown in the modal when a product is Closed) ---- */
.cp-waitlist { display:none; }
.cp-card-body.waitlist #cpTicketLabel,
.cp-card-body.waitlist #cpTickets,
.cp-card-body.waitlist .cp-qty,
.cp-card-body.waitlist .cp-total,
.cp-card-body.waitlist #cpPay,
.cp-card-body.waitlist > .cp-fineprint,
.cp-card-body.waitlist #cpUnavail { display:none; }
.cp-card-body.waitlist .cp-waitlist { display:block; }

.cp-wl-intro { font-size:.94rem; line-height:1.5; color:#4a4f57; margin:2px 0 16px; }
.cp-wl-form label { display:block; font-size:.76rem; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:#8a93a0; margin-bottom:12px; }
.cp-wl-names { display:flex; gap:10px; }
.cp-wl-names label { flex:1; min-width:0; }
.cp-wl-form input, .cp-wl-form textarea { display:block; width:100%; box-sizing:border-box; margin-top:6px;
  font-family:inherit; font-size:.96rem; font-weight:500; text-transform:none; letter-spacing:normal; color:#16181d;
  padding:11px 13px; border:1.5px solid #e1e4ea; border-radius:11px; outline:none; transition:border-color .15s; }
.cp-wl-form input:focus, .cp-wl-form textarea:focus { border-color:#17a34a; }
.cp-wl-form textarea { resize:vertical; min-height:64px; }
.cp-wl-opt { font-weight:600; color:#b3b9c2; text-transform:none; letter-spacing:normal; }
.cp-wl-form #cpWlSubmit { margin-top:4px; }
.cp-wl-note { text-align:center; font-size:.8rem; color:#8a93a0; margin:11px 0 0; }
.cp-wl-done { text-align:center; padding:6px 0 2px; }
.cp-wl-tick { width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#17a34a,#0e7a64); box-shadow:0 10px 24px rgba(14,122,100,.32); }
.cp-wl-tick svg { width:26px; height:26px; }
.cp-wl-done h3 { font-size:1.3rem; font-weight:900; color:#16181d; margin:0 0 8px; }
.cp-wl-done p { font-size:.96rem; line-height:1.55; color:#4a4f57; margin:0 0 18px; }

/* ---- Two-button on-page booking card (Enquire for more info + Secure a spot) ---- */
.enrol-cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-top:26px; }
.enrol-cta-row .btn { flex:1 1 220px; justify-content:center; }
.btn-enquire { background:#fff; color:#16181d; border:1.6px solid #d9dde4; }
.btn-enquire:hover { border-color:#16181d; background:#fff; }

/* ---- bringing a partner / the partner rate, on this WHITE card -------------
   styles.css dresses these two blocks for the app's dark sheet: white text,
   white-alpha borders, a pale grey ask link. This card is white, so the label
   on the checkbox could not be seen at all and the ask line barely (Josh,
   14 Sep 2026). Same palette as the rest of the card, and it loads after
   styles.css, so these win. */
.cp-card .cp-bring { border:1px solid #dfe4ea; background:#f6f8fa; }
.cp-card .cp-bring b { color:#16181d; }
.cp-card .cp-bring > span > span { color:#5c6672; }
.cp-card .cp-bring input { accent-color:#17a34a; }
.cp-card .cp-partner-ask { border:1px dashed #c3cad3; background:#fff; color:#2b3440; font-weight:600; }
.cp-card .cp-partner-ask:hover { border-color:#17a34a; color:#16181d; }
.cp-card .cp-inp { border:1px solid #dfe4ea; background:#fff; color:#16181d; }
.cp-card .cp-inp::placeholder { color:#8a93a0; }
.cp-card .cp-inp:focus { border-color:#17a34a; box-shadow:0 0 0 3px rgba(23,163,74,.15); }
.cp-card .cp-partner-note { color:#5c6672; }
.cp-card .cp-partner-note.ok { color:#17a34a; }
.cp-card .cp-partner-note.bad { color:#c0392b; }