/* =============================================================================
   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: 10px 14px !important;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    background: var(--ab-bg-alt);
}

.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.
   ============================================================================= */

/* Section wrapper — shown/hidden by JS when token radio changes */
.ab-ht-new-card-section {
    margin-top: 4px;
}

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

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

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

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

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

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

/* ── Card brand icons ────────────────────────────────────────────────────── */

.ab-ht-token-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    background: #fff;
    color: #555;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
    overflow: hidden;
}

.ab-ht-token-card-icon::before              { content: 'CARD'; color: #888; font-size: 9px; }
.ab-ht-token-card-icon--visa::before        { content: 'VISA'; color: #1a1f71; font-size: 11px; font-weight: 900; letter-spacing: -.5px; }
.ab-ht-token-card-icon--mastercard          { background: #252525; }
.ab-ht-token-card-icon--mastercard::before  { content: 'MC'; color: #fff; font-size: 11px; }
.ab-ht-token-card-icon--amex                { background: #007bc1; }
.ab-ht-token-card-icon--amex::before        { content: 'AMEX'; color: #fff; font-size: 9px; }
.ab-ht-token-card-icon--discover            { background: #f76f20; }
.ab-ht-token-card-icon--discover::before    { content: 'DISC'; color: #fff; font-size: 9px; }
.ab-ht-token-card-icon--jcb                 { background: #003087; }
.ab-ht-token-card-icon--jcb::before         { content: 'JCB'; color: #fff; font-size: 10px; }
.ab-ht-token-card-icon--diners              { background: #004b87; }
.ab-ht-token-card-icon--diners::before      { content: 'DC'; color: #fff; font-size: 10px; }
.ab-ht-token-card-icon--unionpay            { background: #c0392b; }
.ab-ht-token-card-icon--unionpay::before    { content: 'UP'; color: #fff; font-size: 10px; }
.ab-ht-token-card-icon--new                 { border-style: dashed; border-color: var(--ab-accent); background: transparent; }
.ab-ht-token-card-icon--new::before         { content: '+'; font-size: 20px; font-weight: 300; color: var(--ab-accent); }

/* Dark mode overrides */
body[data-ab-scheme="dark"] .ab-ht-token-card-icon:not([class*="--visa"]):not([class*="--mastercard"]):not([class*="--amex"]):not([class*="--discover"]):not([class*="--jcb"]):not([class*="--diners"]):not([class*="--unionpay"]):not([class*="--new"]) {
    background: #333;
    border-color: #555;
}
body[data-ab-scheme="dark"] .ab-ht-token-card-icon::before           { color: #ccc; }
body[data-ab-scheme="dark"] .ab-ht-token-card-icon--visa::before     { color: #6b8cff; }
body[data-ab-scheme="dark"] .ab-ht-token-card-icon--new              { border-color: var(--ab-accent); }
body[data-ab-scheme="dark"] .ab-ht-token-card-icon--new::before      { color: var(--ab-accent); }

@media (prefers-color-scheme: dark) {
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .ab-ht-token-card-icon:not([class*="--visa"]):not([class*="--mastercard"]):not([class*="--amex"]):not([class*="--discover"]):not([class*="--jcb"]):not([class*="--diners"]):not([class*="--unionpay"]):not([class*="--new"]) {
        background: #333;
        border-color: #555;
    }
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .ab-ht-token-card-icon::before       { color: #ccc; }
    body:not([data-ab-scheme="light"]):not([data-ab-scheme="custom"]) .ab-ht-token-card-icon--visa::before { color: #6b8cff; }
}

.ab-ht-token-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    color: var(--ab-text);
}

.ab-ht-token-exp {
    font-size: 12px;
    color: var(--ab-text-muted);
}

.ab-ht-token-new .ab-ht-token-label:hover {
    background: var(--ab-accent-hover);
}

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

/* ── Selected token highlight (JS adds class on radio check) ─────────────── */
.ab-ht-token-item:has(.ab-ht-token-radio:checked) {
    background: var(--ab-accent-bg) !important;
}

/* ── New-card section divider ────────────────────────────────────────────── */
.ab-ht-new-card-section {
    padding-top: 4px;
}

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

/* JS-driven selected state (fallback for browsers without :has() support) */
.ab-ht-token-item.ab-ht-token-item--selected {
    background: var(--ab-accent-bg) !important;
}