/* ── Selector de método en checkout ─── */
.okiosko-payment-selector { margin-top:8px; }
.ok-pay-label { font-weight:600; margin-bottom:10px; }
.ok-pay-option { display:flex; align-items:center; gap:8px; cursor:pointer; padding:10px 14px; border:1px solid #ddd; border-radius:4px; background:#fff; margin-bottom:8px; transition:border-color .2s; }
.ok-pay-option:has(input:checked) { border-color:#333; background:#f5f5f5; }

/* ── Overlay / Modal ────────────────── */
.ok-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:99999; display:flex; align-items:center; justify-content:center; }
.ok-modal { background:#fff; width:90%; max-width:460px; border-radius:8px; padding:32px 28px; position:relative; max-height:90vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.ok-modal h3 { margin-top:0; font-size:18px; margin-bottom:14px; }
.ok-instr { font-size:14px; color:#555; padding:10px 14px; background:#f9f9f9; border-radius:4px; margin-bottom:18px; }

/* ── Cuenta bancaria ────────────────── */
.ok-account-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; }
.ok-acc-label { font-size:12px; color:#888; min-width:90px; }
.ok-acc-val { font-weight:700; font-size:15px; flex:1; letter-spacing:.5px; }
.ok-copy-btn { background:#f0f0f0; border:1px solid #ddd; border-radius:4px; padding:4px 12px; font-size:12px; cursor:pointer; white-space:nowrap; }
.ok-copy-btn:hover { background:#e0e0e0; }

/* ── QR ─────────────────────────────── */
.ok-qr-wrap { text-align:center; margin:16px 0; }
.ok-qr-img { max-width:180px; border:1px solid #eee; border-radius:4px; padding:8px; }
.ok-qr-hint { font-size:13px; color:#666; text-align:center; margin-bottom:10px; }
.ok-download-btn { display:block; text-align:center; margin-bottom:16px; }

/* ── Botones del popup ──────────────── */
.ok-popup-btns { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.ok-popup-btns .button { display:block; width:100%; text-align:center; }

/* ── Upload voucher ─────────────────── */
#ok-voucher-file { display:block; width:100%; padding:8px; margin:12px 0; border:1px dashed #ccc; border-radius:4px; }
.ok-upload-err { color:#c0392b; font-size:13px; }

@media (max-width:600px) { .ok-modal { padding:24px 16px; } }

/* ── Transición post-checkout ───────────────────── */
.ok-checkout-transition {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: 16px 20px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
    font-size: 15px;
}

/* ── Página de subida de voucher ────────────────── */
#okiosko-voucher-page { max-width: 500px; margin: 0 auto; }
#okiosko-voucher-page h3 { margin-top: 0; }
.ok-vp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-weight: 600; font-size: 13px; }
.ok-vp-field input { padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-weight: 400; }
.ok-vp-error { color: #c0392b; font-size: 13px; margin-bottom: 10px; }
#ok-vp-file { display: block; width: 100%; padding: 8px; margin: 12px 0; border: 1px dashed #ccc; border-radius: 4px; }