/* ============================================================================
   Easy Pay — shared customer-facing UI
   ============================================================================

   Loaded AFTER easypay.css and layered on top of it rather than replacing it:
   that file also styles the CRM invoice flow and the credit-card SVG widget,
   and rewriting it would put an unrelated flow at risk for a visual change.

   Everything here is prefixed `ep-`, except the deliberate overrides of `.step`
   (the wizard JS toggles those classes by id, so the markup keeps the original
   hooks and only the appearance changes).

   Brand values are taken from easypay.css so the two cannot drift:
     teal   #067885   primary action / accents
     dark   #02535c   hover
     tint   #f6feff   page background
   ============================================================================ */

:root {
    /* One face for the whole payment journey. Arial/Helvetica are the fallback
       rather than a second webfont so a blocked or slow font request degrades to
       something clean and metrically close, never to a condensed display face. */
    --ep-font: "Inter", Arial, Helvetica, sans-serif;

    --ep-teal: #067885;
    --ep-teal-dark: #02535c;
    --ep-teal-soft: #e8f6f8;
    --ep-ink: #1f2d33;
    --ep-muted: #7a8b92;
    --ep-line: #e3ecef;
    --ep-surface: #ffffff;

    /* One width for the payment column and the footer under it, so the two
       cannot drift. Sized off the card step: it is the widest thing the shell
       has to hold, and a card number needs more room than a receipt row. */
    --ep-shell-w: 720px;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

/* Inter, self-hosted.
 *
 * Self-hosted rather than linked from Google Fonts: this page takes card
 * details, and every third-party request on it is one more thing that can be
 * slow, blocked by a corporate proxy, or unavailable. The two files are the
 * latin and latin-ext subsets of the variable face, which is all a Canada-only
 * portal needs — ~130KB total, and one file covers 400–700 so there is no
 * per-weight round trip.
 *
 * `font-display: swap` means the customer never waits on a blank label: the
 * fallback paints immediately and Inter replaces it when it lands.
 *
 * easypay.css declares the legacy faces (fm_primary / fm_third / …) and applies
 * fm_primary to html+body. Those declarations stay — the CRM invoice flow and
 * the card SVG widget are styled off the same file — but everything customer
 * facing is re-pointed at Inter below, in one place, so no component needs its
 * own font-family rule.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* The single point where the payment experience picks its face. Form controls
   and buttons are listed explicitly because the UA gives them their own font
   instead of inheriting; everything else arrives by inheritance from body. */
html,
body,
.easypay,
.easypay p,
.easypay h1,
.easypay h2,
.easypay h3,
.easypay h4,
.easypay h5,
.easypay h6,
.easypay label,
.easypay input,
.easypay select,
.easypay textarea,
.easypay button {
    font-family: var(--ep-font);
}

/* The invoice flow still marks its totals up with the legacy weight utilities,
   and a class beats inheritance no matter how far up the tree it sits — without
   this, the balance column on /{payment_id} would keep the old face while the
   rest of the same card moved to Inter. */
.easypay .vm_font_bold,
.easypay .vm_font_black {
    font-family: var(--ep-font);
    font-weight: 700;
}

/* Inter's default figures are proportional, which makes a column of amounts
   sit unevenly. Tabular figures line them up wherever a number is the point. */
.ep-amount-value,
.ep-paid-amount,
.ep-chip .ep-chip-amt,
.ep-receipt-row span:last-child,
.easypay .card_section .field-container input {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Stage exclusivity ──────────────────────────────────────────────────── */

/* The wizard hides stages with Bootstrap's `.d-none`, which arrives from a CDN.
   If that request fails, every stage paints at once — the review form and the
   completed-payment panel on the same screen. Owning the rule locally means
   stage exclusivity survives the CDN being unreachable. */
.easypay .vm_tab.d-none { display: none !important; }

/* ── Page shell ─────────────────────────────────────────────────────────── */

/* A soft radial glow behind the card instead of a flat wash, so the card reads
   as sitting on the page rather than floating in a coloured void. */
.ep-page {
    min-height: 100vh;
    background:
        radial-gradient(1100px 420px at 50% -80px, #e4f4f7 0%, rgba(228, 244, 247, 0) 70%),
        linear-gradient(180deg, #f6feff 0%, #ffffff 45%, #f4fafb 100%);
    display: flex;
    flex-direction: column;
}

/* Full width on purpose: the CRM invoice flow renders its own Bootstrap
   container/row/col inside here, and capping this would squeeze that grid.
   Pages that want the narrow payment column opt in with .ep-shell. */
.ep-main {
    flex: 1 0 auto;
    width: 100%;
    padding: 48px 20px 56px;
}

.ep-shell {
    width: 100%;
    max-width: var(--ep-shell-w);
    margin: 0 auto;
}

/* ── Brand header ───────────────────────────────────────────────────────── */

.ep-brand {
    text-align: center;
    margin-bottom: 28px;
}

.ep-brand img {
    width: 190px;
    max-width: 60%;
    height: auto;
}

/* The one place wide tracking is deliberate: this is a wordmark under the logo,
   not running text. Trimmed from 6px because Inter needs less air than the
   previous face to read as a lockup. */
.ep-brand-title {
    margin-top: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 4.5px;
    color: var(--ep-teal);
    text-transform: uppercase;
}

.ep-secure-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(6, 120, 133, 0.07);
    color: var(--ep-teal);
    font-size: 12px;
    letter-spacing: 0.3px;
}

.ep-secure-line .bi { font-size: 13px; }

/* ── The card ───────────────────────────────────────────────────────────── */

.ep-card {
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 42, 51, 0.04), 0 18px 40px -24px rgba(16, 42, 51, 0.28);
    overflow: hidden;
}

.ep-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 28px 20px;
    border-bottom: 1px solid #f1f6f7;
}

.ep-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ep-teal-soft);
    color: var(--ep-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.ep-card-title {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--ep-ink);
    text-transform: none;
    letter-spacing: -0.1px;
    margin: 0;
}

.ep-card-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ep-muted);
    margin: 4px 0 0;
}

.ep-card-body { padding: 24px 28px 28px; }

/* ── Payment summary ────────────────────────────────────────────────────── */

.ep-summary {
    border: 1px solid var(--ep-line);
    border-radius: 14px;
    overflow: hidden;
}

.ep-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ep-summary-cell {
    padding: 16px 18px;
    border-bottom: 1px solid var(--ep-line);
}

.ep-summary-cell + .ep-summary-cell { border-left: 1px solid var(--ep-line); }

/* Uppercase, but only just tracked. Caps need a little air to stop the letters
   touching; the 0.6px this started at was set for a face with tighter default
   sidebearings and read as stretched in Inter. Weight 500 rather than 400 keeps
   an 11px all-caps line legible without turning the label into a heading. */
.ep-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--ep-muted);
    margin-bottom: 4px;
}

.ep-value {
    font-size: 15px;
    color: var(--ep-ink);
    font-weight: 600;
    word-break: break-word;
}

/* The hero. Everything else on this screen is context for this number. */
.ep-amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fdfe 0%, #eef8fa 100%);
}

.ep-amount-value {
    font-weight: 700;
    letter-spacing: -0.4px;
    font-size: 30px;
    line-height: 1.1;
    color: var(--ep-teal);
    white-space: nowrap;
}

.ep-amount-value .ep-ccy {
    font-size: 13px;
    color: var(--ep-muted);
    margin-left: 4px;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.ep-field { margin-top: 24px; }

.ep-input-wrap { position: relative; }

.ep-input-wrap .bi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a9bcc2;
    font-size: 16px;
    pointer-events: none;
}

.easypay .ep-input {
    width: 100%;
    height: 50px;
    border: 1px solid #dbe7ea;
    border-radius: 10px;
    background: #fbfdfe;
    padding: 0 14px 0 42px;
    font-size: 15px;
    color: var(--ep-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.easypay .ep-input::placeholder { color: #b3c3c8; font-size: 14px; }

.easypay .ep-input:hover { background: #f7fbfc; }

/* Focus is a ring, not just a colour change — visible for keyboard users and
   not dependent on colour perception alone. */
.easypay .ep-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ep-teal);
    box-shadow: 0 0 0 3px rgba(6, 120, 133, 0.15);
}

.ep-help {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ep-muted);
}

.ep-req { color: #d64545; }

/* ── Primary action ─────────────────────────────────────────────────────── */

.easypay .ep-cta {
    width: 100%;
    min-height: 52px;
    margin-top: 24px;
    border: none;
    border-radius: 12px;
    background: var(--ep-teal);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .05s;
    box-shadow: 0 8px 18px -10px rgba(6, 120, 133, 0.75);
}

.easypay .ep-cta:hover:not(:disabled) { background: var(--ep-teal-dark); }
.easypay .ep-cta:active:not(:disabled) { transform: translateY(1px); }

.easypay .ep-cta:focus-visible {
    outline: 3px solid rgba(6, 120, 133, 0.35);
    outline-offset: 2px;
}

.easypay .ep-cta:disabled { background: #9dc4c9; cursor: not-allowed; box-shadow: none; }

.ep-cta-note {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ep-muted);
}

/* ── Trust strip ────────────────────────────────────────────────────────── */

.ep-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7fbfc;
    border: 1px solid #eaf3f5;
}

.ep-trust .bi { color: var(--ep-teal); font-size: 17px; flex: 0 0 auto; }

.ep-trust-text { font-size: 12px; line-height: 1.5; color: var(--ep-muted); }
.ep-trust-text strong { color: var(--ep-ink); display: block; font-size: 12.5px; }

/* ── Step indicator ─────────────────────────────────────────────────────── */

/* Replaces the three grey dots. The wizard JS still toggles `.active`/`.finish`
   on these elements by id, so only the appearance changes here. */
.ep-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

/* Above the stage card rather than under it. The brand block already provides
   the space above (28px), so this only owns the gap down to the card — no
   margin doubling, and no empty band either side.

   24px, not the 20px it started at: the chips sit between two blocks, and when
   the gap below is the SMALLER of the two the stepper reads as part of the card
   underneath rather than as its own row. Matching the brand's 28px more closely
   lets it sit in its own space without adding height to the page. */
.ep-steps.is-top {
    margin-top: 0;
    margin-bottom: 24px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.easypay .ep-steps .step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    width: auto;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    opacity: 1;
    font-size: 12px;
    color: #a4b5bb;
    /* The chips are <button>s on flows that use them for navigation, so the
       UA's font, and its greying of :disabled, both have to be overridden —
       "not reachable yet" is already carried by the muted default colour. */
    font-family: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: default;
}

/* A stage that has not been reached, or the one already on screen. Not an
   error state — just nothing to click. */
.easypay .ep-steps button.step:disabled {
    cursor: default;
    opacity: 1;
    color: #a4b5bb;
}

.easypay .ep-steps .step.active:disabled { color: var(--ep-teal); }
.easypay .ep-steps .step.finish:disabled { color: var(--ep-teal); }

/* Reachable: somewhere the customer has already been, and is not currently on. */
.easypay .ep-steps .step.is-nav {
    cursor: pointer;
    color: #6d8189;
    transition: background .15s, border-color .15s, color .15s;
}

.easypay .ep-steps .step.is-nav:hover {
    background: var(--ep-teal-soft);
    border-color: rgba(6, 120, 133, 0.18);
    color: var(--ep-teal);
}

.easypay .ep-steps .step.is-nav:hover .ep-step-num { background: #cfe9ec; color: var(--ep-teal); }

.easypay .ep-steps .step.is-nav:focus-visible {
    outline: 3px solid rgba(6, 120, 133, 0.35);
    outline-offset: 2px;
}

.easypay .ep-steps .step.is-nav:active { transform: translateY(1px); }

.easypay .ep-steps .step .ep-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6eef0;
    color: #8fa4ab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 auto;
}

.easypay .ep-steps .step.active {
    background: var(--ep-teal-soft);
    border-color: rgba(6, 120, 133, 0.18);
    color: var(--ep-teal);
}

.easypay .ep-steps .step.active .ep-step-num { background: var(--ep-teal); color: #fff; }

.easypay .ep-steps .step.finish { background: transparent; color: var(--ep-teal); }
.easypay .ep-steps .step.finish .ep-step-num { background: var(--ep-teal); color: #fff; }

.ep-step-sep { color: #cfdde1; font-size: 11px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.ep-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--ep-line);
    background: #fbfdfe;
    padding: 30px 20px 34px;
    text-align: center;
}

.ep-footer-inner { max-width: var(--ep-shell-w); margin: 0 auto; }

.ep-footer-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ep-ink);
    letter-spacing: 0.1px;
}

.ep-footer-lines { margin-top: 8px; font-size: 12.5px; line-height: 1.9; color: var(--ep-muted); }
.ep-footer-lines a { color: var(--ep-muted); text-decoration: none; }
.ep-footer-lines a:hover { color: var(--ep-teal); text-decoration: underline; }
.ep-footer-web a { color: var(--ep-teal); font-weight: 600; }

.ep-social { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }

.ep-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ep-line);
    background: #fff;
    color: var(--ep-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .15s, color .15s, border-color .15s;
}

.ep-social a:hover { background: var(--ep-teal); color: #fff; border-color: var(--ep-teal); }
.ep-social a:focus-visible { outline: 3px solid rgba(6, 120, 133, 0.35); outline-offset: 2px; }

.ep-footer-legal { margin-top: 16px; font-size: 11.5px; line-height: 1.9; color: #9fb0b6; }
.ep-footer-legal a { color: #7a8b92; text-decoration: none; }
.ep-footer-legal a:hover { color: var(--ep-teal); text-decoration: underline; }

/* The build credit. `text-transform: none` is not redundant: easypay.css
   uppercases several link/heading contexts, and the whole point of this line is
   that the name stays lowercase. Kept a step quieter than the copyright it sits
   under — it is our credit, not the company's branding. */
.easypay .ep-footer-legal a.ep-credit {
    text-transform: none;
    font-family: inherit;
    font-weight: normal;
    font-size: 10px;
    color: #b3c0c5;
}

.easypay .ep-footer-legal a.ep-credit:hover { color: var(--ep-teal); }

/* ── Status panels (paid / cancelled / expired) ─────────────────────────── */

.ep-status { text-align: center; padding: 8px 0 4px; }

.ep-status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}

.ep-status-icon.is-paid { background: #e9f8ef; color: #1c9c5b; }
.ep-status-icon.is-info { background: #eef4f6; color: #5f7b84; }

.ep-status-title { font-weight: 700; font-size: 17px; color: var(--ep-ink); text-transform: none; }
.ep-status-note { font-size: 13px; color: var(--ep-muted); margin-top: 6px; line-height: 1.6; }

.ep-receipt {
    margin-top: 18px;
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

.ep-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--ep-ink);
}

.ep-receipt-row + .ep-receipt-row { border-top: 1px solid #f1f6f7; }
.ep-receipt-row span:first-child { color: var(--ep-muted); }
.ep-receipt-row span:last-child { font-weight: 600; text-align: right; word-break: break-word; }

/* ── Wizard buttons ─────────────────────────────────────────────────────── */

/* Restyled here rather than in the markup: `.btn_next` / `.btn_prev` are used
   by the CRM invoice flow too, so lifting them centrally keeps every stage
   consistent without touching that flow's Blade. */
.easypay .btn_next,
.easypay .btn_prev {
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 10px;
    /* easypay.css asks these for `bold` (700), which is a step heavier than the
       rest of the buttons on the page now that they all share one face. */
    font-weight: 600;
    letter-spacing: .2px;
    transition: background .15s, box-shadow .15s, transform .05s;
}

.easypay .btn_next { box-shadow: 0 8px 18px -10px rgba(6, 120, 133, .75); }
.easypay .btn_next:hover:not(:disabled) { background: var(--ep-teal-dark); }
.easypay .btn_prev:hover:not(:disabled) { background: #01444c; }
.easypay .btn_next:active:not(:disabled),
.easypay .btn_prev:active:not(:disabled) { transform: translateY(1px); }
.easypay .btn_next:disabled { background: #9dc4c9; cursor: not-allowed; box-shadow: none; }

.easypay .btn_next:focus-visible,
.easypay .btn_prev:focus-visible {
    outline: 3px solid rgba(6, 120, 133, .35);
    outline-offset: 2px;
}

/* Softens the boxes inside the card step so they sit inside the new card
   rather than looking like a second, competing frame. */
.easypay .ep-card-body .border.vm_radius_default {
    border-color: var(--ep-line) !important;
    border-radius: 12px !important;
}

/* ── Compact stage summary ──────────────────────────────────────────────── */

/* Carries the reference and amount into stage 2 so the customer never has to
   go back to check what they are about to be charged. */
.ep-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ep-teal-soft);
    border: 1px solid rgba(6, 120, 133, 0.16);
    color: var(--ep-teal);
    font-size: 13px;
    max-width: 100%;
}

.ep-chip .ep-chip-ref {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-chip .ep-chip-dot { color: rgba(6, 120, 133, 0.4); }
.ep-chip .ep-chip-amt { font-weight: 600; white-space: nowrap; }

/* ── Form sections ──────────────────────────────────────────────────────── */

/* One grouping primitive for every block inside a card body, replacing the
   ad-hoc `.border .p-4 .mb-4` stacks the two flows each grew their own copy of. */
.ep-section {
    border: 1px solid var(--ep-line);
    border-radius: 14px;
    padding: 20px;
    margin-top: 24px;
}

.ep-section:first-child { margin-top: 0; }

.ep-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1px;
    color: var(--ep-ink);
    text-transform: none;
    margin: 0 0 4px;
}

.ep-section-title .bi { color: var(--ep-teal); font-size: 15px; }

.ep-section-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ep-muted);
    margin: 0 0 4px;
}

/* Fields inside a section already have the section's own top padding. */
.ep-section .ep-field:first-of-type { margin-top: 14px; }

/* Row spacing belongs to the grid, not to the fields inside it.
   It used to come from each field's own `margin-top`, and `.ep-field:first-of-type`
   trims that to 14px — so in any grid whose first row holds TWO cells, cell one
   got 14px and cell two got 24px and the pair sat 10px out of line. (It only
   showed on "What you are paying"; every other grid opens with a full-width
   `.ep-span-2` field, which hid it.) A row-gap cannot disagree with itself. */
.ep-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    margin-top: 14px;
}

.ep-section .ep-grid-2 > .ep-field,
.ep-section .ep-grid-2 > .ep-field:first-of-type { margin-top: 0; }

.ep-grid-2 .ep-span-2 { grid-column: 1 / -1; }

/* The icon-free variant: most fields on the card step have no leading glyph,
   so they must not carry the 42px inset the receipt-email field needs. */
.easypay .ep-input.is-plain { padding-left: 14px; }

.easypay select.ep-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a8b92'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 36px;
}

/* Radio rows (invoice flow's "same as customer address"). The whole row is the
   label, so the hit target is the row rather than the 13px dot. */
.easypay .ep-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 0;
    padding: 13px 15px;
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ep-muted);
    transition: border-color .15s, background .15s;
}

.easypay .ep-choice:hover { border-color: #cfdde1; }
.easypay .ep-choice:has(input:checked) { border-color: rgba(6, 120, 133, .45); background: #f7fcfd; }
.easypay .ep-choice input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--ep-teal); }
.easypay .ep-choice strong { display: block; color: var(--ep-ink); font-weight: 600; }

/* ── Inline messages ────────────────────────────────────────────────────── */

/* Bootstrap's .alert is a page-level banner; these read as part of the card. */
.easypay .ep-alert {
    display: none;
    margin-top: 20px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid transparent;
}

.easypay .ep-alert.is-error { background: #fdf1f1; border-color: #f3d5d5; color: #a33a3a; }
.easypay .ep-alert.is-ok { background: #eefaf3; border-color: #cfeddd; color: #1c7a4c; }

/* jQuery Validate writes one <div> per failing field into the danger box. */
.easypay .ep-alert > div + div { margin-top: 3px; }

/* ── Action row ─────────────────────────────────────────────────────────── */

.ep-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

/* Back is a quiet link-button: it must never compete with Pay. */
.easypay .ep-back {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--ep-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ep-muted);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.easypay .ep-back:hover { border-color: #cfdde1; color: var(--ep-ink); }
.easypay .ep-back:focus-visible { outline: 3px solid rgba(6, 120, 133, .35); outline-offset: 2px; }

/* Inside the row the CTA loses its standalone top margin. */
.ep-actions .ep-cta { margin-top: 0; flex: 1 1 auto; }

/* ── Card widget ────────────────────────────────────────────────────────── */

/* The SVG card preview is decoration, and on this column it was expensive
   decoration: a fixed 300px of the ~620px available left the card number in
   roughly 260px, which is not enough for "4030 0000 1000 1234" plus the brand
   icon that sits on top of it. The accepted-card logos in the section header
   already carry the "which cards can I use" message, so the preview is hidden
   at every width and the fields take the full panel.

   Hidden, not removed: easypay.js binds to `.creditcard`, `#ccsingle` and
   `#svgnumber` unconditionally and would throw if the markup went away. */
.ep-card-visual { display: none; }

.ep-card-entry { display: block; }

/* min-width:0 so the grid inside can shrink instead of forcing the row wider
   than the card — the classic flex-child overflow. */
.easypay .ep-card-entry .form-container { min-width: 0; }

/* ── Card fields ────────────────────────────────────────────────────────── */

/* easypay.css lays this grid out with `auto auto` columns and fixed 90px rows.
   `auto` sizes to content, so expiry and CVV ended up unequal; the fixed rows
   left no room for the inline expiry error. Even halves, real gaps, and rows
   that grow when a message appears. */
.easypay .card_section .form-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 18px;
    grid-row-gap: 6px;
}

.easypay .card_section .field-container label { font-size: 12.5px; }

/* A fixed height makes the brand icon's offset below deterministic, and lines
   these inputs up with the .ep-input fields in the rest of the form. */
.easypay .card_section .field-container input {
    height: 50px;
    padding: 0 14px;
    font-size: 16px !important;
    margin-bottom: 10px;
}

/* The number is the one field the icon overlaps, so the reservation goes here
   only: 60px of icon + 6px offset + 12px of breathing room. */
.easypay .card_section #cardnumber { padding-right: 78px; }

/* Anchored to the input rather than to the container: the container also holds
   the label (and, on the expiry field, an error line), so centring on it put
   the icon over the label. 16px = the input's 10px bottom margin + the 6px that
   centres a 38px icon in a 50px field. */
.easypay .card_section .ccicon {
    top: auto;
    bottom: 16px;
    height: 38px;
    width: 60px;
}

/* ── Success ────────────────────────────────────────────────────────────── */

.ep-status-icon.is-declined { background: #fdeeee; color: #c94a4a; }

/* The amount is the answer to the only question the customer has on this
   screen: how much did I just pay? */
.ep-paid-amount {
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 34px;
    line-height: 1.1;
    color: var(--ep-ink);
    margin-top: 14px;
}

.ep-paid-amount .ep-ccy { font-size: 14px; color: var(--ep-muted); margin-left: 5px; }

.ep-receipt-row.is-empty { display: none; }

.ep-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e9f8ef;
    color: #1c9c5b;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ── Print ──────────────────────────────────────────────────────────────── */

/* Printing is done entirely from what is already on screen — no new endpoint,
   no stored PDF. Everything that is not the receipt is dropped. */
@media print {
    .ep-page { background: #fff; }
    .ep-steps,
    .ep-footer,
    .ep-print-hide { display: none !important; }
    .ep-card { box-shadow: none; border-color: #ddd; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .ep-section { padding: 16px; }
    .ep-grid-2 { grid-template-columns: 1fr; }

    /* Below ~360px of usable width a half-width expiry field starts truncating
       its own label, so the pair stacks and the grid areas collapse to one
       column. The area names have to be reassigned with the template or the
       fixed "expiration security" row survives the column change. */
    .easypay .card_section .form-container {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "number" "expiration" "security";
    }

    /* Inside the field the icon costs ~78px, which on a 360px phone is a third
       of the space a 19-character card number needs — the digits started
       scrolling under their own brand mark. So on mobile it moves up onto the
       label line, where it sits in dead space, and the field goes back to a
       plain 14px inset. Detection feedback is kept; the crowding is not. */
    .easypay .card_section .ccicon {
        top: -2px;
        bottom: auto;
        width: 38px;
        height: 24px;
    }

    .easypay .card_section #cardnumber { padding-right: 14px; }

    /* Stacked so "Pay $500.00 CAD" keeps the full width of the screen. */
    .ep-actions { flex-direction: column-reverse; align-items: stretch; }
    .easypay .ep-back { justify-content: center; min-height: 46px; }
    .ep-paid-amount { font-size: 28px; }
}

@media (max-width: 575.98px) {
    .ep-main { padding: 28px 14px 36px; }
    .ep-brand img { width: 150px; }

    /* Tighter than desktop on purpose — vertical space is the scarce thing on a
       phone, and the chips are already close to the card's full width, which
       does the grouping work the gap does on a wider screen. */
    .ep-steps.is-top { margin-bottom: 16px; }
    .ep-card { border-radius: 14px; }
    .ep-card-head { padding: 20px 18px 16px; gap: 12px; }
    .ep-card-body { padding: 18px 18px 22px; }

    /* Customer and reference stack rather than squeezing to half width. */
    .ep-summary-grid { grid-template-columns: 1fr; }
    .ep-summary-cell + .ep-summary-cell { border-left: none; }

    .ep-amount-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ep-amount-value { font-size: 26px; }

    /* The step labels are the first thing to go — the numbers still convey
       position, and the row must not wrap or scroll sideways. */
    .easypay .ep-steps { gap: 4px; }
    .easypay .ep-steps .step { padding: 6px 9px; }
    .easypay .ep-steps .step .ep-step-label { display: none; }
    .easypay .ep-steps .step.active .ep-step-label { display: inline; }
}