/* ============================================================
   Iconos de marca dentro de la tarjeta del método de pago
   ============================================================ */
.culqi-metodo-iconos {
    display: flex; align-items: center; gap: .45rem; margin-top: .5rem; flex-wrap: wrap;
}
.culqi-metodo-iconos i {
    font-size: 1.55rem; line-height: 1; color: #94a3b8;
}
.culqi-metodo-iconos .fa-cc-visa        { color: #1a1f71; }
.culqi-metodo-iconos .fa-cc-mastercard  { color: #eb001b; }
.culqi-metodo-iconos .fa-cc-amex        { color: #2e77bb; }
.culqi-metodo-iconos .fa-cc-diners-club { color: #0079be; }
.culqi-ico-yape {
    background: #742284; color: #fff; font-size: .68rem; font-weight: 700;
    letter-spacing: .3px; padding: .18em .55em; border-radius: 6px;
}
.culqi-ico-cuotealo {
    background: #e0e7ff; color: #1d4ed8; font-size: .68rem; font-weight: 700;
    padding: .18em .55em; border-radius: 6px;
}

/* ============================================================
   Pago con Culqi (modal oficial) — panel del checkout
   ============================================================ */
.culqi-pay-box { padding: .25rem 0 .5rem; }

.culqi-checkout-panel {
    border: 1px solid rgba(0,169,157,.25);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, rgba(0,169,157,.06), rgba(0,169,157,.02));
}

.culqi-checkout-head {
    display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem;
}
.culqi-checkout-head i {
    font-size: 1.6rem; color: #00a99d; margin-top: .15rem;
}
.culqi-checkout-head h6 { margin: 0 0 .15rem; font-weight: 700; color: #0f766e; }
.culqi-checkout-head p  { margin: 0; font-size: .85rem; color: #475569; }

.culqi-methods-row {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem;
}
.culqi-method-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
    padding: .4em .85em; font-size: .82rem; font-weight: 600; color: #334155;
}
.culqi-method-chip i { color: #00a99d; }
.culqi-method-chip.culqi-yape { border-color: #7b3fe4; }
.culqi-method-chip.culqi-yape i { color: #7b3fe4; }

.culqi-card-brands {
    display: flex; gap: .9rem; font-size: 1.9rem; color: #64748b; opacity: .8;
}

.culqi-secure-note {
    margin-top: 1rem; padding: .75rem 1rem;
    background: rgba(0,169,157,.08);
    border: 1px solid rgba(0,169,157,.25);
    border-radius: 10px;
    font-size: .82rem; color: #0f766e;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.culqi-secure-note i { color: #00a99d; }

.culqi-badge-test {
    margin-left: auto;
    background: #f59e0b; color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: 1px;
    padding: .2em .6em; border-radius: 999px;
}

/* ============================================================
   Modal de Culqi como overlay sobre el checkout
   El modal de Culqi es un iframe (contenido de otro dominio que
   no podemos estilizar por dentro), PERO el iframe y su contenedor
   sí son elementos de nuestra página: achicamos/centramos el iframe
   y oscurecemos el contenedor para que el checkout se vea detrás.
   .nyx-culqi-wrap lo agrega culqi.js; el :has() es respaldo.
   ============================================================ */
/* Overlay igualado al modal de login (dark premium + blur fuerte) */
.nyx-culqi-wrap,
div:has(> iframe.culqi_checkout) {
    background: rgba(5, 8, 16, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Marco de la tarjeta igualado al .login-modal-container (radius 24, borde azul, sombra) */
iframe.culqi_checkout {
    width: 760px !important;
    height: 620px !important;
    max-width: 94vw !important;
    max-height: 92vh !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
    border-radius: 24px !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 520px) {
    iframe.culqi_checkout {
        width: 96vw !important;
        height: 90vh !important;
    }
}