/**
 * CardCom OpenFields - modern Stripe-like payment card.
 * EastVisa design tokens, RTL, dark mode, mobile bottom-sheet.
 */

/* ------ Tokens (with sensible fallbacks) ------ */
.avf-of-card {
    --avf-of-primary:    var(--ev-primary, #2036A4);
    --avf-of-secondary:  var(--ev-secondary, #8C95FF);
    --avf-of-success:    var(--ev-success, #16a34a);
    --avf-of-danger:     var(--ev-danger,  #dc2626);
    --avf-of-bg:         #ffffff;
    --avf-of-text:       #0f172a;
    --avf-of-muted:      #64748b;
    --avf-of-border:     #e5e7eb;
    --avf-of-border-strong: #cbd5e1;
    --avf-of-bg-soft:    #f8fafc;
    --avf-of-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
    --avf-of-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --avf-of-shadow-lg:  0 20px 60px rgba(15, 23, 42, 0.12), 0 6px 16px rgba(15, 23, 42, 0.06);
    --avf-of-focus-ring: 0 0 0 4px rgba(140, 149, 255, 0.22);
}

html[data-theme="dark"] .avf-of-card {
    --avf-of-bg:         #0f172a;
    --avf-of-text:       #f1f5f9;
    --avf-of-muted:      #94a3b8;
    --avf-of-border:     #1e293b;
    --avf-of-border-strong: #334155;
    --avf-of-bg-soft:    #1e293b;
    --avf-of-shadow-sm:  none;
    --avf-of-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --avf-of-shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ------ Card container ------ */
.avf-of-card {
    max-width: 520px;
    margin: 24px auto;
    padding: 28px 28px 24px;
    background: var(--avf-of-bg);
    color: var(--avf-of-text);
    border: 1px solid var(--avf-of-border);
    border-radius: 16px;
    box-shadow: var(--avf-of-shadow-md);
    font-family: 'Rubik', system-ui, -apple-system, sans-serif;
    direction: rtl;
    box-sizing: border-box;
}

/* Backdrop is invisible on desktop; only shows in mobile bottom-sheet mode. */
.avf-of-backdrop {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ------ Header ------ */
.avf-of-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.avf-of-card-head-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--avf-of-text);
    letter-spacing: -0.01em;
}

.avf-of-card-head-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--avf-of-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ------ Security + brands row ------ */
.avf-of-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--avf-of-border);
}

.avf-of-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--avf-of-muted);
    line-height: 1;
}

.avf-of-badge svg {
    color: var(--avf-of-success);
    flex-shrink: 0;
}

.avf-of-brands {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.avf-of-brand {
    width: 32px;
    height: 20px;
    border-radius: 3px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.avf-of-brand:hover {
    transform: translateY(-1px);
}

/* ------ Form ------ */
.avf-of-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.avf-of-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.avf-of-field label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--avf-of-text);
    letter-spacing: 0.01em;
}

.avf-of-field input[type="text"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--avf-of-border-strong);
    border-radius: 10px;
    background: var(--avf-of-bg);
    color: var(--avf-of-text);
    font-family: inherit;
    /* MUST be >= 16px to prevent iOS Safari auto-zoom on focus.
       Using px (not rem) because the parent's root font-size may be
       smaller than 16px, making `1rem` insufficient on some themes. */
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    box-shadow: var(--avf-of-shadow-sm);
}

.avf-of-field input[type="text"]:hover {
    border-color: #94a3b8;
}

.avf-of-field input[type="text"]:focus,
.avf-of-field input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--avf-of-primary);
    box-shadow: var(--avf-of-focus-ring);
}

.avf-of-field-error {
    font-size: 0.78rem;
    color: var(--avf-of-danger);
    margin-top: 2px;
    line-height: 1.4;
}

/* Card number iframe sits where input would.
   NOTE iOS Safari quirks: dropping `overflow: hidden` from the iframe
   itself (iOS can blank the iframe content when parent has
   -webkit-overflow-scrolling); min-height ensures the iframe always
   has visible dimensions even if native input rendering is taller
   than 46px on some devices.
   v3.28.4: !important on height/min-height — iOS Safari was again
   computing iframe height as 0 inside the overflow-y: auto bottom
   sheet container despite the inline style. Forcing min-height
   via cascade guarantees a non-zero render box. */
.avf-of-field--card iframe {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    display: block !important;
    border-radius: 10px;
    background: #fff;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Two-column row (default — used elsewhere) */
.avf-of-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Three-column row for expiration (month + year + CVV).
   Month/year inputs need less width than the CVV iframe. */
.avf-of-row--exp {
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 10px;
}

.avf-of-field--cvv iframe {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    display: block !important;
    border-radius: 10px;
    background: #fff;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Center MM/YY inputs since they're short numbers in narrow columns.
   Targets only inputs inside the exp row to avoid affecting cardholder ID. */
.avf-of-row--exp .avf-of-field input[type="text"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

/* ------ Pay button ------ */
.avf-of-pay-btn {
    position: relative;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--avf-of-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(32, 54, 164, 0.28), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    letter-spacing: 0.01em;
    /* Center the text label. !important defeats themes that target buttons
       inside the page editor wrapper (Elementor, Hello, Astra etc. all
       have rules that win over our class specificity). The spinner span
       uses position:absolute inset:0 to overlay separately. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
}
.avf-of-pay-btn-text,
.avf-of-pay-btn .avf-of-pay-btn-text {
    display: inline-block !important;
    text-align: center !important;
    line-height: 1 !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    color: inherit !important;
}

.avf-of-pay-btn:hover {
    background: #1a2d8a;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(32, 54, 164, 0.36);
}

.avf-of-pay-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(32, 54, 164, 0.28);
}

.avf-of-pay-btn:disabled {
    cursor: progress;
    opacity: 0.7;
    transform: none;
}

.avf-of-pay-btn:focus-visible {
    outline: 3px solid var(--avf-of-secondary);
    outline-offset: 3px;
}

/* Spinner is hidden by default; `display: flex` only when the [hidden]
   attribute is removed (set by JS during the loading state). Without
   :not([hidden]) here `display:flex` overrode the [hidden] attribute and
   the spinner rotated permanently. */
.avf-of-pay-btn-spinner {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.avf-of-pay-btn-spinner:not([hidden]) {
    display: flex;
}

.avf-cardcom-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: avf-of-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .avf-of-pay-btn, .avf-of-brand { transition: none; }
    .avf-of-pay-btn:hover, .avf-of-brand:hover { transform: none; }
    .avf-cardcom-spinner { animation-duration: 0s; border-top-color: var(--avf-of-secondary); }
}

/* Form-level error */
.avf-of-form-error {
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: var(--avf-of-danger);
    font-size: 0.88rem;
    line-height: 1.5;
}

html[data-theme="dark"] .avf-of-form-error {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
}

/* Success view */
.avf-of-success {
    text-align: center;
    padding: 32px 16px;
}

.vf-cardcom-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: var(--avf-of-success);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.32);
}

.avf-of-success h3 {
    color: var(--avf-of-success);
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.avf-of-success p {
    color: var(--avf-of-muted);
    font-size: 0.92rem;
    margin: 0;
}

/* Credits footer */
.avf-of-credits {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--avf-of-border);
}

.avf-of-credits iframe {
    width: 100%;
    height: 60px;          /* enough vertical room so CardCom's credits row
                              renders fully and doesn't get an inner scrollbar */
    min-height: 60px;
    border: 0;
    display: block;
    overflow: hidden;
}

/* ------ Mobile: bottom sheet (must match MOBILE_BREAKPOINT in JS) ------ */
@media (max-width: 768px) {
    /* Container becomes a fullscreen modal layer */
    .avf-of-mobile-mode {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: flex-end;
    }

    .avf-of-mobile-mode .avf-of-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
        animation: avf-of-fade-in 0.2s ease both;
    }

    .avf-of-mobile-mode .avf-of-card {
        position: relative;
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 18px 18px 0 0;
        padding: 22px 18px 18px;
        max-height: 92vh;
        overflow-y: auto;
        box-shadow: var(--avf-of-shadow-lg);
        animation: avf-of-slide-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
        -webkit-overflow-scrolling: touch;
    }

    /* The little grab handle at the top of a bottom sheet */
    .avf-of-mobile-mode .avf-of-card::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        background: var(--avf-of-border-strong);
        border-radius: 999px;
        margin: -8px auto 16px;
    }

    .avf-of-mobile-mode .avf-of-card-head-amount {
        font-size: 1.3rem;
    }

    .avf-of-mobile-mode .avf-of-card-head-title {
        font-size: 0.95rem;
    }

    .avf-of-mobile-mode .avf-of-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .avf-of-mobile-mode .avf-of-pay-btn {
        height: 54px;
        font-size: 1.05rem;
    }

    /* Prevent the page underneath from scrolling. We restore scroll position
       via JS (avf-of-saved-scroll) so the page doesn't jump to top, which
       was the behaviour under `position: fixed; width: 100%`. */
    body.avf-of-mobile-open {
        overflow: hidden;
        touch-action: none;
    }

    @keyframes avf-of-slide-up {
        from { transform: translateY(100%); opacity: 0.8; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    @keyframes avf-of-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* On desktop the badges row wraps if needed (RTL languages, smaller widths) */
@media (max-width: 480px) {
    .avf-of-badges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
 * AJAX OVERLAY MODE (Phase 3.6c)
 * #avf-payment-mount becomes a fullscreen overlay the moment JS
 * injects the sheet HTML into it. On mobile: bottom sheet (slides
 * up from bottom). On desktop: centered modal (fades in). Form is
 * still in the DOM behind the dim backdrop.
 * ============================================================ */

#avf-payment-mount:not(:empty) {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;       /* default = mobile bottom sheet */
    justify-content: center;
}

/* Backdrop always visible in overlay mode (was previously mobile-only) */
#avf-payment-mount .avf-of-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    animation: avf-of-fade-in 0.2s ease both;
}

/* Card sits above the backdrop. Reset legacy auto margins from
   the standalone card styling so flex centering wins. */
#avf-payment-mount .avf-of-card {
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Mobile (≤768px): bottom sheet with grab handle */
@media (max-width: 768px) {
    #avf-payment-mount .avf-of-card {
        max-width: 100%;
        width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 22px 18px 18px;
        max-height: 92vh;
        overflow-x: hidden;        /* v3.29.1: prevent sideways scroll */
        overflow-y: auto;
        box-shadow: var(--avf-of-shadow-lg);
        animation: avf-of-slide-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
        /* iOS Safari known bug: -webkit-overflow-scrolling: touch on
           a parent can blank the inner CardCom iframes. Switch to plain
           auto scrolling — loses the iOS-native momentum-bounce on the
           sheet, but the iframes render reliably. */
        -webkit-overflow-scrolling: auto;
    }
    #avf-payment-mount .avf-of-card::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        background: var(--avf-of-border-strong);
        border-radius: 999px;
        margin: -8px auto 16px;
    }
    /* Slightly taller iframes on mobile — iOS native input rendering
       can be 50-52px tall depending on font config, and 46px clips it.
       v3.28.4: !important + explicit width to override inline styles.
       iOS Safari was treating these iframes as 0×0 inside the bottom
       sheet's overflow container, leaving card-number / CVV blank. */
    #avf-payment-mount .avf-of-field--card iframe,
    #avf-payment-mount .avf-of-field--cvv iframe {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* Desktop (≥769px): centered modal with fade-in-up */
@media (min-width: 769px) {
    #avf-payment-mount:not(:empty) {
        align-items: center;
    }
    #avf-payment-mount .avf-of-card {
        max-width: 520px;
        width: calc(100% - 32px);
        max-height: 88vh;
        overflow-y: auto;
        box-shadow: var(--avf-of-shadow-lg);
        animation: avf-of-fade-in-up 0.25s ease both;
    }
    @keyframes avf-of-fade-in-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Lock body scroll while sheet is open. JS adds this class on mount,
   removes on cleanup. v3.29.1: explicit overflow-x:hidden on both
   html + body, because iOS Safari sometimes scrolls the html element
   independently and `overflow: hidden` on body alone doesn't block it. */
body.avf-of-open,
html:has(body.avf-of-open) {
    overflow: hidden;
    overflow-x: hidden;
    touch-action: none;
}

/* ============================================================
 * SKELETON (Phase 3.7)
 * Shown immediately on submit click while server creates the LP +
 * iframes load. Same modal frame as the real sheet so when JS swaps
 * them, only the inside content changes — no layout shift.
 * ============================================================ */
.avf-of-skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.avf-of-sk {
    background: linear-gradient(
        90deg,
        var(--avf-of-bg-soft, #f1f5f9) 0%,
        var(--avf-of-border, #e2e8f0) 50%,
        var(--avf-of-bg-soft, #f1f5f9) 100%
    );
    background-size: 200% 100%;
    border-radius: 8px;
    animation: avf-of-shimmer 1.4s linear infinite;
}

.avf-of-sk--label  { height: 12px; width: 40%; }
.avf-of-sk--input  { height: 46px; width: 100%; border-radius: 10px; }
.avf-of-sk--button { height: 52px; width: 100%; border-radius: 12px; margin-top: 8px;
                    background: linear-gradient(90deg, #c7d2fe 0%, #a5b4fc 50%, #c7d2fe 100%);
                    background-size: 200% 100%;
                    animation: avf-of-shimmer 1.4s linear infinite; }
.avf-of-sk--amount { height: 28px; width: 80px; border-radius: 6px; }

.avf-of-sk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.avf-of-sk-col { display: flex; flex-direction: column; gap: 6px; }

.avf-of-skeleton-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--avf-of-border, #e2e8f0);
    color: var(--avf-of-muted, #64748b);
    font-size: 0.9rem;
}

@keyframes avf-of-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .avf-of-sk, .avf-of-sk--button { animation: none; }
}