/**
 * MyTasbih Pro — Checkout Styles  (2026 redesign)
 *
 * A modern, fintech-grade checkout: calm warm-neutral canvas, two soft cards
 * (sticky order summary + payment), selectable payment-method cards, a single
 * clear CTA, a genuine "Powered by Stripe" trust lockup, and full dark-mode +
 * responsive coverage. The actual card/expiry/CVC fields are rendered inside
 * Stripe's own secure iframe — we only style everything around it.
 */

:root {
    --co-gold:        #d4af37;
    --co-gold-deep:   #c9a227;
    --co-ink:         #1a202c;
    --co-ink-soft:    #2d3748;
    --co-muted:       #667085;
    --co-faint:       #98a2b3;
    --co-line:        rgba(212, 175, 55, 0.14);
    --co-line-soft:   rgba(16, 24, 40, 0.08);
    --co-card-bg:     #ffffff;
    --co-card-radius: 18px;
    --co-shadow:      0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px -20px rgba(16, 24, 40, 0.18);
    --co-inset-bg:    rgba(212, 175, 55, 0.05);
}

.page-wrapper.dark {
    --co-ink:       #f7fafc;
    --co-ink-soft:  #e2e8f0;
    --co-muted:     #a0aec0;
    --co-faint:     #8b96a8;
    --co-line:      rgba(212, 175, 55, 0.18);
    --co-line-soft: rgba(255, 255, 255, 0.08);
    --co-card-bg:   rgba(26, 26, 46, 0.94);
    --co-shadow:    0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -22px rgba(0, 0, 0, 0.6);
    --co-inset-bg:  rgba(212, 175, 55, 0.06);
}

/* Hide WC newsletter / save-payment leftovers (legacy) */
.wc-block-checkout__newsletter-signup,
.mc4wp-checkbox,
.wc-block-components-checkbox.wc-block-checkout__save-payment-method-checkbox,
.wc-block-checkout__payment-method-saved-tokens,
.mc4wp-checkout-optin { display: none !important; }

/* ──────────────────────────────────────────────────────────
   Shared card chrome
   ────────────────────────────────────────────────────────── */
.co-summary,
.co-payment {
    background: var(--co-card-bg);
    border-radius: var(--co-card-radius);
    border: 1px solid var(--co-line);
    box-shadow: var(--co-shadow);
}

.co-summary { padding: 26px; position: sticky; top: 24px; }
.co-payment { padding: 30px; }

.co-summary__header,
.co-payment__header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--co-line);
}

.co-summary__header h2,
.co-payment__header h2 {
    font-family: 'Amiri', serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--co-ink);
    margin: 0;
    letter-spacing: 0.1px;
}

/* ──────────────────────────────────────────────────────────
   Order summary
   ────────────────────────────────────────────────────────── */
.co-summary__plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.03));
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.co-summary__plan-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.co-summary__plan-info strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
}

.co-summary__plan-desc {
    font-size: 12px;
    color: var(--co-muted);
    font-family: 'Inter', sans-serif;
}

.co-summary__plan-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--co-gold-deep);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.page-wrapper.dark .co-summary__plan-price { color: #e9cf86; }

/* Total */
.co-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px dashed var(--co-line);
    border-bottom: 1px dashed var(--co-line);
    margin-bottom: 8px;
}

.co-summary__total span:first-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--co-ink-soft);
    font-family: 'Inter', sans-serif;
}

.co-summary__total-amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--co-gold-deep);
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.page-wrapper.dark .co-summary__total-amount { color: #e9cf86; }

.co-summary__total-amount small {
    font-size: 12px;
    font-weight: 600;
    color: var(--co-faint);
    margin-left: 2px;
}

.co-summary__renews {
    font-size: 11.5px;
    color: var(--co-muted);
    margin: 0 0 20px;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

/* Includes list */
.co-summary__includes { margin-bottom: 18px; }

.co-summary__includes-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--co-faint);
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
}

.co-summary__includes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.co-summary__includes li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--co-ink-soft);
    font-family: 'Inter', sans-serif;
    line-height: 1.35;
}

.co-summary__includes li svg { flex-shrink: 0; }

/* Money-back guarantee */
.co-summary__guarantee {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--co-inset-bg);
    border: 1px solid var(--co-line);
    border-radius: 12px;
    padding: 13px 15px;
}

.co-summary__guarantee svg { flex-shrink: 0; margin-top: 1px; }

.co-summary__guarantee strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--co-ink);
    font-family: 'Inter', sans-serif;
    margin-bottom: 2px;
}

.co-summary__guarantee span {
    font-size: 11.5px;
    color: var(--co-muted);
    font-family: 'Inter', sans-serif;
    line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────
   Payment error banner
   ────────────────────────────────────────────────────────── */
.co-payment-error {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.co-payment-error svg { flex-shrink: 0; margin-top: 2px; }

.co-payment-error p {
    font-size: 13px;
    color: var(--co-ink-soft);
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.co-payment-error p strong {
    display: block;
    color: var(--co-ink);
    font-weight: 700;
    margin-bottom: 2px;
}

/* ──────────────────────────────────────────────────────────
   PMS form reset + fields
   ────────────────────────────────────────────────────────── */
.co-payment .pms-form,
.co-payment #pms-register-form,
.co-payment #pms-renew-subscription-form,
.co-payment .pms-register-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Collapse the redundant plan rendering inside the form — the Order Summary
   is the single source of truth for what's being purchased. The hidden
   <input name="subscription_plans"> still submits even when its wrapper is
   display:none, so the gateway stays intact. */
.co-payment .pms-subscription-plans,
.co-payment #pms-subscription-plans,
.co-payment .pms-renew-subscription__plans .pms-subscription-plan,
.co-payment .pms-subscription-plan-auto-renew { display: none !important; }

/* Keep the renew context sentence ("…active until July 30, 2026") but make it a
   calm, legible info note rather than a heavy block. */
.co-payment .pms-renew-subscription__plans > p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--co-muted);
    background: var(--co-inset-bg);
    border: 1px solid var(--co-line);
    border-radius: 12px;
    padding: 13px 16px;
    margin: 0 0 22px;
    font-family: 'Inter', sans-serif;
}

.co-payment .pms-renew-subscription__plans > p strong { color: var(--co-ink); }

.co-payment .pms-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--co-ink-soft);
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}

.co-payment .pms-form input[type="text"],
.co-payment .pms-form input[type="email"],
.co-payment .pms-form input[type="password"],
.co-payment .pms-form input[type="number"],
.co-payment .pms-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--co-line);
    border-radius: 11px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: var(--co-ink);
    background: var(--co-card-bg);
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    margin-bottom: 13px;
}

.co-payment .pms-form input::placeholder { color: var(--co-faint); }

.co-payment .pms-form input:focus,
.co-payment .pms-form select:focus {
    border-color: var(--co-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
    outline: none;
}

.page-wrapper.dark .co-payment .pms-form input[type="text"],
.page-wrapper.dark .co-payment .pms-form input[type="email"],
.page-wrapper.dark .co-payment .pms-form input[type="password"],
.page-wrapper.dark .co-payment .pms-form input[type="number"],
.page-wrapper.dark .co-payment .pms-form select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.22);
    color: #e2e8f0;
}

/* Dark-mode native <select> popup readability */
.page-wrapper.dark .co-payment .pms-form select option {
    background: #1a1a2e;
    color: #e2e8f0;
}

.co-payment .pms-form input[type="checkbox"] {
    width: auto;
    margin-right: 7px;
    accent-color: var(--co-gold);
    vertical-align: middle;
}

/* Field error list */
.co-payment .pms-form .pms-error,
.co-payment .pms-form ul.pms-errors,
.co-payment .pms-form .pms-field-error {
    background: rgba(220, 53, 69, 0.07);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 11px;
    padding: 11px 14px;
    color: #e2545f;
    font-size: 12px;
    margin-bottom: 13px;
    list-style: none;
}

/* ──────────────────────────────────────────────────────────
   Payment-method selector  ("Select a Payment Method")
   ────────────────────────────────────────────────────────── */
.co-payment .pms-paygates-holder { margin: 0 0 8px; }

.co-payment #pms-paygates-wrapper > h3,
.co-payment #pms-stripe-connect .pms-field-type-heading h3,
.co-payment .pms-paygate-extra-fields .pms-field-type-heading h3 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--co-ink);
    margin: 0 0 12px;
    letter-spacing: 0.1px;
}

.co-payment #pms-paygates-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.co-payment #pms-paygates-inner label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 14px;
    min-height: 70px;
    border: 1.5px solid var(--co-line);
    border-radius: 13px;
    background: var(--co-card-bg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
}

.co-payment #pms-paygates-inner label:hover {
    border-color: rgba(212, 175, 55, 0.45);
}

/* Selected state via :has() — the gold card ring is the selection cue, so the
   native radio is visually hidden (kept in the DOM for click + a11y). */
.co-payment #pms-paygates-inner label:has(input:checked) {
    border-color: var(--co-gold);
    background: var(--co-inset-bg);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.co-payment #pms-paygates-inner input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* The brand-logo strip PMS paints onto .pms-paygate-name ships with its own
   coloured border + the gateway name as hidden text — drop that inner "card"
   so the official logos sit cleanly, centered, inside our selectable card. */
.co-payment #pms-paygates-inner .pms-paygate-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* PMS Stripe-Connect / PayPal-Connect supply their own official brand marks
   inside the label — keep them tidy and consistently sized. */
.co-payment #pms-paygates-inner label img,
.co-payment #pms-paygates-inner .pms-paygate-name img {
    height: 22px;
    width: auto;
    display: block;
}

.co-payment #pms-gateways-not-available span {
    font-size: 12px;
    color: var(--co-muted);
    font-family: 'Inter', sans-serif;
}

/* Stripe / PayPal extra-field sections */
.co-payment .pms-paygate-extra-fields {
    list-style: none;
    padding: 0;
    margin: 0;
}

.co-payment .pms-paygate-extra-fields .pms-field { margin-bottom: 4px; }

/* Stripe Payment Element wrapper (Stripe's secure iframe lives inside this).
   The fields themselves are themed natively via Stripe's Appearance API — a
   branded light theme by default and a matching dark "night" theme when the
   site is in dark mode (see mytasbih_stripe_appearance_* in functions.php) — so
   the wrapper stays transparent and the inputs blend into whichever theme. */
.co-payment .StripeElement,
.co-payment #pms-stripe-payment-elements,
.co-payment #card-element {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 6px;
}

.co-payment .pms-spinner__holder { margin: 14px 0; }

/* ──────────────────────────────────────────────────────────
   Buttons  (CTA + secondary)
   ────────────────────────────────────────────────────────── */
/* Primary CTA — the one gold action.
   Gold is the DEFAULT for any PMS submit button so a flow-specific name can't
   fall through to the browser-default white slab (PMS names this button
   differently per flow: pms_register when logged-out, pms_new_subscription for
   a logged-in buyer, pms_renew_subscription / pms_paynow on retry, etc.).
   Only the back / utility buttons below opt out into the quiet ghost style. */
.co-payment .pms-form input[type="submit"],
.co-payment .pms-form button[type="submit"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 15px 24px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s, background 0.2s;
    /* Full-bleed block with symmetric margins — resets PMS's inherited
       `margin-right: 20px` (style-front-end.css) + inline-block default that
       pulled the full-width button off-centre on narrow screens. */
    margin: 16px 0 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(135deg, #d8b53f 0%, #c9a227 100%);
    color: #1a1a2e;
    box-shadow: 0 8px 22px -8px rgba(212, 175, 55, 0.65);
}

.co-payment .pms-form input[type="submit"]:not([name="pms_redirect_back"]):not([name="pms_renew_back"]):not(.pms-button-secondary):not(#pms-apply-discount):hover,
.co-payment .pms-form button[type="submit"]:not([name="pms_redirect_back"]):not([name="pms_renew_back"]):not(.pms-button-secondary):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(212, 175, 55, 0.7);
}

.co-payment .pms-form input[type="submit"]:active { transform: translateY(0); }

/* Secondary / back / utility buttons — quiet ghost, never a second gold slab */
.co-payment .pms-form input[name="pms_redirect_back"],
.co-payment .pms-form input[name="pms_renew_back"],
.co-payment .pms-form input#pms-apply-discount,
.co-payment .pms-form input.pms-button-secondary {
    background: transparent;
    color: var(--co-muted);
    border: 1.5px solid var(--co-line-soft);
    box-shadow: none;
    margin: 10px 0 0;
    font-weight: 600;
    font-size: 14px;
}

.co-payment .pms-form input[name="pms_redirect_back"]:hover,
.co-payment .pms-form input[name="pms_renew_back"]:hover {
    background: rgba(16, 24, 40, 0.03);
    color: var(--co-ink-soft);
    transform: none;
}

.page-wrapper.dark .co-payment .pms-form input[name="pms_redirect_back"]:hover,
.page-wrapper.dark .co-payment .pms-form input[name="pms_renew_back"]:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ──────────────────────────────────────────────────────────
   Hide Stripe mandate / "By providing your card information…" text.
   (It was unreadable in dark mode and duplicates our own privacy line.)
   ────────────────────────────────────────────────────────── */
.co-payment .pms-form .StripeElement + p,
.co-payment .pms-form .pms-stripe-mandate,
.co-payment .pms-form [class*="mandate"],
.co-payment .pms-form .pms-form-field-stripe-placeholder + p,
.co-payment #pms-stripe-mandate-acceptance,
.co-payment .pms-stripe-mandate-acceptance {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────
   Privacy line
   ────────────────────────────────────────────────────────── */
.co-privacy {
    font-size: 11.5px;
    color: var(--co-faint);
    text-align: center;
    margin: 18px 0 0;
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

.co-privacy a { color: var(--co-gold-deep); text-decoration: underline; }

/* ──────────────────────────────────────────────────────────
   Secure trust bar (bottom of payment card)
   ────────────────────────────────────────────────────────── */
.co-payment__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--co-line);
}

.co-payment__trust-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.co-payment__trust-label {
    font-size: 11px;
    color: var(--co-faint);
    font-family: 'Inter', sans-serif;
}

.co-trust-stripe-logo { display: block; }
.page-wrapper.dark .co-trust-stripe-logo path { fill: #8b85ff; }

/* ──────────────────────────────────────────────────────────
   Existing-member subscription panel
   Shown by [pms-register] when the logged-in user already holds a
   subscription to this plan (renew / change / abandon). PMS emits a bare
   two-column <table>; this gives it the same fintech-card polish as the
   order summary: clean label/value rows, a status pill, and the actions as
   real buttons instead of cramped underlined links.
   ────────────────────────────────────────────────────────── */
.co-payment .pms-account-subscription-details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-family: 'Inter', sans-serif;
}

.co-payment .pms-account-subscription-details-table td {
    padding: 13px 0;
    border-bottom: 1px solid var(--co-line);
    font-size: 13.5px;
    vertical-align: middle;
    line-height: 1.4;
}

/* Label cell (first) — muted; value cell (second) — strong, aligned to row end. */
.co-payment .pms-account-subscription-details-table td:first-child {
    color: var(--co-muted);
    font-weight: 500;
    white-space: nowrap;
    padding-inline-end: 16px;
}

.co-payment .pms-account-subscription-details-table td:last-child {
    color: var(--co-ink);
    font-weight: 600;
    text-align: end;
    width: 100%;
}

.co-payment .pms-account-subscription-details-table tr:last-child td {
    border-bottom: none;
}

/* Status — coloured value text with a leading status dot, keyed off the
   status-<state> class PMS sets on the value cell. (No display change on the
   <td>, so the two-column row layout stays intact.) */
.co-payment .pms-account-subscription-details-table td[class^="status-"],
.co-payment .pms-account-subscription-details-table td[class*=" status-"] {
    font-weight: 700;
}

.co-payment .pms-account-subscription-details-table td[class^="status-"]::before,
.co-payment .pms-account-subscription-details-table td[class*=" status-"]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-inline-end: 7px;
    vertical-align: middle;
}

.co-payment .pms-account-subscription-details-table td.status-active { color: #1f9d57; }
.co-payment .pms-account-subscription-details-table td.status-canceled,
.co-payment .pms-account-subscription-details-table td.status-expired,
.co-payment .pms-account-subscription-details-table td.status-abandoned { color: #c05f1d; }
.co-payment .pms-account-subscription-details-table td.status-pending { color: #a9851a; }

.page-wrapper.dark .co-payment .pms-account-subscription-details-table td.status-active { color: #5fd394; }
.page-wrapper.dark .co-payment .pms-account-subscription-details-table td.status-canceled,
.page-wrapper.dark .co-payment .pms-account-subscription-details-table td.status-expired,
.page-wrapper.dark .co-payment .pms-account-subscription-details-table td.status-abandoned { color: #f0a564; }
.page-wrapper.dark .co-payment .pms-account-subscription-details-table td.status-pending { color: #e9cf86; }

/* Actions row — chips/buttons that wrap neatly toward the row end. */
.co-payment .pms-account-subscription-details-table__actions td:last-child {
    padding-top: 18px;
}

.co-payment .pms-account-subscription-action-link {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 8px;
    margin-bottom: 6px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1.5px solid var(--co-line-soft);
    color: var(--co-ink-soft);
    background: var(--co-card-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.co-payment .pms-account-subscription-action-link:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: var(--co-inset-bg);
    transform: translateY(-1px);
}

/* Renew is the primary action — the single gold button, mirroring the CTA. */
.co-payment .pms-account-subscription-action-link__renew,
.co-payment .pms-account-subscription-action-link__retry {
    background: linear-gradient(135deg, #d8b53f 0%, #c9a227 100%);
    color: #1a1a2e;
    border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(212, 175, 55, 0.6);
}

.co-payment .pms-account-subscription-action-link__renew:hover,
.co-payment .pms-account-subscription-action-link__retry:hover {
    background: linear-gradient(135deg, #ddbb47 0%, #cea829 100%);
    border-color: transparent;
    box-shadow: 0 10px 20px -8px rgba(212, 175, 55, 0.7);
}

/* Destructive actions read quietly red. */
.co-payment .pms-account-subscription-action-link__cancel,
.co-payment .pms-account-subscription-action-link__abandon {
    color: #d4545f;
    border-color: rgba(220, 53, 69, 0.28);
    background: transparent;
}

.co-payment .pms-account-subscription-action-link__cancel:hover,
.co-payment .pms-account-subscription-action-link__abandon:hover {
    background: rgba(220, 53, 69, 0.07);
    border-color: rgba(220, 53, 69, 0.45);
}

/* ──────────────────────────────────────────────────────────
   Guest auth gate (reuses shared .auth-shell look)
   ────────────────────────────────────────────────────────── */
.co-auth-shell {
    align-self: center;
    width: 100%;
    max-width: 860px;
    margin: 12px auto 44px;
}

.co-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.co-auth-gate__plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 13px 16px;
    border-radius: 12px;
    text-align: left;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04));
    border: 1px solid rgba(212, 175, 55, 0.28);
}

.co-auth-gate__plan-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--co-ink);
}

.co-auth-gate__plan-price {
    font-family: 'Amiri', serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--co-ink);
    white-space: nowrap;
}

.page-wrapper.dark .co-auth-gate__plan-price { color: #e9cf86; }

.co-auth-gate__plan-price small {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--co-muted);
}

/* ──────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .co-summary { position: static; padding: 22px; }
    .co-payment { padding: 22px; }
    .co-summary__total-amount { font-size: 23px; }
}

@media (max-width: 480px) {
    .co-summary { padding: 18px; border-radius: 16px; }
    .co-payment { padding: 18px; border-radius: 16px; }
    .co-payment #pms-paygates-inner { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 360px) {
    .co-summary,
    .co-payment { padding: 15px; }
    .co-summary__plan { flex-wrap: wrap; }
}