/**
 * SafePay Glass Themes — Aurora | Ocean | Sunset
 * Applied when body has .glass-theme.glass-theme-{key}
 */

/* ─── Shared glass tokens ─── */
body.glass-theme {
    --glass-blur: 18px;
    --glass-blur-strong: 28px;
    --glass-radius: 16px;
    --glass-radius-lg: 22px;
    /* Thick frosted frame (reference: ~24px border, 36px outer / 20px inner radius) */
    --glass-frame-width: 24px;
    --glass-frame-radius: 36px;
    --glass-inner-radius: 20px;
    --glass-frame-bg: rgba(255, 255, 255, 0.42);
    --glass-frame-stroke: rgba(255, 255, 255, 0.78);
    --glass-frame-blur: 24px;
    --glass-inner-bg: #ffffff;
    --glass-inner-pad: 20px;
    min-height: 100vh;
}

body.glass-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--glass-mesh);
    pointer-events: none;
}

body.glass-theme::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--glass-overlay);
    pointer-events: none;
}

/* ─── Aurora Glass ─── */
body.glass-theme.glass-theme-aurora {
    --glass-mesh: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(99, 102, 241, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(34, 211, 238, 0.28) 0%, transparent 50%),
        radial-gradient(ellipse 60% 70% at 50% 100%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
        linear-gradient(160deg, #e0e5f4 0%, #ebe7f2 40%, #dceef3 100%);
    --glass-overlay: rgba(30, 27, 75, 0.07);
    --glass-surface: rgba(255, 255, 255, 0.58);
    --glass-surface-strong: rgba(255, 255, 255, 0.78);
    --glass-surface-muted: rgba(255, 255, 255, 0.42);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-border-soft: rgba(99, 102, 241, 0.12);
    --glass-shadow: 0 8px 32px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-text: #1e1b4b;
    --glass-text-muted: #5b5676;
    --glass-sidebar: rgba(255, 255, 255, 0.65);
    --glass-header: rgba(255, 255, 255, 0.55);
}

/* ─── Ocean Glass ─── */
body.glass-theme.glass-theme-ocean {
    --glass-mesh: radial-gradient(ellipse 75% 55% at 15% 25%, rgba(14, 165, 233, 0.32) 0%, transparent 52%),
        radial-gradient(ellipse 65% 45% at 85% 15%, rgba(20, 184, 166, 0.26) 0%, transparent 48%),
        radial-gradient(ellipse 55% 60% at 60% 95%, rgba(2, 132, 199, 0.2) 0%, transparent 50%),
        linear-gradient(165deg, #d2e6f2 0%, #e2f2ef 45%, #e6ebf1 100%);
    --glass-overlay: rgba(12, 74, 110, 0.06);
    --glass-surface: rgba(255, 255, 255, 0.56);
    --glass-surface-strong: rgba(255, 255, 255, 0.8);
    --glass-surface-muted: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-border-soft: rgba(14, 165, 233, 0.14);
    --glass-shadow: 0 8px 32px rgba(14, 165, 233, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-text: #0c4a6e;
    --glass-text-muted: #475569;
    --glass-sidebar: rgba(255, 255, 255, 0.62);
    --glass-header: rgba(255, 255, 255, 0.52);
}

/* ─── Sunset Glass ─── */
body.glass-theme.glass-theme-sunset {
    --glass-mesh: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(249, 115, 22, 0.28) 0%, transparent 52%),
        radial-gradient(ellipse 70% 55% at 80% 30%, rgba(251, 113, 133, 0.24) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 50% 90%, rgba(251, 191, 36, 0.2) 0%, transparent 48%),
        linear-gradient(155deg, #f2e8dc 0%, #f0e2e4 50%, #f0ead4 100%);
    --glass-overlay: rgba(67, 20, 7, 0.06);
    --glass-surface: rgba(255, 255, 255, 0.6);
    --glass-surface-strong: rgba(255, 255, 255, 0.82);
    --glass-surface-muted: rgba(255, 255, 255, 0.44);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-border-soft: rgba(249, 115, 22, 0.12);
    --glass-shadow: 0 8px 32px rgba(249, 115, 22, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-text: #431407;
    --glass-text-muted: #78716c;
    --glass-sidebar: rgba(255, 255, 255, 0.68);
    --glass-header: rgba(255, 255, 255, 0.58);
}

/* ─── Page backgrounds ─── */
body.glass-theme,
body.glass-theme .page-wrapper,
body.glass-theme .main-wrapper,
body.glass-theme .main-body-wrapper,
body.glass-theme .body-wrapper {
    background: transparent !important;
}

body.glass-theme .account-area {
    background: transparent !important;
}

/* ─── Glass card frame (thick transparent border + white inner panel) ─── */
body.glass-theme .dashbord-item,
body.glass-theme .chart-wrapper {
    --glass-inner-pad: 12px;
}

body.glass-theme .custom-card,
body.glass-theme .testimonial-item,
body.glass-theme .service-item,
body.glass-theme .choose-us-item,
body.glass-theme .security-item,
body.glass-theme .how-it-works-item,
body.glass-theme .feature-item,
body.glass-theme .faq-item,
body.glass-theme .blog-item,
body.glass-theme .dashboard-card,
body.glass-theme .dashbord-item,
body.glass-theme .chart-wrapper,
body.glass-theme .profile-settings-wrapper,
body.glass-theme .settings-sidebar-area,
body.glass-theme .modal-content,
body.glass-theme .cookie-main-wrapper,
body.glass-theme .download-app-wrapper,
body.glass-theme .contact-form-wrapper,
body.glass-theme .developer-api-area,
body.glass-theme .account-wrapper,
body.glass-theme .account-area .account-form-area,
body.glass-theme .login-wrapper,
body.glass-theme .sp-hero-card,
body.glass-theme .sp-feature-card,
body.glass-theme .sp-hero-phone-wrap,
body.glass-theme .view-demo-area .demo-element-1 {
    position: relative;
    isolation: isolate;
    padding: calc(var(--glass-frame-width) + var(--glass-inner-pad)) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--glass-frame-radius) !important;
    overflow: hidden;
    color: var(--glass-text);
}

body.glass-theme .custom-card::before,
body.glass-theme .testimonial-item::before,
body.glass-theme .service-item::before,
body.glass-theme .choose-us-item::before,
body.glass-theme .security-item::before,
body.glass-theme .how-it-works-item::before,
body.glass-theme .feature-item::before,
body.glass-theme .faq-item::before,
body.glass-theme .blog-item::before,
body.glass-theme .dashboard-card::before,
body.glass-theme .dashbord-item::before,
body.glass-theme .chart-wrapper::before,
body.glass-theme .profile-settings-wrapper::before,
body.glass-theme .settings-sidebar-area::before,
body.glass-theme .modal-content::before,
body.glass-theme .cookie-main-wrapper::before,
body.glass-theme .download-app-wrapper::before,
body.glass-theme .contact-form-wrapper::before,
body.glass-theme .developer-api-area::before,
body.glass-theme .account-wrapper::before,
body.glass-theme .account-area .account-form-area::before,
body.glass-theme .login-wrapper::before,
body.glass-theme .sp-hero-card::before,
body.glass-theme .sp-feature-card::before,
body.glass-theme .sp-hero-phone-wrap::before,
body.glass-theme .view-demo-area .demo-element-1::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-frame-bg);
    backdrop-filter: blur(var(--glass-frame-blur));
    -webkit-backdrop-filter: blur(var(--glass-frame-blur));
    border: 1px solid var(--glass-frame-stroke);
    z-index: 0;
    pointer-events: none;
}

body.glass-theme .custom-card::after,
body.glass-theme .testimonial-item::after,
body.glass-theme .service-item::after,
body.glass-theme .choose-us-item::after,
body.glass-theme .security-item::after,
body.glass-theme .how-it-works-item::after,
body.glass-theme .feature-item::after,
body.glass-theme .faq-item::after,
body.glass-theme .blog-item::after,
body.glass-theme .dashboard-card::after,
body.glass-theme .dashbord-item::after,
body.glass-theme .chart-wrapper::after,
body.glass-theme .profile-settings-wrapper::after,
body.glass-theme .settings-sidebar-area::after,
body.glass-theme .modal-content::after,
body.glass-theme .cookie-main-wrapper::after,
body.glass-theme .download-app-wrapper::after,
body.glass-theme .contact-form-wrapper::after,
body.glass-theme .developer-api-area::after,
body.glass-theme .account-wrapper::after,
body.glass-theme .account-area .account-form-area::after,
body.glass-theme .login-wrapper::after,
body.glass-theme .sp-hero-card::after,
body.glass-theme .sp-feature-card::after,
body.glass-theme .sp-hero-phone-wrap::after,
body.glass-theme .view-demo-area .demo-element-1::after {
    content: "";
    position: absolute;
    inset: var(--glass-frame-width);
    border-radius: var(--glass-inner-radius);
    background: var(--glass-inner-bg);
    z-index: 0;
    pointer-events: none;
}

body.glass-theme .custom-card > *,
body.glass-theme .testimonial-item > *,
body.glass-theme .service-item > *,
body.glass-theme .choose-us-item > *,
body.glass-theme .security-item > *,
body.glass-theme .how-it-works-item > *,
body.glass-theme .feature-item > *,
body.glass-theme .faq-item > *,
body.glass-theme .blog-item > *,
body.glass-theme .dashboard-card > *,
body.glass-theme .dashbord-item > *,
body.glass-theme .chart-wrapper > *,
body.glass-theme .profile-settings-wrapper > *,
body.glass-theme .settings-sidebar-area > *,
body.glass-theme .modal-content > *,
body.glass-theme .cookie-main-wrapper > *,
body.glass-theme .download-app-wrapper > *,
body.glass-theme .contact-form-wrapper > *,
body.glass-theme .developer-api-area > *,
body.glass-theme .account-wrapper > *,
body.glass-theme .account-area .account-form-area > *,
body.glass-theme .login-wrapper > *,
body.glass-theme .sp-hero-card > *,
body.glass-theme .sp-feature-card > *,
body.glass-theme .sp-hero-phone-wrap > *,
body.glass-theme .view-demo-area .demo-element-1 > * {
    position: relative;
    z-index: 1;
}

body.glass-theme .custom-card .card-header,
body.glass-theme .custom-card .card-body {
    background: transparent !important;
    border-radius: 0 !important;
}

body.glass-theme .custom-card .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body.glass-theme .custom-card .card-body .card-form .form--control {
    background: rgba(248, 250, 252, 0.9) !important;
}

/* ─── Sidebars (all dashboards) ─── */
body.glass-theme .sidebar {
    background: var(--glass-sidebar) !important;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

body.glass-theme .sidebar-user-area {
    border-bottom-color: var(--glass-border-soft) !important;
}

/* Admin panel uses stock backend/css/style.css (no glass overrides) */

body.glass-theme .header-section,
body.glass-theme .header-bottom-area,
body.glass-theme:not(.admin-panel) .navbar-wrapper,
body.glass-theme .header-bottom,
body.glass-theme .top-nav,
body.glass-theme .dashboard-header,
body.glass-theme.header-section.header-fixed {
    background: var(--glass-header) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border-soft) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}

body.glass-theme .header-section.header-fixed {
    background: var(--glass-surface-strong) !important;
}

/* Front header nav dropdowns — 90% opaque white */
body.glass-theme .header-bottom-area .navbar-collapse .main-menu li .sub-menu {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12) !important;
}

body.glass-theme .sub-menu-wrapper .sub-menu-item {
    background: rgba(255, 255, 255, 0.55) !important;
}

body.glass-theme .sub-menu-wrapper .sub-menu-item:hover {
    background: rgba(255, 255, 255, 0.95) !important;
}

body.glass-theme .header-top-area .nice-select .list,
body.glass-theme .lang-select .nice-select .list {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ─── Forms ─── */
body.glass-theme .form--control,
body.glass-theme .form-control,
body.glass-theme .nice-select,
body.glass-theme .select2-container--default .select2-selection--single {
    background: var(--glass-surface-muted) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border-soft) !important;
    color: var(--glass-text) !important;
}

body.glass-theme .form--control:focus,
body.glass-theme .form-control:focus {
    background: var(--glass-surface-strong) !important;
    border-color: var(--glass-accent, var(--primary-color)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--glass-accent, var(--primary-color)) 25%, transparent) !important;
}

/* ─── Buttons (keep brand color, glass edge) ─── */
body.glass-theme .btn--base,
body.glass-theme .btn--primary {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 35%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ─── Tables ─── */
body.glass-theme .table-area,
body.glass-theme .custom-table {
    background: transparent;
}

body.glass-theme .custom-table thead {
    background: var(--glass-surface-muted) !important;
}

body.glass-theme .custom-table tbody tr {
    background: var(--glass-surface-muted) !important;
}

body.glass-theme .custom-table tbody tr:hover {
    background: var(--glass-surface) !important;
}

/* ─── Footer (public) ─── */
body.glass-theme .footer-section {
    background: var(--glass-surface) !important;
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border-top: 1px solid var(--glass-border) !important;
}

body.glass-theme .footer-section::after {
    opacity: 0.5 !important;
}

body.glass-theme .copyright-area {
    background: var(--glass-surface-muted) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--glass-border-soft) !important;
}

/* ─── Sections (marketing homepage) ─── */
body.glass-theme .banner-section,
body.glass-theme .service-section,
body.glass-theme .testimonial-section,
body.glass-theme .faq-section,
body.glass-theme .map-section,
body.glass-theme .about-section,
body.glass-theme .security-section,
body.glass-theme .brand-section,
body.glass-theme .contact-section,
body.glass-theme .how-it-work-section {
    background: transparent !important;
}

body.glass-theme .section-title,
body.glass-theme .footer-widget .widget-title,
body.glass-theme h1,
body.glass-theme h2,
body.glass-theme h3,
body.glass-theme h4,
body.glass-theme h5,
body.glass-theme h6 {
    color: var(--glass-text);
}

body.glass-theme p,
body.glass-theme .section-header p,
body.glass-theme .footer-widget .footer-content p {
    color: var(--glass-text-muted);
}

/* ─── Futuristic homepage (sp-homepage) integration ─── */
body.glass-theme.sp-homepage {
    --sp-bg: transparent;
    --sp-bg-elevated: var(--glass-surface-muted);
    --sp-surface: var(--glass-surface);
    --sp-border: var(--glass-border-soft);
    --sp-text: var(--glass-text);
    --sp-text-muted: var(--glass-text-muted);
    --sp-cyan: var(--glass-accent, var(--primary-color));
}

body.glass-theme.sp-homepage .sp-app-btn {
    background: var(--glass-inner-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
}

body.glass-theme.sp-homepage .footer-section {
    background: var(--glass-surface) !important;
}

body.glass-theme.sp-homepage .download-app-section {
    background: var(--glass-surface-muted) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ─── Dropdowns ─── */
body.glass-theme .dropdown-menu {
    background: var(--glass-surface-strong) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* ─── Details / inner pages ─── */
body.glass-theme .details-page-banner {
    background: transparent !important;
}

/* ─── Scrollbar (subtle) ─── */
body.glass-theme ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--glass-accent, var(--primary-color)) 40%, transparent);
    border-radius: 8px;
}

/* ─── QR scan floater ─── */
body.glass-theme .qr-scan {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--glass-shadow);
}

/* Bootstrap / dashboard modals — skip glass card frame (fixes frozen, unclickable popups) */
body.glass-theme .modal .modal-content {
    padding: 1rem 1.25rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
    overflow: visible !important;
    isolation: auto !important;
    color: inherit;
}

body.glass-theme .modal .modal-content::before,
body.glass-theme .modal .modal-content::after {
    display: none !important;
    content: none !important;
}

body.glass-theme .modal .modal-content > * {
    position: relative;
    z-index: 2;
}

body.glass-theme .modal {
    z-index: 1060 !important;
}

body.glass-theme .modal-backdrop {
    z-index: 1055 !important;
}

/* Wallet cards — glass ::before must not block hide/balance buttons */
body.glass-theme .wallet-card-item.dashbord-item::before {
    pointer-events: none !important;
}

body.glass-theme .wallet-card-actions,
body.glass-theme .wallet-card-action,
body.glass-theme .wallet-pin-trigger {
    pointer-events: auto !important;
    position: relative;
    z-index: 50 !important;
}

body.glass-theme .safepay-wallet-modal {
    z-index: 10070 !important;
}

body.glass-theme .safepay-wallet-modal .modal-content {
    padding: 1rem 1.25rem !important;
}

@media (max-width: 768px) {
    body.glass-theme {
        --glass-blur: 14px;
        --glass-blur-strong: 20px;
        --glass-frame-width: 16px;
        --glass-frame-radius: 28px;
        --glass-inner-radius: 16px;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.glass-theme .custom-card::before,
    body.glass-theme .testimonial-item::before,
    body.glass-theme .dashbord-item::before {
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.glass-theme .sidebar,
    body.glass-theme .header-section {
        background: var(--glass-surface-strong) !important;
    }
}