/* ==========================================================================
   MOON CLIENT — frosted glass for everything that floats above the page:
   account dropdown, mobile menu, modals (checkout, dashboard, admin, tickets,
   confirm dialogs) and in-page menus.
   Linked from fragments/head and again from fragments/header, so it is the last
   stylesheet in the cascade and wins over the page styles it re-skins.

   Rule: the dark overlay behind a modal only dims, the floating panel does the
   blur. A blurring parent turns into the child's backdrop root, so the panel's
   own blur would see nothing (and WebKit then lets page text show through).
   ========================================================================== */

:root {
    --moon-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
    --moon-glass-tint: rgba(11, 12, 17, 0.3);
    --moon-glass-tint-strong: rgba(11, 12, 17, 0.52);
    --moon-glass-blur: blur(20px) saturate(165%);
    --moon-glass-blur-strong: blur(26px) saturate(170%);
    --moon-glass-edge: rgba(255, 255, 255, 0.12);
    --moon-glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --moon-glass-hover: rgba(255, 255, 255, 0.08);
    --moon-glass-hover-edge: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Floating menus
   -------------------------------------------------------------------------- */

.user-dropdown-menu,
.mp-part .build-manage-menu,
.custom-dropdown-results,
.ma-modal #user-dropdown-results.custom-dropdown-results {
    background: var(--moon-glass-sheen), var(--moon-glass-tint);
    backdrop-filter: var(--moon-glass-blur);
    -webkit-backdrop-filter: var(--moon-glass-blur);
    border: 1px solid var(--moon-glass-edge);
    box-shadow: 0 30px 90px -18px rgba(0, 0, 0, 0.75), 0 0 46px -18px rgba(var(--moon-accent-rgb), 0.28), var(--moon-glass-inner);
}

.user-dropdown-head { border-bottom-color: rgba(255, 255, 255, 0.08); }

.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item.is-active,
.mp-part .build-manage-menu button:hover,
.custom-dropdown-results .dropdown-item:hover {
    background: var(--moon-glass-hover);
    border-color: var(--moon-glass-hover-edge);
    color: #fff;
}

/* logout keeps its red glass highlight */
.user-dropdown-menu .dropdown-item.logout-btn { color: #ff8a96; }
.user-dropdown-menu .dropdown-item.logout-btn svg { color: #ff8a96; }
.user-dropdown-menu .dropdown-item.logout-btn:hover {
    background: rgba(255, 92, 108, 0.14);
    border-color: rgba(255, 92, 108, 0.3);
    color: #ffb3bb;
    box-shadow: 0 4px 15px rgba(255, 92, 108, 0.1);
}

/* mobile navigation drop-down */
@media (max-width: 900px) {
    .header-nav .nav-links {
        background: var(--moon-glass-sheen), var(--moon-glass-tint-strong);
        backdrop-filter: var(--moon-glass-blur);
        -webkit-backdrop-filter: var(--moon-glass-blur);
        border: 1px solid var(--moon-glass-edge);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), var(--moon-glass-inner);
    }
}

/* --------------------------------------------------------------------------
   Modals (generic, checkout, dashboard, admin, tickets, 2FA, confirm)
   -------------------------------------------------------------------------- */

.modal-overlay,
.tk-modal.modal-overlay,
#payment-modal.moon-co-overlay {
    background: rgba(3, 4, 7, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal-content,
.modal-content.ma-modal,
#payment-modal .moon-co.modal-content {
    background:
        radial-gradient(120% 55% at 50% -8%, rgba(var(--moon-accent-rgb), 0.08), transparent 62%),
        var(--moon-glass-sheen),
        var(--moon-glass-tint-strong);
    background-color: transparent;
    backdrop-filter: var(--moon-glass-blur-strong);
    -webkit-backdrop-filter: var(--moon-glass-blur-strong);
    border: 1px solid var(--moon-glass-edge);
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8), 0 0 60px -24px rgba(var(--moon-accent-rgb), 0.35), var(--moon-glass-inner);
}

/* style.css animates backdrop-filter to a fixed blur(16px) and the animation fill would
   override the value above; this entrance only fades and lifts. */
.modal-content { animation: moonGlassIn 0.45s var(--moon-ease) both; }

@keyframes moonGlassIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* checkout: same lift as before, without the blur filter on the whole panel */
#payment-modal .moon-co.modal-content { animation: moonGlassIn 0.5s var(--moon-ease) both; }

/* Safari: keep the checkout clearly readable even if the backdrop blur is skipped */
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    #payment-modal .moon-co.modal-content { background-color: rgba(11, 12, 17, 0.6); }
}

/* --------------------------------------------------------------------------
   Panels: the same see-through glass Apex uses for its cards and sidebars
   (lighter tint + blur instead of an almost opaque fill)
   -------------------------------------------------------------------------- */

:root {
    --moon-glass-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(var(--moon-panel-rgb), 0.46);
    --moon-glass-panel-blur: blur(14px) saturate(150%);
}

.dash-page { --dash-card-bg: var(--moon-glass-panel); }

.card,
.moon-panel,
.admin-sidebar,
.dash-page .admin-sidebar,
.ma-shell .admin-sidebar,
.moon-shop .shop-card,
.moon-shop .pv-hero,
.moon-shop .tab-nav,
.shop-float,
.tk-action,
.tk-page .tk-tabs,
.ma-card,
.ma-product,
.ma-pills,
.mp-pager-group,
.media-studio .media-item,
.mod-toolbar,
.home-card,
.home-plan,
.home-review,
.home-category,
.home-steps li,
.home-questions details {
    background: var(--moon-glass-panel);
    backdrop-filter: var(--moon-glass-panel-blur);
    -webkit-backdrop-filter: var(--moon-glass-panel-blur);
    box-shadow: var(--moon-glass-inner), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

.home-plan.home-plan-featured {
    background: linear-gradient(180deg, rgba(var(--moon-accent-rgb), 0.1), transparent 45%), var(--moon-glass-panel);
    box-shadow: var(--moon-glass-inner), 0 30px 80px -30px rgba(var(--moon-accent-rgb), 0.4);
}

.home-questions details[open] { background: linear-gradient(rgba(var(--moon-accent-rgb), 0.04), rgba(var(--moon-accent-rgb), 0.04)), var(--moon-glass-panel); }

.dash-card,
.dash-license {
    backdrop-filter: var(--moon-glass-panel-blur);
    -webkit-backdrop-filter: var(--moon-glass-panel-blur);
}

/* browsers without backdrop-filter get a solid panel instead of see-through text */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .user-dropdown-menu,
    .mp-part .build-manage-menu,
    .custom-dropdown-results,
    .modal-content,
    .modal-content.ma-modal,
    #payment-modal .moon-co.modal-content { background: var(--moon-panel-solid, #0f1014); }
}