/* =============================================================
   Payments module styling.

   Namespaced under .ez-money-*, .ez-card-fields, .ez-pay-* so loading it
   globally (via IStylesheetContributor, which is what avoids the unstyled
   flash a per-page <link> gives under enhanced navigation) cannot touch
   anything outside this module.

   Every colour comes from a live --bs-* token, so light and dark parity is
   automatic and the app's brand colour is inherited rather than restated.
   ============================================================= */

/* ── The amount field ─────────────────────────────────────────
   [ $ ][ 100.00 ][ AUD ] - deliberately the largest control on a payment
   form. It is the one value that has to be right, and it is usually being
   read off a till with a customer waiting.

   Built as a flex row rather than Bootstrap's .input-group because the
   affixes here are not buttons or addons - they are part of one field, and
   they must share its border, background, height and focus ring so the
   three read as a single control. */
.ez-money {
    display: flex;
    align-items: stretch;
    width: 100%;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ez-money:hover:not(:focus-within) {
    border-color: var(--ez-field-border-hover, var(--bs-primary));
}

/* :focus-within, so focusing the inner input lights the WHOLE control. The
   input itself carries no ring - two nested rings on one field looks broken. */
.ez-money:focus-within {
    border-color: var(--bs-primary);
    box-shadow: var(--ez-focus-ring, 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25));
}

.ez-money.is-invalid {
    border-color: var(--bs-danger);
}

.ez-money-symbol,
.ez-money-code {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    white-space: nowrap;
    user-select: none;
}

.ez-money-symbol {
    border-right: var(--bs-border-width) solid var(--bs-border-color);
}

.ez-money-code {
    border-left: var(--bs-border-width) solid var(--bs-border-color);
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

/* The number itself: the biggest text on the page, and tabular so digits do
   not shuffle sideways as the merchant types. */
.ez-money-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ez-money-input:focus {
    outline: 0;
    box-shadow: none;
}

.ez-money-input::placeholder {
    color: var(--bs-secondary-color);
    font-weight: 400;
    opacity: 0.65;
}

.ez-money-input:disabled {
    color: var(--bs-secondary-color);
}

/* Below sm the affixes tighten and the number steps down, so a 320px phone
   still fits "$ 1,234.56 AUD" on one line without the field scrolling. */
@media (max-width: 575.98px) {
    .ez-money-symbol { font-size: 1.25rem; padding: 0 0.75rem; }
    .ez-money-code   { font-size: 0.9375rem; padding: 0 0.75rem; }
    .ez-money-input  { font-size: 1.5rem; padding: 0.625rem 0.75rem; }
}

/* ── Stripe card fields ───────────────────────────────────────
   The inputs themselves live in a cross-origin iframe and are styled by the
   appearance object passed to Stripe.js (see stripePaymentElement.js) - our
   stylesheet cannot reach inside. What IS ours is the space the iframe sits
   in, and getting that wrong is what made the form look bolted on: Stripe
   lays out its own rows with no outer margin, so without this the card row
   sat flush against the field above it. */
.ez-card-fields {
    /* Matches the gap EzForm's stacked fields leave between each other, so the
       card block reads as one more field rather than a foreign block. */
    margin-bottom: 1rem;
}

/* Reserved height while Stripe mounts. Without it the submit button sits
   directly under the amount and then jumps a hundred-odd pixels down the
   instant the iframe appears - straight under a merchant's thumb, on the one
   button that takes money. */
.ez-card-fields-mount {
    position: relative;
    min-height: 10.5rem;
}

/* Overlaid inside the reserved box, not stacked below it - stacking would
   double the height and reintroduce the jump this is here to prevent. */
.ez-card-fields-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Payment detail ───────────────────────────────────────────
   The headline figure on a receipt / history detail. Large enough to read
   across a counter, and tabular so it does not reflow while loading. */
.ez-pay-amount {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
}

.ez-pay-method {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
}

/* A two-column label/value grid that collapses to one column on a phone.
   Bootstrap's grid would need a col wrapper per pair; this keeps the markup
   to a plain list of pairs. */
.ez-pay-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
}

.ez-pay-fact-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: 0.125rem;
}

.ez-pay-fact-value {
    color: var(--bs-body-color);
    /* Long values - a payment intent reference, an email - wrap instead of
       forcing the page to scroll sideways on a phone at 400% zoom. */
    overflow-wrap: anywhere;
}

/* ── Share block ──────────────────────────────────────────────
   QR beside the link on a wide screen, stacked and centred on a phone. */
.ez-pay-share {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

.ez-pay-share-qr {
    flex: 0 0 auto;
}

.ez-pay-share-link {
    flex: 1 1 16rem;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .ez-pay-share {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ez-pay-share-link {
        width: 100%;
    }
}