/* ============ MODERN & FUN — BOOKING SKIN ============
   Loaded by booking/partials/theme when the club's booking style is
   this family. Colour comes from the palette layer (variable roles);
   this file only swaps typography + component treatments so the
   booking flow wears the website template's design language:
   Bangers display, condensed body, hard borders, sticker shadows.  */

:root {
    /* The layout uses --font-display for EVERY name/amount/date. Bangers is
       single-case display type — unreadable on long catering/package names —
       so the display role becomes condensed bold, and Bangers (--font-fun)
       is applied only to short, punchy headings + CTAs below. */
    --font-display: 'Barlow Semi Condensed', system-ui, sans-serif;
    --font-fun: 'Bangers', cursive;
    --font-body: 'Barlow Semi Condensed', system-ui, sans-serif;
    /* Overridden by booking/partials/theme when the club's WEBSITE uses a
       font pack — the booking flow follows the site's typography. */
    --font-fun-weight: 400;
    --font-fun-ls: .035em;
}

body { font-size: 1.02rem; }

/* The website's navy header band — the primary finally gets a surface.
   Brand + nav flip to the palette's on-primary ink. */
.pub-top { background: var(--green); }
.pub-top .pub-brand-name { color: var(--on-green-alt); }
.pub-brand-tag {
    color: color-mix(in srgb, var(--on-green-alt) 62%, var(--green));
    border-left-color: color-mix(in srgb, var(--on-green-alt) 30%, var(--green));
}
.pub-nav, .pub-live { color: color-mix(in srgb, var(--on-green-alt) 78%, var(--green)); }
.pub-nav a:hover { color: var(--on-green-alt); }
.pub-logo { background: var(--on-green-alt); color: var(--green); }

/* Big friendly headlines. Bangers is single-case display — loosen the
   tracking a touch and drop the serif weight/italics. A highlighter
   swipe in the accent (the website's yellow) sits under every title. */
.pub-page-title { font-family: var(--font-fun); letter-spacing: var(--font-fun-ls, .035em); font-weight: var(--font-fun-weight, 400); }
.pub-page-title::after {
    content: '';
    display: block;
    width: 120px; height: 9px;
    margin-top: 7px;
    background: var(--accent);
    border-radius: 4px;
    transform: rotate(-1.2deg);
}
.pub-brand-name { font-family: var(--font-fun); letter-spacing: var(--font-fun-ls, .045em); font-weight: var(--font-fun-weight, 400); }
.summary-title, .prov-title, .member-title, .docs-title { font-family: var(--font-fun); letter-spacing: var(--font-fun-ls, .03em); font-weight: var(--font-fun-weight, 400); }
.summary-total .label, .summary-total .amount,
.prov-total-label, .prov-total-amount { font-family: var(--font-fun); letter-spacing: var(--font-fun-ls, .03em); font-weight: var(--font-fun-weight, 400); }

/* Sticker cards: hard ink border + offset shadow, tighter radius.
   Catering & extras (.extra/.pkg-card) are deliberately EXCLUDED — a dozen
   sticker cards reads as a wall of borders; that list keeps a light touch. */
.fac-card, .rate-card, .docs-card {
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 82%, transparent);
}
.extra {
    border: 1px solid var(--line-soft);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 7%, transparent);
}
.fac-card.selected {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 8%, var(--card));
    box-shadow: 0 4px 0 var(--green);
}
.prov-card {
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 60%, transparent);
}
.pub-summary { border-radius: 14px; }

/* Chunky comic CTA — in the ACCENT, like the website's yellow buttons. */
.pub-cta {
    font-family: var(--font-fun);
    font-weight: var(--font-fun-weight, 400);
    font-size: 1.12rem;
    letter-spacing: var(--font-fun-ls, .06em);
    border-radius: 13px;
    border: 2px solid var(--ink);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 4px 0 var(--ink);
}
.pub-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); background: color-mix(in srgb, var(--accent) 88%, #fff); }
.pub-cta:disabled { box-shadow: none; border-color: transparent; }
.pub-cta-ghost { border: 2px solid var(--line); box-shadow: none; background: transparent; color: var(--ink); }
.cart-review-btn, .member-btn-confirm {
    border: 2px solid var(--ink); border-radius: 12px;
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 3px 0 var(--ink);
}
.cart-review-btn:hover, .member-btn-confirm:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }

/* Sticker badges + accent moments. */
.fac-badge {
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    font-weight: 700;
    transform: rotate(-1.5deg);
}
.fac-icon { background: var(--green); border: 2px solid var(--ink); color: var(--on-green-alt); }
.fac-card.selected .fac-icon { background: var(--accent); border-color: var(--ink); color: var(--on-accent); }

/* Primary selection states — chosen days/slots go navy, not near-black. */
.cal-day.selected, .slot.selected {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-green-alt);
}

/* The review card wears the primary too. */
.prov-card { background: var(--green); }
.pub-progress-bar::after { background: var(--accent); }
.pub-live::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.summary-step { background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 2px 9px; }
.fac-more-btn { border-bottom: 3px solid var(--accent); width: fit-content; }

/* Selection chrome squares up, with an accent kick. */
.party-chip, .slot, .cal-day { border-radius: 10px; }
.party-chip.selected { border-color: var(--ink); box-shadow: 0 3px 0 var(--accent); }
.slot.selected, .cal-day.selected { box-shadow: 0 3px 0 var(--accent); }
.step3-prefill { border: 2px solid var(--ink); border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.prov-total-amount, .prov-due { color: var(--accent); }

/* ============ STAGED LOOK (photo backdrop) ============
   The booking pages on the club photo: a translucent primary header,
   a big left-set headline with the accent swipe, sticker cards with an
   accent name tab, and a primary-framed booking panel.                 */
.is-staged .pub-top {
    background: color-mix(in srgb, var(--green) 84%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
}
.is-staged .pub-nav-phone { color: var(--on-green-alt); }
/* The chooser is a decision screen, and at 4.8rem the question alone cost a
   sixth of the viewport — enough to push the Select buttons under the fold. */
.is-staged.step-1 .pub-page-title { font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: var(--font-fun-ls, .04em); }
.is-staged.step-1 .pub-page-title::after { width: min(260px, 40%); height: 10px; margin-top: 12px; box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 60%, transparent); }

.is-staged .fac-card {
    border: 2.5px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink), 0 30px 50px -20px rgba(0,0,0,0.6);
}
.is-staged .fac-card:hover { border-color: var(--ink); box-shadow: 0 9px 0 var(--ink), 0 36px 56px -20px rgba(0,0,0,0.6); }
.is-staged .fac-card.selected {
    border: 2.5px solid var(--ink);
    box-shadow: 0 0 0 4px var(--accent), 0 6px 0 4px var(--ink), 0 30px 50px -20px rgba(0,0,0,0.6);
}
/* The name becomes the accent tab across the top of the card. */
.is-staged .fac-card > .fac-name {
    order: -1; margin: 0; padding: 14px 20px 12px;
    background: var(--accent); color: var(--on-accent);
    border-bottom: 2.5px solid var(--ink);
    font-family: var(--font-fun); font-weight: var(--font-fun-weight, 400);
    letter-spacing: var(--font-fun-ls, .045em); text-transform: uppercase;
    font-size: 1.55rem; line-height: 1.05;
}
/* The tab sits above the photo, so a one-line name beside a two-line one
   starts the two photos at different heights and the row loses its rhythm.
   Reserve two lines and centre the name in them — "Members Lounge" and
   "Corporate & Conference Room" then line up across the grid. */
@media (min-width: 701px) {
    .is-staged .fac-card > .fac-name {
        /* Two line boxes of the display face (which runs a shade taller than
           its 1.05 line-height) plus the tab's 14px/12px padding. */
        min-height: calc(2.2em + 26px);
        display: flex; flex-wrap: wrap; align-content: center;
    }
}
/* Lying down, the tab runs the full width of the card, so even the longest
   names fit on one line and the two-line reservation is pure dead height. */
@media (min-width: 1024px) and (max-width: 1699px) {
    .is-staged .fac-card > .fac-name { min-height: 0; }
    /* Lying down the photo is a panel down the left, not a header strip. */
    .is-staged .fac-photo { margin: 12px 0 12px 12px; }
}
/* Four across, the tab is the card's tallest fixed cost after the photo, and
   a long name is what forces its second line. A step down in size buys most
   of that back without the tabs falling out of step. */
@media (min-width: 1700px) {
    .is-staged .fac-grid[data-count="4"] > .fac-card > .fac-name {
        font-size: 1.3rem; padding: 12px 18px 11px;
        min-height: calc(2.2em + 23px);
    }
}
.is-staged .fac-card > .fac-name .fac-members-badge { background: var(--ink); color: var(--accent); letter-spacing: .06em; }
.is-staged .fac-photo { margin: 12px 12px 0; border-radius: 10px; border: 2px solid var(--ink); aspect-ratio: 16 / 9; }
.is-staged .fac-desc { margin-top: 16px; }
.is-staged .fac-feats { border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.is-staged .fac-feats li svg { color: var(--ink); }
.is-staged .fac-more-btn { border-bottom-color: var(--accent); }

.is-staged .fac-select {
    margin: auto 14px 16px !important; padding: 13px 16px; border-radius: 12px;
    background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    font-family: var(--font-fun); font-weight: var(--font-fun-weight, 400);
    letter-spacing: var(--font-fun-ls, .06em); font-size: 1.15rem; text-transform: uppercase;
}
.is-staged .fac-select:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); color: var(--on-accent); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.is-staged .fac-card.selected .fac-select { background: var(--green); color: var(--on-green-alt); border-color: var(--ink); }
.is-staged .fac-photo .fac-check { border: 2px solid var(--ink); }

/* Booking panel: a primary frame holding a light sheet. */
.is-staged .pub-summary {
    background: var(--green); border: 2.5px solid var(--ink); border-radius: 16px;
    box-shadow: 0 6px 0 var(--ink), 0 30px 60px -20px rgba(0,0,0,0.6);
}
.is-staged .summary-title { color: var(--on-green-alt); font-size: 1.55rem; text-transform: uppercase; }
.is-staged .sum-body { margin: 0 9px 9px; border-radius: 11px; }
.is-staged .sum-steps li.is-current .sum-step-n { border: 2px solid var(--ink); box-shadow: none; }
.is-staged .sum-steps li.is-done .sum-step-n { background: var(--ink); color: var(--accent); }

.is-staged .pub-foot { background: color-mix(in srgb, var(--green) 90%, transparent); border-top: 2px solid color-mix(in srgb, var(--ink) 60%, transparent); }
.is-staged .pub-foot-club { font-family: var(--font-fun); font-weight: var(--font-fun-weight, 400); letter-spacing: var(--font-fun-ls, .05em); font-size: 1.35rem; text-transform: uppercase; }

/* Steps 2+: sticker sheet. */
.is-staged:not(.step-1) .pub-main > div:first-child:not(.pub-summary) {
    border: 2.5px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink), 0 30px 60px -20px rgba(0,0,0,0.6);
}