/* ============================================================
   Cuotas Guatemala — Frontend Styles
   ============================================================ */

/* ── Botón trigger ── */
.cgt-btn-trigger {
    display:inline-flex; align-items:center; gap:7px;
    background:transparent; border:1.5px solid #FF6900; color:#FF6900;
    padding:9px 18px; border-radius:15px; font-size:14px; font-weight:600;
    cursor:pointer; transition:all .2s ease; letter-spacing:.3px;
    margin:8px 0; line-height:1.4; text-decoration:none; box-sizing:border-box;
}
.cgt-btn-trigger:hover { background:#FF6900; color:#fff; }
.cgt-btn-trigger svg   { flex-shrink:0; }

/* ── Overlay ── */
.cgt-modal-overlay {
    display:none !important; position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100vw !important; height:100vh !important;
    background:rgba(0,0,0,.55) !important; z-index:2147483647 !important;
    align-items:center !important; justify-content:center !important;
    padding:16px !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    box-sizing:border-box !important; transform:none !important; margin:0 !important; overflow:hidden !important;
}
.cgt-modal-overlay.cgt-open { display:flex !important; }

/* ── Modal box ── */
.cgt-modal {
    background:#fff; border-radius:16px; width:100%; max-width:480px;
    max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.35);
    position:relative; animation:cgt-slidein .25s ease; box-sizing:border-box; z-index:1;
}
@keyframes cgt-slidein {
    from { opacity:0; transform:translateY(30px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Botón cerrar ── */
.cgt-modal-close {
    position:absolute; top:12px; right:14px;
    background:rgba(255,255,255,.18); border:none; border-radius:50%;
    width:32px; height:32px; cursor:pointer; color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s; z-index:10; padding:0; line-height:1; flex-shrink:0;
}
.cgt-modal-close:hover { background:rgba(255,255,255,.32); }
.cgt-modal-close svg   { display:block; }

/* ── Header ── */
.cgt-modal-header {
    padding:24px 24px 16px;
    background:linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color:#fff; position:sticky; top:0; z-index:2;
}
.cgt-modal-header h3 {
    margin:0 0 4px !important; padding:0 !important; font-size:18px !important;
    font-weight:700 !important; color:#fff !important; line-height:1.3 !important;
    border:none !important; background:none !important;
}
.cgt-modal-product { margin:0 0 6px !important; font-size:13px; opacity:.75; color:#fff; }
.cgt-modal-total   { margin:0 0 12px !important; font-size:15px; color:#fff; }
.cgt-modal-total strong { color:#FF6900; }

/* ── Toggle BAC / Otros en el modal ── */
.cgt-tipo-toggle {
    display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.cgt-toggle-btn {
    display:inline-flex; align-items:center; gap:6px;
    border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
    color:#fff; padding:7px 14px; border-radius:8px; cursor:pointer;
    font-size:13px; font-weight:600; transition:border-color .2s, background .2s;
}
.cgt-toggle-btn:hover    { border-color:#FF6900; background:rgba(255,105,0,.15); }
.cgt-toggle-active       { border-color:#FF6900 !important; background:rgba(255,105,0,.25) !important; }

.cgt-tipo-solo {
    display:inline-flex; align-items:center; gap:6px;
    margin-top:10px; font-size:13px; color:rgba(255,255,255,.8);
}

/* ── Badges mini ── */
.cgt-badge-mini {
    display:inline-block; padding:1px 6px; border-radius:3px;
    font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.cgt-badge-mini.bac   { background:#a50606; color:#fff; }
.cgt-badge-mini.otros { background:#555; color:#fff; }

/* ── Lista de cuotas ── */
.cgt-cuotas-list { padding:8px 20px 4px; }
.cgt-cuota-item {
    display:flex; align-items:center; gap:12px;
    padding:14px 0; border-bottom:1px solid #f0f0f0;
    transition:background .15s, padding .15s, margin .15s; border-radius:0;
}
.cgt-cuota-item:last-child { border-bottom:none; }
.cgt-cuota-item:hover { background:#fff5ee; margin:0 -20px; padding:14px 20px; border-radius:8px; }

.cgt-num   { font-size:32px; font-weight:800; color:#FF6900; min-width:52px; line-height:1; text-align:right; }
.cgt-label { font-size:13px; color:#888; flex:1; white-space:nowrap; }
.cgt-price { display:flex; align-items:baseline; gap:1px; }
.cgt-sym   { font-size:14px; font-weight:600; color:#333; margin-right:3px; }
.cgt-int   { font-size:26px; font-weight:700; color:#1a1a1a; line-height:1; }
.cgt-sep   { font-size:14px; color:#888; font-weight:400; margin:0 1px; }
.cgt-dec   { font-size:16px; font-weight:700; color:#1a1a1a; align-self:flex-start; margin-top:3px; }

/* ── Footer ── */
.cgt-modal-footer {
    background:#f8f8f8; padding:12px 20px; font-size:12px; color:#888;
    display:flex; align-items:center; gap:6px;
    border-top:1px solid #eee; position:sticky; bottom:0;
}

body.cgt-modal-open { overflow:hidden !important; }

/* ── Gateway de pago ── */
.cgt-gateway-info { font-size:14px; }
.cgt-gw-warning {
    background:#fff8e6; border-left:4px solid #FF6900; padding:12px 14px;
    border-radius:4px; margin-bottom:12px; color:#555; line-height:1.5;
    display:flex; align-items:flex-start; gap:8px;
}
.cgt-gw-cart-rule {
    display:flex; align-items:center; gap:7px;
    background:#eef9f0; border:1px solid #bfe6c6; color:#256c35;
    padding:10px 12px; border-radius:6px; margin:12px 0; line-height:1.45;
}
.cgt-gw-tipo-wrap { margin:14px 0; }
.cgt-gw-tipo-wrap p { color:#fff; margin-bottom:8px; }
.cgt-gw-tipo-btns { display:flex; gap:10px; flex-wrap:wrap; }
.cgt-tipo-btn {
    display:flex; align-items:center; gap:8px;
    border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08);
    color:#fff; padding:10px 16px; border-radius:8px; cursor:pointer;
    font-size:13px; font-weight:600; transition:border-color .2s, background .2s;
}
.cgt-tipo-btn:hover      { border-color:#FF6900; background:rgba(255,105,0,.12); }
.cgt-tipo-btn.cgt-tipo-active { border-color:#FF6900; background:rgba(255,105,0,.2); }

.cuotas-gt-banco-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.cuotas-gt-banco-badge.bac   { background:#a50606; color:#fff; }
.cuotas-gt-banco-badge.otros { background:#555; color:#fff; }

.cgt-gw-selector-wrap { margin:14px 0; }
.cgt-gw-selector-wrap p,
.cgt-gw-selector-wrap label { display:block; margin-bottom:7px; color:#fff !important; }
.cgt-gw-select { width:100%; max-width:260px; border:1px solid #ccc; border-radius:6px; padding:9px 12px; background:#fff; font-size:14px; color:#222; }

.cgt-gw-monthly-calculation { margin-top:12px; padding:14px; background:#fff5ee; border:1px solid #ffcfaa; border-radius:8px; }
.cgt-gw-monthly-label  { display:block; font-size:13px; color:#6d543f; margin-bottom:3px; }
.cgt-gw-monthly-value  { display:block; color:#FF6900; font-size:23px; line-height:1.2; }
.cgt-gw-monthly-detail { display:block; color:#777; font-size:12px; margin-top:3px; }
.cgt-gw-total-cart     { margin:9px 0 0; color:#ccc; font-size:13px; }
.cgt-gw-total-cart strong { color:#fff; }

.cgt-gw-ws-info { display:flex; align-items:center; gap:6px; font-size:12px; color:#fff; margin-top:10px; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .cgt-modal-overlay { align-items:flex-end !important; padding:0 !important; }
    .cgt-modal { border-radius:16px 16px 0 0; max-width:100%; max-height:85vh; width:100%; }
    .cgt-num  { font-size:26px; min-width:42px; }
    .cgt-int  { font-size:22px; }
    .cgt-modal-header { padding:18px 18px 12px; }
    .cgt-cuotas-list  { padding:6px 16px 4px; }
    .cgt-modal-footer { padding:10px 16px; }
    .cgt-cuota-item:hover { margin:0 -16px; padding:14px 16px; }
    .cgt-gw-tipo-btns { flex-direction:column; }
    .cgt-tipo-toggle  { flex-direction:column; }
}