/* ═══════════════════════════════════════════════════════════════════
   Bamatell KYC — Frontend Styles  (v2.2)
   Inherits the site font; brand colour #089B8D.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --bkyc-primary:   #089B8D !important;
    --bkyc-primary-d: #067a6f !important;
    --bkyc-primary-l: #0bb5a4 !important;
    --bkyc-primary-t: rgba(8,155,141,.12) !important;
    --bkyc-ink:       #16202a !important;
    --bkyc-sub:       #6a757f !important;
    --bkyc-line:      #e6e9ec !important;
    --bkyc-bg:        #ffffff !important;
    --bkyc-soft:      #f4f6f7 !important;
    --bkyc-ok:        #12996a !important;
    --bkyc-ok-bg:     #e6f8f0 !important;
    --bkyc-err:       #d63b3b !important;
    --bkyc-err-bg:    #fdeceb !important;
    --bkyc-warn:      #e08316 !important;
    --bkyc-warn-bg:   #fff5e9 !important;
    --bkyc-radius:    16px !important;
    --bkyc-shadow:    0 6px 30px rgba(16,32,42,.09) !important;
    --bkyc-ease:      cubic-bezier(.4,0,.2,1) !important;
}

#bkyc-wrapper,
#bkbn-wrapper {
    direction: rtl !important;
    font-family: inherit !important;
    max-width: 460px !important;
    margin: 32px auto !important;
    background: var(--bkyc-bg) !important;
    border: 1px solid var(--bkyc-line) !important;
    border-radius: var(--bkyc-radius) !important;
    padding: 32px 28px !important;
    box-shadow: var(--bkyc-shadow) !important;
    color: var(--bkyc-ink) !important;
    box-sizing: border-box !important;
    animation: bkyc-card-in .45s var(--bkyc-ease) !important;
}
@keyframes bkyc-card-in { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

#bkyc-wrapper *,
#bkbn-wrapper * { box-sizing: border-box !important; font-family: inherit !important; }

/* step transition */
.bkyc-step { animation: bkyc-step-in .35s var(--bkyc-ease) !important; }
@keyframes bkyc-step-in { from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }

/* ── Progress bar ─────────────────────────────────────────────────── */
.bkyc-progress { display:flex !important; gap:6px !important; margin-bottom:26px !important; }
.bkyc-progress span {
    flex:1 !important; height:5px !important; border-radius:5px !important; background:var(--bkyc-line) !important;
    transition:background .4s var(--bkyc-ease) !important;
    position:relative !important; overflow:hidden !important;
}
.bkyc-progress span.done   { background:var(--bkyc-primary) !important; }
.bkyc-progress span.active { background:var(--bkyc-primary-l) !important; }
.bkyc-progress span.active::after {
    content:'' !important; position:absolute !important; inset:0 !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent) !important;
    animation:bkyc-shine 1.4s infinite !important;
}
@keyframes bkyc-shine { from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* ── Headings ─────────────────────────────────────────────────────── */
.bkyc-step h3, #bkbn-wrapper h3 {
    margin:0 0 6px !important; font-size:1.3em !important; font-weight:800 !important; letter-spacing:-.01em !important;
    color:var(--bkyc-ink) !important;
}
.bkyc-lead { margin:0 0 22px !important; font-size:.92em !important; line-height:1.8 !important; color:var(--bkyc-sub) !important; }

/* ── Fields ───────────────────────────────────────────────────────── */
.bkyc-field { margin-bottom:18px !important; }
.bkyc-field label {
    display:block !important; font-size:.85em !important; font-weight:700 !important; margin-bottom:8px !important; color:var(--bkyc-ink) !important;
}
.bkyc-field input[type="text"],
.bkyc-field input[type="number"] {
    width:100% !important; padding:14px 15px !important;
    border:1.5px solid var(--bkyc-line) !important; border-radius:12px !important;
    font-size:1em !important; background:var(--bkyc-soft) !important; color:var(--bkyc-ink) !important;
    transition:border-color .2s var(--bkyc-ease), background .2s, box-shadow .2s !important;
    text-align:right !important;
}
.bkyc-field input::placeholder { color:#b0b8bf !important; }
.bkyc-field input:focus {
    outline:none !important; border-color:var(--bkyc-primary) !important;
    background:#fff !important; box-shadow:0 0 0 4px var(--bkyc-primary-t) !important;
}

/* ── Separated OTP boxes ──────────────────────────────────────────── */
.bkyc-otp-boxes {
    display:flex !important; gap:9px !important; direction:ltr !important; justify-content:center !important; margin:6px 0 2px !important;
}
.bkyc-otp-boxes input {
    width:46px !important; height:56px !important; padding:0 !important; text-align:center !important;
    font-size:1.5em !important; font-weight:800 !important; color:var(--bkyc-ink) !important;
    border:1.5px solid var(--bkyc-line) !important; border-radius:12px !important;
    background:var(--bkyc-soft) !important;
    transition:border-color .18s var(--bkyc-ease), background .18s, box-shadow .18s, transform .12s !important;
}
.bkyc-otp-boxes input:focus {
    outline:none !important; border-color:var(--bkyc-primary) !important; background:#fff !important;
    box-shadow:0 0 0 4px var(--bkyc-primary-t) !important; transform:translateY(-2px) !important;
}
.bkyc-otp-boxes input.filled { border-color:var(--bkyc-primary) !important; background:#fff !important; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.bkyc-btn {
    display:block !important; width:100% !important; padding:14px 16px !important;
    background:var(--bkyc-primary) !important; color:#fff !important; border:none !important; border-radius:13px !important;
    font-size:1em !important; font-weight:800 !important; cursor:pointer !important; margin-top:8px !important;
    transition:background .2s var(--bkyc-ease), transform .08s, box-shadow .2s !important;
    font-family:inherit !important; box-shadow:0 4px 14px rgba(8,155,141,.28) !important;
}
.bkyc-btn:hover:not(:disabled) { background:var(--bkyc-primary-d) !important; color:#fff !important; box-shadow:0 6px 20px rgba(8,155,141,.36) !important; }
.bkyc-btn:active:not(:disabled) { transform:translateY(1px) !important; box-shadow:0 3px 10px rgba(8,155,141,.3) !important; }

/* visible, pleasant disabled/loading state — stays brand, white, bold */
.bkyc-btn:disabled {
    cursor:default !important;
    background:var(--bkyc-primary-l) !important;
    color:#fff !important; font-weight:800 !important; opacity:1 !important;
    box-shadow:0 4px 14px rgba(8,155,141,.22) !important;
    position:relative !important;
}
.bkyc-btn.is-loading { padding-left:42px !important; }
.bkyc-btn.is-loading::after {
    content:'' !important; position:absolute !important; top:50% !important; left:16px !important; width:16px !important; height:16px !important;
    margin-top:-8px !important; border:2.5px solid rgba(255,255,255,.45) !important;
    border-top-color:#fff !important; border-radius:50% !important;
    animation:bkyc-spin .7s linear infinite !important;
}
@keyframes bkyc-spin { to{ transform:rotate(360deg); } }

.bkyc-btn-secondary {
    background:transparent !important; color:var(--bkyc-sub) !important;
    border:1.5px solid var(--bkyc-line) !important; margin-top:10px !important; box-shadow:none !important;
}
.bkyc-btn-secondary:hover:not(:disabled) { background:var(--bkyc-soft) !important; color:var(--bkyc-ink) !important; box-shadow:none !important; }
.bkyc-btn-secondary:disabled { background:var(--bkyc-soft) !important; color:#b0b8bf !important; }

.bkyc-btn-ghost {
    background:transparent !important; color:var(--bkyc-primary) !important; border:none !important; font-weight:700 !important;
    width:auto !important; padding:6px 4px !important; margin:0 !important; text-decoration:none !important; box-shadow:none !important;
    cursor:pointer !important; font-family:inherit !important; font-size:1em !important; transition:color .18s !important;
}
.bkyc-btn-ghost:hover:not(:disabled) { background:transparent !important; color:var(--bkyc-primary-d) !important; text-decoration:underline !important; box-shadow:none !important; }
.bkyc-btn-ghost:disabled { color:#b7bfc5 !important; cursor:default !important; }

/* ── OTP meta / timer ─────────────────────────────────────────────── */
.bkyc-otp-meta {
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    margin:18px 0 6px !important; font-size:.85em !important; color:var(--bkyc-sub) !important;
}
.bkyc-timer {
    font-variant-numeric:tabular-nums !important; font-weight:800 !important; color:var(--bkyc-ink) !important;
    background:var(--bkyc-soft) !important; padding:5px 13px !important; border-radius:20px !important; letter-spacing:.05em !important;
    transition:color .3s, background .3s !important;
}
.bkyc-timer.warn    { color:var(--bkyc-warn) !important; background:var(--bkyc-warn-bg) !important; }
.bkyc-timer.expired { color:var(--bkyc-err) !important; background:var(--bkyc-err-bg) !important; }

/* ── Messages ─────────────────────────────────────────────────────── */
.bkyc-msg {
    margin-top:15px !important; font-size:.86em !important; padding:12px 15px !important; border-radius:11px !important;
    display:none !important; line-height:1.65 !important; animation:bkyc-msg-in .25s var(--bkyc-ease) !important;
}
@keyframes bkyc-msg-in { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.bkyc-msg.error   { background:var(--bkyc-err-bg) !important; color:var(--bkyc-err) !important; display:block !important; }
.bkyc-msg.success { background:var(--bkyc-ok-bg) !important; color:var(--bkyc-ok) !important; display:block !important; }

/* ── Results / tables ─────────────────────────────────────────────── */
.bkyc-loading { text-align:center !important; color:var(--bkyc-sub) !important; padding:22px 0 !important; font-size:.9em !important; }

.bkyc-summary-box {
    background:var(--bkyc-soft) !important; border:1px solid var(--bkyc-line) !important;
    border-radius:12px !important; padding:15px 16px !important; margin-bottom:14px !important; font-size:.88em !important;
}
.bkyc-summary-box p { margin:6px 0 !important; display:flex !important; justify-content:space-between !important; gap:10px !important; }
.bkyc-summary-box p span:last-child { font-weight:800 !important; }

.bkyc-result-badge {
    display:flex !important; align-items:center !important; gap:11px !important; padding:14px 16px !important;
    border-radius:12px !important; font-size:.92em !important; font-weight:700 !important; margin-bottom:14px !important;
    animation:bkyc-step-in .3s var(--bkyc-ease) !important;
}
.bkyc-result-badge .ic { font-size:1.4em !important; line-height:1 !important; }
.bkyc-result-badge.ok   { background:var(--bkyc-ok-bg) !important; color:var(--bkyc-ok) !important; }
.bkyc-result-badge.warn { background:var(--bkyc-warn-bg) !important; color:var(--bkyc-warn) !important; }

.bkyc-section-title {
    font-size:.9em !important; font-weight:800 !important; margin:22px 0 9px !important; padding-bottom:7px !important;
    border-bottom:2px solid var(--bkyc-line) !important; color:var(--bkyc-ink) !important;
}

.bkyc-cheque-table { width:100% !important; border-collapse:collapse !important; font-size:.78em !important; margin-top:8px !important; }
.bkyc-cheque-table th, .bkyc-cheque-table td {
    border:1px solid var(--bkyc-line) !important; padding:8px !important; text-align:center !important;
}
.bkyc-cheque-table th { background:var(--bkyc-soft) !important; font-weight:800 !important; }

.bkyc-success-text { color:var(--bkyc-ok) !important; font-weight:800 !important; }
.bkyc-warning-text { color:var(--bkyc-err) !important; font-weight:800 !important; }

/* ── Done screen ──────────────────────────────────────────────────── */
.bkyc-done { text-align:center !important; padding:30px 10px 14px !important; }
.bkyc-done .check {
    width:78px !important; height:78px !important; margin:0 auto 20px !important; border-radius:50% !important;
    background:var(--bkyc-ok-bg) !important; display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:40px !important; color:var(--bkyc-ok) !important; animation:bkyc-pop .5s var(--bkyc-ease) !important;
}
@keyframes bkyc-pop { 0%{ transform:scale(.3); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
.bkyc-done h3 { margin:0 0 8px !important; }
.bkyc-done p  { color:var(--bkyc-sub) !important; font-size:.9em !important; line-height:1.8 !important; margin:0 !important; }

/* ═══ Banknote (چک) additions ════════════════════════════════════ */
.bkbn-card { border:1px solid var(--bkyc-line) !important; border-radius:14px !important; padding:20px !important; background:var(--bkyc-soft) !important; margin-top:4px !important; }
.bkbn-terms-box { background:#fff !important; border:1px solid var(--bkyc-line) !important; border-radius:12px !important; padding:16px !important; margin-bottom:18px !important; }
.bkbn-terms-box h4 { margin:0 0 8px !important; font-size:.95em !important; font-weight:800 !important; }
.bkbn-terms-text { font-size:.82em !important; color:var(--bkyc-sub) !important; line-height:1.8 !important; margin-bottom:13px !important; max-height:130px !important; overflow-y:auto !important; }
.bkbn-check { display:flex !important; align-items:flex-start !important; gap:10px !important; font-size:.86em !important; font-weight:700 !important; cursor:pointer !important; color:var(--bkyc-ink) !important; }
.bkbn-check input { width:19px !important; height:19px !important; margin-top:1px !important; cursor:pointer !important; flex-shrink:0 !important; accent-color:var(--bkyc-primary) !important; }

.bkbn-drop {
    border:2px dashed #c2ccca !important; border-radius:12px !important; padding:26px 16px !important; text-align:center !important;
    cursor:pointer !important; transition:border-color .2s var(--bkyc-ease), background .2s !important; position:relative !important; background:#fff !important;
}
.bkbn-drop:hover { border-color:var(--bkyc-primary) !important; background:var(--bkyc-primary-t) !important; }
.bkbn-drop input[type="file"] { position:absolute !important; inset:0 !important; opacity:0 !important; cursor:pointer !important; }
.bkbn-drop .ic { font-size:26px !important; display:block !important; margin-bottom:6px !important; }
.bkbn-drop p  { margin:0 !important; color:var(--bkyc-sub) !important; font-size:.84em !important; pointer-events:none !important; }
.bkbn-drop strong { color:var(--bkyc-primary) !important; }
#bkbn-file-preview img { max-width:100% !important; max-height:190px !important; margin-top:10px !important; border-radius:10px !important; border:1px solid var(--bkyc-line) !important; }
#bkbn-file-preview p { color:var(--bkyc-sub) !important; margin-top:8px !important; font-size:.85em !important; }