/* Standalone booking page. Deliberately minimal: this page exists to test
   whether moving booking off the modal entirely (no overlay, no
   scroll-lock, no backdrop-filter, nothing competing with an existing
   page's render) fixes the "opens half, then the rest" render glitch
   that survived seven rounds of modal-specific fixes. It reuses
   .booking-modal-content / .booking-modal-body / .booking-field etc.
   as-is from detail.css for the card and form styling -- only the
   page-level wrapper below is new. */
.book-page-wrap{
  display:flex;
  justify-content:center;
  padding:8px 0 40px;
}
.book-page-wrap .booking-modal-content{
  width:min(94vw,640px);
  margin:0;
}
.book-page-back{
  display:block;
  max-width:640px;
  margin:0 auto 16px;
}

/* Thank-you confirmation overlay, shown if Stripe redirects back to this
   page after payment (?paid=1 or #thank-you). Mirrors the overlay already
   used on the home page (see home.css .thankyou-*), rebuilt here using only
   variables detail.css already defines, since this page doesn't load home.css. */
.thankyou-overlay{position:fixed;inset:0;z-index:2100;padding:20px;background:var(--overlay);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.thankyou-overlay[hidden]{display:none}
.thankyou-card{position:relative;width:min(94vw,460px);background:var(--white);border-radius:var(--radius-lg);border:1px solid rgba(232,185,35,.28);box-shadow:var(--shadow-modal);padding:42px 32px 36px;text-align:center;animation:thankyouPop 340ms var(--ease-ios) both}
.thankyou-badge{width:66px;height:66px;margin:0 auto 20px;border-radius:50%;background:var(--gold);border:1.5px solid var(--black);display:flex;align-items:center;justify-content:center}
.thankyou-badge svg{width:32px;height:32px;color:var(--black)}
.thankyou-title{margin:0 0 12px;font-family:var(--font-display);font-size:var(--fs-8);color:var(--black)}
.thankyou-text{margin:0 0 26px;color:var(--muted-strong);font-size:var(--fs-4);line-height:1.62;font-weight:300}
.thankyou-close-btn{min-width:160px;min-height:44px;padding:0 24px;border-radius:999px;border:1px solid var(--gold-border);background:var(--blue);color:var(--white);font-family:var(--font-body);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform 200ms var(--ease-ios),background-color 200ms var(--ease-ios),border-color 200ms var(--ease-ios)}
.thankyou-close-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.thankyou-close-btn:active{transform:scale(0.96)}
@keyframes thankyouPop{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Elements toggled via the plain `hidden` attribute (multi-TukTuk warning,
   the Stripe payment block when a 2nd TukTuk is needed). Several of these
   already carry an author display:flex/block rule elsewhere, which would
   otherwise beat the UA [hidden]{display:none} default -- this makes
   `hidden` reliably win inside the booking page. */
.book-page-wrap [hidden]{display:none !important}

/* Full-width field inside the 2-column .booking-grid (tour picker, and the
   free-text pickup address once the port/hotel choice is split out). */
.booking-field--full{grid-column:1 / -1}

.booking-warning-note{
  display:block;
  width:100%;
  max-width:560px;
  margin:var(--space-4) auto 0;
  padding:22px 20px;
  border-radius:18px;
  background:rgba(216,91,91,.08);
  border:1px solid rgba(216,91,91,.35);
  color:var(--ttv-x-red);
  font-size:var(--fs-3);
  font-weight:600;
  line-height:1.5;
  text-align:center;
}

/* Friendly (non-warning) info note, same box model as
   .booking-warning-note above but in the site's normal
   blue/gold palette -- used for reassuring info like the
   flat per-TukTuk pricing, as opposed to an actual warning. */
.booking-info-note{
  display:block;
  width:100%;
  max-width:560px;
  margin:var(--space-4) auto 0;
  padding:18px 20px;
  border-radius:18px;
  background:var(--surface-blue);
  border:1px solid var(--gold-border);
  color:var(--muted-strong);
  font-size:var(--fs-3);
  font-weight:600;
  line-height:1.5;
  text-align:center;
}
.booking-info-note strong{ color:var(--black); }

/* ============================================================
   Tablet / desktop: "trip tile board". Below this the page is
   the same single centred column as always. Above it there is
   real width to use, so instead of that column floating in a
   sea of empty gray, the form splits into a small board of
   tiles: one big one on the left for the trip details, three
   smaller ones stacked on the right for the total and the two
   ways to pay -- sized by how much each one actually needs.
   ============================================================ */
@media (min-width:740px){
  .book-page-back{ max-width:900px; }

  .book-page-wrap .booking-modal-content{
    width:min(94vw,900px);
  }
  .book-page-wrap .booking-modal-body{
    padding:42px 42px 46px;
  }

  #bookingForm{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    grid-template-areas:
      "trip     trip"
      "total    inperson"
      "card     card";
    gap:20px;
  }

  .booking-grid{
    grid-area:trip;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:0;
    gap:16px 20px;
    background:var(--white);
    border:1px solid rgba(232,185,35,.30);
    border-radius:28px;
    padding:26px 28px;
    box-shadow:0 10px 28px rgba(26,54,93,.07);
  }

  .booking-warning-note{ grid-column:1 / -1; }
  .booking-info-note{ grid-column:1 / -1; }

  .booking-total-pill{
    grid-area:total;
    width:auto;
    max-width:none;
    height:auto;
    margin:0;
    min-height:100%;
    padding:14px 18px;
    flex-direction:column;
    gap:2px;
    border-radius:24px;
    background:rgba(232,185,35,.12);
    border:1.5px solid var(--gold-border);
    box-shadow:0 10px 24px rgba(26,54,93,.06);
  }
  .booking-total-inner{ flex-direction:column; gap:2px; }
  .booking-total-inner strong:not(.booking-total-label){
    font-family:var(--font-display);
    font-weight:400;
    font-size:var(--fs-11);
    color:var(--black);
  }

  .booking-inquiry-group{
    grid-area:inperson;
    margin-top:0;
    justify-content:center;
    background:rgba(26,54,93,.05);
    border:1px solid rgba(26,54,93,.12);
    border-radius:24px;
    padding:20px 22px;
  }

  .booking-payment-tile{
    grid-area:card;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--blue);
    border-radius:24px;
    padding:22px;
  }
  .booking-payment-tile .booking-payment-heading{ margin-top:0; color:var(--white); }
  .booking-payment-tile .booking-small-note{ color:rgba(255,255,255,.76); }
  .booking-payment-tile .booking-secure-badge{ color:rgba(255,255,255,.66); }
  .booking-payment-group{
    width:min(100%,420px);
    margin:14px auto 0;
  }

  .booking-status{ grid-column:1 / -1; }
}