/* ==========================================================================
   GENERATED FILE — every selector is scoped under #pp-booking-app so theme
   styles can't override the booking page (see tools/scope_css.py).
   Edit the readable source and rebuild; if editing this file directly, keep
   the #pp-booking-app prefix on every new selector.
   ========================================================================== */
/* ==========================================================================
   PowerPlay Booking — customer-facing styles
   --------------------------------------------------------------------------
   Dark-shell booking journey: a deep navy canvas with full-bleed imagery,
   oversized headings and high-contrast CTAs, matching the structure of the
   reference booking flow but built entirely from PowerPlay's own tokens.

   Colour comes from the four CSS custom properties the plugin writes from the
   admin Branding settings (--pp-primary / --pp-secondary / --pp-button /
   --pp-font). Everything below derives from those, so changing the brand
   colours in wp-admin restyles the whole journey.

   Everything is scoped under .pp-app and resets the properties WordPress
   themes most often impose, so the journey looks the same on any theme.
   Component rules are prefixed with .pp-app so they outrank the element-level
   resets — without that, `.pp-app button` beats `.pp-btn-primary`.
   ========================================================================== */

#pp-booking-app.pp-app {
    /* Brand-driven — Primary #372F54 (ink), Secondary #F7BB14 (gold),
       Button #D314B1 (magenta), Background #FFF5E0 (cream). Set from the
       admin Branding settings; these var(--pp-x, ...) fallbacks are what
       render when no admin override is saved yet. */
    --pp-navy:       var(--pp-primary, #372F54);
    --pp-accent:     var(--pp-button, #D314B1);
    --pp-btn:        var(--pp-button, #D314B1);
    --pp-gold:       var(--pp-secondary, #F7BB14);
    /* PowerPlay violet (1.3.3) and the brand gradient used on primary CTAs. */
    --pp-violet:     #8155C9;
    --pp-brand-grad: linear-gradient(115deg, var(--pp-btn) 0%, #A52ABD 55%, var(--pp-violet) 100%);
    --pp-heading-font: var(--pp-font, 'Anton', 'Poppins', system-ui, sans-serif);

    /* Warm cream shell — deep plum ink on a soft cream canvas, magenta CTAs,
       gold reserved for small secondary accents. */
    --pp-canvas:     var(--pp-bg, #FFF5E0);
    --pp-panel:      #FBEACB;
    --pp-panel-solid:#FDEFD6;
    --pp-hairline:   rgba(55, 47, 84, .16);
    --pp-hairline-2: rgba(55, 47, 84, .09);
    --pp-on-dark:    var(--pp-navy);
    --pp-on-dark-2:  rgba(55, 47, 84, .66);
    --pp-on-dark-3:  rgba(55, 47, 84, .42);

    /* Status */
    --pp-green:      #1E8E5A;
    --pp-green-bg:   rgba(30, 142, 90, .14);
    --pp-amber:      #8A6100;
    --pp-amber-bg:   rgba(247, 187, 20, .22);
    --pp-red:        #C4432E;
    --pp-red-bg:     rgba(196, 67, 46, .12);
    --pp-info:       #A585E6;
    --pp-info-bg:    #EDE4FA;
    --pp-info-ink:   #4A2A86;

    --pp-r-lg: 16px;
    --pp-r-md: 10px;
    --pp-r-sm: 8px;
    --pp-r-pill: 999px;
    --pp-field-bg: #FFFDF6;
    --pp-scrim: 55, 47, 84;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--pp-on-dark);
    background: var(--pp-canvas);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;

    /* Break out of a constrained theme container so the shell is full-bleed. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 24px 96px;
    /* Short steps must not leave the theme's page background showing below
       the cream shell. */
    min-height: 100vh;
}
#pp-booking-app.pp-app *, #pp-booking-app.pp-app *::before, #pp-booking-app.pp-app *::after { box-sizing: inherit; }
#pp-booking-app.pp-app img { max-width: 100%; display: block; }
#pp-booking-app.pp-app p { margin: 0 0 12px; }
#pp-booking-app.pp-app ul { margin: 0; padding: 0; list-style: none; }
#pp-booking-app.pp-app address { font-style: normal; }
#pp-booking-app.pp-app a { color: var(--pp-on-dark); }
/* Themes style bare <button>s globally (e.g. Hello Elementor: white-space:
   nowrap, padding .5rem 1rem, user-select:none; Elementor kits: padding,
   letter-spacing, hover colours). Every one of those is neutralised here —
   white-space:nowrap is what kept experience descriptions on one line under
   the photo, and the theme padding is what pushed the +/− and × glyphs off
   centre in their small square buttons. Components set their own values. */
#pp-booking-app.pp-app button {
    font: inherit; cursor: pointer; border: 0; background: none; color: inherit; text-align: left;
    margin: 0; padding: 0; white-space: normal; letter-spacing: normal; text-transform: none;
    text-decoration: none; text-shadow: none; box-shadow: none; border-radius: 0;
    min-width: 0; min-height: 0; height: auto; width: auto; transition: none;
    -webkit-user-select: auto; user-select: auto; -webkit-appearance: none; appearance: none;
}
#pp-booking-app.pp-app button:hover, #pp-booking-app.pp-app button:focus { text-decoration: none; }
#pp-booking-app.pp-app :focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 3px; border-radius: 4px; }

#pp-booking-app.pp-app h1, #pp-booking-app.pp-app h2, #pp-booking-app.pp-app h3, #pp-booking-app.pp-app h4 {
    font-family: var(--pp-heading-font);
    color: var(--pp-on-dark);
    margin: 0 0 12px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
#pp-booking-app .pp-hero-title { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); font-weight: 800; margin-bottom: 26px; }
#pp-booking-app.pp-app h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); font-weight: 700; }
#pp-booking-app.pp-app h3 { font-size: 1.1rem; font-weight: 700; }
#pp-booking-app.pp-app h4 { font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: -0.01em; }
/* .pp-app prefix needed: the generic `.pp-app h2 { margin: 0 0 12px }` rule
   out-ranked a bare .pp-subheading, so "Review Your Order" sat flush under
   the details panel with no top spacing. */
#pp-booking-app.pp-app .pp-subheading { margin: 40px 0 16px; }

#pp-booking-app .pp-noscript { padding: 20px; background: var(--pp-amber-bg); color: var(--pp-amber); border-radius: var(--pp-r-md); }
#pp-booking-app .pp-section-intro { color: var(--pp-on-dark-2); max-width: 62ch; margin-bottom: 28px; }
#pp-booking-app .pp-note { color: var(--pp-on-dark-2); font-size: .9rem; }
#pp-booking-app .pp-note-secure { margin-top: 16px; color: var(--pp-on-dark-3); }
#pp-booking-app .pp-loading { padding: 80px 0; text-align: center; color: var(--pp-on-dark-2); }

/* Inner content column inside the full-bleed shell. */
#pp-booking-app .pp-app-header, #pp-booking-app .pp-progress, #pp-booking-app .pp-layout, #pp-booking-app .pp-mobile-bar-inner {
    max-width: 1180px; margin-left: auto; margin-right: auto;
}

/* --------------------------------------------------------------------- */
/* Header                                                                 */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-app-header { display: flex; align-items: center; gap: 16px; padding: 26px 0 8px; }
#pp-booking-app .pp-app-logo { height: 44px; width: auto; }
#pp-booking-app .pp-app-wordmark {
    font-family: var(--pp-heading-font);
    font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; text-transform: uppercase;
}
#pp-booking-app .pp-app-tagline { font-size: .8rem; color: var(--pp-on-dark-3); padding-left: 16px; border-left: 1px solid var(--pp-hairline); }

/* --------------------------------------------------------------------- */
/* Progress                                                               */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-progress { padding: 16px 0 30px; overflow-x: auto; scrollbar-width: none; }
#pp-booking-app .pp-progress::-webkit-scrollbar { display: none; }
#pp-booking-app .pp-progress ol { display: flex; gap: 6px; min-width: max-content; }
#pp-booking-app .pp-progress .pp-step {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 16px 7px 7px;
    border-radius: var(--pp-r-pill);
    background: var(--pp-panel);
    color: var(--pp-on-dark-2);
    font-size: .84rem; font-weight: 500; white-space: nowrap;
}
#pp-booking-app .pp-progress .pp-step-num {
    width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(55,47,84,.10); color: var(--pp-on-dark-2);
    font-size: .76rem; font-weight: 700;
}
#pp-booking-app .pp-progress .pp-step.is-active { background: var(--pp-on-dark); color: var(--pp-canvas); }
#pp-booking-app .pp-progress .pp-step.is-active .pp-step-num { background: var(--pp-accent); background-image: var(--pp-brand-grad); color: #fff; }
#pp-booking-app .pp-progress .pp-step.is-complete { background: var(--pp-panel); color: var(--pp-on-dark); box-shadow: inset 0 0 0 1.5px var(--pp-accent); }
#pp-booking-app .pp-progress .pp-step.is-complete .pp-step-num { background: var(--pp-on-dark); color: var(--pp-canvas); }
#pp-booking-app.pp-app .pp-progress .pp-step.is-clickable { cursor: pointer; }

/* --------------------------------------------------------------------- */
/* Layout                                                                 */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 34px; align-items: start; }
#pp-booking-app .pp-main { min-width: 0; }
#pp-booking-app .pp-section-hero { max-width: 980px; }

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */
#pp-booking-app.pp-app .pp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 0 30px;
    border-radius: var(--pp-r-sm);
    font-family: var(--pp-heading-font);
    font-size: .95rem; font-weight: 700; line-height: 1;
    text-transform: uppercase; letter-spacing: .02em;
    text-decoration: none; text-align: center;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#pp-booking-app.pp-app .pp-btn:disabled { opacity: .38; cursor: not-allowed; }
#pp-booking-app.pp-app .pp-btn-primary { background: var(--pp-btn); background-image: var(--pp-brand-grad); color: #fff; }
#pp-booking-app.pp-app .pp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
#pp-booking-app.pp-app .pp-btn-ghost { background: transparent; color: var(--pp-on-dark); box-shadow: inset 0 0 0 1.5px var(--pp-hairline); }
#pp-booking-app.pp-app .pp-btn-ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--pp-on-dark); }
#pp-booking-app.pp-app .pp-btn-block { width: 100%; margin-top: 8px; }
#pp-booking-app.pp-app .pp-btn-pay { min-width: 260px; }

#pp-booking-app .pp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
#pp-booking-app .pp-actions-center { justify-content: center; }
#pp-booking-app .pp-actions .pp-btn-primary { margin-left: auto; }
#pp-booking-app .pp-actions-center .pp-btn-primary { margin-left: 0; }

/* --------------------------------------------------------------------- */
/* Banners                                                                */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-error-banner, #pp-booking-app .pp-info-banner {
    padding: 13px 16px; border-radius: var(--pp-r-sm); font-size: .92rem; margin: 0 0 16px;
}
#pp-booking-app .pp-error-banner { background: var(--pp-red-bg); color: var(--pp-red); border-left: 3px solid var(--pp-red); }
#pp-booking-app .pp-info-banner { background: var(--pp-amber-bg); color: var(--pp-amber); border-left: 3px solid var(--pp-amber); margin-top: 16px; }
#pp-booking-app .pp-notice-banner {
    display: inline-block; padding: 13px 20px; border-radius: var(--pp-r-sm);
    background: var(--pp-info-bg); color: var(--pp-info-ink); font-weight: 700;
    font-size: .92rem; margin: 4px 0 16px;
}

/* --------------------------------------------------------------------- */
/* Venue tiles                                                            */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-venue-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
#pp-booking-app.pp-app .pp-venue-tile {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--pp-r-lg);
    background: var(--pp-panel-solid);
}
#pp-booking-app .pp-venue-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
#pp-booking-app.pp-app .pp-venue-tile:hover img { transform: scale(1.04); }
#pp-booking-app .pp-venue-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--pp-scrim),.12) 35%, rgba(var(--pp-scrim),.86)); }
#pp-booking-app .pp-venue-name {
    position: absolute; left: 24px; bottom: 22px; right: 120px;
    font-family: var(--pp-heading-font); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.2rem, .9rem + 1.2vw, 1.9rem); line-height: 1.1;
}
#pp-booking-app .pp-venue-cta {
    position: absolute; right: 20px; bottom: 22px;
    padding: 11px 22px; border-radius: var(--pp-r-sm);
    background: var(--pp-btn); color: #fff;
    font-family: var(--pp-heading-font); font-weight: 700; font-size: .84rem;
    text-transform: uppercase; letter-spacing: .04em;
}
#pp-booking-app .pp-venue-address { margin-top: 18px; color: var(--pp-on-dark-2); font-size: .92rem; }
#pp-booking-app .pp-venue-address a { text-decoration: underline; }

#pp-booking-app .pp-enquiry-card { padding: 28px; border-radius: var(--pp-r-lg); background: var(--pp-panel); max-width: 620px; }
#pp-booking-app .pp-enquiry-card p { color: var(--pp-on-dark-2); }
#pp-booking-app .pp-enquiry-contact { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 22px; }
#pp-booking-app .pp-enquiry-contact a { font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Search card                                                            */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-search-card, #pp-booking-app .pp-results-card, #pp-booking-app .pp-panel {
    padding: 24px; border-radius: var(--pp-r-lg);
    background: var(--pp-panel);
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2);
    max-width: 720px;
}
#pp-booking-app .pp-results-card { margin-top: 20px; }
#pp-booking-app .pp-results-sub { color: var(--pp-on-dark-2); font-size: .89rem; margin-bottom: 16px; }

#pp-booking-app .pp-search-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
#pp-booking-app .pp-search-row-2col { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
#pp-booking-app .pp-field-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#pp-booking-app .pp-field-caption { font-size: .8rem; color: var(--pp-on-dark-2); }
#pp-booking-app .pp-field-pop { position: relative; min-width: 0; }
#pp-booking-app .pp-field-full { min-width: 0; margin-bottom: 20px; }

#pp-booking-app.pp-app .pp-pill, #pp-booking-app.pp-app .pp-select {
    width: 100%; min-height: 54px; padding: 0 18px;
    border-radius: var(--pp-r-sm);
    background: var(--pp-field-bg); color: var(--pp-on-dark);
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline);
    font-family: var(--pp-heading-font); font-weight: 600; font-size: .96rem;
}
#pp-booking-app.pp-app .pp-pill { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
#pp-booking-app .pp-pill-svg { width: 19px; height: 19px; flex: 0 0 19px; opacity: .7; }
#pp-booking-app.pp-app .pp-pill:hover, #pp-booking-app.pp-app .pp-select:hover { box-shadow: inset 0 0 0 1.5px var(--pp-on-dark); }
#pp-booking-app.pp-app .pp-pill:disabled { opacity: .5; cursor: not-allowed; box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2); }
#pp-booking-app.pp-app .pp-pill:disabled:hover { box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2); }
#pp-booking-app.pp-app .pp-pill.is-filled { box-shadow: inset 0 0 0 2px var(--pp-accent); }
#pp-booking-app.pp-app .pp-pill.is-filled .pp-pill-svg { opacity: 1; color: var(--pp-accent); }
#pp-booking-app.pp-app .pp-select {
    appearance: none; border: 0; line-height: 54px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}
#pp-booking-app.pp-app .pp-select option { background: var(--pp-panel-solid); color: var(--pp-on-dark); }

#pp-booking-app .pp-select-wrap { position: relative; }
#pp-booking-app .pp-select-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; display: flex; color: var(--pp-on-dark-2); pointer-events: none;
}
#pp-booking-app .pp-select-icon .pp-pill-svg { width: 18px; height: 18px; opacity: .7; }
#pp-booking-app.pp-app .pp-select-has-icon { padding-left: 48px; }

/* Floating popovers for Date/Time — an overlay anchored to the pill rather
   than a panel that pushes the rest of the card down, so picking a date or
   time never grows into a screen-covering view. */
#pp-booking-app .pp-popover {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
    display: none; min-width: 300px; max-width: 360px;
    max-height: 400px; overflow-x: hidden; overflow-y: auto;
    border-radius: var(--pp-r-lg);
    box-shadow: 0 16px 38px rgba(55,47,84,.28);
}
#pp-booking-app .pp-popover.is-open { display: block; }
#pp-booking-app .pp-popover .pp-calendar, #pp-booking-app .pp-popover .pp-results-card { margin-top: 0; max-width: none; }
#pp-booking-app #pp-time-field .pp-popover { left: auto; right: 0; min-width: 420px; max-width: 460px; }

/* --------------------------------------------------------------------- */
/* Calendar                                                               */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-calendar { margin-top: 18px; padding: 16px; border-radius: var(--pp-r-md); background: var(--pp-field-bg); box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2); }
#pp-booking-app .pp-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#pp-booking-app .pp-calendar-header strong { font-family: var(--pp-heading-font); font-size: 1rem; text-transform: uppercase; }
#pp-booking-app.pp-app .pp-calendar-header button {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
    background: rgba(55,47,84,.08); color: var(--pp-on-dark);
}
#pp-booking-app.pp-app .pp-calendar-header button:hover:not(:disabled) { background: var(--pp-on-dark); color: var(--pp-canvas); }
#pp-booking-app.pp-app .pp-calendar-header button:disabled { opacity: .25; cursor: not-allowed; }

#pp-booking-app .pp-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
#pp-booking-app .pp-cal-dow { text-align: center; font-size: .7rem; font-weight: 600; color: var(--pp-on-dark-3); padding-bottom: 6px; }
#pp-booking-app .pp-cal-empty { aspect-ratio: 1; }
#pp-booking-app.pp-app .pp-cal-day {
    aspect-ratio: 1; min-height: 42px;
    display: grid; place-items: center; text-align: center;
    border-radius: var(--pp-r-sm);
    font-size: .93rem; font-weight: 600; color: var(--pp-on-dark);
    background: transparent;
}
#pp-booking-app.pp-app .pp-cal-day:hover:not(:disabled):not(.is-selected) { background: rgba(55,47,84,.08); }
#pp-booking-app.pp-app .pp-cal-day:disabled { color: var(--pp-on-dark-3); cursor: not-allowed; }
#pp-booking-app.pp-app .pp-cal-day.is-selected { background: var(--pp-accent); color: #fff; }

/* --------------------------------------------------------------------- */
/* Guests                                                                 */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-guest-block { margin-top: 22px; border-top: 1px solid var(--pp-hairline-2); }
#pp-booking-app .pp-guest-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--pp-hairline-2);
}
#pp-booking-app .pp-guest-meta { display: flex; flex-direction: column; gap: 2px; }
#pp-booking-app .pp-guest-label { font-family: var(--pp-heading-font); font-weight: 700; font-size: 1rem; }
#pp-booking-app .pp-guest-label em { font-style: normal; font-weight: 400; color: var(--pp-on-dark-2); }
#pp-booking-app .pp-guest-price { font-size: .84rem; color: var(--pp-on-dark-2); }

#pp-booking-app .pp-qty-control { display: flex; align-items: center; gap: 4px; }
#pp-booking-app.pp-app .pp-qty-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; text-align: center;
    background: var(--pp-field-bg); color: var(--pp-on-dark);
    font-size: 1.3rem; font-weight: 600; line-height: 1;
}
#pp-booking-app.pp-app .pp-qty-btn:hover:not(:disabled) { background: var(--pp-on-dark); color: var(--pp-canvas); }
#pp-booking-app.pp-app .pp-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
#pp-booking-app .pp-qty-value { min-width: 42px; text-align: center; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------- */
/* Slots                                                                  */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
/* Time popover: fixed 4-column grid of time slots, matching the reference. */
#pp-booking-app .pp-slot-grid-times { grid-template-columns: repeat(4, 1fr); gap: 8px; }
#pp-booking-app .pp-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
#pp-booking-app .pp-results-head h2 { margin: 0; }
#pp-booking-app .pp-ampm-toggle { display: inline-flex; background: var(--pp-field-bg); border-radius: var(--pp-r-pill); padding: 3px; box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2); flex: 0 0 auto; }
#pp-booking-app.pp-app .pp-ampm-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 14px; border-radius: var(--pp-r-pill);
    font-family: var(--pp-heading-font); font-weight: 700; font-size: .82rem; letter-spacing: .03em;
    color: var(--pp-on-dark-2);
}
#pp-booking-app.pp-app .pp-ampm-btn.is-active { background: var(--pp-accent); color: #fff; }
#pp-booking-app.pp-app .pp-slot {
    min-height: 56px; padding: 8px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: var(--pp-r-sm);
    background: var(--pp-field-bg); color: var(--pp-on-dark);
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2);
    font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
}
#pp-booking-app.pp-app .pp-slot:hover:not(:disabled):not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--pp-on-dark); }
#pp-booking-app.pp-app .pp-slot-note { font-size: .7rem; font-weight: 500; color: var(--pp-amber); }
#pp-booking-app.pp-app .pp-slot.status-limited { box-shadow: inset 0 0 0 1.5px rgba(245,185,68,.55); }
#pp-booking-app.pp-app .pp-slot.status-unavailable { background: transparent; color: var(--pp-on-dark-3); box-shadow: none; cursor: not-allowed; text-decoration: line-through; }
#pp-booking-app.pp-app .pp-slot.is-selected { background: var(--pp-accent); color: #fff; box-shadow: none; }
#pp-booking-app.pp-app .pp-slot.is-selected .pp-slot-note { color: rgba(255,255,255,.85); }

#pp-booking-app .pp-slot-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 20px; font-size: .8rem; color: var(--pp-on-dark-2); }
#pp-booking-app .pp-slot-legend span { display: inline-flex; align-items: center; gap: 7px; }
#pp-booking-app .pp-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#pp-booking-app .pp-legend-dot.available { background: var(--pp-green); }
#pp-booking-app .pp-legend-dot.limited { background: var(--pp-amber); }
#pp-booking-app .pp-legend-dot.unavailable { background: var(--pp-on-dark-3); }

#pp-booking-app .pp-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
#pp-booking-app .pp-skeleton-grid span { height: 56px; border-radius: var(--pp-r-sm); background: rgba(55,47,84,.07); }
#pp-booking-app .pp-skeleton-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
#pp-booking-app .pp-skeleton-cards span { height: 300px; border-radius: var(--pp-r-lg); background: rgba(55,47,84,.07); }

/* --------------------------------------------------------------------- */
/* Recap strip                                                            */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-recap {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-radius: var(--pp-r-md); overflow: hidden;
    background: var(--pp-panel); margin-bottom: 28px; max-width: 900px;
}
#pp-booking-app .pp-recap-item {
    padding: 13px 16px; display: flex; flex-direction: column; gap: 2px;
    box-shadow: inset -1px -1px 0 var(--pp-hairline-2);
}
#pp-booking-app .pp-recap-item span { font-size: .74rem; color: var(--pp-on-dark-3); }
#pp-booking-app .pp-recap-item strong { font-size: .92rem; font-weight: 600; }

/* --------------------------------------------------------------------- */
/* Forms                                                                  */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
#pp-booking-app .pp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#pp-booking-app .pp-field-full { grid-column: 1 / -1; }
#pp-booking-app .pp-field label { display: block; font-size: .82rem; line-height: 1.3; color: var(--pp-on-dark-2); vertical-align: baseline; }
#pp-booking-app .pp-field input, #pp-booking-app .pp-field textarea {
    width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 14px 16px;
    font: inherit; font-size: .97rem; line-height: 1.4; color: var(--pp-on-dark);
    background: var(--pp-field-bg);
    border: 1.5px solid var(--pp-hairline);
    border-radius: var(--pp-r-sm); box-shadow: none; outline: 0;
}
#pp-booking-app .pp-field input::placeholder, #pp-booking-app .pp-field textarea::placeholder { color: var(--pp-on-dark-3); }
#pp-booking-app .pp-field input:focus, #pp-booking-app .pp-field textarea:focus { outline: none; border-color: var(--pp-on-dark); }
#pp-booking-app .pp-field textarea { resize: vertical; min-height: 96px; }

/* --------------------------------------------------------------------- */
/* Summary                                                                */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-summary { position: sticky; top: 24px; }
#pp-booking-app .pp-summary.pp-summary-collapsed { display: none; }
#pp-booking-app .pp-summary-inner {
    background: var(--pp-panel); border-radius: var(--pp-r-lg); padding: 22px;
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2);
}
/* A flex row (rather than absolute-positioning the close icon over the
   heading) keeps the icon correctly aligned at every width instead of
   floating over — or half outside — the card's rounded corner. */
#pp-booking-app .pp-summary-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#pp-booking-app .pp-summary-topbar #pp-summary-heading { margin-bottom: 0; }
#pp-booking-app.pp-app .pp-summary-close {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(55,47,84,.08); color: var(--pp-on-dark);
    font-size: 1.2rem; line-height: 1;
}
#pp-booking-app.pp-app .pp-summary-close:hover { background: var(--pp-on-dark); color: var(--pp-canvas); }
#pp-booking-app.pp-app .pp-summary-reopen {
    display: none; position: fixed; top: 50%; right: 0; z-index: 45;
    transform: translateY(-50%);
    padding: 16px 10px; border-radius: 10px 0 0 10px;
    background: var(--pp-btn); color: #fff;
    font-family: var(--pp-heading-font); font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em;
    writing-mode: vertical-rl;
    box-shadow: -2px 0 14px rgba(55,47,84,.22);
}
#pp-booking-app.pp-app .pp-summary-reopen:hover { filter: brightness(1.08); }
#pp-booking-app.pp-app .pp-summary-reopen.is-visible { display: flex; align-items: center; }
#pp-booking-app .pp-sidebar-back {
    display: inline-block; margin-bottom: 14px; padding: 8px 14px;
    border-radius: var(--pp-r-sm); background: var(--pp-field-bg);
    font-family: var(--pp-heading-font); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .02em;
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline);
}
#pp-booking-app .pp-sidebar-back:hover { box-shadow: inset 0 0 0 1.5px var(--pp-on-dark); }
#pp-booking-app .pp-sidebar-venue {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--pp-navy); color: #fff; border-radius: var(--pp-r-md);
    padding: 14px 16px; margin-bottom: 18px;
}
#pp-booking-app .pp-sidebar-venue span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
#pp-booking-app .pp-sidebar-venue strong { font-family: var(--pp-heading-font); font-size: 1.15rem; text-transform: uppercase; }
#pp-booking-app .pp-summary-inner h2 { font-size: 1.1rem; margin-bottom: 14px; }
#pp-booking-app .pp-summary-empty, #pp-booking-app .pp-summary-note { color: var(--pp-on-dark-3); font-size: .85rem; }
#pp-booking-app .pp-summary-note { margin: 10px 0 0; }
#pp-booking-app .pp-summary-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 0; font-size: .9rem;
    border-bottom: 1px solid var(--pp-hairline-2);
}
#pp-booking-app .pp-summary-row:last-child { border-bottom: 0; }
#pp-booking-app .pp-summary-row > span:first-child { color: var(--pp-on-dark-2); }
#pp-booking-app .pp-summary-row > span:last-child { text-align: right; font-weight: 600; }
#pp-booking-app .pp-summary-total {
    margin-top: 6px; padding-top: 14px;
    border-top: 2px solid var(--pp-accent); border-bottom: 0;
    font-family: var(--pp-heading-font); font-size: 1.05rem; font-weight: 800; text-transform: uppercase;
}
#pp-booking-app .pp-summary-total > span:first-child { color: var(--pp-on-dark); }
#pp-booking-app .pp-summary-tags { padding: 8px 0; }
#pp-booking-app .pp-summary-tag {
    display: inline-block; padding: 4px 12px; border-radius: var(--pp-r-pill);
    background: rgba(55,47,84,.08); font-size: .79rem; font-weight: 500;
}
#pp-booking-app .pp-review-card {
    background: var(--pp-panel); border-radius: var(--pp-r-md); padding: 18px 24px;
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2); max-width: 720px; margin-top: 4px;
}

/* --------------------------------------------------------------------- */
/* Confirmation                                                           */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-confirm { max-width: 660px; margin: 0 auto; text-align: center; }
#pp-booking-app .pp-confirm-badge {
    width: 76px; height: 76px; margin: 12px auto 22px;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--pp-green-bg); color: var(--pp-green);
    font-size: 2.1rem; font-weight: 700;
}
#pp-booking-app .pp-confirm-badge.is-warning { background: var(--pp-amber-bg); color: var(--pp-amber); }
#pp-booking-app .pp-confirm-details, #pp-booking-app .pp-confirm-venue, #pp-booking-app .pp-confirm-info {
    text-align: left; margin-top: 22px; padding: 20px 22px;
    background: var(--pp-panel); border-radius: var(--pp-r-md);
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2);
}
#pp-booking-app .pp-confirm-venue address { color: var(--pp-on-dark-2); margin-bottom: 6px; }
#pp-booking-app .pp-confirm-info li { padding: 6px 0 6px 18px; position: relative; font-size: .9rem; color: var(--pp-on-dark-2); }
#pp-booking-app .pp-confirm-info li::before { content: '\2013'; position: absolute; left: 0; color: var(--pp-accent); }

/* --------------------------------------------------------------------- */
/* Mobile bar                                                             */
/* --------------------------------------------------------------------- */
#pp-booking-app .pp-mobile-bar { display: none; }

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */
@media (max-width: 1080px) {
    #pp-booking-app .pp-layout { grid-template-columns: minmax(0,1fr) 296px; gap: 24px; }
}

@media (max-width: 900px) {
    #pp-booking-app .pp-layout { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-search-card, #pp-booking-app .pp-results-card, #pp-booking-app .pp-panel, #pp-booking-app .pp-review-card { max-width: none; }
    #pp-booking-app.pp-app .pp-summary-reopen { display: none !important; }

    #pp-booking-app .pp-summary {
        /* top must be cleared, or the desktop sticky offset keeps the panel
           anchored near the top and the slide-away never lands. */
        position: fixed; top: auto; left: 0; right: 0; bottom: 76px; z-index: 40;
        max-height: 62vh; overflow-y: auto; padding: 0 12px 12px;
        transform: translateY(calc(100% + 90px));
        transition: transform .22s ease;
    }
    #pp-booking-app .pp-summary.is-open { transform: translateY(0); }
    #pp-booking-app .pp-summary-inner { background: var(--pp-panel-solid); box-shadow: 0 -10px 34px rgba(0,0,0,.45); }

    #pp-booking-app .pp-mobile-bar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--pp-panel-solid);
        box-shadow: 0 -2px 18px rgba(0,0,0,.4);
    }
    #pp-booking-app.pp-app .pp-mobile-summary-toggle { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
    #pp-booking-app #pp-mobile-total { font-family: var(--pp-heading-font); font-weight: 800; font-size: 1.15rem; }
    #pp-booking-app .pp-mobile-toggle-label { font-size: .75rem; color: var(--pp-on-dark-3); text-decoration: underline; }
    #pp-booking-app.pp-app .pp-mobile-bar .pp-btn { flex: 1; margin-left: auto; }

    #pp-booking-app.pp-app { padding-bottom: 108px; }
    #pp-booking-app .pp-actions .pp-btn { flex: 1 1 150px; }
    #pp-booking-app .pp-actions .pp-btn-primary { margin-left: 0; }
}

@media (max-width: 560px) {
    #pp-booking-app.pp-app { padding-left: 14px; padding-right: 14px; }
    #pp-booking-app .pp-app-header { flex-wrap: wrap; gap: 8px; }
    #pp-booking-app .pp-app-tagline { padding-left: 0; border-left: 0; }
    #pp-booking-app .pp-food-grid, #pp-booking-app .pp-venue-list, #pp-booking-app .pp-package-grid { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app.pp-app .pp-experience-band { flex-direction: column-reverse; min-height: 0; }
    #pp-booking-app .pp-experience-band-media { flex: 0 0 auto; max-width: none; aspect-ratio: 16 / 9; }
    #pp-booking-app .pp-experience-band-text { padding: 16px 18px; text-align: center; align-items: center; }
    #pp-booking-app .pp-type-options { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-slot-grid, #pp-booking-app .pp-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    #pp-booking-app .pp-form-grid { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-search-card, #pp-booking-app .pp-results-card, #pp-booking-app .pp-panel { padding: 18px; }
    /* Location tab on mobile: the name and Book Now button are centred
       full-width instead of pinned to opposite corners, per the reference
       design — the name is always visible (never hover-only) at every
       breakpoint, so this only changes its alignment on small screens. */
    #pp-booking-app .pp-venue-name { left: 16px; right: 16px; bottom: 64px; text-align: center; }
    /* Book Now stays a normal-width pill, centred, instead of stretching
       edge-to-edge across the tile (issue 5). */
    #pp-booking-app .pp-venue-cta {
        left: 50%; right: auto; bottom: 16px; transform: translateX(-50%);
        width: auto; max-width: calc(100% - 32px); white-space: nowrap;
        padding: 10px 22px; font-size: .8rem;
    }
    #pp-booking-app .pp-progress .pp-step-label { display: none; }
    #pp-booking-app .pp-progress .pp-step { padding: 7px; }
    #pp-booking-app .pp-progress .pp-step.is-active .pp-step-label { display: inline; padding-right: 8px; }
    #pp-booking-app.pp-app .pp-btn-pay { min-width: 0; }
    #pp-booking-app .pp-search-row-2col { grid-template-columns: 1fr; }
    #pp-booking-app .pp-popover { left: 50% !important; right: auto !important; transform: translateX(-50%); min-width: 260px; max-width: calc(100vw - 40px); }
    #pp-booking-app #pp-time-field .pp-popover { min-width: 260px; max-width: calc(100vw - 40px); }
    #pp-booking-app .pp-slot-grid-times { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    #pp-booking-app.pp-app *, #pp-booking-app.pp-app *::before, #pp-booking-app.pp-app *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
    #pp-booking-app.pp-app .pp-experience-band:hover .pp-experience-band-media img, #pp-booking-app.pp-app .pp-venue-tile:hover img { transform: none; }
}


/* ======================================================================= */
/* 1.3.0 — layouts rebuilt against the client reference images             */
/* (Image 01-04, Package 01-04, Addon 01-06), in PowerPlay's own colours.  */
/* ======================================================================= */

#pp-booking-app.pp-app [hidden] { display: none !important; }
#pp-booking-app .pp-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#pp-booking-app .pp-main { container-type: inline-size; container-name: ppmain; }

/* Deep panel used for the reference's darker beige surfaces. */
#pp-booking-app.pp-app { --pp-panel-deep: #F3E2C2; --pp-lavender: #D8C8F5; --pp-cream: #FFF5E0; }

/* --- Layout: the booking sidebar sits on the LEFT (Images 02-04). ------- */
#pp-booking-app .pp-layout { grid-template-columns: 340px minmax(0, 1fr); gap: 32px; }
#pp-booking-app .pp-summary { order: -1; }
#pp-booking-app.pp-app[data-step="venue"] .pp-layout, #pp-booking-app.pp-app[data-step="experience"] .pp-layout { grid-template-columns: minmax(0, 1fr); }
#pp-booking-app.pp-app[data-step="venue"] .pp-summary, #pp-booking-app.pp-app[data-step="experience"] .pp-summary, #pp-booking-app.pp-app[data-step="venue"] .pp-summary-reopen, #pp-booking-app.pp-app[data-step="experience"] .pp-summary-reopen { display: none !important; }
/* "Pick a Venue" — centred on every device (issue 1). */
#pp-booking-app.pp-app[data-step="venue"] .pp-hero-title { text-align: center; }
#pp-booking-app.pp-app .pp-summary-reopen { right: auto; left: 0; border-radius: 0 10px 10px 0; }

/* Back chip + selected-location box (sidebar and experience step). */
#pp-booking-app.pp-app .pp-back-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 14px; padding: 9px 14px;
    border-radius: var(--pp-r-sm); background: var(--pp-panel-deep); color: var(--pp-navy);
    font-family: var(--pp-heading-font); font-weight: 800; font-size: 1rem;
    text-transform: uppercase; letter-spacing: .01em; line-height: 1;
}
#pp-booking-app .pp-back-svg { width: 20px; height: 20px; flex: 0 0 20px; }
#pp-booking-app.pp-app .pp-back-chip:hover { background: var(--pp-navy); color: var(--pp-cream); }
#pp-booking-app .pp-location-box {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    padding: 18px 16px; margin-bottom: 20px;
    border-radius: var(--pp-r-md); background: var(--pp-navy); color: var(--pp-cream);
}
#pp-booking-app .pp-location-box span { font-family: var(--pp-heading-font); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .01em; }
#pp-booking-app .pp-location-box strong { font-family: var(--pp-heading-font); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); text-transform: uppercase; line-height: 1.05; }
/* Old venue block class kept visually in step with the new one. */
#pp-booking-app .pp-sidebar-venue { display: none; }

/* --- Summary panel ("Current Search", Image 03) ------------------------- */
#pp-booking-app .pp-summary-inner { background: var(--pp-panel-deep); box-shadow: none; }
#pp-booking-app .pp-summary-topbar #pp-summary-heading { font-size: 1.2rem; }
#pp-booking-app .pp-summary-row > span:first-child { color: var(--pp-navy); font-weight: 700; }
#pp-booking-app .pp-summary-row > span:last-child { font-weight: 400; }
#pp-booking-app .pp-summary-row { border-bottom-color: var(--pp-hairline); }
#pp-booking-app .pp-summary-total > span:last-child { font-weight: 800; }
#pp-booking-app .pp-summary-sub { margin: 14px 0 2px; font-family: var(--pp-heading-font); font-weight: 800; font-size: .9rem; text-transform: uppercase; }

/* --- Experience step (Image 02) ----------------------------------------- */
#pp-booking-app .pp-exp-layout { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 30px; align-items: start; }
#pp-booking-app .pp-exp-side .pp-back-chip { margin-bottom: 20px; }
#pp-booking-app.pp-app .pp-exp-side .pp-type-label { display: block; text-align: center; font-size: 1.1rem; color: var(--pp-navy); margin: 0 0 12px; }
#pp-booking-app .pp-type-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px;
    border-radius: var(--pp-r-md); background: var(--pp-panel-solid);
    box-shadow: inset 0 0 0 1.5px var(--pp-hairline-2);
}
#pp-booking-app.pp-app .pp-type-seg-btn {
    min-height: 78px; padding: 10px 14px; border-radius: var(--pp-r-sm);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: var(--pp-heading-font); font-weight: 800; font-size: 1.1rem; line-height: 1.15;
    text-transform: uppercase; color: var(--pp-navy); background: transparent;
}
#pp-booking-app.pp-app .pp-type-seg-btn:hover:not(.is-selected) { background: rgba(55,47,84,.07); }
#pp-booking-app.pp-app .pp-type-seg-btn.is-selected { background: var(--pp-btn); background-image: var(--pp-brand-grad); color: #fff; }

#pp-booking-app .pp-experience-list { display: flex; flex-direction: column; gap: 20px; }
#pp-booking-app.pp-app .pp-experience-band {
    display: flex; align-items: stretch; justify-content: space-between; gap: 20px;
    width: 100%; min-height: 216px;
    border-radius: var(--pp-r-md); overflow: hidden;
    background: var(--pp-panel-deep);
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow .15s ease;
}
#pp-booking-app .pp-experience-band-text {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 24px 12px 24px 40px; text-align: left; flex: 1 1 auto; min-width: 0;
}
#pp-booking-app .pp-experience-eyebrow {
    font-family: var(--pp-heading-font); font-weight: 800; font-size: 1.2rem;
    text-transform: uppercase; letter-spacing: 0; color: var(--pp-navy);
}
#pp-booking-app .pp-experience-name {
    display: block; font-family: var(--pp-heading-font); font-weight: 800; color: var(--pp-navy);
    font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em;
}
#pp-booking-app .pp-experience-desc { margin-top: 4px; font-size: 1.12rem; color: var(--pp-navy); overflow-wrap: break-word; word-break: break-word; }
/* Hover/selected: the text stays in the PRIMARY brand colour (never white);
   the card shows the state with an outline and the photo zoom instead. */
#pp-booking-app.pp-app .pp-experience-band:hover .pp-experience-name, #pp-booking-app.pp-app .pp-experience-band:hover .pp-experience-eyebrow, #pp-booking-app.pp-app .pp-experience-band:hover .pp-experience-desc, #pp-booking-app.pp-app .pp-experience-band.is-selected .pp-experience-name { color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-experience-band:hover { box-shadow: inset 0 0 0 2px var(--pp-navy); }
#pp-booking-app.pp-app .pp-experience-band.is-selected { box-shadow: inset 0 0 0 3px var(--pp-btn); }
#pp-booking-app.pp-app .pp-experience-band:focus-visible { outline-offset: 4px; }
#pp-booking-app .pp-experience-band-media {
    /* flex-shrink allowed (was 0 0 310px): a fixed, non-shrinking width
       forced the row to overflow at in-between widths, and the band's own
       overflow:hidden then clipped the description text instead of letting
       it wrap (issue 2). max-width still caps it at the reference's 42%. */
    position: relative; flex: 1 1 310px; max-width: 42%; min-width: 160px;
    padding: 15px 15px 15px 0; overflow: visible; background: transparent;
}
#pp-booking-app .pp-exp-bars { position: absolute; inset: 0 15px 0 0; }
#pp-booking-app .pp-exp-bars::before, #pp-booking-app .pp-exp-bars::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 23%;
    background: var(--pp-bar, var(--pp-btn));
}
#pp-booking-app .pp-exp-bars::before { left: 22%; }
#pp-booking-app .pp-exp-bars::after { left: 56%; }
#pp-booking-app .pp-experience-band[data-accent="1"] { --pp-bar: var(--pp-gold); }
#pp-booking-app .pp-experience-band[data-accent="2"] { --pp-bar: var(--pp-violet); }
#pp-booking-app .pp-experience-band-media img {
    position: relative; z-index: 1; width: 100%; height: 100%; min-height: 150px;
    object-fit: cover; border-radius: var(--pp-r-sm);
    transition: transform .4s ease;
}
#pp-booking-app.pp-app .pp-experience-band:hover .pp-experience-band-media img { transform: scale(1.03); }

/* --- Search card (reference search screen) ------------------------------ */
#pp-booking-app.pp-app .pp-search-card { max-width: 900px; padding: 30px 40px 34px; background: var(--pp-panel-deep); box-shadow: none; }
#pp-booking-app.pp-app .pp-search-title { text-align: center; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 800; margin: 0 0 26px; }
#pp-booking-app.pp-app .pp-pill, #pp-booking-app.pp-app .pp-select {
    min-height: 64px; background: var(--pp-cream); box-shadow: inset 0 0 0 1px rgba(55,47,84,.22);
    font-family: inherit; font-weight: 500; font-size: 1.15rem; color: var(--pp-navy);
}
#pp-booking-app.pp-app .pp-pill { justify-content: center; }
#pp-booking-app.pp-app .pp-select { text-align: center; text-align-last: center; line-height: 64px; background-position: calc(100% - 22px) 29px, calc(100% - 16px) 29px; }
#pp-booking-app .pp-pill-svg { width: 24px; height: 24px; flex: 0 0 24px; opacity: 1; }
/* Icon sits at a fixed distance from the select's own left edge instead of
   being nudged in from the (centred) text's midpoint — that math only held
   up for one exact text length, so at other widths the star ended up
   crowding "Select Your Occasion" (issue 6). The select's text is left
   aligned here to match, so the icon always has the same breathing room. */
#pp-booking-app.pp-app .pp-select-has-icon { text-align: left; text-align-last: left; padding-left: 54px; }
#pp-booking-app .pp-select-icon { left: 20px; top: 50%; transform: translateY(-50%); color: var(--pp-navy); width: 24px; height: 24px; }
#pp-booking-app .pp-select-icon .pp-pill-svg { width: 24px; height: 24px; opacity: 1; }
#pp-booking-app.pp-app .pp-pill.is-filled { box-shadow: inset 0 0 0 1px rgba(55,47,84,.22); }
#pp-booking-app.pp-app .pp-pill.is-filled .pp-pill-svg { color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-pill:hover:not(:disabled), #pp-booking-app.pp-app .pp-select:hover { box-shadow: inset 0 0 0 1.5px var(--pp-navy); }
#pp-booking-app.pp-app .pp-pill:hover .pp-pill-svg { color: var(--pp-navy); }
#pp-booking-app .pp-search-row-2col { gap: 20px; margin-bottom: 20px; }

#pp-booking-app .pp-guest-block { display: flex; flex-direction: column; gap: 20px; margin-top: 0; border-top: 0; }
#pp-booking-app .pp-guest-row {
    min-height: 64px; padding: 8px 14px 8px 20px;
    background: var(--pp-cream); border-bottom: 0;
    border-radius: var(--pp-r-sm); box-shadow: inset 0 0 0 1px rgba(55,47,84,.22);
}
#pp-booking-app .pp-guest-label { display: inline-flex; align-items: center; gap: 12px; font-family: inherit; font-weight: 500; font-size: 1.12rem; color: var(--pp-navy); }
#pp-booking-app .pp-row-svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--pp-navy); }
#pp-booking-app .pp-qty-control { gap: 8px; }
#pp-booking-app.pp-app .pp-qty-btn {
    width: 36px; height: 36px; border-radius: 6px;
    background: var(--pp-panel-deep); color: var(--pp-navy); font-size: 1.35rem; font-weight: 500;
}
#pp-booking-app.pp-app .pp-qty-btn:hover:not(:disabled) { background: var(--pp-navy); color: var(--pp-cream); }
#pp-booking-app .pp-qty-value { min-width: 44px; font-family: var(--pp-heading-font); font-weight: 800; font-size: 1.6rem; color: var(--pp-navy); }
#pp-booking-app .pp-guest-note { margin: 14px 0 0; text-align: center; font-size: .92rem; color: var(--pp-on-dark-2); }
#pp-booking-app .pp-guest-note:empty { display: none; }

#pp-booking-app.pp-app .pp-btn-search {
    display: flex; gap: 10px; min-width: 220px; min-height: 58px; margin: 26px auto 0;
    font-size: 1.5rem; letter-spacing: .02em;
}
#pp-booking-app .pp-arrow-svg { width: 30px; height: 18px; flex: 0 0 30px; }

/* Time popover (reference "Available Times"): 4 columns, AM/PM */
#pp-booking-app.pp-app .pp-popover .pp-results-card { background: #fff; padding: 26px 28px; }
#pp-booking-app #pp-time-field .pp-popover { max-height: 540px; }
#pp-booking-app .pp-popover .pp-results-head h2 { font-size: 1.7rem; }
#pp-booking-app.pp-app .pp-slot-grid-times .pp-slot { min-height: 46px; background: var(--pp-panel-deep); box-shadow: none; font-weight: 500; font-size: 1.05rem; }
#pp-booking-app.pp-app .pp-slot-grid-times .pp-slot:hover:not(.is-selected) { box-shadow: inset 0 0 0 1.5px var(--pp-navy); }
#pp-booking-app.pp-app .pp-slot-grid-times .pp-slot.is-selected, #pp-booking-app.pp-app .pp-cal-day.is-selected { background: var(--pp-navy); color: var(--pp-cream); }
#pp-booking-app.pp-app .pp-ampm-btn:disabled { opacity: .35; cursor: not-allowed; }
#pp-booking-app.pp-app .pp-calendar { background: #fff; }

/* --- Availability results (Image 03) ------------------------------------ */
#pp-booking-app .pp-results-banner {
    padding: 34px 20px; margin-bottom: 36px; border-radius: var(--pp-r-md);
    background: var(--pp-panel-deep); text-align: center;
}
#pp-booking-app.pp-app .pp-results-banner h1 { margin: 0; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.9rem); font-weight: 800; }
#pp-booking-app .pp-searching { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; font-weight: 600; color: var(--pp-navy); }
#pp-booking-app .pp-spinner {
    width: 24px; height: 24px; border-radius: 50%;
    border: 3px solid rgba(55,47,84,.18); border-top-color: var(--pp-btn);
    animation: pp-spin .8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#pp-booking-app .pp-results-status { text-align: center; margin: 0 0 16px; font-weight: 600; color: var(--pp-green); }
#pp-booking-app .pp-slot-hero { margin-bottom: 44px; }
#pp-booking-app.pp-app .pp-slot-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; min-height: 176px; padding: 18px 10px;
    border-radius: var(--pp-r-sm); background: var(--pp-navy); color: var(--pp-cream);
    text-align: center; transition: transform .15s ease, box-shadow .15s ease;
}
#pp-booking-app.pp-app .pp-slot-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--pp-gold); }
#pp-booking-app.pp-app .pp-slot-card.is-hero { min-height: 182px; box-shadow: 0 0 0 4px var(--pp-btn); }
#pp-booking-app.pp-app .pp-slot-card.is-hero:hover { box-shadow: 0 0 0 4px var(--pp-gold); }
#pp-booking-app .pp-slot-card-time { font-family: var(--pp-heading-font); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1vw, 2.3rem); line-height: 1.1; }
#pp-booking-app .pp-slot-card-price { font-weight: 700; font-size: 1.12rem; margin-bottom: 10px; }
#pp-booking-app .pp-slot-card-type, #pp-booking-app .pp-slot-card-dur { font-size: .98rem; }
#pp-booking-app .pp-slot-card-left { margin-top: 6px; padding: 2px 10px; border-radius: var(--pp-r-pill); background: var(--pp-gold); color: var(--pp-navy); font-size: .76rem; font-weight: 700; }
#pp-booking-app .pp-slot-card-skeleton { pointer-events: none; background: rgba(55,47,84,.12); animation: pp-pulse 1.2s ease-in-out infinite; }
#pp-booking-app.pp-app .pp-slot-card-skeleton.is-hero { box-shadow: none; margin-bottom: 44px; }
#pp-booking-app.pp-app .pp-alt-heading { text-align: center; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.3rem); font-weight: 800; margin: 0 0 26px; }
#pp-booking-app .pp-alt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#pp-booking-app.pp-app .pp-btn { gap: 10px; }
#pp-booking-app.pp-app .pp-btn .pp-back-svg { width: 18px; height: 18px; flex-basis: 18px; }
#pp-booking-app .pp-results .pp-notice-banner { display: block; text-align: center; margin-bottom: 30px; }

/* --- Select a Package + Food & Drink packages (Package 01-04) ----------- */
#pp-booking-app .pp-food-category { margin-bottom: 44px; }
#pp-booking-app.pp-app .pp-food-heading { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; margin: 0 0 22px; }
#pp-booking-app .pp-pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; align-items: stretch; padding-top: 14px; }
/* A package left alone on the last row spans the full width (the kids'
   deal card in Package 01). */
#pp-booking-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
#pp-booking-app .pp-pkg-grid-session { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
#pp-booking-app .pp-pkg-grid-session > .pp-pkg-card:last-child:nth-child(3n+1), #pp-booking-app .pp-pkg-grid-session > .pp-pkg-card:last-child:nth-child(odd) { grid-column: auto !important; }
#pp-booking-app.pp-app .pp-pkg-grid-session > .pp-pkg-card .pp-pkg-list { flex-direction: column !important; }

#pp-booking-app .pp-pkg-card {
    container-type: inline-size;
    position: relative; display: flex; flex-direction: column;
    padding: 32px 30px 30px; border-radius: var(--pp-r-sm);
    background: var(--pp-navy); color: var(--pp-cream);
    box-shadow: inset 0 0 0 1px rgba(255,245,224,.12);
}
#pp-booking-app .pp-pkg-card.is-featured { box-shadow: inset 0 0 0 1.5px var(--pp-gold); }
#pp-booking-app .pp-pkg-card.is-selected { box-shadow: inset 0 0 0 3px var(--pp-btn); }
#pp-booking-app .pp-pkg-ribbon {
    position: absolute; top: -14px; left: 30px; padding: 6px 16px;
    border-radius: 4px; background: var(--pp-gold); color: var(--pp-navy);
    font-family: var(--pp-heading-font); font-weight: 800; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .14em;
}
#pp-booking-app .pp-pkg-eyebrow { font-weight: 800; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--pp-gold); margin-bottom: 26px; }
#pp-booking-app.pp-app .pp-pkg-title { color: var(--pp-cream); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; margin: 0 0 16px; letter-spacing: -0.005em; }
#pp-booking-app .pp-pkg-desc { color: rgba(255,245,224,.78); margin: 0 0 14px; }
#pp-booking-app.pp-app .pp-pkg-list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
#pp-booking-app .pp-pkg-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.05rem; line-height: 1.5; color: rgba(255,245,224,.78); }
#pp-booking-app .pp-pkg-list strong { color: var(--pp-cream); font-weight: 700; }
#pp-booking-app .pp-tick-svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 4px; color: var(--pp-gold); }
#pp-booking-app .pp-pkg-pricing { margin-top: auto; }
#pp-booking-app .pp-pkg-price-label { display: block; margin-bottom: 22px; font-weight: 800; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,245,224,.55); }
#pp-booking-app .pp-pkg-card.is-featured .pp-pkg-price-label { color: var(--pp-gold); opacity: .75; }
#pp-booking-app .pp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 3px; margin-bottom: 18px; }
#pp-booking-app .pp-tier {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
    padding: 10px 3px 12px; border-radius: 6px; text-align: center; min-width: 0;
}
#pp-booking-app .pp-pkg-card.is-featured .pp-tier { background: rgba(255,255,255,.1); }
#pp-booking-app .pp-tier.is-active { box-shadow: inset 0 0 0 1.5px var(--pp-gold); }
#pp-booking-app .pp-tier-size { font-weight: 800; font-size: clamp(.64rem, 3.4cqi, .78rem); letter-spacing: .04em; overflow-wrap: anywhere; text-transform: uppercase; color: var(--pp-lavender); line-height: 1.35; }
#pp-booking-app .pp-tier-dur { font-size: .72rem; color: rgba(255,245,224,.65); }
#pp-booking-app .pp-tier-price { font-family: var(--pp-heading-font); font-weight: 800; font-size: clamp(1.2rem, 8.5cqi, 2.3rem); color: var(--pp-gold); line-height: 1.15; }
#pp-booking-app .pp-pkg-total { margin: 0 0 14px; text-align: center; font-size: .92rem; color: rgba(255,245,224,.8); }
#pp-booking-app .pp-pkg-total.is-muted { color: rgba(255,245,224,.6); }
#pp-booking-app.pp-app .pp-pkg-book {
    width: 100%; min-height: 58px; border-radius: 6px;
    background: transparent; color: var(--pp-cream);
    box-shadow: inset 0 0 0 1.5px rgba(255,245,224,.7);
    font-size: 1.05rem; letter-spacing: .16em;
}
#pp-booking-app.pp-app .pp-pkg-book:hover:not(:disabled) { background: var(--pp-cream); color: var(--pp-navy); box-shadow: none; filter: none; }
#pp-booking-app.pp-app .pp-pkg-card.is-featured .pp-pkg-book { background: var(--pp-gold); color: var(--pp-navy); box-shadow: none; }
#pp-booking-app.pp-app .pp-pkg-card.is-featured .pp-pkg-book:hover:not(:disabled) { filter: brightness(1.06); }
#pp-booking-app.pp-app .pp-pkg-book.is-selected, #pp-booking-app.pp-app .pp-pkg-card.is-featured .pp-pkg-book.is-selected { background: var(--pp-btn); color: #fff; box-shadow: none; }
/* Wide (lone) package card: the ticks sit in two columns beside each other. */
#pp-booking-app.pp-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(3n+1) .pp-pkg-list { flex-direction: row; flex-wrap: wrap; gap: 14px 40px; }

/* --- Individual add-ons (Addon 01-06) ----------------------------------- */
#pp-booking-app .pp-addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#pp-booking-app .pp-addon-card {
    display: flex; flex-direction: column; min-height: 230px;
    padding: 34px 30px 26px; border-radius: var(--pp-r-sm);
    background: var(--pp-navy); color: var(--pp-cream);
    box-shadow: inset 0 0 0 1px rgba(255,245,224,.12);
}
#pp-booking-app .pp-addon-card.is-selected { box-shadow: inset 0 0 0 3px var(--pp-btn); }
#pp-booking-app.pp-app .pp-addon-title { color: var(--pp-cream); font-size: 1.7rem; font-weight: 800; margin: 0 0 14px; }
#pp-booking-app .pp-addon-desc { color: rgba(255,245,224,.8); font-size: 1.05rem; line-height: 1.65; margin: 0 0 12px; }
#pp-booking-app .pp-addon-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
#pp-booking-app .pp-addon-price { color: var(--pp-gold); font-weight: 800; font-size: 1.15rem; }
#pp-booking-app.pp-app .pp-addon-qty .pp-qty-btn { background: rgba(255,245,224,.12); color: var(--pp-cream); }
#pp-booking-app.pp-app .pp-addon-qty .pp-qty-btn:hover:not(:disabled) { background: var(--pp-cream); color: var(--pp-navy); }
#pp-booking-app .pp-addon-qty .pp-qty-value { color: var(--pp-cream); font-size: 1.3rem; min-width: 30px; }

#pp-booking-app .pp-people-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
    max-width: 900px; margin-bottom: 36px; padding: 10px 14px 10px 20px;
    border-radius: var(--pp-r-sm); background: var(--pp-cream); box-shadow: inset 0 0 0 1px rgba(55,47,84,.22);
}
#pp-booking-app .pp-people-row .pp-qty-control { margin-left: auto; }
#pp-booking-app .pp-people-note { flex: 1 1 100%; font-size: .88rem; color: var(--pp-on-dark-2); }

/* --- Booking popup (Image 04) ------------------------------------------- */
#pp-booking-app .pp-modal-overlay.pp-app {
    position: fixed; inset: 0; z-index: 9999; width: auto; max-width: none; margin: 0; min-height: 0;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(40, 34, 60, .55);
}
#pp-booking-app.pp-app .pp-modal {
    /* Smaller footprint and tighter internal spacing throughout (below) so
       the popup fits inside a normal laptop viewport without the customer
       needing to scroll to see the Confirm button (issue 3). */
    width: 100%; max-width: 720px; max-height: calc(100vh - 64px); overflow-y: auto;
    background: var(--pp-panel-deep); border-radius: var(--pp-r-sm); padding: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,.35); color: var(--pp-navy);
}
#pp-booking-app.pp-app .pp-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 24px 16px; border-bottom: 1px solid rgba(55,47,84,.14); }
#pp-booking-app.pp-app .pp-modal-header h2 { font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem); font-weight: 800; margin: 0 0 4px; color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-modal-sub { margin: 0; font-size: .96rem; font-weight: 500; color: var(--pp-on-dark-2); }
#pp-booking-app.pp-app .pp-modal-close { width: 34px; height: 34px; display: grid; place-items: center; color: #111; border-radius: 50%; }
#pp-booking-app.pp-app .pp-modal-close svg { width: 22px; height: 22px; }
#pp-booking-app.pp-app .pp-modal-close:hover { background: rgba(55,47,84,.1); color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-modal-cta { padding: 16px 24px 18px; border-bottom: 1px solid rgba(55,47,84,.14); }
#pp-booking-app.pp-app .pp-modal-confirm { margin: 0; gap: 10px; min-height: 44px; font-size: 1.15rem; }
#pp-booking-app.pp-app #pp-modal-error:empty { display: none; }
#pp-booking-app.pp-app .pp-modal-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; padding: 18px 24px; border-bottom: 1px solid rgba(55,47,84,.14); }
#pp-booking-app.pp-app .pp-modal-info { display: flex; flex-direction: column; gap: 10px; }
#pp-booking-app.pp-app .pp-modal-box { padding: 12px 16px 11px; border-radius: 6px; background: var(--pp-cream); }
#pp-booking-app.pp-app .pp-modal-label { display: block; margin-bottom: 2px; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .01em; color: var(--pp-on-dark-2); }
#pp-booking-app.pp-app .pp-modal-box strong { display: block; font-weight: 500; font-size: 1.02rem; color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-modal-box strong.pp-modal-time { font-family: var(--pp-heading-font); font-weight: 800; font-size: 1.4rem; line-height: 1.1; }
#pp-booking-app.pp-app .pp-modal-pricing { align-self: start; border-radius: 6px; background: var(--pp-cream); box-shadow: inset 0 0 0 1px rgba(55,47,84,.22); }
#pp-booking-app.pp-app .pp-modal-pricing-head { padding: 10px 16px; font-weight: 800; font-size: .95rem; text-transform: uppercase; border-bottom: 1px solid rgba(55,47,84,.18); }
#pp-booking-app.pp-app .pp-modal-pricing-rows { padding: 2px 16px; }
#pp-booking-app.pp-app .pp-modal-price-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .92rem; border-bottom: 1px solid rgba(55,47,84,.14); }
#pp-booking-app.pp-app .pp-modal-price-row > span:last-child { font-weight: 700; text-align: right; }
#pp-booking-app.pp-app .pp-modal-pricing-rows .pp-modal-price-row:last-child { border-bottom: 0; }
#pp-booking-app.pp-app .pp-modal-price-total { padding: 12px 16px; border-top: 1px solid rgba(55,47,84,.18); border-bottom: 0; font-size: 1.02rem; font-weight: 500; }
#pp-booking-app.pp-app .pp-modal-price-total > span:last-child { font-weight: 800; font-size: 1.22rem; }
#pp-booking-app.pp-app .pp-modal-notes { padding: 14px 24px 18px; }
#pp-booking-app.pp-app .pp-modal-notes p { margin: 0 0 8px; font-size: .92rem; line-height: 1.45; color: var(--pp-navy); }
#pp-booking-app.pp-app .pp-modal-notes p:last-child { margin-bottom: 0; }

/* --- Consent (reference consent panel) ---------------------------------- */
#pp-booking-app .pp-consent-group {
    display: flex; flex-direction: column; gap: 16px;
    margin: 22px 0 0; padding: 22px 24px; border: 0; border-radius: var(--pp-r-sm);
    background: var(--pp-panel-deep);
}
#pp-booking-app .pp-checkbox-field { display: flex; align-items: center; gap: 14px; font-size: 1.08rem; line-height: 1.4; color: var(--pp-navy); cursor: pointer; }
#pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 3px;
    background: var(--pp-cream); border: 1px solid rgba(55,47,84,.28);
    display: grid; place-content: center; cursor: pointer;
}
#pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"]::after {
    content: ''; width: 7px; height: 13px; margin-top: -3px;
    border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}
#pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"]:checked { background: var(--pp-btn); border-color: var(--pp-btn); }
#pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
#pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"]:focus-visible { outline: 3px solid var(--pp-btn); outline-offset: 2px; }
#pp-booking-app.pp-app .pp-checkbox-field a { color: var(--pp-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#pp-booking-app.pp-app .pp-checkbox-field a:hover { color: var(--pp-btn); }
#pp-booking-app .pp-checkbox-field.is-invalid input[type="checkbox"] { border-color: var(--pp-red); box-shadow: 0 0 0 2px var(--pp-red-bg); }

/* --- Container-based responsiveness (main column width) ----------------- */
@container ppmain (max-width: 680px) {
    #pp-booking-app .pp-alt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@container ppmain (max-width: 860px) {
    #pp-booking-app .pp-pkg-grid, #pp-booking-app .pp-addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #pp-booking-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(3n+1) { grid-column: auto; }
    #pp-booking-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    #pp-booking-app.pp-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(3n+1) .pp-pkg-list { flex-direction: column; }
}
@container ppmain (max-width: 760px) {
    #pp-booking-app .pp-exp-layout { grid-template-columns: minmax(0, 1fr); }
}
@container ppmain (max-width: 500px) {
    #pp-booking-app .pp-alt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #pp-booking-app .pp-slot-card { min-height: 150px; }
}
@container ppmain (max-width: 520px) {
    #pp-booking-app .pp-pkg-grid, #pp-booking-app .pp-addon-grid { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-pkg-grid > .pp-pkg-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* --- Viewport responsiveness (placed last so it wins the cascade) ------- */
@media (max-width: 1080px) {
    #pp-booking-app .pp-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
    #pp-booking-app .pp-layout { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-summary { order: 0; }
    #pp-booking-app.pp-app .pp-search-card { padding: 24px 20px 26px; }
    #pp-booking-app.pp-app .pp-modal-grid { grid-template-columns: minmax(0, 1fr); }
    #pp-booking-app .pp-location-box strong { font-size: 1.6rem; }
}
@media (max-width: 560px) {
    #pp-booking-app.pp-app .pp-experience-band { flex-direction: column-reverse; min-height: 0; }
    #pp-booking-app .pp-experience-band-media { flex: 0 0 auto; max-width: none; height: 210px; padding: 15px 15px 0; }
    #pp-booking-app .pp-exp-bars { inset: 0 15px 0 15px; }
    #pp-booking-app .pp-experience-band-text { padding: 18px 20px 22px; text-align: center; align-items: center; }
    #pp-booking-app.pp-app .pp-type-seg-btn { min-height: 64px; font-size: .98rem; }
    #pp-booking-app .pp-search-row-2col { grid-template-columns: 1fr; gap: 14px; }
    #pp-booking-app .pp-guest-label { font-size: 1rem; gap: 8px; }
    #pp-booking-app.pp-app .pp-qty-btn { width: 34px; height: 34px; }
    #pp-booking-app .pp-qty-value { min-width: 34px; font-size: 1.35rem; }
    #pp-booking-app.pp-app .pp-btn-search { width: 100%; }
    #pp-booking-app .pp-results-banner { padding: 22px 14px; margin-bottom: 24px; }
    #pp-booking-app.pp-app .pp-modal-header, #pp-booking-app.pp-app .pp-modal-cta, #pp-booking-app.pp-app .pp-modal-grid, #pp-booking-app.pp-app .pp-modal-notes { padding-left: 16px; padding-right: 16px; }
    #pp-booking-app.pp-app .pp-modal { max-height: calc(100vh - 24px); }
    #pp-booking-app.pp-app .pp-modal-confirm { font-size: 1.02rem; }
    #pp-booking-app .pp-pkg-card, #pp-booking-app .pp-addon-card { padding: 28px 20px 22px; }
    #pp-booking-app .pp-pkg-ribbon { left: 20px; }
    #pp-booking-app .pp-consent-group { padding: 18px 16px; }
    #pp-booking-app .pp-checkbox-field { font-size: 1rem; align-items: flex-start; }
    #pp-booking-app .pp-select-icon { left: 16px; }
    #pp-booking-app.pp-app .pp-select-has-icon { padding-left: 48px; }
    /* "Select a Package", "Food & Drinks"/"Food & Drink Packages" and
       "Your Details" headings centred on mobile (issue 7). */
    #pp-booking-app.pp-app[data-step="session_package"] .pp-hero-title, #pp-booking-app.pp-app[data-step="addons"] .pp-hero-title, #pp-booking-app.pp-app[data-step="packages"] .pp-hero-title, #pp-booking-app.pp-app[data-step="extras"] .pp-hero-title, #pp-booking-app.pp-app[data-step="payment"] .pp-hero-title { text-align: center; }
}

#pp-booking-app #pp-details-error .pp-error-banner { max-width: 720px; }

/* ======================================================================= */
/* 1.3.2 — client feedback round                                           */
/* ======================================================================= */

/* Round icon buttons: SVG glyphs, centred with no inherited padding. */
#pp-booking-app.pp-app .pp-qty-btn, #pp-booking-app.pp-app .pp-summary-close, #pp-booking-app.pp-app .pp-modal-close, #pp-booking-app.pp-app .pp-calendar-header button {
    padding: 0; line-height: 1; display: inline-grid; place-items: center; text-align: center;
}

/* Summary close (×): mobile only. On desktop the summary is always shown.
   (Must come after the icon-button rule above, which sets display.) */
#pp-booking-app.pp-app .pp-summary-close { display: none; }
#pp-booking-app.pp-app .pp-summary-reopen, #pp-booking-app.pp-app .pp-summary-reopen.is-visible { display: none; }
#pp-booking-app .pp-summary.pp-summary-collapsed { display: block; }
#pp-booking-app .pp-ico { display: block; width: 16px; height: 16px; flex: 0 0 auto; pointer-events: none; }
#pp-booking-app.pp-app .pp-summary-close .pp-ico { width: 14px; height: 14px; }

/* Occasion required: invalid state. */
#pp-booking-app.pp-app .pp-select.is-invalid { box-shadow: inset 0 0 0 2px var(--pp-red); }

/* Add an Experience step (Food & Drink journey). */
#pp-booking-app .pp-addon-note { margin: 0 0 14px; font-size: .92rem; line-height: 1.45; color: var(--pp-gold); }
#pp-booking-app .pp-addon-card.is-blocked { opacity: .6; }
#pp-booking-app .pp-addon-card.is-blocked .pp-addon-note { color: #FFB4A6; }

/* Experience band: the description always wraps inside its column. */
#pp-booking-app.pp-app .pp-experience-band, #pp-booking-app.pp-app .pp-experience-band-text, #pp-booking-app.pp-app .pp-experience-desc, #pp-booking-app.pp-app .pp-experience-name { white-space: normal; letter-spacing: normal; }
#pp-booking-app.pp-app .pp-experience-name { letter-spacing: -0.01em; }
#pp-booking-app.pp-app .pp-experience-band-text { overflow-wrap: anywhere; }

/* Full-width fields in the details form share the grid gap only (the
   search card's .pp-field-full bottom margin doesn't apply here). */
#pp-booking-app.pp-app .pp-form-grid .pp-field-full { margin-bottom: 0; }

@media (max-width: 900px) {
    #pp-booking-app.pp-app .pp-summary-close { display: inline-grid; }

    /* Mobile bar: the summary toggle is a primary-colour button with white
       text (total + "View summary" / "Hide summary"). */
    #pp-booking-app.pp-app .pp-mobile-summary-toggle {
        flex: 0 0 auto; align-self: stretch; justify-content: center;
        padding: 8px 16px; border-radius: var(--pp-r-sm);
        background: var(--pp-navy); color: #fff;
    }
    #pp-booking-app.pp-app .pp-mobile-summary-toggle #pp-mobile-total { color: #fff; }
    #pp-booking-app.pp-app .pp-mobile-summary-toggle .pp-mobile-toggle-label { color: #fff; text-decoration: none; opacity: .9; }
    #pp-booking-app.pp-app .pp-mobile-summary-toggle:hover, #pp-booking-app.pp-app .pp-mobile-summary-toggle:focus { background: var(--pp-navy); color: #fff; filter: brightness(1.15); }
}

@media (max-width: 560px) {
    #pp-booking-app.pp-app .pp-subheading { margin-top: 30px; }

    /* Details & payment: compact on phones. Inputs stay at 16px text so
       iOS doesn't zoom the page when a field is tapped. */
    #pp-booking-app.pp-app[data-step="payment"] .pp-hero-title { font-size: 2rem; margin-bottom: 14px; }
    #pp-booking-app.pp-app .pp-panel { padding: 14px; }
    #pp-booking-app.pp-app .pp-form-grid { gap: 10px; }
    #pp-booking-app.pp-app .pp-field { gap: 4px; }
    #pp-booking-app.pp-app .pp-field label { font-size: .76rem; }
    #pp-booking-app.pp-app .pp-field input, #pp-booking-app.pp-app .pp-field textarea { padding: 9px 12px; font-size: 16px; border-radius: 6px; }
    #pp-booking-app.pp-app .pp-field textarea { min-height: 64px; }
    #pp-booking-app.pp-app .pp-consent-group { margin-top: 14px; padding: 12px 12px; gap: 10px; }
    #pp-booking-app.pp-app .pp-checkbox-field { gap: 10px; font-size: .9rem; line-height: 1.35; }
    #pp-booking-app.pp-app .pp-checkbox-field input[type="checkbox"] { width: 22px; height: 22px; flex-basis: 22px; }
    #pp-booking-app.pp-app .pp-review-card { padding: 10px 14px; }
    #pp-booking-app.pp-app .pp-review-card .pp-summary-row { padding: 7px 0; font-size: .86rem; }
    #pp-booking-app.pp-app[data-step="payment"] .pp-actions { margin-top: 20px; }
    #pp-booking-app.pp-app[data-step="payment"] .pp-btn { min-height: 48px; }
    #pp-booking-app.pp-app[data-step="payment"] .pp-actions .pp-btn-ghost { flex: 0 0 auto; padding: 0 20px; }
    #pp-booking-app.pp-app[data-step="payment"] .pp-actions .pp-btn-pay { flex: 1 1 auto; padding: 0 16px; }
    #pp-booking-app.pp-app .pp-note-secure { font-size: .8rem; }
}