/* ============================================================
   BibleSoul — Stripe Payment Modal  (v3)
   ============================================================ */

.bss-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10,15,30,0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.bss-overlay.bss-open { display: flex; }

.bss-modal {
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    max-height: 96vh;
    overflow-y: auto;
    box-shadow: 0 28px 70px rgba(0,0,0,0.24);
    animation: bssUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bss-modal::-webkit-scrollbar { display: none; }
@keyframes bssUp {
    from { opacity:0; transform:translateY(36px) scale(0.96); }
    to   { opacity:1; transform:translateY(0)    scale(1);    }
}

/* ── Header ─────────────────────────────────────────────── */
.bss-header {
    background: linear-gradient(135deg,#4338ca 0%,#6d28d9 100%);
    color: #fff;
    padding: 14px 18px 12px;
    border-radius: 22px 22px 0 0;
}
.bss-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bss-title { font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:6px; }
.bss-close {
    background: rgba(255,255,255,.18);
    border: none; color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%; cursor: pointer;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.bss-close:hover { background: rgba(255,255,255,.32); }

.bss-order {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    padding: 8px 13px;
    display: flex; justify-content: space-between; align-items: center; gap:8px;
}
.bss-order-name  { font-size:.82rem; opacity:.9; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bss-order-amount{ font-size:1.2rem; font-weight:800; white-space:nowrap; }

/* ── Credit Card Visual ─────────────────────────────────── */
.bss-cv-wrap { padding: 16px 20px 4px; }

.bss-cv-inner {
    position: relative;
    width: 100%;
    height: 178px;
}

/* Both faces sit on top of each other */
.bss-cv-front,
.bss-cv-back {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 15px;
    padding: 16px 20px;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 40px rgba(67,56,202,.28);
    transition: opacity .42s ease, transform .42s ease;
}

.bss-cv-front {
    background: linear-gradient(135deg,#4338ca 0%,#7c3aed 100%);
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}
.bss-cv-front.cv-flip {
    opacity: 0;
    transform: scale(.97) translateY(-4px);
    pointer-events: none;
    z-index: 1;
}

.bss-cv-back {
    background: linear-gradient(135deg,#1e1b4b 0%,#312e81 100%);
    opacity: 0;
    transform: scale(.97) translateY(4px);
    pointer-events: none;
    z-index: 1;
}
.bss-cv-back.cv-flip {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 2;
}

/* decorative circles */
.bss-cv-front::before {
    content:'';
    position:absolute;
    width:190px; height:190px; border-radius:50%;
    background:rgba(255,255,255,.07);
    top:-65px; right:-50px;
    pointer-events:none;
}
.bss-cv-front::after {
    content:'';
    position:absolute;
    width:130px; height:130px; border-radius:50%;
    background:rgba(255,255,255,.05);
    bottom:-40px; left:-20px;
    pointer-events:none;
}

/* Row 1 — chip + brand */
.bss-cv-row1 { display:flex; justify-content:space-between; align-items:flex-start; }

.bss-cv-chip {
    width:36px; height:27px;
    background:linear-gradient(135deg,#fde68a,#f59e0b);
    border-radius:4px;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    position:relative; flex-shrink:0;
}
.bss-cv-chip::before {
    content:''; position:absolute;
    left:0; right:0; top:50%; height:1px;
    background:rgba(0,0,0,.15);
}
.bss-cv-chip::after {
    content:''; position:absolute;
    top:0; bottom:0; left:50%; width:1px;
    background:rgba(0,0,0,.15);
}

.bss-cv-topright { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.bss-cv-nfc { font-size:.82rem; opacity:.6; transform:rotate(90deg); line-height:1; }
.bss-cv-brand { display:flex; align-items:center; justify-content:flex-end; min-height:20px; }

/* Row 2 — number */
.bss-cv-number {
    font-size:1.05rem;
    letter-spacing:.22em;
    font-family:'Courier New',monospace;
    font-weight:500;
    text-shadow:0 1px 3px rgba(0,0,0,.25);
    margin:0; /* flex handles spacing */
}

/* Row 3 — holder + expiry */
.bss-cv-row3 { display:flex; justify-content:space-between; align-items:flex-end; }
.bss-cv-label {
    font-size:.55rem; text-transform:uppercase;
    letter-spacing:.09em; opacity:.6; margin-bottom:2px;
}
.bss-cv-val {
    font-size:.8rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.03em;
    max-width:150px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
}

/* Back face */
.bss-cv-mag { background:#111; height:36px; margin:0 -20px; }
.bss-cv-sig-row { display:flex; align-items:center; gap:10px; }
.bss-cv-sig {
    flex:1; height:32px;
    background:repeating-linear-gradient(45deg,#f3f4f6 0,#f3f4f6 3px,#e5e7eb 3px,#e5e7eb 6px);
    border-radius:3px;
}
.bss-cv-cvv-box {
    background:#fff; border-radius:5px;
    padding:4px 11px; min-width:48px; text-align:center; flex-shrink:0;
}
.bss-cv-cvv-box .bss-cv-label { color:#6b7280; }
.bss-cv-cvv {
    font-size:.95rem; font-weight:700;
    letter-spacing:.18em; font-family:'Courier New',monospace; color:#1f2937;
}

/* ── Body ───────────────────────────────────────────────── */
.bss-body { padding: 10px 18px 16px; }

.bss-loading {
    display:flex; align-items:center; justify-content:center;
    gap:9px; padding:26px 0;
    color:#6b7280; font-size:.86rem;
}
.bss-spinner-sm {
    width:20px; height:20px;
    border:3px solid #e5e7eb; border-top-color:#6d28d9;
    border-radius:50%;
    animation:bssSpin .7s linear infinite; flex-shrink:0;
}
@keyframes bssSpin { to { transform:rotate(360deg); } }

/* Demo note — compact */
.bss-demo-note {
    margin-bottom:10px; padding:5px 10px;
    background:#fffbeb; border:1px solid #fde68a;
    border-radius:7px; font-size:.72rem; color:#92400e;
    display:flex; align-items:center; gap:5px;
}

/* ── Fields ─────────────────────────────────────────────── */
.bss-field { margin-bottom:10px; }
.bss-field label {
    display:block; font-size:.78rem; font-weight:600;
    color:#374151; margin-bottom:5px;
}
.bss-input, .bss-card-element-wrap {
    width:100%;
    padding:8px 11px;
    border:2px solid #e5e7eb;
    border-radius:9px;
    font-size:.9rem; color:#111827;
    background:#f9fafb;
    transition:border-color .18s, box-shadow .18s, background .18s;
    outline:none; font-family:inherit;
    box-sizing:border-box;
}
.bss-card-element-wrap {
    display:flex; align-items:center; min-height:40px;
}
.bss-card-element-wrap > div { width:100%; }
.bss-input::placeholder { color:#9ca3af; }
.bss-input:focus,
.bss-card-element-wrap:focus-within {
    border-color:#6d28d9; background:#fff;
    box-shadow:0 0 0 3px rgba(109,40,217,.11);
}

/* (bss-demo-input no longer used — demo inputs use bss-input directly) */

/* Expiry + CVV side-by-side */
.bss-row { display:flex; gap:10px; }
.bss-row > .bss-field { flex:1; min-width:0; margin-bottom:0; }

.bss-field-error { font-size:.73rem; color:#ef4444; margin-top:4px; display:none; }
.bss-field-error.bss-show { display:block; }

.bss-error-msg {
    background:#fef2f2; border:1px solid #fca5a5;
    border-radius:9px; color:#b91c1c;
    padding:9px 12px; font-size:.82rem;
    margin-bottom:11px; display:none;
    align-items:flex-start; gap:7px;
}
.bss-error-msg.bss-show { display:flex; }

/* Pay button */
.bss-pay-btn {
    width:100%; padding:12px 20px;
    background:linear-gradient(135deg,#4338ca 0%,#6d28d9 100%);
    color:#fff; border:none; border-radius:11px;
    font-size:.95rem; font-weight:700;
    cursor:pointer; margin-top:2px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:opacity .2s, transform .15s, box-shadow .2s;
    min-height:44px; box-shadow:0 4px 16px rgba(109,40,217,.3);
    font-family:inherit;
}
.bss-pay-btn:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); box-shadow:0 7px 22px rgba(109,40,217,.36); }
.bss-pay-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }

.bss-powered {
    display:flex; align-items:center; justify-content:center;
    gap:4px; font-size:.7rem; color:#9ca3af; margin-top:8px;
}

/* ── Processing ─────────────────────────────────────────── */
.bss-processing {
    display:none; flex-direction:column;
    align-items:center; justify-content:center;
    padding:48px 24px; text-align:center; gap:14px;
}
.bss-processing.bss-show { display:flex; }
.bss-spinner {
    width:50px; height:50px;
    border:4px solid #e5e7eb; border-top-color:#6d28d9;
    border-radius:50%; animation:bssSpin .8s linear infinite;
}
.bss-proc-title { font-size:1.02rem; font-weight:700; color:#1f2937; }
.bss-proc-sub   { font-size:.83rem; color:#6b7280; }

/* ── Success ─────────────────────────────────────────────── */
.bss-success {
    display:none; flex-direction:column;
    align-items:center; justify-content:center;
    padding:34px 22px 26px; text-align:center; gap:10px;
}
.bss-success.bss-show { display:flex; }
.bss-success-icon {
    width:66px; height:66px;
    background:linear-gradient(135deg,#10b981,#059669);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; color:#fff;
    animation:bssPop .4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes bssPop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.bss-success-title { font-size:1.2rem; font-weight:800; color:#065f46; }
.bss-success-sub   { font-size:.84rem; color:#6b7280; max-width:270px; }
.bss-txn-box {
    background:#f0fdf4; border:1px solid #bbf7d0;
    border-radius:9px; padding:11px 16px;
    width:100%; display:flex; flex-direction:column; gap:6px;
}
.bss-txn-row {
    display:flex; justify-content:space-between; align-items:center;
    font-size:.8rem; gap:8px; flex-wrap:wrap;
}
.bss-txn-row span:first-child { color:#6b7280; }
.bss-txn-row span:last-child  { font-weight:700; color:#065f46; word-break:break-all; }
.bss-done-btn {
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff; border:none; border-radius:9px;
    padding:12px 26px; font-size:.93rem; font-weight:700;
    cursor:pointer; width:100%; min-height:46px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:opacity .2s, transform .15s; font-family:inherit;
}
.bss-done-btn:hover { opacity:.9; transform:translateY(-1px); }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width:480px) {
    .bss-modal   { border-radius:18px; }
    .bss-header  { padding:12px 14px 10px; border-radius:18px 18px 0 0; }
    .bss-body    { padding:8px 14px 14px; }
}