/* =============================================================================
   accept.blue Payment Gateway v2 — Classic Checkout Styles
   Covers: hosted tokenization form, card inputs, iframe, button, error,
           loader, saved tokens, sandbox notice, 3DS overlay fix.
   ============================================================================= */

/* =============================================================================
   1. CSS custom properties
   ============================================================================= */

:root,
body[data-ab-scheme="light"] {
    --ab-bg:            #ffffff;
    --ab-bg-alt:        #f8f9fa;
    --ab-bg-input:      #f7f7f7;
    --ab-text:          #1d2327;
    --ab-text-muted:    #6b7280;
    --ab-text-checked:  #1d4ed8;
    --ab-border:        #d0d5dd;
    --ab-border-input:  #d0d5dd;
    --ab-accent:        #2271b1;
    --ab-accent-bg:     #f0f6ff;
    --ab-accent-hover:  #e8f2ff;
    --ab-accent-ring:   rgba(34,113,177,.15);
    --ab-btn-bg:        #2271b1;
    --ab-btn-hover:     #135e96;
    --ab-btn-text:      #ffffff;
    --ab-btn-shadow:    0 2px 8px rgba(0,0,0,.12);
    --ab-notice-bg:     #fffbeb;
    --ab-notice-border: #fcd34d;
    --ab-notice-text:   #92400e;
    --ab-error:         #cc1818;
    --ab-ht-error:      #cc1818; /* alias for components shared with order-pay page */
    --ab-radius:        6px;
    --ab-shadow-focus:  0 0 0 3px rgba(34,113,177,.18);
}

body[data-ab-scheme="dark"] {
    --ab-bg:            #1e1e1e;
    --ab-bg-alt:        #262626;
    --ab-bg-input:      #2a2a2a;
    --ab-text:          #e8e8e8;
    --ab-text-muted:    #9ca3af;
    --ab-text-checked:  #7db8e8;
    --ab-border:        #3f3f3f;
    --ab-border-input:  #4a4a4a;
    --ab-accent:        #5b9bd5;
    --ab-accent-bg:     #1a2d42;
    --ab-accent-hover:  #1f3550;
    --ab-accent-ring:   rgba(91,155,213,.2);
    --ab-btn-bg:        #2563eb;
    --ab-btn-hover:     #1d4ed8;
    --ab-btn-text:      #ffffff;
    --ab-btn-shadow:    0 2px 8px rgba(0,0,0,.4);
    --ab-notice-bg:     #3a2e00;
    --ab-notice-border: #665200;
    --ab-notice-text:   #fcd34d;
    --ab-error:         #f87171;
}

body[data-ab-scheme="custom"] {
    --ab-bg:           var(--ab-custom-bg,   #f7f7f7);
    --ab-bg-alt:       var(--ab-custom-bg,   #f7f7f7);
    --ab-bg-input:     var(--ab-custom-bg,   #f7f7f7);
    --ab-text:         var(--ab-custom-text, #333333);
    --ab-text-muted:   var(--ab-custom-text, #333333);
    --ab-border:       var(--ab-custom-border,#cccccc);
    --ab-border-input: var(--ab-custom-border,#cccccc);
}

@media (prefers-color-scheme: dark) {
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) {
        --ab-bg:            #1e1e1e;
        --ab-bg-alt:        #262626;
        --ab-bg-input:      #2a2a2a;
        --ab-text:          #e8e8e8;
        --ab-text-muted:    #9ca3af;
        --ab-text-checked:  #7db8e8;
        --ab-border:        #3f3f3f;
        --ab-border-input:  #4a4a4a;
        --ab-accent:        #5b9bd5;
        --ab-accent-bg:     #1a2d42;
        --ab-accent-hover:  #1f3550;
        --ab-accent-ring:   rgba(91,155,213,.2);
        --ab-btn-bg:        #2563eb;
        --ab-btn-hover:     #1d4ed8;
        --ab-btn-text:      #ffffff;
        --ab-btn-shadow:    0 2px 8px rgba(0,0,0,.4);
        --ab-notice-bg:     #3a2e00;
        --ab-notice-border: #665200;
        --ab-notice-text:   #fcd34d;
        --ab-error:         #f87171;
    }
}

/* =============================================================================
   2. Hosted tokenization wrapper — the sliding panel that appears when
      the gateway is selected on the classic checkout page
   ============================================================================= */

#acceptblue-v2-hosted-tokenization-form {
    /* Form lives inside .payment_method_acceptbluev2 .payment_box —
       WooCommerce handles show/hide when the payment radio changes.
       No display:none or manual JS toggling needed. */
    padding: 12px 0 0;
    box-sizing: border-box;
}

/* Intro label */
#acceptblue-v2-hosted-tokenization-form .ab-ht-new-card-label {
    font-size: 14px;
    color: var(--ab-text-muted);
    margin: 0 0 14px;
}

/* =============================================================================
   3. Card-name input field (ab-ht-field wrapper + acceptblue-ht-input)
   ============================================================================= */

.ab-ht-field {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
    float: none;
    width: 100%;
}

/* Use high-specificity selector to override WooCommerce/theme label rules
   that may set display:none, display:inline, or inherit invisible colors
   inside the payment method form area. */
#acceptblue-v2-hosted-tokenization-form .ab-ht-field__label,
.ab-ht-field .ab-ht-field__label {
    display: block !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ab-text, #1d2327) !important;
    line-height: 1.4;
    margin: 0 0 4px;
    float: none;
    width: auto;
    text-align: left;
}

.acceptblue-ht-input,
input.acceptblue-ht-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ab-text);
    background: var(--ab-bg-input);
    border: 2px solid var(--ab-border-input);
    border-radius: var(--ab-radius);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
    /* Reset WooCommerce theme overrides */
    height: auto !important;
    margin: 0 0 14px !important;
    max-width: 100% !important;
}

.acceptblue-ht-input:focus,
input.acceptblue-ht-input:focus {
    border-color: var(--ab-accent) !important;
    box-shadow: var(--ab-shadow-focus) !important;
    background: var(--ab-bg) !important;
}

.acceptblue-ht-input::placeholder {
    color: var(--ab-text-muted);
    opacity: 1;
}

/* =============================================================================
   4. Iframe container
   ============================================================================= */

#acceptblue-ht-iframe-container {
    width: 100%;
    min-height: 90px;
    margin: 0 0 14px;
    /* Remove the inline height:10% that WooCommerce injects */
    height: auto !important;
}

/* =============================================================================
   5. Error message
   ============================================================================= */

#acceptblue-ht-error-message {
    margin: 0 0 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ab-error);
}

#acceptblue-ht-error-message:empty { display: none; }

#acceptblue-ht-error-message .woocommerce-error {
    border-color: var(--ab-error);
}

/* =============================================================================
   6. Place Order button
   ============================================================================= */

#acceptblue-ht-charge,
button#acceptblue-ht-charge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ab-btn-text) !important;
    background: var(--ab-btn-bg) !important;
    border: none !important;
    border-radius: var(--ab-radius) !important;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: var(--ab-btn-shadow);
    text-decoration: none;
    white-space: nowrap;
    margin-top: 4px;
}

#acceptblue-ht-charge:hover,
button#acceptblue-ht-charge:hover {
    background: var(--ab-btn-hover) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}

#acceptblue-ht-charge:active,
button#acceptblue-ht-charge:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

#acceptblue-ht-charge:focus-visible,
button#acceptblue-ht-charge:focus-visible {
    outline: 3px solid var(--ab-accent);
    outline-offset: 2px;
}

/* =============================================================================
   7. Ajax loader overlay
   ============================================================================= */

#acceptblue-hosted-token-ajax-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-ab-scheme="dark"] #acceptblue-hosted-token-ajax-loader {
    background: rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
    body:not([data-ab-scheme="light"]) #acceptblue-hosted-token-ajax-loader {
        background: rgba(0,0,0,.55);
    }
}

#acceptblue-hosted-token-ajax-loader::before {
    font-family: "dashicons";
    content: "\f531";
    font-size: 48px;
    color: var(--ab-accent);
    animation: ab-checkout-spin 1s linear infinite;
}

@keyframes ab-checkout-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =============================================================================
   8. Sandbox / test-mode notice
   ============================================================================= */

.acceptbluev2-sandbox-notice,
.acceptblue-test-cards-notice {
    background: var(--ab-notice-bg);
    border: 1px solid var(--ab-notice-border);
    border-left: 4px solid var(--ab-notice-border);
    border-radius: var(--ab-radius);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ab-notice-text);
}

.acceptbluev2-sandbox-notice code {
    background: rgba(0,0,0,.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 12px;
}

/* =============================================================================
   9. Saved payment tokens list
   ============================================================================= */

.acceptbluev2-saved-tokens {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
}

.acceptbluev2-token-option {
    margin: 0;
    padding: 0;
}

.acceptbluev2-token-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    cursor: pointer;
    font-size: 14px;
    color: var(--ab-text);
    background: var(--ab-bg);
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none;
}

.acceptbluev2-token-label:hover {
    border-color: var(--ab-accent);
    background: var(--ab-accent-hover);
}

.acceptbluev2-token-label input[type="radio"] {
    width: auto !important;
    margin: 0 !important;
    accent-color: var(--ab-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.acceptbluev2-token-label input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--ab-text-checked);
}

.acceptbluev2-token-option--selected .acceptbluev2-token-label {
    border-color: var(--ab-accent);
    background: var(--ab-accent-bg);
    box-shadow: 0 0 0 2px var(--ab-accent-ring);
}

.acceptbluev2-token-new .acceptbluev2-token-label {
    border-style: dashed;
    color: var(--ab-text-muted);
    background: var(--ab-bg-alt);
}

.acceptbluev2-token-new .acceptbluev2-token-label:hover {
    border-color: var(--ab-accent);
    background: var(--ab-accent-hover);
    border-style: solid;
}

/* =============================================================================
   10. Save-to-account checkbox row
   ============================================================================= */

.acceptbluev2-save-card-row {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.acceptbluev2-save-card-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ab-text);
    user-select: none;
}

.acceptbluev2-save-card-label input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    accent-color: var(--ab-accent);
    flex-shrink: 0;
    cursor: pointer;
}

/* =============================================================================
   11. Classic checkout card form (non-hosted-tokenization path)
   ============================================================================= */

.woocommerce-acceptblue-hidden { display: none; }

.acceptbluev2-card-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acceptbluev2-row {
    display: flex;
    gap: 12px;
}

.acceptbluev2-expiry,
.acceptbluev2-cvv {
    flex: 1;
}

.acceptbluev2-card-form input {
    padding: 10px 12px;
    border: 2px solid var(--ab-border-input);
    border-radius: var(--ab-radius);
    font-size: 14px;
    background: var(--ab-bg-input);
    color: var(--ab-text);
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.acceptbluev2-card-form input:focus {
    border-color: var(--ab-accent);
    box-shadow: var(--ab-shadow-focus);
}

/* =============================================================================
   12. 3DS Challenge Window — z-index fix for WC Blocks overlay
   ============================================================================= */

body > div[id*="acceptblue"],
body > div[class*="acceptblue"],
body > div[id*="ab-"],
body > div[class*="ab-3ds"],
body > div[class*="challenge"],
body > div[class*="threeds"],
body > div[class*="threeDS"] {
    z-index: 999999 !important;
}

.wc-block-components-loading-mask {
    z-index: 9999 !important;
}

/* =============================================================================
   13. Saved token list — ab-ht-* classes (render_hosted_tokenization_form)
   These mirror the order-pay page styles so the checkout page token list
   renders correctly when render_hosted_tokenization_form() is used.
   ============================================================================= */

/* =============================================================================
   13. Saved token list — ab-ht-* (classic checkout / render_hosted_tokenization_form)
   Mirrors acceptblue-hosted-token-iframe.css using --ab-* variables.
   ============================================================================= */

.ab-ht-new-card-section { margin-top: 4px; }

.ab-ht-new-card-section .ab-ht-new-card-label {
    font-size: 13px;
    color: var(--ab-text-muted);
    margin: 0 0 12px;
}

.ab-ht-saved-tokens { margin: 0 0 16px; }

.ab-ht-saved-tokens__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ab-text-muted);
    margin: 0 0 8px;
}

.ab-ht-token-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--ab-border);
    border-radius: var(--ab-radius);
    overflow: hidden;
}

.ab-ht-token-item {
    margin: 0;
    border-bottom: 1px solid var(--ab-border);
    background: var(--ab-bg);
    transition: background .12s;
}

.ab-ht-token-item:last-child  { border-bottom: none; }
.ab-ht-token-item:hover       { background: var(--ab-bg); }

.ab-ht-token-item--default,
.ab-ht-token-item:has(.ab-ht-token-radio:checked),
.ab-ht-token-item--selected {
    background: var(--ab-bg) !important;
}

.ab-ht-token-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: var(--ab-text);
    margin: 0;
    user-select: none;
}

.ab-ht-token-item--selected .ab-ht-token-label,
.ab-ht-token-item:has(.ab-ht-token-radio:checked) .ab-ht-token-label {
    font-weight: 500;
}

.ab-ht-token-radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ab-accent);
    cursor: pointer;
    margin: 0 !important;
}

.ab-ht-token-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 26px;
    border: 1px solid var(--ab-border);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    background: var(--ab-bg);
    color: var(--ab-text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
    overflow: hidden;
}

.ab-ht-token-card-icon::before             { content: 'CARD'; }
.ab-ht-token-card-icon--visa::before       { content: 'VISA'; font-weight: 900; font-size: 10px; letter-spacing: -.5px; }
.ab-ht-token-card-icon--mastercard::before { content: 'MC'; font-size: 11px; }
.ab-ht-token-card-icon--amex::before       { content: 'AMEX'; font-size: 8px; }
.ab-ht-token-card-icon--discover::before   { content: 'DISC'; font-size: 8px; }
.ab-ht-token-card-icon--jcb::before        { content: 'JCB'; font-size: 10px; }
.ab-ht-token-card-icon--diners::before     { content: 'DC'; font-size: 10px; }
.ab-ht-token-card-icon--unionpay::before   { content: 'UP'; font-size: 10px; }
.ab-ht-token-card-icon--new                { background: transparent; border-style: dashed; border-color: var(--ab-accent); }
.ab-ht-token-card-icon--new::before        { content: '+'; font-size: 18px; font-weight: 300; color: var(--ab-accent); }

.ab-ht-token-card-info {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    color: var(--ab-text);
}

.ab-ht-token-card-info strong {
    font-weight: 500;
    flex-shrink: 0;
}

.ab-ht-token-exp {
    font-size: 13px;
    color: var(--ab-text-muted);
    flex-shrink: 0;
}

.ab-ht-token-new .ab-ht-token-card-info {
    color: var(--ab-accent);
    font-weight: 500;
}

/* =============================================================================
   Block Checkout — Card Form
   Styles for .acceptbluev2-card-form and all child elements rendered by the
   AcceptBlueV2Form React component in acceptblue-hosted-token-block-checkout.js
   ============================================================================= */

/* ── Wrapper ────────────────────────────────────────────────────────────────── */

.acceptbluev2-wrapper {
    padding: 4px 0 2px;
}

/* ── Card form container ────────────────────────────────────────────────────── */

.acceptbluev2-card-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 12px 0 4px;
    padding: 20px;
    background: var(--ab-bg-alt, #f8f9fa);
    border: 1px solid var(--ab-border, #d0d5dd);
    border-radius: 8px;
}

/* ── Field rows ─────────────────────────────────────────────────────────────── */

.acceptbluev2-card-form .ab-block-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.acceptbluev2-card-form .ab-block-field:last-child {
    margin-bottom: 0;
}

/* Row for Expiry + CVV side by side */
.acceptbluev2-card-form .ab-block-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */

.acceptbluev2-card-form label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ab-text, #1d2327) !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0 0 6px !important;
    line-height: 1.4;
}

/* ── Inputs ─────────────────────────────────────────────────────────────────── */

.acceptbluev2-card-form input[type="text"],
.acceptbluev2-card-form input[type="password"],
.acceptbluev2-card-form input[type="tel"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    color: var(--ab-text, #1d2327) !important;
    background: var(--ab-bg, #ffffff) !important;
    border: 1.5px solid var(--ab-border-input, #d0d5dd) !important;
    border-radius: 6px !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.acceptbluev2-card-form input[type="text"]:focus,
.acceptbluev2-card-form input[type="password"]:focus,
.acceptbluev2-card-form input[type="tel"]:focus {
    border-color: var(--ab-accent, #2271b1) !important;
    box-shadow: 0 0 0 3px var(--ab-accent-ring, rgba(34,113,177,.15)) !important;
    background: var(--ab-bg, #ffffff) !important;
}

.acceptbluev2-card-form input::placeholder {
    color: var(--ab-text-muted, #9ca3af) !important;
    opacity: 1 !important;
}

/* ── Divider between card number and expiry/cvv row ────────────────────────── */

.acceptbluev2-card-form .ab-block-divider {
    height: 1px;
    background: var(--ab-border, #d0d5dd);
    margin: 14px 0;
    opacity: .5;
}

/* ── Saved tokens list (block checkout) ─────────────────────────────────────── */

.acceptbluev2-saved-tokens {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 12px;
}

.acceptbluev2-token-option {
    border: 1.5px solid var(--ab-border, #d0d5dd);
    border-radius: 6px;
    background: var(--ab-bg, #ffffff);
    transition: border-color .15s, background .15s;
    overflow: hidden;
}

.acceptbluev2-token-option:hover {
    border-color: var(--ab-accent, #2271b1);
    background: var(--ab-accent-hover, #e8f2ff);
}

.acceptbluev2-token-option--selected {
    border-color: var(--ab-accent, #2271b1) !important;
    background: var(--ab-accent-bg, #f0f6ff) !important;
}

.acceptbluev2-token-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--ab-text, #1d2327) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.acceptbluev2-token-label input[type="radio"] {
    margin: 0 !important;
    flex-shrink: 0;
    accent-color: var(--ab-accent, #2271b1);
    width: 16px !important;
    height: 16px !important;
}

.acceptbluev2-token-option--selected .acceptbluev2-token-label {
    color: var(--ab-text-checked, #1d4ed8) !important;
    font-weight: 500 !important;
}

/* ── Save card checkbox row ──────────────────────────────────────────────────── */

.acceptbluev2-save-card-row {
    margin: 12px 0 4px;
}

.acceptbluev2-save-card-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: normal !important;
    color: var(--ab-text, #1d2327) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.acceptbluev2-save-card-label input[type="checkbox"] {
    margin: 0 !important;
    accent-color: var(--ab-accent, #2271b1);
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
}

/* ── Sandbox / test mode notice (block checkout) ─────────────────────────────── */

.acceptblue-test-cards-notice {
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 14px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-family: monospace !important;
}

/* ── Dark mode overrides (block card form) ──────────────────────────────────── */

body[data-ab-scheme="dark"] .acceptbluev2-card-form {
    background: var(--ab-bg-alt, #262626);
    border-color: var(--ab-border, #3f3f3f);
}

body[data-ab-scheme="dark"] .acceptbluev2-token-option {
    background: var(--ab-bg, #1e1e1e);
    border-color: var(--ab-border, #3f3f3f);
}

body[data-ab-scheme="dark"] .acceptbluev2-token-option:hover {
    background: var(--ab-accent-hover, #1f3550);
    border-color: var(--ab-accent, #5b9bd5);
}

body[data-ab-scheme="dark"] .acceptbluev2-token-option--selected {
    background: var(--ab-accent-bg, #1a2d42) !important;
    border-color: var(--ab-accent, #5b9bd5) !important;
}

@media (prefers-color-scheme: dark) {
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .acceptbluev2-card-form {
        background: var(--ab-bg-alt, #262626);
        border-color: var(--ab-border, #3f3f3f);
    }
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .acceptbluev2-token-option {
        background: var(--ab-bg, #1e1e1e);
        border-color: var(--ab-border, #3f3f3f);
    }
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .acceptbluev2-token-option--selected {
        background: var(--ab-accent-bg, #1a2d42) !important;
        border-color: var(--ab-accent, #5b9bd5) !important;
    }
}