/* src by SRT X CHEATS. Copy right SRT X CHEATS */
/* Frosted-glass modals (plan picker, checkout, all pop-ups) + light-mode text fixes. Loaded LAST. */

:root {
    --modal-scrim: rgba(6, 4, 18, .42);
    --modal-glass: rgba(20, 16, 44, .68);
    --modal-glass-border: rgba(255, 255, 255, .20);
    --modal-glass-shine: rgba(255, 255, 255, .16);
    --modal-row: rgba(255, 255, 255, .07);
    --modal-row-border: rgba(255, 255, 255, .14);
    --modal-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 40px rgba(168, 85, 247, .18);
    --on-glass: #f4f6fb;
}
[data-theme="light"] {
    --modal-scrim: rgba(235, 231, 250, .38);
    --modal-glass: rgba(255, 255, 255, .74);
    --modal-glass-border: rgba(255, 255, 255, .85);
    --modal-glass-shine: rgba(255, 255, 255, .9);
    --modal-row: rgba(255, 255, 255, .55);
    --modal-row-border: rgba(88, 28, 135, .16);
    --modal-shadow: 0 24px 60px rgba(60, 40, 120, .22), 0 2px 0 rgba(255, 255, 255, .8) inset;
    --on-glass: #1e1b2e;
}

/* ---------- overlay: blurred, see-through backdrop ---------- */
.modal-overlay {
    background: var(--modal-scrim) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
}

/* ---------- glass card ---------- */
.modal-overlay > .panel,
.modal-overlay .panel {
    position: relative;
    color: var(--on-glass);
    background: var(--modal-glass) !important;
    -webkit-backdrop-filter: blur(28px) saturate(185%) !important;
    backdrop-filter: blur(28px) saturate(185%) !important;
    border: 1px solid var(--modal-glass-border) !important;
    box-shadow: var(--modal-shadow), inset 0 1px 0 var(--modal-glass-shine) !important;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* soft liquid highlight, no hard edges (this was causing the pixel/moire glitch) */
.modal-overlay .panel::before,
body.fx-wild .modal-overlay .panel::before {
    display: block !important;
    content: '';
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(145deg, var(--modal-glass-shine) 0%, rgba(255,255,255,0) 34%);
    opacity: .55;
}
.modal-overlay .panel > * { position: relative; z-index: 1; }
.modal-overlay .panel:hover { border-color: var(--modal-glass-border) !important; }
.modal-overlay .panel::-webkit-scrollbar { width: 0; }

.modal-overlay .prompt-header { color: var(--on-glass); }
.modal-overlay .dim, .modal-overlay .field label { color: var(--text-secondary); }
.modal-overlay .field input,
.modal-overlay .field select,
.modal-overlay .field textarea {
    color: var(--on-glass);
    background: var(--modal-row) !important;
    border: 1px solid var(--modal-row-border) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal-overlay .field input::placeholder { color: var(--text-muted); opacity: .9; }

/* ---------- plan picker rows ---------- */
.plan-product-name {
    color: var(--on-glass) !important;
    background: var(--modal-row) !important;
    border: 1px solid var(--modal-row-border) !important;
}
.plan-duration {
    color: var(--on-glass) !important;
    background: var(--modal-row) !important;
    border: 1px solid var(--modal-row-border) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.plan-duration span { color: var(--on-glass); }
.plan-duration:hover, .plan-duration.active {
    background: rgba(34, 211, 238, .16) !important;
    border-color: var(--neon-blue) !important;
}
.plan-duration.active span { color: var(--neon-blue); }
.plan-duration strong, .plan-total-row strong, .checkout-grand-total strong { color: var(--neon-amber); }

.quantity-box, .checkout-selected-card, .product-plan-preview {
    background: var(--modal-row) !important;
    border: 1px solid var(--modal-row-border) !important;
    color: var(--on-glass);
}
.quantity-title, .checkout-selected-card strong, .checkout-selected-card span { color: var(--on-glass); }
.checkout-selected-card .dim, .checkout-selected-card > div > span:first-child { color: var(--text-secondary); }
.quantity-control button {
    color: var(--on-glass) !important;
    background: var(--modal-row) !important;
    border-color: var(--modal-row-border) !important;
}
.quantity-control button:hover { background: var(--neon-blue) !important; color: #fff !important; }
.plan-total-row, .checkout-grand-total {
    background: rgba(212, 175, 55, .14) !important;
    border: 1px solid rgba(212, 175, 55, .35) !important;
    color: var(--on-glass);
}
.modal-overlay .btn:not(.btn-solid):not(.btn-danger) {
    color: var(--on-glass);
    background: var(--modal-row);
    border: 1px solid var(--modal-row-border);
}

/* ---------- LIGHT MODE: text that used to be hard-coded white ---------- */
[data-theme="light"] .product-price-live { color: var(--text-primary) !important; }
[data-theme="light"] .dur-chip { background: rgba(88, 28, 135, .06); color: var(--text-secondary); }
[data-theme="light"] .dur-chip.active { color: #3b1a86 !important; background: linear-gradient(135deg, rgba(14,116,144,.18), rgba(124,58,237,.18)); }
[data-theme="light"] .cat-filter { color: var(--text-secondary); }
[data-theme="light"] .cat-filter.active, [data-theme="light"] .cat-filter:hover { color: #fff; }
[data-theme="light"] .maintenance-note { color: #92400e; }
[data-theme="light"] .maintenance-badge.stock-badge { color: #7a5714; background: rgba(212,175,55,.2); }
[data-theme="light"] .store-balance-chip { color: var(--text-primary); }
[data-theme="light"] .gold-text { color: var(--neon-amber); -webkit-text-fill-color: currentColor; background: none; }
[data-theme="light"] .product-title, [data-theme="light"] .product-body { color: var(--text-primary); }
[data-theme="light"] .product-desc, [data-theme="light"] .product-meta { color: var(--text-secondary); }
[data-theme="light"] .dim { color: var(--text-secondary); }
[data-theme="light"] .term-window, [data-theme="light"] .term-content { color: var(--text-primary); }
[data-theme="light"] .warning-banner strong, [data-theme="light"] .fakepay-warn b { color: var(--text-primary); }
[data-theme="light"] .fakepay-warn { color: #92400e; }
[data-theme="light"] .fakepay-warn.sev2 { color: #b91c1c; }
[data-theme="light"] .contact-limited-banner { color: #92400e; }
[data-theme="light"] .warning-banner { color: #b91c1c; }
[data-theme="light"] .pro-pill.pending { color: #7a5714; }
[data-theme="light"] .pro-note { color: var(--text-primary); }
[data-theme="light"] .clear-cache-btn { color: #1e3a8a; background: #dbeafe; border-color: #93c5fd; }
[data-theme="light"] .qr-full { background: #f5f6fa; }
[data-theme="light"] .pay-or, [data-theme="light"] .qr-top .hint { color: var(--text-secondary); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { color: var(--text-primary); }
[data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted); }
/* drawer balance card keeps white text on its blue gradient in both themes */
.drawer-balance-card, .drawer-balance-card * { color: #fff; }
.drawer-balance-card .dbc-btn { color: #fff; }

/* low-FX devices have no backdrop blur: keep the card readable */
.srt-low-fx .modal-overlay .panel { background: rgba(24, 20, 50, .94) !important; }
[data-theme="light"] .srt-low-fx .modal-overlay .panel { background: rgba(255, 255, 255, .96) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-overlay .panel { background: rgba(24, 20, 50, .94) !important; }
    [data-theme="light"] .modal-overlay .panel { background: rgba(255, 255, 255, .96) !important; }
}

/* =====================================================================
   CIRCLE LOADER BUTTON — any .btn that is loading shrinks to a round spinner
   (login, signup, save details, update password, confirm order, ...)
   ===================================================================== */
.btn { --spin-c: #fff; --spin-track: rgba(255,255,255,.32); }
.btn.btn-ghost, .btn.btn-danger, .btn.btn-google, .btn.btn-guest { --spin-c: var(--neon-blue); --spin-track: rgba(120,120,160,.28); }
.btn.is-morph {
    width: var(--mh, 44px) !important;
    min-width: 0 !important;
    height: var(--mh, 44px) !important;
    padding: 0 !important;
    margin-left: auto !important; margin-right: auto !important;
    border-radius: 50% !important;
    font-size: 0 !important; line-height: 0 !important;
    color: transparent !important;
    overflow: hidden;
    position: relative;
    pointer-events: none; cursor: progress;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 0 0 4px rgba(168,85,247,.16), 0 6px 22px rgba(168,85,247,.45);
    transition: width .38s cubic-bezier(.65,0,.25,1), height .38s cubic-bezier(.65,0,.25,1), border-radius .38s cubic-bezier(.65,0,.25,1), padding .3s, font-size .2s, box-shadow .3s !important;
}
.btn.is-morph > *,
.btn.is-morph .btn-text,
.btn.is-morph .btn-spinner,
.btn.is-morph .btn-spinner.hidden,
.btn.is-morph .btn-text.hidden { display: none !important; }
.btn.is-morph::before { display: none !important; }
.btn.is-morph::after {
    content: ''; position: absolute; inset: 0; box-sizing: border-box;
    width: 46%; height: 46%; margin: auto;
    border-radius: 50%;
    border: 3px solid var(--spin-track);
    border-top-color: var(--spin-c);
    animation: btnSpin .7s linear infinite !important;
}
.btn.is-morph:disabled { opacity: 1 !important; }
/* the button grows back smoothly */
.btn { transition: width .38s cubic-bezier(.65,0,.25,1), border-radius .38s cubic-bezier(.65,0,.25,1), all .3s ease; }
.btn.srtx-ok:not(.is-morph), .btn.srtx-fail:not(.is-morph) { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn.is-morph, .btn { transition: none !important; } }

/* =====================================================================
   STORE: product plan rows (duration + price | qty | BUY)
   ===================================================================== */
.plan-rows { display: grid; gap: 8px; margin: 10px 0 8px; }
.plan-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    background: var(--surface-tint); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: border-color .18s ease, background .18s ease;
}
.plan-row:hover { border-color: rgba(168,85,247,.55); }
.plan-row .pr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-row .pr-dur { font-size: 11.5px; letter-spacing: .6px; color: var(--text-secondary); font-weight: 600; text-transform: none; }
.plan-row .pr-price { font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.plan-row input.pr-qty {
    width: 46px; height: 36px; padding: 0; flex: none; text-align: center;
    border-radius: 10px; border: 1px solid var(--glass-border);
    background: var(--input-bg); color: var(--text-primary);
    font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    -moz-appearance: textfield; appearance: textfield;
}
.plan-row input.pr-qty::-webkit-outer-spin-button,
.plan-row input.pr-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-row input.pr-qty:focus { outline: none; border-color: var(--neon-blue); }
.plan-row .pr-buy {
    flex: none; height: 36px; min-width: 64px; padding: 0 16px;
    border: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .8px; color: #fff;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 4px 14px rgba(168,85,247,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plan-row .pr-buy:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(236,72,153,.45); }
.plan-row .pr-buy:active { transform: scale(.96); }
.plan-row.off { opacity: .6; }
.plan-row.off .pr-price { font-size: 12px; color: var(--text-muted); font-family: var(--font-body); }
.plan-row.off .pr-buy { background: var(--surface-tint-strong); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }

/* =====================================================================
   STORE: CONFIRM PURCHASE? popup
   ===================================================================== */
.confirm-panel { padding: 26px 22px 18px !important; text-align: center; }
.confirm-title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--on-glass); margin-bottom: 14px; }
.confirm-lines { display: grid; gap: 7px; margin-bottom: 18px; font-size: 14.5px; color: var(--neon-blue); letter-spacing: .3px; }
.confirm-lines b { font-weight: 700; color: var(--neon-blue); }
.confirm-lines .cl-total, .confirm-lines .cl-total b { color: var(--neon-amber); font-weight: 800; }
.confirm-fields { text-align: left; margin-bottom: 14px; }
.confirm-fields.hidden { display: none; }
.btn-confirm-yes {
    height: 46px; padding: 0 16px; margin-bottom: 4px;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    letter-spacing: 1.2px; font-size: 14px;
    box-shadow: 0 6px 20px rgba(236,72,153,.4) !important;
}
.btn-confirm-cancel {
    width: 100%; margin-top: 6px; padding: 12px; background: transparent; border: 0; cursor: pointer;
    color: var(--text-secondary); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
}
.btn-confirm-cancel:hover { color: var(--text-primary); }

/* ---------- "Select plan" popup (opens from the product card Buy button) ---------- */
.plan-popup { padding: 20px 16px 16px !important; }
.plan-popup .prompt-header { justify-content: flex-start; padding-right: 36px; margin-bottom: 10px; }
.plan-popup .plan-product-name { margin: 0 0 12px; font-size: 14px; text-align: left; }
.plan-popup .plan-rows { margin: 0; max-height: min(58vh, 460px); overflow-y: auto; padding-right: 2px; }
.plan-popup .plan-rows::-webkit-scrollbar { width: 0; }
.plan-close {
    position: absolute !important; top: 12px; right: 12px; z-index: 3 !important;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--modal-row-border); background: var(--modal-row); color: var(--on-glass);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.plan-close:hover { background: var(--neon-red); color: #fff; border-color: transparent; }

/* ---------- cleaner CONFIRM PURCHASE? popup ---------- */
.confirm-lines { gap: 9px; font-size: 14px; color: var(--text-secondary); }
.confirm-lines > div { color: var(--text-secondary); line-height: 1.45; }
.confirm-lines b { color: var(--neon-blue); font-weight: 800; }
.confirm-lines .cl-total { color: var(--text-secondary); margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--modal-row-border); font-size: 16px; }
.confirm-lines .cl-total b { color: var(--neon-amber); font-size: 18px; }
.btn-confirm-yes { height: 48px; border-radius: 14px; background: linear-gradient(135deg, #8b3dff, #ec4899) !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.btn-confirm-yes::after { display: none; }
.btn-confirm-yes.is-morph::after { display: block; }
.btn-confirm-cancel { border-top: 1px solid var(--modal-row-border); margin-top: 12px; border-radius: 0 0 12px 12px; }

/* ---------- loader fix: centered circle + visible spinning ring ---------- */
.btn.btn-solid.is-morph, .btn.is-morph {
    display: flex !important;            /* block-level, so margin:auto really centers it */
    align-items: center; justify-content: center;
    margin-left: auto !important; margin-right: auto !important;
    flex: 0 0 var(--mh, 44px) !important;
}
.btn.btn-solid.is-morph { background: linear-gradient(135deg, #8b3dff, #ec4899) !important; }
.btn.is-morph.is-morph::after,
.fx-on .btn.btn-solid.is-morph::after,
.fx-on .btn-buy.is-morph::after {
    content: '' !important;
    position: absolute !important;
    /* true centering: pseudo-elements are NOT border-box by default, so the old -12px margin left the ring ~3px off-center */
    box-sizing: border-box !important;
    inset: 0 !important;
    width: 24px !important; height: 24px !important;
    margin: auto !important;
    translate: none !important; scale: none !important; rotate: none !important;
    background: none !important;
    border-radius: 50% !important;
    border: 3px solid var(--spin-track) !important;
    border-top-color: var(--spin-c) !important;
    opacity: 1 !important;
    animation: btnSpin .7s linear infinite !important;
    display: block !important;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }