/* Keep the expanded mobile menu on its own opaque, scrollable surface.
   Absolute positioning follows the navbar's actual height, including wrapped controls. */
@media (max-width: 991.98px) {
    /* Anchor the dropdown to the full-width header, outside the column gutter. */
    :is(#authNavBar, #nonAuthNavBar) nav.navbar {
        position: static;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    :is(#authNavBar, #nonAuthNavBar) #navbarCollapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: min(360px, calc(100vw - 24px));
        min-width: 0;
        height: auto;
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 40px;
        background: #fff !important;
        border-radius: 0 0 18px 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: 0 12px 24px rgba(0,0,0,.18);
    }
    :is(#authNavBar, #nonAuthNavBar) #navbarCollapse.collapsing {
        overflow: hidden;
    }
}
/* Shared white panel treatment. Keep artwork and form controls on their own surfaces. */
:root {
    --mc-glass-background: rgba(255, 255, 255, .48);
    --mc-glass-gradient: linear-gradient(115deg, rgba(255,255,255,.7), rgba(255,255,255,.24) 55%, rgba(239,235,255,.34));
    --mc-glass-border: rgba(255, 255, 255, .92);
    --mc-glass-blur: 16px;
}
/* A quiet backdrop makes the frost visible even on pages without an illustration. */
body {
    background-image: radial-gradient(ellipse at 8% 20%, rgba(255,190,112,.12), transparent 48%),
        radial-gradient(ellipse at 94% 70%, rgba(188,203,231,.17), transparent 52%);
    background-attachment: fixed;
}
:is(.roundedcontainer-light, .calendar-roundedcontainer-light, .mc-auth-card,
    .mc-benefit-card, .event-card, .card, .modal-content,
    .contact-tile, .cardsContactDislikePref, .cardsContactLikePref,
    .addScheduledEventSubCategory, .cat-item, .list-group-item, .list-group-item-light,
    .bg-light, div.bg-white, section.bg-white, article.bg-white, aside.bg-white,
    form.bg-white, table.bg-white):not(.active, .bg-primary, .bg-dark, .bg-danger, .bg-success, .btn) {
    background-color: var(--mc-glass-background) !important;
    background-image: var(--mc-glass-gradient) !important;
    -webkit-backdrop-filter: blur(var(--mc-glass-blur)) saturate(110%);
    backdrop-filter: blur(var(--mc-glass-blur)) saturate(110%);
    box-shadow: inset 0 0 0 1px var(--mc-glass-border), inset 0 1px 0 rgba(255,255,255,.75), 0 10px 30px rgba(65,75,95,.09) !important;
}
/* The summary sits over a pale backdrop, so use a lighter frost to reveal it. */
.basket-summary-panel, .checkout-glass-panel {
    --mc-glass-background: rgba(255,255,255,.28);
    --mc-glass-gradient: linear-gradient(115deg, rgba(255,255,255,.48), rgba(255,255,255,.12) 55%, rgba(220,226,247,.26));
}
/* White table cells should not conceal the glass of their containing panel. */
.modal .modal-content {
    /* Modals sit over a dark scrim, so they need a brighter base than page panels. */
    --mc-glass-background: rgba(255,255,255,.96);
    --mc-glass-gradient: linear-gradient(115deg, rgba(255,255,255,.6), rgba(255,255,255,.15));
    background-color: var(--mc-glass-background) !important;
    background-image: var(--mc-glass-gradient) !important;
}
.table:not(.table-dark) > :not(caption) > * > :is(td, th) { background-color: rgba(255,255,255,.3); }
/* Prevent solid white modal sections from concealing the translucent shell. */
.modal-content > :is(.modal-body, .modal-footer),
.modal-content > .modal-body > :is(.basket-message-progress, .scheduled-message-progress),
.modal-content > :is(.basket-message-progress, .scheduled-message-progress) {
    background-color: transparent !important;
}
/* Use one glass layer per surface; stacked white layers look opaque. */
:is(#authNavBar, #nonAuthNavBar) {
    background-color: rgba(255,255,255,.42) !important;
    background-image: var(--mc-glass-gradient) !important;
    -webkit-backdrop-filter: blur(var(--mc-glass-blur)) saturate(110%);
    backdrop-filter: blur(var(--mc-glass-blur)) saturate(110%);
    box-shadow: inset 0 -1px 0 var(--mc-glass-border), 0 8px 24px rgba(65,75,95,.09) !important;
}
:is(#authNavBar, #nonAuthNavBar) .navbar.bg-light,
.main-menu-page .roundedcontainer-light .cat-item {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
}
.main-menu-page .cat-item img[src*="memory-card-logo"] { mix-blend-mode: multiply; }
.schedule-calendar-backdrop { background-color: transparent; }
.schedule-calendar-card {
    background: var(--mc-glass-gradient), var(--mc-glass-background) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px var(--mc-glass-border), 0 6px 22px rgba(35, 42, 48, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --mc-glass-background: rgba(255, 255, 255, .94); }
    .basket-summary-panel, .checkout-glass-panel { --mc-glass-background: rgba(255,255,255,.94); --mc-glass-gradient: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .basket-summary-panel, .checkout-glass-panel { --mc-glass-background: #fff; --mc-glass-gradient: none; }
    :root { --mc-glass-background: #fff; --mc-glass-gradient: none; --mc-glass-blur: 0px; }
    .schedule-calendar-card, #authNavBar, #nonAuthNavBar { background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}