/* The display face lives in the theme, but the funnel can be dropped on a
   page whose theme sheet loads later — declaring it here too costs nothing
   (same URL, one fetch) and guarantees the headings never fall back. */
@font-face{font-family:'Trikers';font-style:normal;font-weight:400;font-display:swap;
  src:url('/wp-content/themes/paellaxcasa/assets/fonts/trikers.woff2') format('woff2');}

/*
 * PaellaXCasa — booking funnel.
 * Tokens mirror the theme (assets/styles/_variables.scss). Square corners
 * throughout; CTA fills are the light blue with a navy label.
 * Mobile-first: single column, the running total docks to the bottom of the
 * viewport, and it becomes a sidebar from 62rem up.
 */
.pxc-fn {
    /* Mirrors the theme's _variables.scss. These had drifted a whole palette
       behind — the funnel was still on the pre-merge greens and the old navy,
       which is why its blues never matched the brand. Keep them in step. */
    --pxc-brand: #095787;
    --pxc-brand-dark: #142B41;
    --pxc-cta: #AEBDC7;
    --pxc-cta-hover: #92A7BD;
    --pxc-on-cta: #142B41;      /* brand blue on these fills is only 4.0:1 */
    --pxc-bg: #FBF9F6;
    --pxc-bg-alt: #F4EEEA;
    --pxc-mint: #E7F1E8;        /* the green band */
    --pxc-sage: #C6D4CB;        /* green hairlines */
    --pxc-band: #E3DFD8;
    --pxc-line: #D0C8C6;
    --pxc-text: #095787;
    --pxc-muted: #4C5B69;
    --pxc-ok: #2F6B47;
    --pxc-warn: #8A2F2F;

    color: var(--pxc-text);
    font-family: 'Jost', system-ui, -apple-system, sans-serif;

    /* Match the theme's section shell so the funnel sits inside the same
       content column as every other block instead of spanning the viewport. */
    padding-block: clamp(3rem, 8vw, 5.5rem);
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    background: var(--pxc-mint);
}
.pxc-fn__inner {
    max-width: 1280px;
    margin-inline: auto;
    container-type: inline-size;
}

.pxc-fn *, .pxc-fn *::before, .pxc-fn *::after { box-sizing: border-box; }

/* ── Head ─────────────────────────────────────────────────────────────── */
.pxc-fn__head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.pxc-fn__heading {
    font-family: 'Trikers', 'Cormorant Garamond', Georgia, cursive;
    font-size: clamp(1.75rem, 4.6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 0 0 .6rem;
}
.pxc-fn__intro { color: var(--pxc-muted); line-height: 1.6; margin: 0; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.pxc-fn__layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) {
    .pxc-fn__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
    /* Before step 1 is answered the total is hidden, so the form takes the
       full width instead of leaving a 20rem hole beside it. */
    .pxc-fn__layout--solo { grid-template-columns: minmax(0, 1fr); }
}

.pxc-fn__main {
    background: #fff;
    border: 1px solid var(--pxc-line);
    padding: clamp(1.15rem, 4vw, 2.25rem);
}

/* ── Step rail ────────────────────────────────────────────────────────── */
.pxc-fn__rail {
    display: flex;
    gap: .35rem;
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0 0 .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.pxc-fn__rail::-webkit-scrollbar { display: none; }
.pxc-fn__rail-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1 0 auto;
    padding: .4rem .6rem .55rem 0;
    border-bottom: 3px solid var(--pxc-line);
    color: var(--pxc-muted);
    font-size: .8125rem;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}
.pxc-fn__rail-dot {
    display: grid;
    place-items: center;
    width: 1.5rem; height: 1.5rem;
    flex: none;
    background: var(--pxc-sage);
    color: var(--pxc-muted);
    font-size: .75rem;
    font-weight: 700;
}
.pxc-fn__rail-item.is-active { color: var(--pxc-brand); border-bottom-color: var(--pxc-brand); font-weight: 600; }
.pxc-fn__rail-item.is-active .pxc-fn__rail-dot { background: var(--pxc-brand); color: #fff; }
.pxc-fn__rail-item.is-done   { color: var(--pxc-brand); border-bottom-color: var(--pxc-cta-hover); }
.pxc-fn__rail-item.is-done .pxc-fn__rail-dot { background: var(--pxc-cta); color: var(--pxc-on-cta); }
@container (max-width: 34rem) { .pxc-fn__rail-label { display: none; } }

/* ── Steps ────────────────────────────────────────────────────────────── */
.pxc-fn__step { display: none; }
.pxc-fn__step.is-active { display: block; animation: pxc-fn-in .28s ease both; }
@keyframes pxc-fn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pxc-fn__step.is-shake { animation: pxc-fn-shake .3s ease; }
@keyframes pxc-fn-shake { 25% { transform: translateX(-5px);} 75% { transform: translateX(5px);} }

.pxc-fn__step-title {
    font-style: italic;
    font-family: 'Trikers', 'Cormorant Garamond', Georgia, cursive;
    font-size: clamp(1.25rem, 3.2vw, 1.7rem);
    letter-spacing: .01em;
    margin: 0 0 .4rem;
}
.pxc-fn__step-hint { color: var(--pxc-muted); font-size: .9375rem; line-height: 1.55; margin: 0 0 1.4rem; }

/* ── Calendar ─────────────────────────────────────────────────────────── */
/* The grid is 7 capped columns (7 x 3rem + 6 x 2px = 21.75rem), so the whole
   calendar block is constrained to match and centred. Without this the month
   header stretches the full card width and strands the < > arrows metres away
   from the dates they page through. */
.pxc-fn__cal {
    max-width: 21.75rem;
    margin-inline: auto;
}
.pxc-fn__cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .75rem;
}
.pxc-fn__cal-month { font-weight: 600; text-transform: capitalize; }
.pxc-fn__cal-nav {
    width: 2.25rem; height: 2.25rem;
    border: 1px solid var(--pxc-line);
    background: #fff; color: var(--pxc-brand);
    font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.pxc-fn__cal-nav:hover { background: var(--pxc-bg-alt); }

/* Tiles are capped rather than stretched. With `1fr` the seven columns ate the
   whole content width, so on a laptop the calendar alone pushed the Continuar
   button below the fold. 3rem is a comfortable tap target and keeps the grid a
   calendar-shaped block instead of a full-width table. */
.pxc-fn__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 3rem));
    justify-content: center;
    gap: 2px;
}
.pxc-fn__cal-wd {
    text-align: center; font-size: .6875rem; font-weight: 700;
    color: var(--pxc-muted); padding-bottom: .35rem; text-transform: uppercase;
}
.pxc-fn__cal-pad { aspect-ratio: 1; }
.pxc-fn__cal-day {
    aspect-ratio: 1;
    min-height: 2.25rem;             /* still a comfortable tap target */
    display: grid; place-items: center;
    border: 1px solid var(--pxc-line);
    background: #fff; color: var(--pxc-text);
    font: inherit; font-size: .875rem; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pxc-fn__cal-day:hover:not(:disabled) { background: var(--pxc-cta); border-color: var(--pxc-brand); }
.pxc-fn__cal-day.is-off { color: #B7C2BA; background: var(--pxc-bg); cursor: not-allowed; border-color: transparent; }
.pxc-fn__cal-day.is-picked { background: var(--pxc-brand); border-color: var(--pxc-brand); color: #fff; font-weight: 700; }
.pxc-fn__cal-range, .pxc-fn__cal-empty, .pxc-fn__cal-loading {
    color: var(--pxc-muted); font-size: .8125rem; margin: .85rem 0 0; text-align: center;
}

/* Calendar and slots share a row from 48rem up, each getting an even half of
   the funnel's width, so picking a date no longer pushes the Continuar button
   down the page. Below that they stack. */
.pxc-fn__datetime { display: grid; gap: 1.4rem; }
@media (min-width: 48rem) {
    .pxc-fn__datetime {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
    /* Left-aligned once it shares the row — centring only made sense when the
       calendar was alone in a full-width card. */
    .pxc-fn__datetime .pxc-fn__cal { margin-inline: 0; }
    .pxc-fn__datetime .pxc-fn__times { margin-top: 0; }
}

.pxc-fn__times { margin-top: 1.4rem; }
.pxc-fn__times-label { font-weight: 600; margin: 0 0 .6rem; text-transform: capitalize; }
.pxc-fn__times-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; }
@media (min-width: 48rem) {
    .pxc-fn__times-grid { grid-template-columns: repeat(3, 1fr); }
}
.pxc-fn__time {
    padding: .6rem .4rem;
    border: 1px solid var(--pxc-line);
    background: #fff; color: var(--pxc-text);
    font: inherit; font-size: .875rem; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pxc-fn__time:hover { background: var(--pxc-cta); border-color: var(--pxc-brand); }
.pxc-fn__time.is-picked { background: var(--pxc-brand); border-color: var(--pxc-brand); color: #fff; font-weight: 600; }

/* ── Guest stepper ────────────────────────────────────────────────────── */
.pxc-fn__stepper {
    display: flex; align-items: stretch; gap: 0;
    border: 1px solid var(--pxc-line); width: fit-content; margin-bottom: 1.5rem;
}
.pxc-fn__step-btn {
    width: 3rem; min-height: 3rem;
    border: 0; background: var(--pxc-bg-alt); color: var(--pxc-brand);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.pxc-fn__step-btn:hover { background: var(--pxc-cta); }
.pxc-fn__step-btn--sm { width: 2.25rem; min-height: 2.25rem; font-size: 1.1rem; }
.pxc-fn__stepper-value { display: flex; align-items: baseline; gap: .4rem; padding: 0 1rem; align-self: center; }
.pxc-fn__stepper-value input {
    width: 3.5ch; border: 0; background: transparent; color: var(--pxc-text);
    font: inherit; font-size: 1.5rem; font-weight: 700; text-align: center;
    -moz-appearance: textfield;
}
.pxc-fn__stepper-value input::-webkit-outer-spin-button,
.pxc-fn__stepper-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pxc-fn__stepper-unit { color: var(--pxc-muted); font-size: .8125rem; }

/* ── Packs ────────────────────────────────────────────────────────────── */
.pxc-fn__packs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pxc-fn__pack {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .2rem 1.25rem;
    padding: .9rem 1.1rem;
    border: 2px solid var(--pxc-line);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease,
        grid-template-columns .25s ease, padding .25s ease, color .25s ease;
}
.pxc-fn__pack:hover { border-color: var(--pxc-cta-hover); }
/* cursor: default — funnel.js no-ops a click on the already-active pack, so
   the pointer cursor (which reads as "clicking this does something") would
   be misleading here. */
.pxc-fn__pack.is-active { border-color: var(--pxc-brand); background: var(--pxc-bg-alt); cursor: default; }
/* Label leads (grid-column 1) — it's what the pack IS. The per-guest rate
   (column 2) is the one number announced big; a compact, muted breakdown
   (column 3) carries the three figures that put that rate in context — see
   below. align-items: center on the row lets the single-line rate sit level
   with the middle of the three-line breakdown beside it. */
.pxc-fn__pack-label {
    grid-column: 1;
    display: flex; flex-direction: column; gap: .1rem; text-align: left;
}
.pxc-fn__pack-name  { font-weight: 600; transition: color .25s ease; }
.pxc-fn__pack-range { color: var(--pxc-muted); font-size: .8125rem; transition: opacity .2s ease; }
/* The rate is the headline figure — big, bold, brand blue, "announced"
   since it never changes with the group size. Everything it doesn't say is
   in the breakdown: the pack fee that adds on top of it (a small "+" chip,
   not a glued-on character — reads as an add-on, not a typo), the average
   (fee + rate × guests, divided back out by guests) as quiet supporting
   context, and the total closing the block bold and in ink, the one number
   customers actually need to decide with (see block.php / funnel.js
   renderPackTotals for both live figures). */
.pxc-fn__pack-perhead { grid-column: 2; color: var(--pxc-muted); font-size: .8125rem; white-space: nowrap; text-align: center; }
.pxc-fn__pack-total .woocommerce-Price-amount.amount { font-weight: 700; font-size: 1.75rem; color: var(--pxc-brand); line-height: 1; }
.pxc-fn__pack-breakdown {
    grid-column: 3;
    display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
    text-align: center;
}
.pxc-fn__pack-package,
.pxc-fn__pack-average {
    color: var(--pxc-muted); font-size: .8125rem; white-space: nowrap;
}
.pxc-fn__pack-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; margin-right: .1rem;
    border-radius: 999px;
    background: var(--pxc-bg-alt);
    color: var(--pxc-brand);
    font-size: .6875rem; font-weight: 700; line-height: 1;
    vertical-align: 1px;
}
.pxc-fn__pack-price {
    color: var(--pxc-brand); font-size: 1rem; font-weight: 700; white-space: nowrap;
    padding-top: .1rem; border-top: 1px solid var(--pxc-line);
}
.pxc-fn__pack-total,
.pxc-fn__pack-average-amount,
.pxc-fn__pack-grandtotal { display: inline-block; }

/* Re-played on every renderPackTotals() update (funnel.js restarts it via a
   classList remove/reflow/add on both the average and the total) so a
   guest-count change reads as the figures actively updating, not just
   silently being different numbers a moment later. Opacity + scale rather
   than a colour crossfade, so the one class works on both the blue average
   and the muted total. prefers-reduced-motion strips this via the blanket
   rule below. */
@keyframes pxc-pack-amount-flash {
    0%   { opacity: .35; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
.pxc-fn__pack-amount--flash {
    display: inline-block;
    animation: pxc-pack-amount-flash .4s ease;
}

/* Mobile only: a pack whose range doesn't cover the guest count already set
   above is genuinely not an option right now — the full rate/package/
   average/total block for every non-fitting pack just pushes the one that
   DOES fit off-screen. Collapse to a thin, greyed-out label row instead
   (still clickable — tapping one still jumps the guest count into its
   range, same as before), keeping only the per-person rate — shrunk to
   match the rest of this collapsed row — since that's the one figure worth
   comparing pack to pack at a glance; the whole breakdown stays hidden
   until the pack is actually picked. The currently-fitting pack (.is-active)
   is untouched at any width. */
@media (max-width: 61.99rem) {
    .pxc-fn__pack:not(.is-active) {
        grid-template-columns: 1fr;
        padding: .3rem 1rem;
        color: #666;
    }
    .pxc-fn__pack:not(.is-active) .pxc-fn__pack-range {
        display: none;
    }
    .pxc-fn__pack:not(.is-active) .pxc-fn__pack-name {
        color: #bababa;
    }
    .pxc-fn__pack:not(.is-active) .pxc-fn__pack-perhead {
        font-size: .75rem;
        color: #999;
    }
    .pxc-fn__pack:not(.is-active) .pxc-fn__pack-perhead .pxc-fn__pack-total .woocommerce-Price-amount.amount {
        font-weight: 400;
        font-size: inherit;
        color: inherit;
    }
    .pxc-fn__pack:not(.is-active) .pxc-fn__pack-breakdown {
        display: none;
    }
}

/* Active pack, narrow phones only: three side-by-side columns (label / big
   rate / breakdown) don't fit a ~360px content width without wrapping mid-
   figure, so stack them instead — the collapsed, non-active packs above are
   already single-column at this width, so this just keeps the one visible,
   expanded pack consistent with them. */
@media (max-width: 26rem) {
    .pxc-fn__pack.is-active {
        grid-template-columns: 1fr;
    }
    .pxc-fn__pack.is-active .pxc-fn__pack-perhead,
    .pxc-fn__pack.is-active .pxc-fn__pack-breakdown {
        grid-column: 1;
        text-align: left;
    }
}

/* Masterclass packs carry no price of their own (see block.php) — the label
   then owns the whole row instead of sitting cramped in a narrow column. */
.pxc-fn__pack--noprice { grid-template-columns: 1fr; }
.pxc-fn__pack--noprice .pxc-fn__pack-label { grid-column: 1; grid-row: 1; }

/* ── Paellas ──────────────────────────────────────────────────────────── */
.pxc-fn__paellas { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pxc-fn__paella {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 2px solid var(--pxc-line); background: #fff; padding: .35rem .9rem .35rem .35rem;
    transition: border-color .18s ease, background .18s ease;
}
.pxc-fn__paella.is-picked { border-color: var(--pxc-brand); background: var(--pxc-bg-alt); }
.pxc-fn__paella.is-disabled { opacity: .45; pointer-events: none; }
.pxc-fn__paella-pick { display: flex; align-items: center; gap: .75rem; padding: .55rem; cursor: pointer; flex: 1; }
.pxc-fn__paella-pick input { width: 1.15rem; height: 1.15rem; accent-color: var(--pxc-brand); flex: none; }
.pxc-fn__paella-body { display: flex; flex-direction: column; gap: .1rem; }
.pxc-fn__paella-name { font-weight: 600; }
.pxc-fn__paella-desc { color: var(--pxc-muted); font-size: .8125rem; line-height: 1.4; }
.pxc-fn__paella-price { color: var(--pxc-muted); font-size: .8125rem; }
/* Two picks: the persons-split control (label + stepper, see below) is the
   tallest thing in the row, so align-items: center on .pxc-fn__paella would
   otherwise centre the tag against that whole two-line block — level with
   the gap between "Para cuántos" and the −/+ row, not with the buttons
   themselves. align-self: flex-end anchors it to the row's bottom edge
   instead, which is the stepper's own edge, so the two read as one unit. */
.pxc-fn__paella-tag {
    flex: none;
    align-self: flex-end;
    margin-bottom: 5px; /* closes the residual gap to the stepper's own centre, measured against the rendered row */
    padding: .3rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pxc-fn__paella-tag.is-included { background: var(--pxc-brand); color: #fff; }
.pxc-fn__paella-tag.is-extra    { background: var(--pxc-cta); color: var(--pxc-on-cta); }
.pxc-fn__paella-especial { color: var(--pxc-brand); font-size: .8125rem; font-weight: 600; }

/* Per-dish head split — only shown once two varieties are picked. Reuses the
   group-size stepper's own button styling (.pxc-fn__step-btn--sm already
   exists for exactly this smaller, per-row context) rather than inventing a
   second stepper look. */
.pxc-fn__paella-persons {
    flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
}
.pxc-fn__paella-persons-label { font-size: .6875rem; color: var(--pxc-muted); white-space: nowrap; }
.pxc-fn__paella-persons-stepper { display: flex; align-items: stretch; border: 1px solid var(--pxc-line); }
.pxc-fn__paella-persons-stepper .pxc-fn__step-btn--sm:disabled {
    opacity: .35; cursor: not-allowed; background: var(--pxc-bg-alt);
}
.pxc-fn__paella-persons-stepper input {
    width: 2.25ch; border: 0; background: #fff; align-self: stretch;
    padding: 0 .2rem; font: inherit; font-weight: 700; text-align: center;
    -moz-appearance: textfield;
}
.pxc-fn__paella-persons-stepper input::-webkit-outer-spin-button,
.pxc-fn__paella-persons-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pxc-fn__balance { font-size: .875rem; margin: 0; font-weight: 600; }
.pxc-fn__balance.is-ok   { color: var(--pxc-ok); }
.pxc-fn__balance.is-warn { color: var(--pxc-warn); }

/* ── Fields ───────────────────────────────────────────────────────────── */
.pxc-fn__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .pxc-fn__grid { grid-template-columns: 1fr 1fr; } }
.pxc-fn__field { display: flex; flex-direction: column; gap: .35rem; }
.pxc-fn__field--wide { grid-column: 1 / -1; }
.pxc-fn__label { font-size: .8125rem; font-weight: 600; }
.pxc-fn__input {
    padding: .75rem .9rem;
    min-height: 2.9rem;
    border: 1px solid var(--pxc-line);
    background: #fff; color: var(--pxc-text);
    font: inherit;
    font-size: 1rem;            /* 16px keeps iOS from zooming on focus */
}
.pxc-fn__input:focus { outline: none; border-color: var(--pxc-brand); box-shadow: 0 0 0 3px rgba(23,68,113,.16); }
.pxc-fn__input.is-invalid { border-color: var(--pxc-warn); }
.pxc-fn__textarea { resize: vertical; }
.pxc-fn__field-note { margin: .35rem 0 0; font-size: .8125rem; color: var(--pxc-muted); }

/* ── Distance ─────────────────────────────────────────────────────────── */
.pxc-fn__distance { display: flex; flex-wrap: wrap; gap: .6rem; }
.pxc-fn__distance-pick {
    display: flex; align-items: center; gap: .5rem;
    border: 2px solid var(--pxc-line); background: #fff;
    padding: .6rem .9rem; cursor: pointer; font-size: .875rem;
    transition: border-color .18s ease, background .18s ease;
}
.pxc-fn__distance-pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--pxc-brand); flex: none; }
.pxc-fn__distance-pick:has(input:checked) { border-color: var(--pxc-brand); background: var(--pxc-bg-alt); }

/* ── Review ───────────────────────────────────────────────────────────── */
.pxc-fn__review-list { margin: 0 0 1rem; display: grid; gap: 0; }
.pxc-fn__review-list > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--pxc-line);
}
.pxc-fn__review-list dt { color: var(--pxc-muted); font-size: .875rem; margin: 0; }
.pxc-fn__review-list dd { margin: 0; font-weight: 600; text-align: right; }
.pxc-fn__fineprint { color: var(--pxc-muted); font-size: .8125rem; margin: 0; }

/* ── Actions ──────────────────────────────────────────────────────────── */
.pxc-fn__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.pxc-fn__btn {
    flex: 1 1 auto;
    min-height: 3rem;
    padding: .85rem 1.75rem;
    border: 2px solid var(--pxc-cta);
    background: var(--pxc-cta); color: var(--pxc-on-cta);
    font: inherit; font-weight: 600; cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.pxc-fn__btn:hover { background: var(--pxc-cta-hover); border-color: var(--pxc-cta-hover); }
.pxc-fn__btn--ghost { flex: 0 0 auto; background: transparent; border-color: var(--pxc-brand); color: var(--pxc-brand); }
.pxc-fn__btn--ghost:hover { background: var(--pxc-cta); border-color: var(--pxc-cta); }
.pxc-fn__btn:focus-visible { outline: 3px solid var(--pxc-brand); outline-offset: 2px; }

/* ── Running total ────────────────────────────────────────────────────── */
.pxc-fn__total {
    background: var(--pxc-brand); color: #fff;
    padding: 1.25rem 1.35rem;
    position: sticky; bottom: 0; z-index: 2;
}
/* Several funnel elements set `display` on their own class (.pxc-fn__packs is a
   grid, .pxc-fn__total a sticky block), which beats the `hidden` attribute's UA
   `display: none`. That is why both services' pack lists were showing at once.
   One rule rather than one per element, so the next hidden thing cannot repeat it. */
.pxc-fn [hidden] { display: none !important; }
@media (min-width: 62rem) { .pxc-fn__total { position: sticky; top: 6rem; bottom: auto; } }
/* .pxc-fn__total-label is a <button> — it doubles as the mobile accordion
   toggle for .pxc-fn__total-lines below (see the click handler in
   funnel.js). Desktop never collapses the list, so the reset here just
   makes the button read as the same plain heading it always was; the
   chevron stays hidden until the mobile media query below needs it. */
.pxc-fn__total-label {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; margin: 0 0 .75rem; padding: 0; border: 0; background: none;
    font: inherit; font-size: .6875rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72);
    cursor: default;
}
.pxc-fn__total-chevron { display: none; }
.pxc-fn__total-lines { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .4rem; }
.pxc-fn__total-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.pxc-fn__total-lines li > span { display: flex; flex-direction: column; gap: .1rem; }
.pxc-fn__total-lines small { color: rgba(255,255,255,.66); font-size: .75rem; }
.pxc-fn__total-lines em { font-style: normal; font-variant-numeric: tabular-nums; }
.pxc-fn__total-meta { color: rgba(255,255,255,.72); font-size: .8125rem !important; text-transform: capitalize; }
.pxc-fn__total-empty { color: rgba(255,255,255,.72); }
.pxc-fn__total-sum {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    margin: 0; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.24);
    font-size: 1rem;
}
.pxc-fn__total-sum strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
/* Same blended-average idea as each pack's own breakdown in step 2 — quiet
   supporting context under the number that actually matters (the total),
   not a second headline figure competing with it. */
.pxc-fn__total-average {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    margin: .35rem 0 0;
    font-size: .8125rem; color: rgba(255,255,255,.72);
}
.pxc-fn__total-average [data-pxc-average] { font-variant-numeric: tabular-nums; }
.pxc-fn__total-note { margin: .5rem 0 0; font-size: .75rem; color: rgba(255,255,255,.66); }

/* Below the sidebar breakpoint the total is a bar docked to the bottom of the
   viewport, so every pixel it takes is a pixel of the form the visitor cannot
   see. Tighten the padding, the gaps and the type — the numbers stay legible,
   the chrome around them does not. */
@media (max-width: 61.99rem) {
    .pxc-fn__total {
        padding: .6rem .85rem .7rem;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
    }
    .pxc-fn__total-label {
        margin-bottom: .35rem;
        font-size: .625rem; letter-spacing: .1em;
    }
    .pxc-fn__total-lines { margin-bottom: .45rem; gap: .2rem; }
    .pxc-fn__total-lines li { font-size: .8125rem; gap: .75rem; }
    .pxc-fn__total-lines small { font-size: .6875rem; }
    .pxc-fn__total-meta { font-size: .75rem !important; }
    .pxc-fn__total-sum { padding-top: .45rem; font-size: .875rem; }
    .pxc-fn__total-sum strong { font-size: 1.25rem; }
    .pxc-fn__total-average { margin-top: .25rem; font-size: .75rem; }
    .pxc-fn__total-note { margin-top: .3rem; font-size: .6875rem; }

    /* The itemised breakdown is the one part of this bar that isn't a
       single glanceable figure — on a phone it can run to 4-5 lines, which
       is a lot of the screen for a box that's docked over the content the
       visitor is trying to read. Open by default (block.php sets
       data-lines-open server-side, so it renders open with no JS-driven
       first-paint flash); funnel.js just toggles the same attribute off/on
       from there, the label button doubling as the control. max-height (not
       display/visibility) so it animates. */
    .pxc-fn__total-label { margin-bottom: 0; cursor: pointer; }
    .pxc-fn__total-chevron {
        display: block; flex: none;
        width: .5rem; height: .5rem;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .pxc-fn__total[data-lines-open] .pxc-fn__total-chevron { transform: rotate(-135deg); }
    .pxc-fn__total-lines {
        max-height: 0; margin-bottom: 0; overflow: hidden;
        transition: max-height .25s ease, margin-bottom .25s ease;
    }
    .pxc-fn__total[data-lines-open] .pxc-fn__total-lines {
        max-height: 40vh; margin-bottom: .45rem; overflow-y: auto;
    }
}

/* Very short viewports: drop the fine print, keep the numbers — the label
   stays, since collapsed it costs almost nothing and it's the only way to
   reach the breakdown at all on a screen this short. */
@media (max-width: 61.99rem) and (max-height: 34rem) {
    .pxc-fn__total-note { display: none; }
    .pxc-fn__total { padding: .5rem .85rem .55rem; }
}

/* Narrow phones: 7 x 3rem + gaps is 348px, but a 390px viewport leaves only
   ~303px inside the section and card padding — so the columns flex again here,
   and the shell gives back some of its padding. */
@media (max-width: 30rem) {
    .pxc-fn { padding-inline: 1rem; }
    .pxc-fn__main { padding: 1rem .85rem; }
    .pxc-fn__cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .pxc-fn__cal-day { font-size: .8125rem; }
    .pxc-fn__cal-wd { font-size: .625rem; }
}

/* ── Service choice (step 0) ──────────────────────────────────────────── */
.pxc-fn__services {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .75rem;
}
@media (min-width: 44rem) { .pxc-fn__services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pxc-fn__services { grid-template-columns: 1fr 1fr 1fr; } }

.pxc-fn__service {
    border: 2px solid var(--pxc-line);
    background: #fff;
    transition: border-color .18s ease, background .18s ease;
}
.pxc-fn__service:hover { border-color: var(--pxc-cta-hover); }
.pxc-fn__service.is-active { border-color: var(--pxc-brand); background: var(--pxc-bg-alt); }

/* The whole card is the hit area; the radio itself is only for assistive tech
   and keyboard focus, so it is taken out of the visual flow rather than hidden
   with display:none, which would drop it from the tab order. */
.pxc-fn__service-pick {
    display: block; padding: 1rem 1.15rem; cursor: pointer; height: 100%;
}
.pxc-fn__service-pick input {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.pxc-fn__service-pick input:focus-visible + .pxc-fn__service-body {
    outline: 2px solid var(--pxc-brand); outline-offset: 4px;
}
.pxc-fn__service-body { display: grid; gap: .3rem; }
.pxc-fn__service-name  { font-weight: 700; font-size: 1.0625rem; color: var(--pxc-brand); }
.pxc-fn__service-desc  { color: var(--pxc-muted); font-size: .875rem; line-height: 1.5; }

/* ── Notices ──────────────────────────────────────────────────────────── */
.pxc-fn__notice {
    padding: .85rem 1rem; border: 1px solid; margin: 0 auto 1.5rem;
    max-width: 46rem; font-size: .9375rem;
}
.pxc-fn__notice--success { background: #EAF2ED; border-color: var(--pxc-ok); color: #2F5D4A; }
.pxc-fn__notice--error   { background: #FAEDED; border-color: var(--pxc-warn); color: #8A2F2F; }

@media (prefers-reduced-motion: reduce) {
    .pxc-fn *, .pxc-fn *::before, .pxc-fn *::after {
        animation: none !important; transition: none !important;
    }
}