/*
 * The checkout.
 *
 * Two columns, as the comp has it: the order on the left and the agenda form on
 * the right. The left column's own contents are a wizard — one card per delegate
 * that walks ticket type, person, company, then closes into a summary — so most
 * of what is here describes one card in four states.
 *
 * Loaded only by page-checkout.php, after tokens/base/content, so a bare class
 * already beats the kit on a tie. Where a rule is written under `.scc-main` it is
 * because base.css states the same property at (0,1,1) — `.scc-main a`,
 * `.scc-main p`, `.scc-main li` — and a single class would lose.
 */

.scc-checkout {
    /* The comp's own values. None of these exist as site tokens: the indigo
       ticket and the green pay button live on this page and nowhere else. */
    --gia-ticket-from: #4D519C;
    --gia-ticket-to: #4C509B;
    --gia-go: #AAEF9E;
    --gia-go-fg: #2F313F;
    --gia-ghost: rgba(47, 49, 63, 0.4);
    --gia-ghost-hover: rgba(47, 49, 63, 0.6);
    --gia-well: rgba(0, 0, 0, 0.2);
    --gia-pip: #6D71BE;
}

/* Layout ------------------------------------------------------------------ */
/* The same 2.08:1 split and 36px gutter as the form pages — the comp lays both
   on the identical grid, and reusing it keeps the two templates from drifting. */
.gia-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    align-items: start;
    padding-block: var(--scc-section-y);
}

.gia-checkout__body {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.6rem + 2.8vw, 3.125rem);
    background: var(--scc-surface-strong);
    border-radius: var(--scc-radius);
}

.gia-checkout__aside { position: sticky; top: calc(var(--scc-header-h) + var(--scc-admin-bar, 0px) + 1rem); }

.scc-main .gia-checkout__title { margin: 0; font-size: var(--scc-text-h2); line-height: 1.3; }

/* The event's date and city under the page title. Set exactly as the form pages
   set theirs — there it is simply the first paragraph of the page content, so
   body size and body colour, not a caption. The title carries the gap. */
.scc-main .gia-checkout__when {
    margin: 1.5rem 0 0;
    font-size: var(--scc-text-body);
    color: var(--scc-text);
}
.scc-main .gia-checkout__where { margin: 0.5rem 0 0; color: var(--scc-text); }

.gia-checkout__intro { margin-block-end: clamp(1.75rem, 1rem + 2.4vw, 3.125rem); }

/* 50px between a section heading and its body in the comp, and the same again
   between sections — this page is long, and the headings are what make it
   readable as four decisions rather than one form. */
.gia-checkout__section + .gia-checkout__section { margin-block-start: clamp(2rem, 1.2rem + 3.4vw, 3.125rem); }

.scc-main .gia-checkout__heading {
    display: flex;
    align-items: center;
    gap: var(--scc-icon-gap);
    margin: 0 0 clamp(1.25rem, 0.8rem + 1.8vw, 1.875rem);
    font-size: var(--scc-text-h3);
    line-height: 1.3;
}

.gia-checkout__rule {
    height: 0;
    margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
    border: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}

/* The ticket card --------------------------------------------------------- */
.gia-tickets { display: grid; gap: 0.625rem; }

/* A fieldset carries a default border, padding and min-inline-size in every
   engine; the last of those is what stops a grid child from ever shrinking. */
.gia-ticket {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* The comp's card is 307px (node 1:8115) and every one of the four states is
       drawn at that height, so this is both the floor and what they all settle on.
       A floor, not a fixed height: the summary card carries three columns of facts
       and is allowed to grow past it on a narrow column. */
    min-height: 19.1875rem;
    gap: clamp(1rem, 0.5rem + 1.6vw, 1.875rem);
    min-inline-size: 0;
    margin: 0;
    /* Horizontal only. 307 is the card's TOTAL height in the comp, with the body
       filling it and the spacing living inside — vertical padding here was being
       added to that 307 and made the card 378. */
    /* The floor is 1rem, not 1.25rem, so the nesting reads as a step down rather
       than as three identical walls: at 390 the page gutter is 20px, the panel
       20.5px and this was 20px too — 121px of a 390px screen, 31% of it, spent
       on chrome before a word of the form. 16px here makes it 20.5 : 16 and
       gives the select back 8px. Unchanged from ~490px up, where the fluid term
       takes over from the floor. */
    padding: 0 clamp(1rem, 0.7rem + 2vw, 2.5rem);
    border: 0;
    border-radius: var(--scc-radius);
    background: linear-gradient(90deg, var(--gia-ticket-from), var(--gia-ticket-to));
}

/* The step rail ----------------------------------------------------------- */
/* Three 35px rings joined by a dotted run, with a solid rule separating the rail
   from the card body. Pips are drawn here rather than exported as one image so
   the state colours are a class change, not three more files. */
.gia-ticket__rail {
    position: relative;
    display: grid;
    /* pip, connector, pip, connector, pip. The connector rows take whatever is
       left, which is what makes them run icon to icon at any card height — the
       reason they are rows and not a fixed-height pseudo-element. */
    grid-template-rows: auto minmax(0.75rem, 1fr) auto minmax(0.75rem, 1fr) auto;
    gap: 0;
    align-content: stretch;
    margin: 0;
    /* 51px to the first pip and 51 under the last, in a 307 card. */
    padding: 3.1875rem clamp(1rem, 0.6rem + 1.4vw, 1.5625rem) 3.1875rem 0;
    list-style: none;
}

/* The divider runs 33 to 275 in the comp's 307 — short of both edges, not edge to
   edge. A border on the padded box would span the lot, so it is drawn inset. */
.gia-ticket__rail::after {
    content: "";
    position: absolute;
    inset-block: 10.7% 10.4%;
    inset-inline-end: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.25);
}

.gia-ticket__pip {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.1875rem;
    height: 2.1875rem;
    border: 4px solid var(--gia-pip);
    border-radius: 50%;
    color: var(--gia-pip);
}

/* A dotted stroke filling the gap between two icons, with a hair of clearance so
   it does not touch either ring. */
.gia-ticket__link {
    justify-self: center;
    width: 2px;
    margin-block: 0.25rem;
    background: repeating-linear-gradient(var(--gia-pip) 0 2px, transparent 2px 5px);
}

.gia-ticket__pip.is-on,
.gia-ticket__pip.is-done { border-color: var(--gia-go); color: var(--gia-go); }
.gia-ticket__link.is-done { background: repeating-linear-gradient(var(--gia-go) 0 2px, transparent 2px 5px); }

.gia-ticket__pip-icon { width: 1.125rem; height: 1.125rem; }

/* Steps ------------------------------------------------------------------- */
/* A grid so the step can push its actions to the bottom of the taller card. */
.gia-ticket__body {
    position: relative;
    display: grid;
    /*
     * stretch, not start. The card has a floor height, so the body is as tall as
     * the card — but packing its rows to the top meant the step inside it was
     * only as tall as its own content, and `margin-block-start: auto` on the
     * actions had no free space left to push the button into. The button came to
     * rest 73px above the card's bottom edge where the comp puts it at 38, with
     * the leftover 35px sitting under it as nothing. Needs the flex column on
     * .gia-step below to work: either one alone changes nothing.
     */
    align-content: stretch;
    min-inline-size: 0;
    /* The comp puts the title's box at y=36 and the button's bottom 38 above the
       card's own bottom edge (nodes 1:8149 and 1:8141 inside a 307 card). */
    padding-block: 2.25rem 2.375rem;
}

/* A column, so the actions' `margin-block-start: auto` has somewhere to push
   from — see the note on .gia-ticket__body. The children were never laid out in
   more than one track, so nothing about the arrangement changes. */
.gia-step { display: flex; flex-direction: column; }

/* Pinned to the card's top-right so it is in the same place in all four states.
   Absolute rather than in the flow: the three open steps have no header row to
   put it in, and the summary card's header is already carrying its title. */
/* Centred on the step title rather than pinned to the body's edge. It used to sit
   inside the card's vertical padding; that padding moved into the body when the
   card was set to the comp's 307 total, and the button went with it — flush
   against the top edge, over the corner radius. The offset is the body's own
   padding-top less half the difference between the button and the title. */
.scc-checkout .gia-ticket__remove {
    position: absolute;
    inset-block-start: calc(2.25rem - 0.4375rem);
    inset-inline-end: 0;
    z-index: 1;
}

/* Room for it, reserved only when it is actually there. The repeater adds this
   class from the second ticket on; a single delegate has nothing to remove and
   should not be paying for the gap. */
.gia-ticket.has-remove .gia-step__title,
.gia-ticket.has-remove .gia-summary-card__head { padding-inline-end: 3.25rem; }

.scc-main .gia-step__title {
    margin: 0 0 clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.4375rem);
    font-weight: var(--scc-weight-display);
    line-height: 1.3;
}

.gia-step__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
    align-items: start;
}

/* Step 1 is the one exception: a wide control beside the price tag. `start`, not
   `end` — that was right when the price was a short plate, but the tag is tall
   now and it was dragging the ticket field down to the tag's bottom edge instead
   of leaving it under the heading where the rest of the steps put their fields. */
.gia-step__cols--price { grid-template-columns: minmax(0, 22.3125rem) auto; justify-content: space-between; align-items: start; }

.gia-step__group { display: grid; gap: 0.875rem; min-inline-size: 0; }

.scc-main .gia-step__group-title {
    display: flex;
    align-items: center;
    gap: var(--scc-icon-gap);
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.gia-step__group-title .scc-icon { width: 0.875rem; height: 0.875rem; }

.gia-step__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    /* auto, not a length: the card has a floor height now, and the actions belong
       on its bottom edge rather than a fixed distance under whatever is above.
       padding-block-start keeps a minimum of air when the step is full. */
    margin-block-start: auto;
    padding-block-start: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}

/* The price tag ----------------------------------------------------------- */
/* A gabled tag with a punched hole, as the comp draws it — not a rectangle. The
   silhouette is one SVG background rather than clip-path: the shape needs rounded
   corners AND a rounded apex AND a real hole (evenodd), and the hole has to show
   the card's gradient through it, which a clipped box cannot do.
   No text in the SVG: the figure is live, and it stays HTML so it can be read,
   selected and translated. */
.scc-main .gia-price {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 0.25rem;
    /* 136 x 120 — the comp's price slot, node 1:8146. It had been drawn as a
       100/138 portrait, which made it 188px tall and dragged the whole card from
       307 to 459. */
    width: 8.5rem;
    height: 7.5rem;
    margin: 0;
    /* Room for the gable and the hole above the figures. */
    padding: 0.5rem 0.5rem 0.875rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 120' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='rgba(0,0,0,0.2)' d='M0 110V44L62 6a10 10 0 0 1 12 0l62 38v66a10 10 0 0 1-10 10H10a10 10 0 0 1-10-10ZM68 26a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    text-align: center;
}

/* Any `display` beats the UA's `[hidden] { display: none }`, so every element
   this file gives a display to and the JS toggles needs its own guard. */
.scc-main .gia-price[hidden],
.gia-step[hidden],
.scc-checkout .gia-btn[hidden] { display: none; }

/* 22.8px and 27.9px in the comp (nodes 1:8148 and 1:8147). */
.gia-price__label { font-size: 1.1875rem; letter-spacing: 0.02em; line-height: 1.2; }
.gia-price__value { font-size: 1.375rem; font-weight: var(--scc-weight-display); line-height: 1.2; }

/* The closed card --------------------------------------------------------- */
.gia-summary-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.scc-main .gia-summary-card__title {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.4375rem);
    font-weight: var(--scc-weight-display);
    line-height: 1.3;
}

.gia-summary-card__tools { display: flex; gap: 0.5rem; }

.scc-main .gia-summary-card__lede { margin: 0.5rem 0 0; font-size: var(--scc-text-small); }

.scc-main .gia-summary-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem;
    font-size: var(--scc-text-small);
    font-weight: var(--scc-weight-display);
    border-block-end: 1px solid rgba(255, 255, 255, 0.3);
}

.gia-summary-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
    margin: 1.0625rem 0 0;
}

.gia-fact { min-inline-size: 0; }

.scc-main .gia-fact__head {
    display: flex;
    align-items: center;
    gap: var(--scc-icon-gap);
    margin: 0 0 0.3125rem;
    font-size: 1rem;
    font-weight: var(--scc-weight-bold);
}
.gia-fact__head .scc-icon { width: 0.875rem; height: 0.875rem; }

/* dt/dd carry a UA margin and an indent that would stagger the three columns. */
.gia-fact dt {
    margin: 0.3125rem 0 0;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.gia-fact dd {
    margin: 0;
    font-size: var(--scc-text-small);
    font-weight: var(--scc-weight-display);
    line-height: 1.4;
    /* An email address has no break opportunity and would otherwise push its
       column wider than the card. */
    overflow-wrap: anywhere;
}

/* Buttons ----------------------------------------------------------------- */
/* (0,2,0): the kit's `button:hover` is (0,2,1), and these need to answer it or
   they grow a border on hover like every other bare button on the network. */
.scc-checkout .gia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--scc-icon-gap);
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--scc-radius);
    font-family: var(--scc-font);
    font-size: 1rem;
    font-weight: var(--scc-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s, background-color 0.2s;
}

.scc-checkout .gia-btn .scc-icon { width: 1rem; height: 1rem; }

.scc-checkout .gia-btn--go { background: var(--gia-go); color: var(--gia-go-fg); }
.scc-checkout .gia-btn--go:hover,
.scc-checkout .gia-btn--go:focus-visible { border: 0; background: var(--gia-go); filter: brightness(1.08); }

.scc-checkout .gia-btn--back,
.scc-checkout .gia-btn--ghost { background: var(--gia-ghost); color: var(--scc-text-strong); }
.scc-checkout .gia-btn--back:hover,
.scc-checkout .gia-btn--back:focus-visible,
.scc-checkout .gia-btn--ghost:hover,
.scc-checkout .gia-btn--ghost:focus-visible { border: 0; background: var(--gia-ghost-hover); color: var(--scc-text-strong); }

.scc-checkout .gia-btn--ghost .scc-icon { width: 0.8125rem; height: 0.8125rem; }
.scc-checkout .gia-btn--icon { padding-inline: 0.625rem; }
.scc-checkout .gia-btn--icon .scc-icon { width: 1.5rem; height: 1.5rem; }

.scc-checkout .gia-btn--primary {
    padding: 1rem 1.875rem;
    background: var(--scc-btn-bg);
    color: var(--scc-btn-fg);
}
.scc-checkout .gia-btn--primary:hover,
.scc-checkout .gia-btn--primary:focus-visible { border: 0; background: var(--scc-accent); color: var(--scc-btn-fg); }

.scc-checkout .gia-btn--pay {
    padding: 1rem 1.875rem;
    background: var(--gia-go);
    color: #000000;
    font-size: var(--scc-text-body);
}
.scc-checkout .gia-btn--pay:hover,
.scc-checkout .gia-btn--pay:focus-visible { border: 0; background: var(--gia-go); filter: brightness(1.08); }
.scc-checkout .gia-btn[disabled] { opacity: 0.6; cursor: not-allowed; filter: none; }

.scc-main .gia-tickets__add { margin: 1.25rem 0 0; text-align: center; }

/* Fields ------------------------------------------------------------------ */
/* align-content so the field's own rows do not stretch either, for the same
   reason, whenever something else makes the field box taller than its contents. */
/* 10px label to control, which is what the comp sets (nodes 1:8151/1:8152). 5px
   was the tightest space anywhere in the card and read as the label touching the
   field — worst on a phone, where step 1's select is the only control on screen. */
.gia-field { display: grid; gap: 0.625rem; min-inline-size: 0; align-content: start; }

/*
 * The same in-field icon the lead forms use, on the checkout's own controls.
 *
 * Positioned, not laid out: .gia-field is a grid of label, control, error and
 * sometimes a hint, and an icon in that flow would take a row of its own.
 * Centring is on the wrapper only where the label is visually hidden — where
 * there is a real label above the control, .gia-field--labelled measures from
 * the top instead, or the icon floats between the two.
 */
.gia-field--iconed { position: relative; }

/*
 * CENTRED ON THE CONTROL, NOT ON THE FIELD.
 *
 * `inset-block-start: 50%` measured against the whole .gia-field, which is a grid
 * of control plus error message. The error is `display: none` while it is empty,
 * so this looked right — and then the first failed submit filled it in, the
 * wrapper grew by a line, and every icon slid out of its box and came to rest on
 * top of the error text underneath. Which is precisely when a form most needs to
 * be legible.
 *
 * `grid-row` is what fixes it, and it does so by changing what "50%" is measured
 * against: an absolutely positioned CHILD OF A GRID that names a grid area takes
 * that AREA as its containing block, not the padding box of the container. Row 1
 * is the control — the label above it is .scc-visually-hidden, which is itself
 * absolutely positioned and so occupies no row.
 */
.gia-field--iconed .scc-field-icon {
    /* Stated rather than left to painting order. The control that follows it in
       the DOM carries an opaque background, and `z-index: auto` leaves the two in
       the same layer with nothing in the rules to say which wins. */
    z-index: 1;
    position: absolute;
    inset-inline-start: 1.125rem;
    /*
     * ANCHORED TO THE CONTROL'S OWN GRID ROW — see the identical note in forms.css.
     *
     * Row 1 is the control: the label above it is .scc-visually-hidden, which is
     * absolutely positioned and so occupies no row. Naming the row makes that row
     * the icon's containing block, so `50%` is half the CONTROL rather than half a
     * field that also holds a hint and an error line.
     *
     * This replaces `calc(1px + 0.5rem + 0.7em)`, which added up the control's
     * border, padding and half-line by hand and was therefore only ever as
     * accurate as those three assumptions.
     *
     * `.gia-field__row` (the promo box and its inset Add button) is a plain block,
     * not a grid, so `grid-row` is inert there and 50% already measures the row —
     * which is the input, the button being absolutely positioned.
     */
    /*
     * `1 / 2`, NOT `1` — the end line is stated on purpose. `grid-row: 1` is
     * `1 / auto`, and while the spec resolves that to a single-row span, at least
     * one engine reads the open end as "to the last line" and hands back the whole
     * grid as the containing block. The symptom is exactly the failure this rule
     * exists to prevent: fine while the error line is empty, and 17px out the
     * moment a message appears and the field grows. Same note in forms.css.
     */
    grid-row: 1 / 2;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 1.0625rem;
    height: 1.0625rem;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.55);
}

/* On the white plate the grey would all but vanish. */
.gia-field--light.gia-field--iconed .scc-field-icon { color: rgba(0, 0, 0, 0.45); }

/*
 * "Ticket type" is the one field on this page with a VISIBLE label, so its
 * control is the second grid row, not the first — and the icon has to follow it
 * down.
 *
 * This used to say `calc(1.4375rem + 0.625rem + 1px + 0.5rem + 0.7em)`: the label
 * line, the row gap, then the control's border, padding and half-line, five
 * measurements deep and wrong the moment any of them changed. Pointing at the row
 * says the same thing exactly, and keeps saying it if the label wraps to two
 * lines on a narrow screen — which the old sum could not, since it had 23px for
 * the label written into it.
 */
.gia-field--labelled .scc-field-icon {
    grid-row: 2 / 3;
}

/*
 * ...with the gutter moved off the grid and onto the items.
 *
 * Engines do not agree on whether the 10px gutter that sits BEFORE row 2 belongs
 * to row 2's grid area. The icon above is positioned against that area, so a
 * gutter counted in rather than out puts it 5px high — measured, on this exact
 * field. Rather than pick a side, there is no gutter here to disagree about: the
 * spacing moves to margins on the items either side of the control, which every
 * engine measures identically, and the row then starts and ends exactly on the
 * control.
 *
 * Nothing changes on screen. Grid items' margins never collapse, so 10px of
 * margin sits where 10px of gutter did.
 */
.gia-field--labelled { row-gap: 0; }
.gia-field--labelled > label { margin-block-end: 0.625rem; }
.gia-field--labelled > .gia-field__error { margin-block-start: 0.625rem; }

/* Doubled for the same reason as forms.css: at one class this tied with
   `.scc-checkout .gia-field input` below and lost on order. */
.scc-checkout .gia-field.gia-field--iconed input,
.scc-checkout .gia-field.gia-field--iconed select { padding-inline-start: 3rem; }

/*
 * The focus colour has to know which plate it is on.
 *
 * This said `currentColor`, which on the dark fields is the page's white text and
 * reads correctly — and on a WHITE field is also white, so focusing the very
 * first control of the wizard made its icon vanish into the plate. The unfocused
 * state already had a light variant; the focused one did not, so the icon was
 * visible until you went to use the field.
 *
 * Two states, stated: darker ink on white, brighter white on the dark ground —
 * in both cases the icon steps FORWARD when the field is the one being used.
 */
.gia-field--iconed:has(:focus-visible) .scc-field-icon { color: var(--scc-text-strong); }

.gia-field--light.gia-field--iconed:has(:focus-visible) .scc-field-icon { color: rgba(0, 0, 0, 0.75); }

/* The promo row is a flex pair — box then Add button — so its icon measures
   against the row and the input alone takes the room. */
.gia-field__row.gia-field--iconed { position: relative; }
.scc-checkout .gia-field .gia-field__row.gia-field--iconed input,
.scc-checkout .gia-field__row.gia-field--iconed input { padding-inline-start: 3rem; }

.scc-main .gia-field > label {
    font-size: var(--scc-text-small);
    letter-spacing: 0.02em;
}

/* (0,2,1) so hello-elementor's attribute reset and the kit's bare input rules
   both lose — they would otherwise repaint these mid-form. */
.scc-checkout .gia-field input,
.scc-checkout .gia-field select,
.scc-checkout .gia-field textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--scc-field-bg);
    border: 1px solid var(--scc-field-line);
    border-radius: var(--scc-radius);
    color: var(--scc-text-strong);
    font-family: var(--scc-font);
    font-size: 1rem;
    line-height: 1.4;
}

.scc-checkout .gia-field ::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; }

.scc-checkout .gia-field input:focus-visible,
.scc-checkout .gia-field select:focus-visible,
.scc-checkout .gia-field textarea:focus-visible {
    outline: 2px solid var(--scc-accent);
    outline-offset: 1px;
}

/* Inside the indigo card the fields invert: white plate, dark text. A dark field
   on the indigo ground is the one combination the comp never uses. */
.scc-checkout .gia-field--light input,
.scc-checkout .gia-field--light select {
    background: #FFFFFF;
    border-color: #FFFFFF;
    border-radius: 0.5625rem;
    color: #000000;
    font-size: var(--scc-text-small);
}
.scc-checkout .gia-field--light ::placeholder { color: rgba(0, 0, 0, 0.6); }

/* The UA chevron is near-black on white here and near-invisible on the dark
   fields, so both get the same drawn one. Two gradients, no asset. */
.scc-checkout .gia-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 1.125rem center;
    background-size: 0.75rem 0.5rem;
    background-repeat: no-repeat;
}

/*
 * The white-plate fields need a DARK chevron; the white one above would be
 * invisible on them. This rule already existed and was already correct — it just
 * sat ABOVE the generic one and lost, because `.scc-checkout .gia-field--light
 * select` and `.scc-checkout .gia-field select` are both (0,2,1) and a tie is
 * broken by source order. The first control of the wizard was a white mark on a
 * white plate.
 *
 * Doubling the class takes it to (0,3,1), so it wins wherever it sits: a later
 * reshuffle of this file cannot bring the bug back, and a select added to any
 * other light card gets the right chevron without anyone remembering why. Only
 * background-image is restated; appearance, the end padding, position, size and
 * repeat all still come from the generic block.
 */
.scc-checkout .gia-field.gia-field--light select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.scc-main .gia-field__hint { margin: 0; font-size: var(--scc-text-small); color: var(--scc-text-muted); }

.scc-main .gia-field__error { margin: 0; font-size: var(--scc-text-small); color: #FCA5A5; }
.scc-main .gia-field__error:empty { display: none; }
.gia-field.has-error input,
.gia-field.has-error select { border-color: #FCA5A5; }

.scc-main .gia-field__caps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.gia-field__caps span { color: rgba(255, 255, 255, 0.6); text-transform: none; }
.gia-field__caps .scc-icon { width: 1.25rem; height: 1.25rem; }

.gia-fields {
    display: grid;
    /*
     * THREE STATED COLUMNS, not auto-fit.
     *
     * `repeat(auto-fit, minmax(12rem, 1fr))` counts how many 192px tracks fit, so
     * the column count changed with the window: three at a 703px column, four
     * from about 828px, five beyond that. The form has rows of exactly three
     * fields, so on a wide screen those rows filled three tracks out of four and
     * left a field's width of nothing at the right-hand end of every one.
     * Stating three makes the rows meet both edges at every desktop width.
     */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem 1.25rem;
    /* A grid row is as tall as its tallest cell, and cells stretch to fill it by
       default. The VAT field carries a hint beside it, so every input sharing its
       row was being stretched to match. Cells size to their own content instead. */
    align-items: start;
}
.gia-field--wide { grid-column: 1 / -1; }

/*
 * The VAT number and its explanation, on one row of their own.
 *
 * The sentence "a valid VAT number removes VAT from this order" is the reason
 * anyone fills this field in, and it was set inside a 221px cell — three wrapped
 * lines under the input, with two thirds of the row empty beside it. The field
 * takes the whole row now and the sentence sits to the RIGHT of the input, on
 * one line, where it reads as an explanation of the box rather than as a caption
 * under it.
 *
 * The input keeps a single column's width so it still lines up with the column
 * of inputs above it; the hint takes the two columns it leaves. The visually
 * hidden label is absolutely positioned and so occupies no track.
 */
.gia-field--vat {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 1.25rem;
    align-items: center;
}

.gia-field--vat input { grid-column: 1; grid-row: 1; }

.scc-main .gia-field--vat .gia-field__hint {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

/* The error belongs under the input it is about, not beside it. */
.gia-field--vat .gia-field__error { grid-column: 1 / -1; grid-row: 2; }

/* The order bar ----------------------------------------------------------- */
.gia-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5625rem;
    background: var(--gia-well);
    border-radius: var(--scc-radius);
}

.gia-field--promo { gap: 0.25rem; }
.scc-main .gia-field--promo > label { font-weight: var(--scc-weight-bold); }

/* The Add button is inset into the field's own right edge in the comp, so the
   row is one control rather than a box with a button parked beside it. */
.gia-field__row { position: relative; }
.scc-checkout .gia-field__row input { padding-inline-end: 4.5rem; }

.scc-checkout .gia-order__apply {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3.5rem;
    padding: 0;
    border: 0;
    border-start-end-radius: var(--scc-radius);
    border-end-end-radius: var(--scc-radius);
    background: var(--scc-field-line);
    color: var(--scc-text-strong);
    font-family: var(--scc-font);
    font-size: var(--scc-text-small);
    font-weight: var(--scc-weight-bold);
    cursor: pointer;
}
.scc-checkout .gia-order__apply:hover,
.scc-checkout .gia-order__apply:focus-visible { border: 0; background: var(--scc-accent); color: var(--scc-btn-fg); }

.gia-order__total { text-align: end; }
.scc-main .gia-order__total-label { margin: 0; font-size: var(--scc-text-small); font-weight: var(--scc-weight-bold); }
.scc-main .gia-order__total-value {
    margin: 0.625rem 0 0;
    font-size: 1.4375rem;
    font-weight: var(--scc-weight-display);
    line-height: 1.3;
}

/* The server's breakdown, under the bar so the figure above is never unexplained. */
.scc-main .gia-order__lines {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--scc-text-small);
}
.scc-main .gia-order__lines:empty { display: none; }
.scc-main .gia-order__lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.15rem 0;
}
/* The amount is the column the eye scans down, and "€ 895.00" is formatted with
   a plain space — so flex was free to squeeze the span to its min-content,
   `895.00`, and push the € onto a line of its own. The label is the half that
   can afford to wrap. */
.scc-main .gia-order__lines .gia-summary__amount {
    flex-shrink: 0;
    white-space: nowrap;
}

.gia-order__lines--adjust { color: var(--gia-go); }

.scc-main .gia-order__state {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--scc-text-small);
    color: var(--scc-text-muted);
}
.scc-main .gia-order__state:empty { display: none; }

/* Consent ----------------------------------------------------------------- */
.gia-check + .gia-check { margin-block-start: 0.625rem; }

.scc-main .gia-check label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--scc-text-small);
    line-height: 1.4;
}

/* Every child of the label is a flex item, so the copy and its links live in one
   span — otherwise a link is laid out as its own column at the far right. */
.gia-check label > span { flex: 1; }
.gia-check label small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); }

/* The native box paints white here, which is the brightest thing on the panel.
   Drawn as a field instead, like every other control on the page. */
.scc-checkout .gia-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    background: var(--scc-field-bg);
    border: 1px solid var(--scc-field-line);
    border-radius: 5px;
    cursor: pointer;
}

.scc-checkout .gia-check input[type="checkbox"]:checked { background: var(--gia-go); border-color: var(--gia-go); }

/* appearance:none takes the tick away with the box, so it is drawn back. */
.scc-checkout .gia-check input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 0.3rem;
    height: 0.6rem;
    margin: 0.1rem auto 0;
    border: solid var(--gia-go-fg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.scc-checkout .gia-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--scc-accent); outline-offset: 1px; }

/* Payment ----------------------------------------------------------------- */
.gia-payment {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 0.6rem + 2.8vw, 3.3125rem);
    background: var(--gia-well);
    border-radius: var(--scc-radius);
}

.gia-payment__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.625rem;
}
.gia-payment__row .gia-field { flex: 1 1 15rem; }

/* The hand-off panel. There is no card box any more — the buyer enters the card
   on Stripe's page — so this section is one explanation and one button, and it
   says plainly where the card details go. */
.gia-payment--handoff {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 0.6rem + 1.4vw, 1.875rem);
}

.scc-main .gia-payment__lede {
    display: flex;
    align-items: flex-start;
    gap: var(--scc-icon-gap);
    margin: 0;
    font-size: var(--scc-text-small);
    line-height: 1.5;
}
.gia-payment__lede .scc-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-block-start: 0.1rem; }
.gia-payment__lede strong { display: block; font-weight: var(--scc-weight-display); }

@media (max-width: 640px) {
    .gia-payment--handoff { grid-template-columns: 1fr; }
    .scc-checkout .gia-payment--handoff .gia-btn--pay { width: 100%; }
}

.scc-main .gia-checkout__notice,
.scc-main .gia-checkout__status {
    margin: 0.75rem 0 0;
    font-size: var(--scc-text-small);
    min-height: 1.2em;
}
.scc-main .gia-checkout__notice { color: #FCD34D; }
.gia-checkout__status--error { color: #FCA5A5; }
.gia-checkout__status--ok { color: var(--gia-go); }

/* Narrow ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .gia-checkout__layout { grid-template-columns: 1fr; }
    .gia-checkout__aside { position: static; }
    .gia-order { grid-template-columns: 1fr; }
    .gia-order__total { text-align: start; }
}

@media (max-width: 640px) {
    /* The rail turns into a horizontal run of three: at this width a vertical one
       costs more inline space than the fields it is meant to be explaining. */
    .gia-ticket { grid-template-columns: 1fr; }
    /*
     * THE CARD'S VERTICAL INSETS, RE-CUT FOR THE STACKED LAYOUT.
     *
     * Both of the card's block paddings were authored for the TWO-COLUMN card and
     * neither survives the stack. `.gia-ticket__body`'s 36px top was "the title
     * sits 36px below the CARD's top edge" — true while the body is the second
     * COLUMN and its top edge IS the card's top edge. Once the rail becomes a row
     * above it, that 36px is measured from the divider instead, and the card's own
     * top inset disappears with it: the pips ended up hard against the rounded top
     * border with a 52px hole under the rule. Top-flush and bottom-padded, which
     * is what reads as "the padding wasn't fixed".
     *
     * Re-cut so the card has ONE inset on every side. 20px above the pips, 20px
     * under the button, 20px each side from the rule above — and the divider
     * centred in 16 and 16, so it separates two equal spaces instead of sitting on
     * the near edge of one big one.
     */
    .gia-ticket__rail {
        grid-template-rows: none;
        grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto;
        align-items: center;
        padding: 1.25rem 0 1rem;
    }

    /* 16px under the divider, not 36 — the card's row gap is already 16 at this
       width, so the two together give the heading the same air the pips have
       above them. The bottom becomes 20px to match the top; the comp's 38 was cut
       for a 307px card, and this one is half as tall again. */
    .gia-ticket__body { padding-block: 0 1.25rem; }
    .gia-ticket__rail::after {
        inset-block: auto 0;
        inset-inline: 0;
        width: auto;
        height: 2px;
    }
    .gia-ticket__link {
        justify-self: stretch;
        align-self: center;
        width: auto;
        height: 2px;
        margin: 0 0.25rem;
        background: repeating-linear-gradient(90deg, var(--gia-pip) 0 2px, transparent 2px 5px);
    }
    .gia-ticket__link.is-done { background: repeating-linear-gradient(90deg, var(--gia-go) 0 2px, transparent 2px 5px); }

    .gia-step__cols--price { grid-template-columns: 1fr; align-items: stretch; }

    /* Centred at its own size, NOT stretched. `width: 100%` against the fixed
       120px height and a `preserveAspectRatio='none'` backdrop drew the price
       house 269px wide — the same drawing at twice its width, with the gable
       flattened and the hole above the figures pulled into an oval. */
    .scc-main .gia-price { width: 100%; max-width: 8.5rem; margin-inline: auto; }
    .gia-step__actions { justify-content: stretch; }
    .scc-checkout .gia-step__actions .gia-btn { flex: 1; }

    /* Three stated columns are three columns at every width unless something says
       otherwise — 60px each on a phone. Two here, one below. */
    .gia-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .gia-fields { grid-template-columns: minmax(0, 1fr); }

    /* No room to set the sentence beside the box, so it goes back under it. */
    .gia-field--vat {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .gia-field--vat input { grid-row: auto; }
    .scc-main .gia-field--vat .gia-field__hint { grid-column: 1; grid-row: auto; }
    .gia-field--vat .gia-field__error { grid-column: 1; grid-row: auto; }
}