/**
 * Card on file — Payment step block.
 *
 * Replaces Amelia's own Summary on the Payment step (`.am-cof-host` is set by the script; the
 * same totals are already in the sidebar panel).
 *
 * Four rules about how this file is written, all because the block lives inside someone else's
 * stylesheet — Amelia's compiled bundle plus the theme:
 *
 * 1. **Every rule carries `.amelia-v2-booking #amelia-container`.** The bundle ships
 *    `#amelia-container section{display:block}`, bare `header{...}` rules, and — the one that
 *    matters most here — `.amelia-v2-booking #amelia-container div, ...span, ...h4 {font-size:
 *    inherit}`, which is (1 id, 1 class, 1 element). A plain `.am-cof__title{font-size:1.75rem}`
 *    loses to it, and so does `#amelia-container .am-cof__title`: both are outranked, which is how
 *    the whole block once rendered at the container's 16px/1.75 with every weight flattened to 400.
 *    Matching the bundle's own scope puts each rule at (1 id, 2 classes) and it wins.
 * 2. **Vertical rhythm is `gap`, never margins.** Element margins inside the container are
 *    flattened by id-specificity rules, so margins here would be a coin toss.
 * 3. **Colours come from the redesign's tokens** (`--am-clean-*`) with literal fallbacks, so the
 *    block matches the form even if that stylesheet is missing.
 * 4. **Width comes from a container query, not the viewport.** The block sits in whatever column
 *    Amelia's shortcode was dropped into — 660px inside a 1440px window is normal — so
 *    `@media` would stack it at the wrong moment. Single column is the default and the
 *    two-column layout is opt-in above 46rem of *block content* width, which also means a browser
 *    without container queries gets the stacked layout rather than a broken one.
 *
 * The four states are driven by `data-state` on the block — add | waiting | reuse | saved — so
 * the script only writes text and the stylesheet decides what is visible.
 */

.am-cof {
    --cof-blue: #1e5fba;
    --cof-blue-dark: #164a94;
    --cof-navy: #1a2a3a;
    --cof-gray: #5a6b7c;
    --cof-icon: #2d5a9b;
    --cof-text: var(--am-clean-text, #172033);
    --cof-muted: var(--am-clean-muted, #7787a3);
    --cof-border: var(--am-clean-border, #d8e4ff);
    --cof-soft: var(--am-clean-bg, #f4f8ff);
    /* Second tone for the icons: line art in blue, shapes filled in this. */
    --cof-fill: #d5e4f5;
    --cof-consent: #2c4e7a;
    --cof-consent-bg: #f3f7fb;
    --cof-consent-border: #b4cbe4;
    --cof-green: #378253;
    --cof-green-bg: #e4f4ea;
    --cof-green-border: #b9e2cb;
    --cof-foot-bg: #fafafa;
    --cof-foot-ring: #e2e8f0;

    container-type: inline-size;
    container-name: am-cof;
    /* The mock is a 1050px card. Wider than that and the three steps drift apart from the
       sentence they belong to, so the block stops growing with its column. */
    max-width: 65.625rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    color: var(--cof-text);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    overflow: hidden;
}

/* The trust strip is an inset card rather than a full-bleed band, so the shell carries the
   padding and the columns sit inside it.

   Font size and colour are restated here, scoped: the bundle sets type on
   `.amelia-v2-booking #amelia-container p` and friends, so the unscoped `.am-cof` block above
   loses every text declaration.

   Padding lives here and not in the wide container query: a container query cannot style the very
   element that declares `container-type`, so `.am-cof` gets one padding at every width (the phone
   media query below trims it). */
.amelia-v2-booking #amelia-container .am-cof {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 2rem;
    color: var(--cof-text);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

/* Amelia's Summary block, replaced by this one. */
.amelia-v2-booking #amelia-container .am-cof-host > .am-fs__payments-heading,
.amelia-v2-booking #amelia-container .am-cof-host > .am-fs__payments-price,
.amelia-v2-booking #amelia-container .am-cof-host > .am-fs__payments-sentence {
    display: none;
}

/* Margins are the one thing the surrounding stylesheets fight over; gap does the spacing. */
.amelia-v2-booking #amelia-container .am-cof h4,
.amelia-v2-booking #amelia-container .am-cof p,
.amelia-v2-booking #amelia-container .am-cof div,
.amelia-v2-booking #amelia-container .am-cof span,
.amelia-v2-booking #amelia-container .am-cof details,
.amelia-v2-booking #amelia-container .am-cof summary {
    margin: 0;
}

/* Duotone line art: shapes filled with the second tone, strokes in the accent. The `icon()`
   helper writes `fill="none"` as a presentation attribute, which CSS outranks. */
.amelia-v2-booking #amelia-container .am-cof svg {
    fill: var(--cof-fill);
    stroke: currentColor;
}

/* Ticks and rules are open paths — a fill on those draws a smear. The shield and the step glyphs
   are drawn artwork whose paths carry their own fills, so the root must not tint the rest. */
.amelia-v2-booking #amelia-container .am-cof__card-check svg,
.amelia-v2-booking #amelia-container .am-cof__action-icon svg,
.amelia-v2-booking #amelia-container .am-cof__head-icon svg,
.amelia-v2-booking #amelia-container .am-cof__step-icon svg {
    fill: none;
}

/* ------------------------------------------------------------------- layout */

.amelia-v2-booking #amelia-container .am-cof__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding: 0;
}

.amelia-v2-booking #amelia-container .am-cof__main,
.amelia-v2-booking #amelia-container .am-cof__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ------------------------------------------------------------------- header */

.amelia-v2-booking #amelia-container .am-cof__head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
}

/* The shield is the block's one large graphic, so it sits bare rather than inside a tinted tile —
   the tile made it read as a small status chip. */
.amelia-v2-booking #amelia-container .am-cof__head-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--cof-blue);
}

.amelia-v2-booking #amelia-container .am-cof__head-icon svg {
    width: 3.5rem;
    height: 3.5rem;
}

.amelia-v2-booking #amelia-container .am-cof__head-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* Set in caps: it is a two- or three-word label, and caps read as a heading without competing
   with the form's own step title on weight alone. */
.amelia-v2-booking #amelia-container .am-cof__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--cof-navy);
}

.amelia-v2-booking #amelia-container .am-cof__sub {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.5;
    color: #374151;
}

/* "$0 charged now" — the one fact people are looking for, so it is the only tinted chip in the
   top half of the block. */
.amelia-v2-booking #amelia-container .am-cof__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.375rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    background: var(--cof-green-bg);
    color: var(--cof-green);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* -------------------------------------------------------------------- steps */

/* Three across, centred under their icons, with a hairline joining them: the sequence is the
   argument this block makes, so it gets the width and the icons get the size.
   The 1rem gutter is as wide as it goes: our captions are a few characters longer than the mock's,
   and every rem taken out of the cells here costs a line break in all three. */
.amelia-v2-booking #amelia-container .am-cof__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    /* Padding, not a margin: the badge sits 40px above the steps and margins inside this
       container are flattened by the bundle's own id-scoped rules. */
    padding-top: 1.5rem;
}

/* One line behind the whole row rather than a stub per cell: it says "then", which is the point of
   numbering these, and the cells cover it with their own white background. Top is the padding
   above plus half the icon box (1.5rem + 2.5rem), so it lands on the icons' centre line. */
.amelia-v2-booking #amelia-container .am-cof__steps::before {
    content: '';
    position: absolute;
    top: 4rem;
    left: 15%;
    right: 15%;
    height: 1px;
    background: #d1d5db;
    z-index: 0;
}

.amelia-v2-booking #amelia-container .am-cof__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
    background: #fff;
    text-align: center;
}

/* Fixed 5rem box, like the mock's `h-20`: the three glyphs do not share a baseline or a height, so
   without it the titles sit at three different depths. The extra half-rem below makes the 1rem the
   mock puts between artwork and title. */
.amelia-v2-booking #amelia-container .am-cof__step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    padding-bottom: 0.5rem;
    color: var(--cof-icon);
}

.amelia-v2-booking #amelia-container .am-cof__step-icon svg {
    width: 4.375rem;
    height: 4.375rem;
}

.amelia-v2-booking #amelia-container .am-cof__step-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
    /* Our step names run a word longer than the mock's, so where they do wrap they wrap evenly
       instead of dropping one word onto a second line. */
    text-wrap: balance;
}

.amelia-v2-booking #amelia-container .am-cof__step-text {
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--cof-gray);
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- card row */

/* Only carries content in the reuse and saved states; hidden otherwise (see states). */
.amelia-v2-booking #amelia-container .am-cof__card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--cof-border);
    border-radius: 0.7rem;
    background: var(--cof-soft);
}

.amelia-v2-booking #amelia-container .am-cof__card-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--cof-blue);
}

.amelia-v2-booking #amelia-container .am-cof__card-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.amelia-v2-booking #amelia-container .am-cof__card-text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.amelia-v2-booking #amelia-container .am-cof__card-brand {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--cof-navy);
}

/* Tabular figures so digits and expiry do not shift width between cards. */
.amelia-v2-booking #amelia-container .am-cof__card-digits,
.amelia-v2-booking #amelia-container .am-cof__card-exp {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--cof-muted);
    white-space: nowrap;
}

/* The tick belongs to the saved state alone — it is the "done" signal. */
.amelia-v2-booking #amelia-container .am-cof__card-check {
    display: none;
    flex: 0 0 auto;
    color: var(--cof-green);
}

.amelia-v2-booking #amelia-container .am-cof__card-check svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.4;
}

/* ----------------------------------------------------------------- consent */

/* Boxed, because ticking it is a legal act and it should not read as one more form row. */
.amelia-v2-booking #amelia-container .am-cof__consent-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--cof-consent-border);
    border-radius: 0.5rem;
    background: var(--cof-consent-bg);
    transition: background-color 0.15s ease;
}

.amelia-v2-booking #amelia-container .am-cof__consent-wrap:hover {
    background: #ebf2f8;
}

.amelia-v2-booking #amelia-container .am-cof__consent {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
}

/* Amelia styles its own `.am-` inputs, so this one is drawn here from scratch: a native box
   cannot take the mock's radius or the white tick. The `.am-cof__consent` step is deliberate — the
   cleaning redesign sheet carries `.amelia-v2-booking.am-cleaning-redesign #amelia-container
   .am-fs__main-content input {border-radius: 8px; border-color: #c8d6f5}` at (1 id, 3 classes,
   1 element), the same weight as this rule without it, and that sheet is enqueued later. The tie
   was drawing the box as a near-circle in the wrong blue. */
.amelia-v2-booking #amelia-container .am-cof .am-cof__consent input.am-cof__consent-box {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    border: 2px solid var(--cof-consent-border);
    border-radius: 0.25rem;
    background: #fff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.amelia-v2-booking #amelia-container .am-cof .am-cof__consent input.am-cof__consent-box:checked {
    border-color: var(--cof-blue);
    background-color: var(--cof-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 0.875rem;
}

.amelia-v2-booking #amelia-container .am-cof__consent-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.625;
    color: var(--cof-consent);
}

/* Full authorisation text, collapsed. Kept on the page because it is the wording stored against
   the card as chargeback evidence, and outside the label so opening it cannot tick the box. The
   indent is the checkbox plus its gap, so the link starts on the consent text's own left edge. */
.amelia-v2-booking #amelia-container .am-cof__legal {
    display: block;
    padding-left: 2.25rem;
    font-size: 0.8rem;
}

.amelia-v2-booking #amelia-container .am-cof__legal-toggle {
    color: #245899;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    list-style: none;
    text-decoration: underline;
    text-decoration-color: rgba(36, 88, 153, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.amelia-v2-booking #amelia-container .am-cof__legal-toggle:hover {
    text-decoration-color: #245899;
}

.amelia-v2-booking #amelia-container .am-cof__legal-toggle::-webkit-details-marker {
    display: none;
}

.amelia-v2-booking #amelia-container .am-cof__legal-text {
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    background: #fff;
    font-size: 0.76rem;
    line-height: 1.55;
    color: #45536d;
}

.amelia-v2-booking #amelia-container .am-cof__legal[open] .am-cof__legal-toggle {
    padding-bottom: 0.4rem;
}

/* ----------------------------------------------------------------- actions */

.amelia-v2-booking #amelia-container .am-cof__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* The block's one loud element: full width, caps, and the only saturated fill on the page after
   the form's own Continue. */
.amelia-v2-booking #amelia-container .am-cof__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--cof-blue);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.amelia-v2-booking #amelia-container .am-cof__action:hover:not(:disabled) {
    background: var(--cof-blue-dark);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.amelia-v2-booking #amelia-container .am-cof__action:active:not(:disabled) {
    transform: translateY(1px);
}

/* Visible focus ring: this button and the consent box together gate Continue. */
.amelia-v2-booking #amelia-container .am-cof__action:focus-visible,
.amelia-v2-booking #amelia-container .am-cof__other:focus-visible,
.amelia-v2-booking #amelia-container .am-cof__consent-box:focus-visible,
.amelia-v2-booking #amelia-container .am-cof__legal-toggle:focus-visible {
    outline: 2px solid var(--cof-blue);
    outline-offset: 2px;
}

/* The button carries the mock's wider ring; the outline above stays as the fallback. */
.amelia-v2-booking #amelia-container .am-cof__action:focus-visible {
    box-shadow: 0 0 0 4px rgba(30, 95, 186, 0.3);
}

/* Disabled is the resting state until the consent box is ticked, so it has to read as
   "not yet", not as broken. */
.amelia-v2-booking #amelia-container .am-cof__action:disabled {
    background: #c3d2ec;
    cursor: not-allowed;
    box-shadow: none;
}

.amelia-v2-booking #amelia-container .am-cof__action-icon {
    display: flex;
    align-items: center;
}

.amelia-v2-booking #amelia-container .am-cof__action-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* While a request is in flight the padlock becomes the spinner — one moving thing, and the
   button keeps its width so the column does not jump. */
.amelia-v2-booking #amelia-container .am-cof--busy .am-cof__action-icon svg {
    display: none;
}

.amelia-v2-booking #amelia-container .am-cof--busy .am-cof__action-icon::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: am-cof-spin 0.7s linear infinite;
}

@keyframes am-cof-spin {
    to {
        transform: rotate(360deg);
    }
}

/* "Use a different card" — secondary by weight, not by colour, so it does not compete. */
.amelia-v2-booking #amelia-container .am-cof__other {
    display: none;
    padding: 0.4rem 0;
    border: 0;
    background: none;
    color: var(--cof-blue);
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

/* Nothing in the block should be clickable mid-request except the way out of it. */
.amelia-v2-booking #amelia-container .am-cof--busy .am-cof__other {
    pointer-events: none;
    opacity: 0.55;
}

/* ------------------------------------------------------------------ status */

/* Empty text must collapse: the script clears this line rather than removing it, and an empty
   padded box reads as a bug. */
.amelia-v2-booking #amelia-container .am-cof__status:empty {
    display: none;
}

.amelia-v2-booking #amelia-container .am-cof__status {
    display: block;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--cof-border);
    border-radius: 0.6rem;
    background: var(--cof-soft);
    font-size: 0.81rem;
    line-height: 1.45;
    color: #45536d;
}

.amelia-v2-booking #amelia-container .am-cof__status--ok {
    border-color: var(--cof-green-border);
    background: var(--cof-green-bg);
    color: var(--cof-green);
}

/* warn and error differ in wording, not in consequence — both leave the customer able to retry —
   so they share one amber treatment rather than inventing a red one. */
.amelia-v2-booking #amelia-container .am-cof__status--warn,
.amelia-v2-booking #amelia-container .am-cof__status--error {
    border-color: #f2d9a8;
    background: #fdf6e7;
    color: #8a5a05;
}

.amelia-v2-booking #amelia-container .am-cof__link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------- trust */

/* Inset card under the columns, ringed rather than bordered so it reads as footing without adding
   a hard edge to the shell. */
.amelia-v2-booking #amelia-container .am-cof__trust {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: var(--cof-foot-bg);
    box-shadow: inset 0 0 0 1px var(--cof-foot-ring);
}

.amelia-v2-booking #amelia-container .am-cof__trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}

.amelia-v2-booking #amelia-container .am-cof__trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.amelia-v2-booking #amelia-container .am-cof__trust-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--cof-blue);
}

/* Unfilled line art here, unlike the block's duotone icons: at this size a fill closes the glyph
   up. */
.amelia-v2-booking #amelia-container .am-cof__trust-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke-width: 1.5;
}

/* The padlock is drawn tighter than the shield and the hand, so it reads at the same weight a
   quarter-rem smaller — the mock sizes these two up rather than the padlock down. */
.amelia-v2-booking #amelia-container .am-cof__trust-item:nth-child(n+2) .am-cof__trust-icon svg {
    width: 2rem;
    height: 2rem;
}

/* Capped at 12rem so each label wraps to two lines the way the mock's `<br>`s do, without putting
   markup in the label strings. */
.amelia-v2-booking #amelia-container .am-cof__trust-text {
    max-width: 12rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #1f2937;
}

.amelia-v2-booking #amelia-container .am-cof__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.amelia-v2-booking #amelia-container .am-cof__brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Approximated marks, not the trademarked artwork: recognisable at chip size, which is all a trust
   strip needs. Every chip is the same white card with a hairline, the way the four sit in a
   payment strip — the brand is carried by the lettering inside it, not by the chip colour.

   Height is the asked-for 7.5mm. CSS millimetres are a fixed 96dpi ratio, so this is exactly
   28.35px on every screen — it does not follow the user's font size the way a rem would, which is
   the point for something standing in for a physical card. */
.amelia-v2-booking #amelia-container .am-cof__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.5mm;
    min-width: 2.75rem;
    padding: 0 0.3125rem;
    border: 1px solid #e3e7ee;
    border-radius: 0.25rem;
    background: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.amelia-v2-booking #amelia-container .am-cof__brand--visa {
    color: #1a1f71;
    font-size: 0.6875rem;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.amelia-v2-booking #amelia-container .am-cof__brand--amex {
    border-color: #006fcf;
    background: #006fcf;
    color: #fff;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
}

.amelia-v2-booking #amelia-container .am-cof__brand--discover {
    gap: 0.1875rem;
    color: #33393f;
    font-size: 0.5rem;
    letter-spacing: 0.01em;
}

/* Discover's mark is a word with an orange ball on its end; the ball is what makes it read as
   Discover rather than as grey type. */
.amelia-v2-booking #amelia-container .am-cof__brand--discover::after {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #f76b1c;
}

/* Two discs, overlapping and multiplied, in place of type. */
.amelia-v2-booking #amelia-container .am-cof__brand--mastercard {
    position: relative;
    width: 2.875rem;
    padding: 0;
}

.amelia-v2-booking #amelia-container .am-cof__brand-disc {
    position: absolute;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.5625rem;
    border-radius: 50%;
    opacity: 0.9;
    mix-blend-mode: multiply;
}

.amelia-v2-booking #amelia-container .am-cof__brand-disc:first-child {
    left: 0.3125rem;
    background: #eb001b;
}

.amelia-v2-booking #amelia-container .am-cof__brand-disc:last-child {
    right: 0.3125rem;
    background: #f79e1b;
}

.amelia-v2-booking #amelia-container .am-cof__powered {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cof-muted);
    text-transform: uppercase;
}

/* Stripe's own wordmark: their purple, lowercase, tight. */
.amelia-v2-booking #amelia-container .am-cof__powered-mark {
    color: #635BFF;
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: lowercase;
}

/* ------------------------------------------------------------------ states */

/* add | waiting — no card to show yet, and no second choice to offer. */
.amelia-v2-booking #amelia-container .am-cof[data-state="add"] .am-cof__card,
.amelia-v2-booking #amelia-container .am-cof[data-state="waiting"] .am-cof__card,
.amelia-v2-booking #amelia-container .am-cof[data-state="add"] .am-cof__other,
.amelia-v2-booking #amelia-container .am-cof[data-state="waiting"] .am-cof__other {
    display: none;
}

/* reuse — the saved card is the subject, so it takes the accent border, and "use a different
   card" appears because a recognised card the customer does not want is a dead end otherwise. */
.amelia-v2-booking #amelia-container .am-cof[data-state="reuse"] .am-cof__card {
    border-color: var(--cof-blue);
    background: #eef4ff;
}

.amelia-v2-booking #amelia-container .am-cof[data-state="reuse"] .am-cof__other {
    display: block;
}

/* saved — nothing left to press. Steps, consent and both buttons go; the card stays with a tick
   and the status line carries the green confirmation. */
.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__steps,
.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__consent-wrap,
.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__actions {
    display: none;
}

.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__card {
    border-color: var(--cof-green-border);
    background: var(--cof-green-bg);
}

.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__card-icon,
.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__card-check {
    display: flex;
    color: var(--cof-green);
}

.amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__card-icon svg {
    fill: var(--cof-green-bg);
}

/* --------------------------------------------------------------- container */

/* Two columns, the mock's own layout: what happens on the left, what to do about it on the right.
   The right column starts level with the badge rather than under the steps, so the consent panel and
   the button share the badge's row and the block ends about as deep as the taller of the two columns.

   46rem, not 1050px: the query measures the block's *content* box (822px on the site it was written
   for, once the shell's 2rem padding is taken off). A threshold set from the outer width would never
   fire here. A 660px column still stacks, which is the point of the query.

   Column widths are a clamp, not the mock's fixed 420px: 420 + the 76px indent + a gutter needs the
   mock's ~1050px of content, and at 822px it leaves the three step cells at ~100px, which breaks
   every caption over four lines. 31% and a 24px gutter give ~255px for the consent panel and ~166px
   per step cell — the mock's proportions at the width the Payment step actually has, and 166px is
   what the longest caption needs to hold one line. */
@container am-cof (min-width: 46rem) {
    /* `display: contents` dissolves `__main`, so the heading, the badge, the steps and the decision
       column are all items of one grid. Keeping `__main` as a box instead would trap the subheading
       in a column, where it wraps to three lines. */
    .amelia-v2-booking #amelia-container .am-cof__main {
        display: contents;
    }

    /* `1fr` on the last row, not `auto`: `__side` spans rows 2 and 3, and an auto row pair splits a
       taller spanning item's slack between them — which pushed the badge 37px away from the steps.
       With the slack parked in row 3 the badge keeps its 40px above the step row. */
    .amelia-v2-booking #amelia-container .am-cof__grid {
        grid-template-columns: minmax(0, 1fr) clamp(15rem, 31%, 26.25rem);
        grid-template-rows: auto auto 1fr;
        column-gap: 1.5rem;
        row-gap: 1rem;
        align-items: start;
    }

    .amelia-v2-booking #amelia-container .am-cof__head {
        grid-column: 1 / -1;
    }

    /* Indented to clear the shield, so the pill lines up with the title rather than with the
       artwork. `justify-self` because a grid item otherwise stretches and the pill becomes a green
       band the width of the column. */
    .amelia-v2-booking #amelia-container .am-cof__badge {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        margin-left: 4.75rem;
    }

    /* 24px between cells rather than the mock's 32px: the 8px buys each caption the width it needs to
       stay on one line, and the connector hairline still reads with cells this close. */
    .amelia-v2-booking #amelia-container .am-cof__steps {
        grid-column: 1;
        grid-row: 3;
        gap: 1.5rem;
    }

    /* No side padding on the cell here — the caption gets those 8px instead. The cell's white
       background still masks the connector to its own edges, so the line shows in the gaps only,
       exactly as before. */
    .amelia-v2-booking #amelia-container .am-cof__step {
        padding: 0;
    }

    /* 15px, not the spec's 16px. The three captions need 125/164/172px on one line in this site's
       font, and three cells of ~166px is all 824px of content leaves once the consent panel has a
       usable width — the mock gets away with 16px because Inter is the narrower face. Dropping one
       pixel keeps every caption on one line, which is what the design is actually showing; the
       hierarchy still holds against 14px body copy at this weight and colour. */
    .amelia-v2-booking #amelia-container .am-cof__step-title {
        font-size: 0.9375rem;
    }

    /* Spans the badge row and the step row, so the consent panel's top edge is the badge's top edge
       and the button sits beside the captions instead of below them. */
    .amelia-v2-booking #amelia-container .am-cof__side {
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    /* saved — the steps are gone, so a 280px column on the right of nothing is all the block would
       be. The card row and the confirmation take the full width instead. */
    .amelia-v2-booking #amelia-container .am-cof[data-state="saved"] .am-cof__side {
        grid-column: 1 / -1;
        grid-row: 2 / span 2;
    }

    /* The trust strip is one row from here up: three badges, then the brands off the end behind a
       rule. The brands and "powered by" stack inside `__foot` rather than sitting in a row of their
       own — our three labels run longer than the mock's, and a single row of everything needs about
       1030px. */
    .amelia-v2-booking #amelia-container .am-cof__trust {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    /* Equal thirds of whatever the brands leave, and no wrapping: a fixed label cap plus
       `space-between` put the third badge on a second row here, because our three labels are longer
       than the mock's. Sharing the row lets each label wrap inside its own third instead. */
    .amelia-v2-booking #amelia-container .am-cof__trust-list {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__trust-item {
        flex: 1 1 0;
    }

    .amelia-v2-booking #amelia-container .am-cof__trust-text {
        max-width: none;
    }

    .amelia-v2-booking #amelia-container .am-cof__foot {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: center;
        gap: 0.5rem 0.375rem;
        padding: 0 0 0 1.5rem;
        border-top: 0;
        border-left: 1px solid #e5e7eb;
    }

    .amelia-v2-booking #amelia-container .am-cof__brands {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* Wider than the site's own column — a full-width shortcode, or a theme with no sidebar. 65.5rem is
   the mock's own content width, and the first point where its fixed geometry pays for itself: the
   420px right column, the 56px gutter and the 32px between step cells still leave the captions
   ~169px each. Set at 60rem instead, the 420px column would eat the step cells and every caption
   would wrap. Trust labels also go back to their 12rem cap here, so they break over two lines
   instead of stretching into one long one. */
@container am-cof (min-width: 65.5rem) {
    .amelia-v2-booking #amelia-container .am-cof__grid {
        grid-template-columns: minmax(0, 1fr) 26.25rem;
        column-gap: 3.5rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__steps {
        gap: 2rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__trust-text {
        max-width: 12rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__foot {
        grid-template-columns: auto auto auto;
        gap: 1rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__brands {
        grid-column: auto;
    }
}

/* One column of steps: below this the three cells are narrower than their own captions, which is
   what made the first pass read as a column of stacked words. Icon moves beside the text and the
   join between steps goes with the horizontal layout. */
@container am-cof (max-width: 30rem) {
    .amelia-v2-booking #amelia-container .am-cof__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__steps::before {
        display: none;
    }

    .amelia-v2-booking #amelia-container .am-cof__step {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0 0.65rem;
        padding: 0;
        text-align: left;
    }

    .amelia-v2-booking #amelia-container .am-cof__step-icon {
        grid-row: 1 / span 2;
        align-items: flex-start;
        height: auto;
        padding-bottom: 0;
    }

    .amelia-v2-booking #amelia-container .am-cof__step-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* The block takes back the padding of Amelia's own content column at desktop widths.
   `.am-fs__main-content` pads 2.075rem on each side, and those 66px are the difference between the
   three step captions holding one line each and all three wrapping: the column itself is 822px wide
   and every pixel of it goes into the step row. A viewport query, not a container one — a container
   query cannot style the element that declares `container-type`, which is this one. */
@media (min-width: 992px) {
    .amelia-v2-booking #amelia-container .am-cof {
        margin-left: -2.075rem;
        margin-right: -2.075rem;
    }
}

/* Phone padding is a viewport question, not a container one — the block is full width there. */
@media (max-width: 767px) {
    .amelia-v2-booking #amelia-container .am-cof {
        gap: 2rem;
        padding: 1.25rem;
    }

    .amelia-v2-booking #amelia-container .am-cof__head-icon svg {
        width: 3rem;
        height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amelia-v2-booking #amelia-container .am-cof__action {
        transition: none;
    }

    .amelia-v2-booking #amelia-container .am-cof--busy .am-cof__action-icon::before {
        animation-duration: 2s;
    }
}