@import url('variables.css');

/* ==========================================================================
   Single-page signup + checkout  —  /subscribe/{plan_uid}
   ==========================================================================

   Page sheet for refactor/pages/signup_checkout/*. Loaded via @push('head') on
   the marketing layout, after variables.css and marketing.css.

   Prefix is `mcx-` rather than the app's `mc-` or marketing's `mcl-`: this page
   runs on the marketing layout, which does not load components.css, so none of
   the mc-* component classes exist here. A distinct prefix makes that
   impossible to forget when editing.

   All values come from variables.css tokens — no hardcoded colors, spacing or
   radii. Dark mode therefore needs no rules of its own; the tokens flip.
   ========================================================================== */

/* ---------- Shell -------------------------------------------------------- */

.mcx-wrap {
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
}

.mcx-head {
    margin-bottom: var(--space-8);
}

.mcx-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}

.mcx-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Reassurance strip under the page title. Muted on purpose — it has to be
   legible without competing with the plan price or the button. */
.mcx-trustbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.mcx-trustbar li {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mcx-trustbar .material-symbols-rounded {
    font-size: 16px;
    color: var(--color-success);
}

/* Named areas rather than source order, because the one-column stack is not
   the two-column layout flattened: the rail (price, methods, button) belongs
   BESIDE the form on wide screens and BELOW it on narrow ones, while the price
   itself still has to come first — a buyer will not start typing under a figure
   they cannot see. The `bar` area is a read-only mobile-only price line that
   solves that without duplicating any of the rail's controls. */
.mcx-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "main rail";
    gap: var(--space-8);
    align-items: start;
}

.mcx-main {
    grid-area: main;
    min-width: 0;
}

.mcx-rail {
    grid-area: rail;
    position: sticky;
    top: var(--space-8);
}

.mcx-bar {
    display: none;
}

@media (max-width: 960px) {
    .mcx-checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "bar" "main" "rail";
        gap: var(--space-6);
    }

    .mcx-rail {
        position: static;
    }

    .mcx-bar {
        grid-area: bar;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        padding: var(--space-4) var(--space-5);
    }
}

.mcx-bar-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.mcx-bar-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mcx-bar-period,
.mcx-bar-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mcx-bar-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-0-5);
}

.mcx-bar-amount {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

/* ---------- Cards -------------------------------------------------------- */

.mcx-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    /* A hairline lift rather than a drop shadow: the cards sit on a tinted
       page and need to read as raised surfaces, not as floating dialogs. */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mcx-card:last-child {
    margin-bottom: 0;
}

.mcx-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.mcx-card-heading {
    flex: 1;
    min-width: 0;
}

.mcx-card-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.mcx-card-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

/* ---------- Sections inside the merged details card ---------------------- */

/* Account and billing are one step and one card, but still two subjects. A
   rule and a small caps heading keep them legible as two without giving them
   the weight — and the separate submit affordance — of two cards. */
.mcx-section--divided {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.mcx-section-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.mcx-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

/* ---------- "Same as my account" ----------------------------------------- */

.mcx-check {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.mcx-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.mcx-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-primary-fg);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* Completed state: the body collapses to a single recap line so the buyer can
   still see what they entered without it competing with the step they are on. */
.mcx-card.is-complete .mcx-card-body {
    display: none;
}

.mcx-card.is-complete .mcx-card-head {
    margin-bottom: var(--space-3);
}

.mcx-card.is-complete .mcx-step-num {
    background: var(--color-success);
}

.mcx-card.is-complete .mcx-card-collapsed,
.mcx-card.is-complete .mcx-edit {
    display: block;
}

.mcx-card-collapsed {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.mcx-edit {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
}

.mcx-edit:hover {
    text-decoration: underline;
}

/* ---------- Fields ------------------------------------------------------- */

.mcx-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 560px) {
    .mcx-grid-2 {
        grid-template-columns: 1fr;
    }
}

.mcx-field {
    margin-bottom: var(--space-4);
}

.mcx-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-1-5);
}

.mcx-optional {
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.mcx-input {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcx-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.mcx-input--error {
    border-color: var(--color-error);
}

.mcx-input--error:focus {
    box-shadow: 0 0 0 3px var(--color-error-ring);
}

.mcx-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                      linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: right var(--space-4) center, right var(--space-3) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-8);
}

/* Empty by default and filled by JS on a 422 — kept in the DOM rather than
   created on demand so the layout does not jump when an error appears. */
.mcx-field-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin: var(--space-1-5) 0 0;
    min-height: 0;
}

.mcx-field-error:empty {
    display: none;
}

.mcx-field-help {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-1-5) 0 0;
}

.mcx-inline-link {
    display: block;
    margin-top: var(--space-1);
}

.mcx-inline-link a {
    color: var(--color-primary);
    font-weight: var(--weight-medium);
}

.mcx-password {
    position: relative;
}

.mcx-password .mcx-input {
    padding-right: var(--space-10);
}

.mcx-password-toggle {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--color-text-muted);
}

.mcx-password-toggle .material-symbols-rounded {
    font-size: 18px;
}

.mcx-captcha {
    margin: var(--space-4) 0 0;
}

/* ---------- Identity row ------------------------------------------------- */

.mcx-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
}

.mcx-identity-icon {
    color: var(--color-text-muted);
}

.mcx-identity-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mcx-identity-out {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.mcx-identity-out:hover {
    color: var(--color-primary);
}

/* ---------- Buttons ------------------------------------------------------ */

.mcx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.mcx-btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}

.mcx-btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.mcx-btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.mcx-btn--ghost:hover:not(:disabled) {
    background: var(--color-hover-bg);
}

.mcx-btn--block {
    width: 100%;
}

/* The one commitment button on the page. Bigger type and a lifted resting
   state so it reads as the end of the flow rather than as another control. */
.mcx-btn--lg {
    padding: var(--space-3-5) var(--space-6);
    font-size: var(--text-base);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.mcx-btn--lg .material-symbols-rounded {
    font-size: 18px;
}

.mcx-btn:disabled,
.mcx-btn.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
}

.mcx-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: mcx-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .mcx-spinner { animation-duration: 2s; }
}

.mcx-submit-row {
    margin-top: var(--space-5);
}

.mcx-terms {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin: var(--space-3) 0 0;
}

.mcx-terms a {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

/* ---------- Alerts ------------------------------------------------------- */

.mcx-alert {
    border: 1px solid;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}

.mcx-alert p,
.mcx-alert ul {
    margin: var(--space-2) 0 0;
}

.mcx-alert ul {
    padding-left: var(--space-5);
}

.mcx-alert--danger {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
    color: var(--color-error-dark);
}

.mcx-alert--warn {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-dark);
}

.mcx-conflict {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.mcx-conflict > div {
    flex: 1;
    min-width: 220px;
}

/* ---------- Summary ------------------------------------------------------ */

.mcx-summary {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mcx-summary-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.mcx-summary-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.mcx-summary-plan-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mcx-summary-plan-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mcx-summary-lines {
    padding: var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mcx-summary-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mcx-summary-line--muted {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.mcx-summary-trial {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    background: var(--color-hover-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
}

.mcx-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mcx-summary-total-amount {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.mcx-summary-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.mcx-summary-change .material-symbols-rounded {
    font-size: 16px;
}

/* Closes the rail, under the button — next to the moment it reassures. */
.mcx-assurance {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mcx-assurance li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mcx-assurance .material-symbols-rounded {
    font-size: 15px;
    flex: 0 0 auto;
}

/* ---------- Gateways ----------------------------------------------------- */

.mcx-gateways {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

.mcx-gateway {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.mcx-gateway:not(.is-disabled):hover {
    border-color: var(--color-border-focus);
}

.mcx-gateway.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.mcx-gateway.is-disabled {
    opacity: 0.55;
}

.mcx-gateway-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    cursor: pointer;
}

.mcx-gateway-radio {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.mcx-gateway.is-disabled .mcx-gateway-head,
.mcx-gateway.is-disabled .mcx-gateway-radio {
    cursor: not-allowed;
}

.mcx-gateways-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-3) 0 0;
}

/* Fixed box, not shrink-to-fit: gateway marks vary wildly in width and a
   ragged left edge on the names reads as a broken list. */
.mcx-gateway-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    color: var(--color-text-secondary);
}

/* Brand lockups are wide (bKash is ~2.19:1) and the square slot would crop
   them, so a real logo gets an auto-width slot instead. */
.mcx-gateway-icon--brand {
    flex: 0 0 auto;
    min-width: 28px;
}

/* Brand marks come from refactor.components.icons.mc-*-logo, whose sizing
   rules live in components.css — a sheet the marketing layout does not load.
   Ported verbatim rather than recoloured: the artwork is the vendor's own and
   must stay exact. The white plate is how a near-black wordmark survives a dark
   surface; see mc-bkash-logo.blade.php. */
.mcx-gateway .mc-bkash-logo {
    display: inline-flex;
    align-items: center;
}

.mcx-gateway .mc-bkash-logo svg {
    height: var(--bkash-logo-h, 26px);
    width: auto;
    display: block;
}

[data-theme="dark"] .mcx-gateway .mc-bkash-logo {
    background: #fff;
    border-radius: 6px;
    padding: 4px 7px;
}

.mcx-gateway-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.mcx-gateway-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mcx-gateway-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mcx-gateway-warn {
    font-size: var(--text-xs);
    color: var(--color-warning);
}

.mcx-gateway-panel {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

/* ---------- Vendor panels ------------------------------------------------ */

/* A gateway's panelView (bKash today) is written for the app layout and styled
   in components.css, which this page does not load — so without these it
   renders as raw markup: a full-bleed logo and unstyled text. Ported here
   scoped to .mcx-gateway-panel rather than by loading a 22k-line sheet for one
   component.

   Kept in sync by hand. If the bKash panel is restyled in components.css, this
   block has to follow. It stays narrow on purpose: only what that panel and its
   alerts use, nothing speculative. */

.mcx-gateway-panel .mc-bkash-panel {
    --bkash-pink: #E2136E;
    --bkash-pink-dark: #C10F5E;
}

.mcx-gateway-panel .mc-bkash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mcx-gateway-panel .mc-bkash-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--bkash-pink);
    background: rgba(226, 19, 110, 0.1);
    white-space: nowrap;
}

.mcx-gateway-panel .mc-bkash-panel-desc {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.mcx-gateway-panel .mc-bkash-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 13px var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--bkash-pink);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.mcx-gateway-panel .mc-bkash-btn:hover {
    background: var(--bkash-pink-dark);
    box-shadow: 0 4px 14px rgba(226, 19, 110, 0.3);
}

.mcx-gateway-panel .mc-bkash-btn .mc-bkash-logo {
    flex-shrink: 0;
}

.mcx-gateway-panel .mc-bkash-panel-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* The plate is what keeps bKash's near-black wordmark readable on the pink
   button and on dark surfaces. Never recolour the artwork instead. */
.mcx-gateway .mc-bkash-logo--plate {
    background: #fff;
    border-radius: 6px;
    padding: 4px 7px;
}

.mcx-gateway-panel .mc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    border-radius: var(--radius-input);
    border-left: var(--space-0-5) solid transparent;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}

.mcx-gateway-panel .mc-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.mcx-gateway-panel .mc-alert-icon .material-symbols-rounded {
    font-size: 18px;
}

.mcx-gateway-panel .mc-alert-content {
    flex: 1;
    min-width: 0;
}

.mcx-gateway-panel .mc-alert-text {
    color: inherit;
    opacity: 0.85;
}

.mcx-gateway-panel .mc-alert-info {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
    border-left-color: var(--color-info);
}

.mcx-gateway-panel .mc-alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    border-left-color: var(--color-warning);
}

/* Belt and braces for the one-hop handoff: the panel is never unhidden when
   the page is already navigating, but a stylesheet rule cannot be beaten by a
   stray `hidden = false` from vendor panel script. */
.mcx-card[data-mcx-advancing="1"] .mcx-gateway-panel {
    display: none !important;
}

/* ---------- Stripe Elements --------------------------------------------- */

/* Explicit min-height: the Stripe iframe reports zero height until it has
   loaded, and without this the panel collapses to a line and then jumps. */
.mcx-stripe-element {
    min-height: 44px;
    padding: var(--space-3);
    background: var(--color-page-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    margin-bottom: var(--space-3);
}

.mcx-stripe-element.StripeElement--focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.mcx-stripe-element.StripeElement--invalid {
    border-color: var(--color-error);
}

.mcx-panel-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin: 0 0 var(--space-3);
}

.mcx-panel-error:empty {
    display: none;
}

.mcx-panel-status {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0;
    text-align: center;
}

.mcx-panel-status:empty {
    display: none;
}

/* ============================================================================
   COUPON (order summary)

   Sits between the trial note and the total so an applied discount lands
   directly above the number it changes. Collapsed to a single link by default:
   most buyers have no code, and an always-open input on a checkout invites
   people to go hunting for one before they pay.
   ============================================================================ */

.mcx-coupon {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
}

.mcx-coupon-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
}

.mcx-coupon-toggle:hover {
    text-decoration: underline;
}

.mcx-coupon-toggle .material-symbols-rounded {
    font-size: 18px;
}

.mcx-coupon-body {
    margin-top: var(--space-3);
}

.mcx-coupon-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.mcx-coupon-input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Keeps the button the same height as the input regardless of the shared
   .mcx-btn padding, which is tuned for the full-width submit. */
.mcx-coupon-apply {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mcx-coupon-msg {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--color-success, #16a34a);
}

.mcx-coupon-msg.is-error {
    color: var(--color-error);
}

/* Post-submit state: the discount is a real order line by then, so this is a
   confirmation rather than a control. */
.mcx-coupon-applied {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-success, #16a34a);
}

.mcx-coupon-applied .material-symbols-rounded {
    font-size: 18px;
}

.mcx-summary-line--discount span:last-child {
    color: var(--color-success, #16a34a);
}