/*
 * EDUEX Payments — restyled to spec for the EDUEX theme.
 *
 * Loaded by the theme (inc/enqueue.php) on /student/, /partner/,
 * /checkout/order-pay/<id>/, and /thank-you/ pages, replacing the
 * plugin's bundled stylesheet. Class names match the plugin's PHP
 * templates so the JS / PHP contracts are preserved.
 *
 * Every visible element — form chrome, fields, errors, payment panel,
 * pay button, review card, thank-you receipt — is composed from
 * --edx-* tokens in eduex-tokens.css. No hex literals in this file.
 *
 * Layout structure for each context:
 *   .eduex-form            — step-1 form (student / partner)
 *   .eduex-pay-review      — pay-for-order summary card
 *   .eduex-thankyou-inner  — payment-received receipt
 * All three share the same envelope: white card, 16px radius, md shadow,
 * library-rule burgundy hairline at top.
 */

:root {
    /* Local aliases — let the plugin's CSS read with short names while
       still resolving to the theme's tokens. */
    --eduex-primary:           var(--edx-primary);
    --eduex-primary-hover:     var(--edx-primary-hover);
    --eduex-secondary:         var(--edx-on-primary);
    --eduex-neutral:           var(--edx-surface);
    --eduex-surface:           var(--edx-surface);
    --eduex-on-surface:        var(--edx-on-surface);
    --eduex-text-muted:        var(--edx-on-surface-variant);
    --eduex-border-subtle:     var(--edx-outline-variant);
}

/* =================================================================
   Shared envelope — applies to all three payment cards.
   ================================================================= */
.eduex-form,
.eduex-pay-review,
.eduex-thankyou-inner {
    box-sizing: border-box;
    position: relative;
    max-width: 720px;
    margin: var(--edx-space-lg) auto;
    padding: calc(var(--edx-space-lg) + 2px) var(--edx-space-lg) var(--edx-space-lg);
    background: var(--edx-surface);
    color: var(--edx-on-surface);
    border: 1px solid var(--edx-surface-variant);
    border-radius: var(--edx-radius-lg);
    box-shadow: var(--edx-elev-md);
    font-family: var(--edx-font-family);
}
.eduex-form *,
.eduex-form *::before,
.eduex-form *::after,
.eduex-pay-review *,
.eduex-pay-review *::before,
.eduex-pay-review *::after,
.eduex-thankyou-inner *,
.eduex-thankyou-inner *::before,
.eduex-thankyou-inner *::after { box-sizing: border-box; }

/* Library-rule burgundy hairline. */
.eduex-form::before,
.eduex-pay-review::before,
.eduex-thankyou-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--edx-space-lg);
    width: 56px;
    height: 2px;
    background: var(--edx-primary);
    border-radius: var(--edx-radius-pill);
}

/* Shared header row: eyebrow + display-scale title. */
.eduex-form__header,
.eduex-pay-review__header,
.eduex-thankyou__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--edx-space-xs);
    margin-bottom: var(--edx-space-lg);
}
.eduex-form__eyebrow,
.eduex-pay-review__eyebrow,
.eduex-thankyou__eyebrow {
    display: inline-block;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-medium);
    line-height: var(--edx-lh-label-sm);
    letter-spacing: var(--edx-ls-label-sm);
    text-transform: uppercase;
    color: var(--edx-on-surface-variant);
}
.eduex-form__title,
.eduex-pay-review__title,
.eduex-thankyou__title {
    margin: 0;
    color: var(--edx-on-background);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-display);
    font-weight: var(--edx-fw-bold);
    line-height: var(--edx-lh-display);
    letter-spacing: var(--edx-ls-display);
    max-width: 18ch;
    text-wrap: balance;
}
.eduex-pay-review__title,
.eduex-thankyou__title {
    font-size: var(--edx-fs-headline-lg);
    line-height: var(--edx-lh-headline-lg);
    letter-spacing: var(--edx-ls-headline-lg);
    max-width: 32ch;
}
.eduex-form__sub,
.eduex-pay-review__sub {
    margin: 0;
    font-size: var(--edx-fs-body-lg);
    line-height: var(--edx-lh-body-lg);
    color: var(--edx-on-surface-variant);
    max-width: 60ch;
}

/* Audience badge sits under the eyebrow on the form, and next to the
   title on the pay-review. */
.eduex-form__audience,
.eduex-pay-review__audience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-radius: var(--edx-radius-pill);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-medium);
    line-height: var(--edx-lh-label-sm);
    letter-spacing: var(--edx-ls-label-sm);
    text-transform: uppercase;
}
.eduex-form__audience::before,
.eduex-pay-review__audience::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--edx-primary);
}

/* =================================================================
   STEP-1 FORM  (.eduex-form)
   ================================================================= */
.eduex-form .eduex-step { display: block; }
.eduex-form .eduex-step[hidden] { display: none; }

/* Top-level alert (server / aggregate errors). */
.eduex-form .eduex-form-errors {
    margin: 0 0 var(--edx-space-md);
    padding: var(--edx-space-sm) var(--edx-space-md);
    background: var(--edx-error-container);
    color: var(--edx-on-error-container);
    border-left: 3px solid var(--edx-error);
    border-radius: var(--edx-radius);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    display: none;
    /* Keep the notice clear of any sticky header when JS scrolls it
       into view after a failed submit. */
    scroll-margin-top: var(--edx-space-lg);
}
/* When the JS focuses the notice (for accessibility after a failed
   submit), give it a subtle outline so keyboard users see the focus. */
.eduex-form .eduex-form-errors:focus { outline: none; }
.eduex-form .eduex-form-errors:focus-visible {
    outline: 2px solid var(--edx-error);
    outline-offset: 2px;
}
.eduex-form .eduex-form-errors:not(:empty) { display: block; }
.eduex-form .eduex-form-errors::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--edx-error);
    color: var(--edx-on-error);
    font-weight: var(--edx-fw-bold);
    font-size: 13px;
    vertical-align: middle;
}

/* Field rows. */
.eduex-form .eduex-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--edx-space-sm);
    margin-bottom: var(--edx-space-sm);
}
.eduex-form .eduex-row > .eduex-field { flex: 1 1 220px; margin-bottom: 0; }
.eduex-form .eduex-field { margin-bottom: var(--edx-space-sm); }

/* Field label. */
.eduex-form label,
.eduex-form .eduex-field__label {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
    margin-bottom: 6px;
}
.eduex-form label[for] { cursor: pointer; }

/* Inputs. */
.eduex-form input[type="text"],
.eduex-form input[type="email"],
.eduex-form input:not([type]),
.eduex-form select,
.eduex-form textarea {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: var(--edx-surface);
    color: var(--edx-on-surface);
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius);
    font-family: var(--edx-font-family);
    font-size: 17px;
    font-weight: var(--edx-fw-regular);
    line-height: 1.2;
    box-sizing: border-box;
    transition:
        border-color var(--edx-dur-fast) var(--edx-ease),
        box-shadow   var(--edx-dur-fast) var(--edx-ease),
        background-color var(--edx-dur-fast) var(--edx-ease);
}
.eduex-form textarea {
    height: auto;
    padding: 12px 16px;
    line-height: var(--edx-lh-body-md);
}
.eduex-form input::placeholder,
.eduex-form textarea::placeholder { color: var(--edx-on-surface-variant); }
.eduex-form input:hover:not(:focus),
.eduex-form select:hover:not(:focus),
.eduex-form textarea:hover:not(:focus) {
    border-color: var(--edx-outline);
}
.eduex-form input:focus,
.eduex-form select:focus,
.eduex-form textarea:focus {
    border-color: var(--edx-primary);
    box-shadow: var(--edx-focus-ring);
    outline: none;
}

/* Helper + inline error rows. */
.eduex-form .eduex-helper,
.eduex-form .eduex-field__helper {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--edx-fs-label-sm);
    line-height: var(--edx-lh-label-sm);
    color: var(--edx-on-surface-variant);
    margin: 6px 0 0;
}
.eduex-form .eduex-helper::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--edx-on-surface-variant);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 17h2v-6h-2zm1-15a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-1-11h2V7h-2z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 17h2v-6h-2zm1-15a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-1-11h2V7h-2z'/></svg>") center / contain no-repeat;
    opacity: 0.7;
}
.eduex-form .eduex-error,
.eduex-form .eduex-field__error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: var(--edx-fs-label-sm);
    line-height: var(--edx-lh-label-sm);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-error);
    margin: 6px 0 0;
}
.eduex-form .eduex-error::before,
.eduex-form .eduex-field__error::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--edx-error);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-2h2zm0-4h-2V7h2z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-2h2zm0-4h-2V7h2z'/></svg>") center / contain no-repeat;
}
.eduex-form .eduex-field--error .eduex-error,
.eduex-form .eduex-field--error .eduex-field__error { display: inline-flex; }
.eduex-form .eduex-field--error input,
.eduex-form .eduex-field--error select,
.eduex-form .eduex-field--error textarea {
    border-color: var(--edx-error);
    box-shadow: 0 0 0 3px var(--edx-error-ring);
    background: var(--edx-error-tint);
}

/* Honeypot — keep off-screen. */
.eduex-form .eduex-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.eduex-form .eduex-step-2-placeholder { min-height: 200px; }

/* Footer / submit row. */
.eduex-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--edx-space-sm);
    margin-top: var(--edx-space-lg);
    padding-top: var(--edx-space-md);
    border-top: 1px solid var(--edx-outline-variant);
}
.eduex-form__footer-meta {
    font-size: var(--edx-fs-label-sm);
    color: var(--edx-on-surface-variant);
    display: flex;
    align-items: center;
    gap: 6px;
}
.eduex-form__footer-meta::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--edx-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5z'/></svg>") center / contain no-repeat;
}

/* Submit button — spec button-primary. */
.eduex-form button.eduex-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--edx-space-xs);
    height: 48px;
    padding: 13px 34px;
    margin: 0;
    background: var(--edx-primary);
    color: var(--edx-on-primary);
    border: 2px solid var(--edx-primary);
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    letter-spacing: var(--edx-ls-label-md);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        color            var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease),
        transform        var(--edx-dur-fast)   var(--edx-ease);
}
.eduex-form button.eduex-continue::after {
    content: "\2192"; /* → */
    font-size: 18px;
    line-height: 1;
    transition: transform var(--edx-dur-fast) var(--edx-ease);
}
.eduex-form button.eduex-continue:hover,
.eduex-form button.eduex-continue:focus-visible {
    background: var(--edx-primary-hover);
    border-color: var(--edx-primary-hover);
    color: var(--edx-on-primary);
}
.eduex-form button.eduex-continue:hover::after,
.eduex-form button.eduex-continue:focus-visible::after { transform: translateX(2px); }
.eduex-form button.eduex-continue:active {
    background: var(--edx-primary-active);
    border-color: var(--edx-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
}
.eduex-form button.eduex-continue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.eduex-form button.eduex-continue:disabled::after { transform: none; }

/* =================================================================
   PAY-FOR-ORDER REVIEW  (.eduex-pay-review)
   ================================================================= */
.eduex-pay-review-section {
    margin-top: var(--edx-space-md);
}
.eduex-pay-review-section:first-of-type { margin-top: 0; }
.eduex-pay-review-section__title {
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-semibold);
    line-height: var(--edx-lh-label-sm);
    letter-spacing: var(--edx-ls-label-sm);
    text-transform: uppercase;
    color: var(--edx-on-surface-variant);
    margin: 0 0 var(--edx-space-xs);
}

.eduex-pay-review-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--edx-surface-container-lowest);
    border-radius: var(--edx-radius);
    overflow: hidden;
    border: 1px solid var(--edx-outline-variant);
}
.eduex-pay-review-table th,
.eduex-pay-review-table td {
    text-align: left;
    padding: var(--edx-space-sm) var(--edx-space-md);
    border-bottom: 1px solid var(--edx-outline-variant);
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    font-weight: var(--edx-fw-regular);
    vertical-align: middle;
}
.eduex-pay-review-table tbody tr:last-child th,
.eduex-pay-review-table tbody tr:last-child td { border-bottom: 0; }
.eduex-pay-review-table th {
    width: 38%;
    color: var(--edx-on-surface-variant);
    font-weight: var(--edx-fw-medium);
}
.eduex-pay-review-table td {
    color: var(--edx-on-background);
    font-weight: var(--edx-fw-medium);
}

/* Total row — emphasized with primary tint. */
.eduex-pay-review-total th,
.eduex-pay-review-total td {
    border-bottom: 0;
    border-top: 2px solid var(--edx-primary);
    padding: var(--edx-space-md);
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    font-size: var(--edx-fs-headline-md);
    line-height: var(--edx-lh-headline-md);
    font-weight: var(--edx-fw-bold);
}
.eduex-pay-review-total th {
    width: 38%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    color: var(--edx-on-primary-container);
}
.eduex-pay-review-total td {
    text-align: right;
    color: var(--edx-on-primary-container);
}

/* Action group. */
.eduex-pay-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--edx-space-sm);
    margin-top: var(--edx-space-md);
}
.eduex-pay-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 13px 24px;
    background: transparent;
    color: var(--edx-primary);
    border: 2px solid var(--edx-primary);
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        color            var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease);
}
.eduex-pay-edit::before {
    content: "\270E"; /* ✎ */
    font-size: 16px;
}
.eduex-pay-edit:hover,
.eduex-pay-edit:focus-visible {
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-color: var(--edx-primary);
    text-decoration: none;
}
.eduex-pay-edit:active {
    background: var(--edx-primary-container);
    color: var(--edx-primary-active);
}

/* =================================================================
   THANK-YOU PAGE  (.eduex-thankyou-inner)
   ================================================================= */
.eduex-thankyou__success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--edx-space-md);
    background: var(--edx-primary-container);
    color: var(--edx-primary);
    border-radius: 50%;
}
.eduex-thankyou__success::after {
    content: "";
    width: 36px;
    height: 36px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / contain no-repeat;
}

.eduex-thankyou p {
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    color: var(--edx-on-surface);
    margin: 0 0 var(--edx-space-sm);
}

.eduex-thankyou-summary {
    list-style: none;
    padding: 0;
    margin: var(--edx-space-md) 0;
    background: var(--edx-surface-container-lowest);
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius);
    overflow: hidden;
}
.eduex-thankyou-summary li {
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--edx-space-md);
    padding: var(--edx-space-sm) var(--edx-space-md);
    border-top: 1px solid var(--edx-outline-variant);
    transition: background-color var(--edx-dur-fast) var(--edx-ease);
}
.eduex-thankyou-summary li:first-child { border-top: 0; }
.eduex-thankyou-summary li:hover { background: var(--edx-surface-container-high); }
.eduex-thankyou-summary .label {
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface-variant);
}
.eduex-thankyou-summary .value {
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-background);
    text-align: right;
    word-break: break-word;
}
.eduex-thankyou-summary li.is-total {
    background: var(--edx-primary-container);
    border-top: 2px solid var(--edx-primary);
}
.eduex-thankyou-summary li.is-total .label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--edx-fs-label-md);
    color: var(--edx-on-primary-container);
}
.eduex-thankyou-summary li.is-total .value {
    font-size: var(--edx-fs-title-lg);
    font-weight: var(--edx-fw-bold);
    color: var(--edx-on-primary-container);
}

/* Thank-you actions. */
.eduex-thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--edx-space-sm);
    margin-top: var(--edx-space-md);
    padding-top: var(--edx-space-md);
    border-top: 1px solid var(--edx-outline-variant);
}

a.eduex-download-link {
    display: inline-flex;
    align-items: center;
    gap: var(--edx-space-xs);
    height: 48px;
    padding: 13px 34px;
    background: var(--edx-primary);
    color: var(--edx-on-primary);
    border: 2px solid var(--edx-primary);
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease);
}
a.eduex-download-link::before {
    content: "\2193"; /* ↓ */
    font-size: 18px;
}
a.eduex-download-link:hover,
a.eduex-download-link:focus-visible {
    background: var(--edx-primary-hover);
    border-color: var(--edx-primary-hover);
    color: var(--edx-on-primary);
    text-decoration: none;
}
a.eduex-download-link:active {
    background: var(--edx-primary-active);
    border-color: var(--edx-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
}

a.eduex-thankyou-home {
    display: inline-flex;
    align-items: center;
    gap: var(--edx-space-xs);
    height: 48px;
    padding: 13px 34px;
    background: transparent;
    color: var(--edx-primary);
    border: 2px solid transparent;
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-fast) var(--edx-ease),
        color            var(--edx-dur-fast) var(--edx-ease);
}
a.eduex-thankyou-home::before {
    content: "\2190"; /* ← */
    font-size: 18px;
}
a.eduex-thankyou-home:hover,
a.eduex-thankyou-home:focus-visible {
    background: var(--edx-surface-container-high);
    color: var(--edx-primary);
    text-decoration: none;
}

.eduex-thankyou-expired p { color: var(--edx-on-surface-variant); }

/* =================================================================
   WC checkout + order-pay — pay button + payment section.
   Higher-specificity selectors so the spec wins over WC defaults
   and the plugin's inline !important on the order-review table.
   Scope to BOTH .woocommerce-checkout AND .woocommerce-order-pay
   because the same #payment block renders on both endpoints.
   ================================================================= */
.woocommerce-checkout #payment,
.woocommerce-order-pay #payment {
    background: var(--edx-surface);
    border: 1px solid var(--edx-surface-variant);
    border-radius: var(--edx-radius-lg);
    padding: 0;
    box-shadow: var(--edx-elev-sm);
}

/* Radio list — remove the default WC border-bottom dividers and
   lift the active row to surface-container-high. */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-order-pay #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 0;
}
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-order-pay #payment ul.payment_methods li {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid var(--edx-outline-variant);
    transition: background-color var(--edx-dur-fast) var(--edx-ease);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child,
.woocommerce-order-pay #payment ul.payment_methods li:last-child {
    border-bottom: 0;
}
.woocommerce-checkout #payment ul.payment_methods li:hover,
.woocommerce-order-pay #payment ul.payment_methods li:hover {
    background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods li.woocommerce-notice,
.woocommerce-order-pay #payment ul.payment_methods li.woocommerce-notice {
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-bottom: 0;
    border-radius: var(--edx-radius-md);
    margin: var(--edx-space-md);
    padding: var(--edx-space-sm) var(--edx-space-md);
}

/* Radio + label. */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
.woocommerce-order-pay #payment ul.payment_methods li input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: var(--edx-space-xs);
    accent-color: var(--edx-primary);
}
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-order-pay #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: var(--edx-space-xs);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-background);
    cursor: pointer;
}

/* Gateway brand icons (Visa/MC/Amex). */
.woocommerce-checkout #payment ul.payment_methods li label img,
.woocommerce-order-pay #payment ul.payment_methods li label img {
    height: 18px;
    margin-left: auto;
    vertical-align: middle;
}

/* Description panel below the radio — the "Pay with Credit Card" box.
   WC draws a speech-bubble notch via ::before; we restyle it in brand
   colors instead of disabling it. */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-order-pay #payment div.payment_box {
    position: relative;
    margin: 0;
    padding: var(--edx-space-md);
	background: var(--edx-surface);
    color: var(--edx-on-surface);
    border-radius: var(--edx-radius-lg);
    border: 1px solid var(--edx-surface-variant);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    box-shadow: var(--edx-elev-sm);
}
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-order-pay #payment div.payment_box p {
    margin: 0 0 var(--edx-space-sm);
}
.woocommerce-checkout #payment div.payment_box p:last-child,
.woocommerce-order-pay #payment div.payment_box p:last-child {
    margin-bottom: 0;
}

/* Speech-bubble notch — WC originally drew an arrow pointing up at
   the radio. Restore it but in brand color so it reads as EDUEX chrome. */
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-order-pay #payment div.payment_box::before {
    display: none;
}

/* Hide the small WC arrow drawn via background-image (if any). */
.woocommerce-checkout #payment div.payment_box::after,
.woocommerce-order-pay #payment div.payment_box::after { display: none; }

/* "Test Mode" warning — Worldpay renders this inside .payment_box.
   Spec calls for an error-tinted treatment. */
.woocommerce-checkout #payment .woocommerce-access_worldpay_checkout-info,
.woocommerce-order-pay #payment .woocommerce-access_worldpay_checkout-info {
    color: var(--edx-error) !important;
    font-family: var(--edx-font-family) !important;
    font-size: var(--edx-fs-label-md) !important;
    font-weight: var(--edx-fw-medium) !important;
    text-align: center !important;
    margin: 0 0 var(--edx-space-md) !important;
}

/* WC form-row defaults — collapse the huge vertical gaps the user
   flagged. Default .form-row has margin: 0 0 6px which compounds
   across Card Number / Expiry / CVC / Card Holder Name. Tighten. */
.woocommerce-checkout #payment .form-row,
.woocommerce-order-pay #payment .form-row {
    padding: 0;
    margin: 0 0 var(--edx-space-xs);
}
.woocommerce-checkout #payment .form-row:last-child,
.woocommerce-order-pay #payment .form-row:last-child { margin-bottom: 0; }

/* Worldpay-hosted credit-card form chrome. The plugin's own
   worldpay-ecommerce-checkout.css forces height 40px and
   text-transform: uppercase on the cardholder name — both wrong
   for our spec. Override with !important so the brand wins. */
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form {
    background: transparent;
    padding: 0;
    border: 0;
}
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form .form-row,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form .form-row {
    margin-bottom: var(--edx-space-sm);
}
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form label,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form label {
    display: block;
    font-family: var(--edx-font-family) !important;
    font-size: var(--edx-fs-label-md) !important;
    font-weight: var(--edx-fw-medium) !important;
    line-height: var(--edx-lh-label-md) !important;
    color: var(--edx-on-surface) !important;
    margin-bottom: 6px;
}
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form label .required,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form label .required {
    color: var(--edx-error) !important;
    font-weight: var(--edx-fw-bold) !important;
    border: 0 !important;
}

/* Card number / expiry / CVC / card-holder-name inputs.
   Worldpay's plugin overrides height: 40px and adds inset shadow +
   uppercase + 3px letter-spacing on the cardholder name — kill
   all of that and apply the spec. */
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form .input-text,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-number,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-expiry,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-cvc,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form .input-text,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-number,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-expiry,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-cvc,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: var(--edx-surface) !important;
    color: var(--edx-on-surface) !important;
    border: 1px solid var(--edx-outline-variant) !important;
    border-radius: var(--edx-radius) !important;
    font-family: var(--edx-font-family) !important;
    font-size: 17px !important;
    font-weight: var(--edx-fw-regular) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition:
        border-color var(--edx-dur-fast) var(--edx-ease),
        box-shadow   var(--edx-dur-fast) var(--edx-ease) !important;
}
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form .input-text:focus,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-number:focus,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-expiry:focus,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-cvc:focus,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input:focus,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form .input-text:focus,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-number:focus,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-expiry:focus,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input.wc-credit-card-form-card-cvc:focus,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input:focus {
    border-color: var(--edx-primary) !important;
    box-shadow: var(--edx-focus-ring) !important;
    outline: none !important;
}
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form .input-text::placeholder,
.woocommerce-checkout #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input::placeholder,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form .input-text::placeholder,
.woocommerce-order-pay #wc-access_worldpay_checkout-cc-form input#access_worldpay_checkout-card-holder-name-input::placeholder {
    color: var(--edx-on-surface-variant) !important;
    opacity: 1 !important;
}

/* WC "Place order" button — give it full spec button-primary treatment
   with id-based selector to win specificity over the inline-style hook.
   Scope to both checkout and order-pay. */
#place_order,
.woocommerce-checkout #payment #place_order,
.woocommerce-order-pay #payment #place_order {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--edx-space-xs);
    height: 48px !important;
    padding: 13px 34px !important;
    margin: var(--edx-space-md) var(--edx-space-lg) var(--edx-space-lg) !important;
    background: var(--edx-primary) !important;
    color: var(--edx-on-primary) !important;
    border: 2px solid var(--edx-primary) !important;
    border-radius: var(--edx-radius-md) !important;
    font-family: var(--edx-font-family) !important;
    font-size: var(--edx-fs-body-md) !important;
    font-weight: var(--edx-fw-medium) !important;
    letter-spacing: var(--edx-ls-label-md);
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    width: auto;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease) !important;
}
#place_order::after {
    content: "\2192";
    font-size: 18px;
    line-height: 1;
}
#place_order:hover,
#place_order:focus-visible {
    background: var(--edx-primary-hover) !important;
    border-color: var(--edx-primary-hover) !important;
    color: var(--edx-on-primary) !important;
}
#place_order:active {
    background: var(--edx-primary-active) !important;
    border-color: var(--edx-primary-active) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20) !important;
}
#place_order:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Legacy Worldpay iframe wrapper (older plugin version). */
#worldpay-cc-form,
.worldpay-cc-form,
form.worldpay,
form#worldpay_payment_form {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-family: var(--edx-font-family);
}

/* Order-pay page envelope — wrap WC's order-pay form in our page shell. */
.woocommerce .eduex-pay-review + form #order_review {
    margin-top: var(--edx-space-md);
}
.woocommerce form#order_review {
}
.woocommerce form#order_review #payment {
	max-width: 720px;
    border: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
	
}

/* WC form-row labels and inputs on the order-pay page. */
.woocommerce form#order_review .form-row label {
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    margin-bottom: 6px;
}

/* WC inline notices on order-pay. */
.woocommerce-checkout-payment,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    font-family: var(--edx-font-family);
    border-radius: var(--edx-radius);
}

/* =================================================================
   Mobile — narrow screens get full-width form chrome.
   ================================================================= */
@media (max-width: 640px) {
    .eduex-form,
    .eduex-pay-review,
    .eduex-thankyou-inner {
        margin: var(--edx-space-md) var(--edx-space-sm);
        padding: calc(var(--edx-space-md) + 2px) var(--edx-space-md) var(--edx-space-md);
    }
    .eduex-form::before,
    .eduex-pay-review::before,
    .eduex-thankyou-inner::before {
        left: var(--edx-space-md);
    }
    .eduex-form__title,
    .eduex-pay-review__title,
    .eduex-thankyou__title {
        font-size: var(--edx-fs-headline-md);
        line-height: var(--edx-lh-headline-md);
    }
    .eduex-form .eduex-row { flex-direction: column; gap: 0; }
    .eduex-form .eduex-row > .eduex-field { flex: 1 1 auto; }
    .eduex-form__footer { flex-direction: column; align-items: stretch; }
    .eduex-form button.eduex-continue,
    .eduex-pay-edit,
    #place_order,
    a.eduex-download-link,
    a.eduex-thankyou-home { width: 100%; }
    /* -----------------------------------------------------------------
       Pay-review table — stack each row into a small card so long
       values (full address, reference numbers, email) get the full
       column width instead of being squeezed against a 45%-wide
       label column. The table semantics are preserved (we keep
       <th>/<td>) so screen readers still announce label/value
       pairs — we just restyle the layout.
       ----------------------------------------------------------------- */
    .eduex-pay-review-table,
    .eduex-pay-review-table tbody,
    .eduex-pay-review-table tr,
    .eduex-pay-review-table th,
    .eduex-pay-review-table td {
        display: block;
        width: auto;
    }
    .eduex-pay-review-table {
        /* Cancel the desktop border so the stacked rows read as
           separate sections instead of a cramped grid. */
        border: 0;
        background: transparent;
    }
    /* Reset the desktop width override on the label cell. */
    .eduex-pay-review-table th,
    .eduex-pay-review-total th { width: auto; }
    .eduex-pay-review-total td { border: 0; }
    .eduex-pay-review-table tr {
        padding: var(--edx-space-sm) 0;
        border-bottom: 0;
    }

	.eduex-pay-review-table th, .eduex-pay-review-table td{
		border: 0;
	}
    .eduex-pay-review-table tbody tr:last-child { border-bottom: 0; }
    .eduex-pay-review-table th {
        margin-bottom: 4px;
        font-size: var(--edx-fs-label-sm);
        line-height: var(--edx-lh-label-sm);
        letter-spacing: var(--edx-ls-label-sm);
        text-transform: uppercase;
        color: var(--edx-on-surface-variant);
        /* Reset the desktop padding — we control it per-cell now. */
        padding: 0;
    }
    .eduex-pay-review-table td {
        /* Reset desktop padding + right-align the value so prices
           and other "result" cells read as the primary content. */
        padding: 0;
        text-align: left;
        font-size: var(--edx-fs-body-md);
        line-height: var(--edx-lh-body-md);
        /* Break long unbreakable strings (long reference IDs, very
           long emails) so they never overflow the column. */
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Total row — keep its primary tint but stack label/value too.
       Use the same boxed treatment so it reads as the standout row
       even on a single column. */
    .eduex-pay-review-table .eduex-pay-review-total {
        margin-top: var(--edx-space-xs);
        padding: var(--edx-space-md);
        background: var(--edx-primary-container);
        color: var(--edx-on-primary-container);
        border: 0;
        border-radius: var(--edx-radius);
    }
    .eduex-pay-review-total th {
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--edx-on-primary-container);
    }
    .eduex-pay-review-total td {
        font-size: var(--edx-fs-headline-md);
        line-height: var(--edx-lh-headline-md);
        font-weight: var(--edx-fw-bold);
        color: var(--edx-on-primary-container);
    }
    .eduex-pay-review-actions,
    .eduex-thankyou-actions { flex-direction: column; }
    .eduex-thankyou-summary li { flex-direction: column; align-items: flex-start; gap: 4px; }
    .eduex-thankyou-summary .value { text-align: left; }
}

/* Very narrow phones — tighten padding so long values get more room
   and the value column doesn't wrap after every word. */
@media (max-width: 480px) {
    .eduex-pay-review-table tr { padding: var(--edx-space-sm) 0; }
    .eduex-pay-review-table .eduex-pay-review-total { padding: var(--edx-space-sm) var(--edx-space-md); }
}


.eduex-payment-56hgf{
	display: flex;
	gap: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"], .woocommerce-order-pay #payment ul.payment_methods li input[type="radio"] {
	width: 1px;
    height: 1px;
}

.woocommerce-checkout #payment div.payment_box .form-row {
	margin: 0.41rem;
	padding: 0;
}

.woocommerce-checkout #payment div.payment_box, .woocommerce-order-pay #payment div.payment_box{

}

/* =================================================================
   PAYMENT OPTIONS SECTION
   ----------------------------------------------------------------
   Trust strip that sits between the order-review table and the
   payment-method list on /checkout/order-pay/. Two-up grid:
     [ Accepted cards ] | [ Processor + security line ]
   Library-rule hairline (via .edx-rule) anchors it to the rest
   of the EDUEX form chrome. Fully responsive; collapses to a
   single column below 720px, softens padding below 480px.
   ================================================================= */
.eduex-pay-options {
    position: relative;
    box-sizing: border-box;
    max-width: 720px;
    margin: var(--edx-space-md) auto var(--edx-space-lg);
    padding: var(--edx-space-md) var(--edx-space-md) calc(var(--edx-space-md) + 2px);
    background: var(--edx-surface);
    color: var(--edx-on-surface);
    border: 1px solid var(--edx-surface-variant);
    border-radius: var(--edx-radius-lg);
    box-shadow: var(--edx-elev-sm);
    font-family: var(--edx-font-family);
    overflow: hidden;
    /* Subtle background wash on the right-hand processor card so the
       two columns read as different surfaces even at a glance. */
    background-image:
        linear-gradient(
            180deg,
            var(--edx-surface-container-lowest) 0%,
            var(--edx-surface) 100%
        );
}
/* Override the default .edx-rule hairline position so the burgundy
   bar lands inside the flat top of the 16px-radius card instead of
   being clipped by the corner. */
.eduex-pay-options.edx-rule::before {
    left: var(--edx-space-md);
}
.eduex-pay-options *,
.eduex-pay-options *::before,
.eduex-pay-options *::after { box-sizing: border-box; }

/* Eyebrow + title + sub — kept tight; the whole strip is small
   relative to the form chrome above and below it. */
.eduex-pay-options__inner {
    display: flex;
    flex-direction: column;
    gap: var(--edx-space-sm);
}
.eduex-pay-options__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--edx-space-xs);
}
.eduex-pay-options__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-radius: var(--edx-radius-pill);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-semibold);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-start;
}
/* Inline lock glyph, drawn in currentColor so it tints with the
   pill background. Using a mask keeps it crisp at any size. */
.eduex-pay-options__lock {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3z'/></svg>") center / contain no-repeat;
}
.eduex-pay-options__title {
    margin: 0;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-headline-md);
    font-weight: var(--edx-fw-semibold);
    line-height: var(--edx-lh-headline-md);
    letter-spacing: var(--edx-ls-headline-md);
    color: var(--edx-on-background);
    text-wrap: balance;
    max-width: 32ch;
}
.eduex-pay-options__sub {
    margin: 0;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    color: var(--edx-on-surface-variant);
    max-width: 60ch;
}

/* Two-up grid. Collapses to a single column below 720px. */
.eduex-pay-options__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--edx-space-sm);
    align-items: stretch;
    margin-top: 4px;
}
.eduex-pay-options__cards,
.eduex-pay-options__processor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--edx-space-sm) var(--edx-space-md);
    background: var(--edx-surface);
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius-md);
    transition:
        border-color var(--edx-dur-fast) var(--edx-ease),
        background-color var(--edx-dur-fast) var(--edx-ease),
        transform var(--edx-dur-medium) var(--edx-ease),
        box-shadow var(--edx-dur-medium) var(--edx-ease);
}
.eduex-pay-options__cards:hover,
.eduex-pay-options__processor:hover {
    border-color: var(--edx-primary);
    background: var(--edx-surface-container-lowest);
    transform: translateY(-1px);
    box-shadow: var(--edx-elev-sm);
}

.eduex-pay-options__label {
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-semibold);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--edx-on-surface-variant);
}

/* Card rail. The accepted-cards image is wide; clamp it so the
   columns stay balanced and the card brands don't blow up the
   card on wide viewports. */
.eduex-pay-options__cards-img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* Processor card: contains logo + trust list, vertically centered. */
.eduex-pay-options__processor-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.eduex-pay-options__processor-logo {
    display: block;
    width: auto;
    max-width: 120px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
}
.eduex-pay-options__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eduex-pay-options__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
}
/* Tiny primary-tinted dot used as the bullet. Sits flush with the
   text baseline; uses currentColor so it adapts if a row needs to
   flip state later. */
.eduex-pay-options__dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--edx-primary);
    box-shadow: 0 0 0 3px var(--edx-primary-container);
}

/* -----------------------------------------------------------------
   Responsive — first collapse to a stacked grid, then soften
   padding for very narrow viewports. The image remains legible
   because we use object-fit: contain, not cover.
   ----------------------------------------------------------------- */
@media (max-width: 720px) {
    .eduex-pay-options {
        margin: var(--edx-space-sm) var(--edx-space-sm) var(--edx-space-md);
        padding: var(--edx-space-sm);
    }
    .eduex-pay-options.edx-rule::before {
        left: var(--edx-space-sm);
    }
    .eduex-pay-options__grid {
        grid-template-columns: 1fr;
        gap: var(--edx-space-sm);
    }
    .eduex-pay-options__title {
        font-size: var(--edx-fs-title-lg);
        line-height: var(--edx-lh-title-lg);
        letter-spacing: 0;
    }
}

@media (max-width: 480px) {
    .eduex-pay-options {
        margin: var(--edx-space-sm);
        border-radius: var(--edx-radius);
    }
    .eduex-pay-options__cards,
    .eduex-pay-options__processor {
        padding: var(--edx-space-sm);
    }
    .eduex-pay-options__cards-img {
        max-width: 180px;
    }
}

/* Respect reduced-motion: kill the hover lift. */
@media (prefers-reduced-motion: reduce) {
    .eduex-pay-options__cards,
    .eduex-pay-options__processor { transition: none; }
    .eduex-pay-options__cards:hover,
    .eduex-pay-options__processor:hover { transform: none; }
}