/* Bookings page, PiGi branch (template-bookings.php) — the "Bookings"
   design. On css/information.css's tokens and hero/section classes; the
   page root carries .cttp-info and .cttp-bk. */

.bk-shade { background: linear-gradient(180deg, rgb(10 32 41 / 60%) 0%, rgb(10 32 41 / 15%) 40%, rgb(10 32 41 / 82%) 100%); }
.cttp-bk .bk-hero { min-height: clamp(400px, 56vh, 560px); }
/* Heading block, then the three chips in a row beneath it. The lede is
   one line wherever the screen allows (it wraps on a phone). */
.bk-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.bk-lede { max-width: none; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bk-chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 999px; background: rgb(10 22 28 / 60%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / 25%); color: #fff; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }

.bk-main { padding: clamp(2.5rem, 5vw, 4rem) 0; }
/* The summary is a fixed 380px so the wizard gets the rest: its calendar
   sits beside the times only when its content box is >= 600px (a container
   query in the wizard), i.e. a column of ~652px+. The design's 1.55fr/1fr
   left it 647px — 595px inside — and stacked the date step. */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
/* A wider frame than the other pages (1320 vs 1180) so a 380px summary and
   a side-by-side wizard both fit — and the hero, facts and gift rows on
   the same frame so their edges line up with the cards. */
.cttp-bk .ci-wrap { max-width: 1320px; }

/* The live wizard. Its own footer is full bleed, so the card adds no
   padding; overflow clips the iframe to the radius. */
.bk-widget { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.bk-widget__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.cttp-info .bk-widget__h { font-size: 1.35rem; }
.bk-live { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.bk-live span { width: 8px; height: 8px; border-radius: 50%; background: var(--go); }

.bk-side { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 1.25rem; }
.bk-price { border-radius: var(--radius); background: var(--granite-900); color: #fff; padding: 1.75rem; }
.bk-price__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bk-save { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--sun-500); color: var(--granite-900); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; }
.cttp-info .bk-price__name { margin-top: 0.6rem; font-size: 1.5rem; }
.bk-price__row { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.bk-price__now { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.bk-price__hi { color: rgb(255 255 255 / 75%); }
.bk-price__was { color: rgb(255 255 255 / 55%); font-size: 0.92rem; }
.bk-price__window { font-size: 0.88rem; color: rgb(255 255 255 / 70%); margin-top: 0.2rem; }
.bk-incl { margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgb(255 255 255 / 14%); list-style: none; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; line-height: 1.45; }
.bk-incl li { display: flex; gap: 0.6rem; align-items: baseline; }
.bk-incl li span { color: var(--sky-300); font-weight: 700; }
.cttp-info .bk-addon { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius); background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); color: #fff; text-decoration: none; transition: background .15s; }
.cttp-info .bk-addon:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.bk-addon__t { display: block; font-weight: 700; line-height: 1.3; }
.bk-addon__s { display: block; font-size: 0.85rem; color: rgb(255 255 255 / 70%); }

.bk-next { padding: 1.5rem; }
.cttp-info .bk-next__h { margin-top: 0; font-size: 1.15rem; }
.bk-steps { margin-top: 1rem; gap: 1rem; }
.bk-steps li { grid-template-columns: 32px 1fr; gap: 0.8rem; }
.bk-steps .ci-num { width: 32px; height: 32px; }
.bk-steps .ci-steps__s { font-size: 0.95rem; line-height: 1.55; }
.bk-next__links { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.92rem; }

.cttp-info .bk-wa { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: #128C7E; text-decoration: none; color: #fff; box-shadow: 0 10px 30px rgb(18 140 126 / 35%); transition: background .15s; }
.cttp-info .bk-wa:hover { background: #25D366; color: #fff; }
.bk-wa__ic { width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgb(255 255 255 / 20%); display: inline-flex; align-items: center; justify-content: center; }
.bk-wa__body { flex: 1; min-width: 0; }
.bk-wa__t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.bk-wa__s { display: block; font-size: 0.92rem; }
.bk-wa__arrow { font-weight: 800; font-size: 1.2rem; }

.bk-facts-band { border-top: 1px solid var(--line); }
.bk-gift { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.bk-gift__p { margin-top: 0.5rem !important; }
.cttp-info .bk-btn-dark { margin-top: 0; background: var(--granite-900); padding: 0.95rem 1.4rem; }

/* One column below 1180px (where a side column would squeeze the wizard
   under its side-by-side width): the wizard first, the summary under it. On a
   phone the wizard card goes edge to edge with no frame (the wizard's own
   gutter and full-bleed footer take over). */
@media (max-width: 1180px) {
    .bk-grid { grid-template-columns: 1fr; }
    .bk-side { position: static; }
}
@media (max-width: 640px) {
    .bk-main { padding-top: 0; }
    .bk-widget { margin-left: calc(-1 * clamp(1rem, 4vw, 2.5rem)); margin-right: calc(-1 * clamp(1rem, 4vw, 2.5rem)); border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
    .bk-widget__head { padding: 1rem clamp(1rem, 4vw, 2.5rem); }
}