/* Shared floating surfaces. Component handlers, visibility and image sizing stay intact. */
:root {
    --slvr-glass-background: rgba(20, 20, 22, .96);
    --slvr-glass-filter: none;
    --slvr-overlay-filter: none;
    --slvr-glass-ink: #F4F2EE;
    --slvr-glass-secondary: #BDBAB4;
    --slvr-dialog-padding: 40px;
}

/* Opaque fallback is the base; filters only enhance browsers that support them. */
@supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
    :root {
        --slvr-glass-background: rgba(20, 20, 22, .62);
        --slvr-glass-filter: blur(24px) saturate(140%);
        --slvr-overlay-filter: blur(6px);
    }
}

/* Dimmers get their own blur, never the panel's glass treatment. */
html body .modal-backdrop,
html body.slvr-modal-open .modal-backdrop,
html body .custom-modal,
html body .app-modal,
html body .slvr-fc-modal-backdrop,
html body .lightboxOverlay,
html body .swal2-container.swal2-backdrop-show,
html body .swal-backdrop-blur {
    background-color: rgba(9, 9, 10, .45) !important;
    -webkit-backdrop-filter: var(--slvr-overlay-filter) !important;
    backdrop-filter: var(--slvr-overlay-filter) !important;
}

html body .modal-backdrop {
    height: 100% !important;
    opacity: 1 !important;
}
html body .lightboxOverlay { opacity: 1 !important; }

/* Match only real surfaces: img.modal-content and full-screen wrappers are excluded. */
:is(
    .modal-dialog > .modal-content,
    .custom-modal-dialog,
    .swal2-popup,
    nav .dropdown-menu,
    #toast-container > div,
    .flatpickr-calendar,
    .select2-dropdown,
    .iti__country-list,
    .pac-container,
    #address-dropdown,
    .lb-outerContainer,
    .lb-dataContainer,
    .app-modal-card,
    .slvr-fc-modal,
    .emoji-picker
) {
    background-color: var(--slvr-glass-background) !important;
    color: var(--slvr-glass-ink) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: var(--slvr-glass-filter) !important;
    backdrop-filter: var(--slvr-glass-filter) !important;
    box-sizing: border-box;
}

/* Keep widget geometry and Lightbox's measured image dimensions unchanged. */
:is(nav .dropdown-menu, .flatpickr-calendar, .select2-dropdown,
    .iti__country-list, .pac-container, #address-dropdown, .emoji-picker) {
    border-radius: 16px !important;
}

html body .modal-dialog {
    width: calc(100% - 32px);
    max-width: 640px;
    margin-right: auto !important;
    margin-left: auto !important;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog,
    .swal2-popup:not(.swal2-toast), .app-modal-card, .slvr-fc-modal) {
    padding: var(--slvr-dialog-padding) !important;
    text-align: center !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    min-width: 0;
}

:is(.custom-modal-dialog, .swal2-popup:not(.swal2-toast), .slvr-fc-modal) {
    width: calc(100% - 32px) !important;
    max-width: 640px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html body .app-modal-card {
    width: min(640px, calc(100vw - 32px));
    max-width: 640px;
}

/* Inner column has no second pane; preserve form, cropper and library structures. */
:is(.modal-content, .custom-modal-dialog, .swal2-popup, nav .dropdown-menu,
    .flatpickr-calendar, .app-modal-card, .slvr-fc-modal, .select2-dropdown)
    :is(.modal-header, .modal-body, .modal-footer, .form-section,
        .notify-drop-title, .drop-content, .slvr-notifications, .dropdown-item.bg-light,
        .flatpickr-months, .flatpickr-weekdays, .select2-results__option,
        .app-modal-header, .app-modal-body, .app-modal-footer) {
    background-color: transparent !important;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog, .app-modal-card, .slvr-fc-modal)
    :is(.modal-header, .modal-body, .modal-footer, .custom-modal-content,
        .app-modal-header, .app-modal-body, .app-modal-footer,
        .slvr-fc-modal-header, .slvr-fc-modal-body, .slvr-fc-modal-footer) {
    width: 100%;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 !important;
    border: 0;
    min-width: 0;
}

:is(.modal-content, .custom-modal-dialog) .modal-header {
    justify-content: center;
}

.modal-dialog > .modal-content > .modal-header :is(.close, .btn-close) {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog, .swal2-popup,
    .app-modal-card, .slvr-fc-modal)
    :is(h1, h2, h3, h4, h5, h6, .swal2-title, .app-modal-header) {
    color: var(--slvr-glass-ink) !important;
    text-align: center !important;
    max-width: 100%;
    margin-top: 0 !important;
    overflow-wrap: anywhere;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog, .swal2-popup,
    .app-modal-card, .slvr-fc-modal)
    :is(p, .swal2-html-container, .swal2-html-container > div,
        .slvr-fc-modal-body, .app-modal-body) {
    color: var(--slvr-glass-ink) !important;
    text-align: center !important;
    line-height: 1.6;
    max-width: 65ch;
    margin-right: auto;
    margin-left: auto;
    overflow-wrap: anywhere;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog, .swal2-popup,
    .app-modal-card, .slvr-fc-modal) p {
    margin-top: 0;
    margin-bottom: 12px !important;
}

:is(.modal-dialog > .modal-content, .custom-modal-dialog, .swal2-popup,
    .app-modal-card, .slvr-fc-modal)
    :is(small, .text-muted, .text-secondary, .swal2-footer) {
    color: var(--slvr-glass-secondary) !important;
}

:is(.modal-content, .custom-modal-dialog, .swal2-popup, .flatpickr-calendar,
    .select2-dropdown, .iti__country-list, .app-modal-card, .slvr-fc-modal,
    .lb-dataContainer)
    :where(label, .text-white, .dropdown-item, .notify-drop-title,
        .flatpickr-month, .flatpickr-weekday,
        .flatpickr-day:not(.selected):not(.startRange):not(.endRange),
        .slvr-year-select, .select2-results__option:not([aria-selected="true"]),
        .dark-mode-switch, .close, .lb-caption, .lb-number,
        .drop-content, .content-section, .time, .slvr-notifications a,
        .drop-content > li:not(.content-section)) {
    color: var(--slvr-glass-ink) !important;
}

/* Existing wordmark becomes a normal first row, with no absolute overlap. */
html body :is(.swal2-popup:not(.swal-no-logo):not(.swal2-toast),
    .modal-dialog > .modal-content, .custom-modal-dialog,
    .app-modal-card, .slvr-fc-modal)::before {
    content: "";
    display: block;
    position: static !important;
    grid-column: 1 / -1;
    width: min(180px, 100%) !important;
    height: 28px !important;
    min-height: 28px;
    margin: 0 auto 24px !important;
    background: url('/pictures/LOGO-H-W1.png') center / contain no-repeat;
    transform: none !important;
    filter: none !important;
    pointer-events: none;
}

html body .swal2-popup.swal2-toast::before { content: none !important; }
html body :is(#feedbackForm, #commentForm) { margin-top: 0 !important; }
html body .swal2-popup .swal2-title { padding: 0; font-size: clamp(24px, 4vw, 32px); }
html body .swal2-popup .swal2-html-container { margin: 12px 0 0; padding: 0; }

/* Actions share spacing and alignment without replacing their event hooks. */
:is(.modal-content, .custom-modal-dialog, .app-modal-card, .slvr-fc-modal, .swal2-popup)
    :is(.modal-footer, .modal-footercomment-body-content, .app-modal-footer,
        .slvr-fc-modal-footer, .swal2-actions) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 12px;
    margin-top: 28px !important;
    padding: 0 !important;
    border: 0;
}

html body #haveDAteForm .col-md-12.mb-0.mt-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px !important;
}

html body :is(.modal-content, .custom-modal-dialog, .app-modal-card, .slvr-fc-modal, .swal2-popup)
    :is(.btn:not(.btn-close), .app-btn, .slvr-fc-btn, .swal2-styled) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    max-width: 100%;
    padding: 12px 24px;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: #F4F2EE !important;
    color: #09090A !important;
    font: inherit;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    box-sizing: border-box;
}

html body :is(.modal-content, .custom-modal-dialog, .app-modal-card, .slvr-fc-modal, .swal2-popup)
    :is(.btn-secondary, .btn-outline-secondary, .custom-cancel-button,
        .swal2-cancel, .swal2-deny, .app-btn.cancel, .slvr-fc-btn-secondary,
        [onclick^="closeModal"], [onclick^="closefeedbackModal"], [onclick^="closecommentModal"]) {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .45) !important;
    color: var(--slvr-glass-ink) !important;
}

html body :is(.modal-content, .custom-modal-dialog, .app-modal-card, .slvr-fc-modal)
    :is(.close, .btn-close) {
    color: var(--slvr-glass-ink) !important;
    opacity: 1;
    flex-shrink: 0;
}

/* Forms keep their native editing affordances on the dark pane. */
:is(.modal-content, .custom-modal-dialog, .swal2-popup, .app-modal-card, .slvr-fc-modal)
    :is(.form-control, .form-select, .swal2-input, .swal2-textarea, .swal2-select) {
    color: #F4F2EE;
    background-color: rgba(9, 9, 10, .78);
    border-color: rgba(255, 255, 255, .35);
}
:is(.modal-content, .custom-modal-dialog, .swal2-popup, .app-modal-card, .slvr-fc-modal)
    :is(input, textarea)::placeholder { color: #BDBAB4; opacity: 1; }
:is(.modal-content, .custom-modal-dialog, .swal2-popup, .app-modal-card, .slvr-fc-modal)
    option { background: #141416; color: #F4F2EE; }

/* Compact menus retain navigation alignment and use primary ink for light backdrops. */
html body nav .dropdown-menu {
    border-radius: 16px !important;
    padding: 8px !important;
}
html body #app nav#refreshData1 :is(#dropdown-1, #dropdown-2, #dropdown-4, #dropdown-5) .dropdown-menu {
    padding: 8px !important;
}
html body #app nav#refreshData1 .dropdown-menu
    :is(.dropdown-item.bg-light, .notify-drop-title) {
    background-color: transparent !important;
}
html body nav .dropdown-menu
    :is(h1, h2, h3, h4, h5, h6, p, span, small, a, label, .text-secondary,
        .text-muted, .dropdown-item, .dropdown-item.bg-light, .notify-drop-title,
        .drop-content, .content-section, .time, .slvr-notifications a) {
    color: var(--slvr-glass-ink) !important;
}
html body #app nav#refreshData1 .dropdown-menu
    :is(.dropdown-item, .dropdown-item.bg-light, .notify-drop-title) {
    color: var(--slvr-glass-ink) !important;
}
html body #app nav#refreshData1 .dropdown-menu .dropdown-item i:not(.fa-check) {
    color: inherit !important;
}

:is(nav .dropdown-menu, .select2-dropdown, .iti__country-list,
    .modal-content, .flatpickr-calendar)
    :is(.dropdown-item:hover, .dropdown-item:focus,
        .select2-results__option--highlighted, .iti__country.iti__highlight,
        .flatpickr-day:hover, .flatpickr-day:focus) {
    background-color: rgba(9, 9, 10, .24) !important;
    color: #F4F2EE !important;
}

/* Notices keep their semantic icon artwork while sharing the same dark glass. */
#toast-container > div { color: #F4F2EE !important; }
#toast-container > div :is(.toast-title, .toast-message, a) { color: #F4F2EE !important; }

:is(.modal-content, .custom-modal-dialog, .swal2-popup, nav .dropdown-menu,
    .app-modal-card, .slvr-fc-modal, .flatpickr-calendar, .select2-dropdown,
    .iti__country-list) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #F4F2EE !important;
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    :root { --slvr-dialog-padding: 24px; }

    /* Header already has zero gutters; retain the tested mobile menu anchor. */
    html body #app nav#refreshData1 #navbarSupportedContent {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    html body #app nav#refreshData1 :is(#dropdown-1, #dropdown-2, #dropdown-4, #dropdown-5) .dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(100%, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }
}

/* Space headings from content and keep the native close icon visible. */
.modal-dialog > .modal-content > .modal-header { margin-bottom: 12px; }
html body .modal-dialog > .modal-content > .modal-header .btn-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-height: 32px; padding: 0;
    background: transparent !important; border: 0 !important;
    color: #F4F2EE !important; font-size: 28px; line-height: 1;
}
html body .swal2-html-container .slvr-dialog-prose > p:last-child { margin-bottom: 0 !important; }
html body :is(.modal-content, .custom-modal-dialog, .swal2-popup, .app-modal-card, .slvr-fc-modal) .text-danger { color: #ffb4ab !important; }
html body .swal2-popup #btnNoThanks { background: transparent !important; border-color: rgba(255,255,255,.45) !important; color: #F4F2EE !important; }

html body .custom-modal-dialog .custom-modal-content { margin-top: 0 !important; }
html body .modal.slvr-modal .modal-dialog { max-width: 640px; }
html body .modal-dialog > .modal-content.slvr-modal-content::before { content: none; }
html body .modal.slvr-modal .slvr-modal-header { padding: 0; margin-bottom: 24px; }
html body .modal.slvr-modal .logo-checklist-wrap { max-width: 100%; justify-content: center; }
html body .modal.slvr-modal .logo-checklist { width: auto !important; height: 28px !important; max-width: 100% !important; }
@media (pointer: coarse) {
    html body .modal-dialog > .modal-content > .modal-header .btn-close { width: 44px; height: 44px; }
}

html body .swal2-popup .master-class { margin-top: 0 !important; }

/* Menus must override the shared surface's ID specificity and legacy widths. */
html body #app nav#refreshData1 :is(#dropdown-1, #dropdown-2, #dropdown-4, #dropdown-5) .dropdown-menu {
    border-radius: 16px !important;
    max-height: calc(100dvh - 154px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
html body #app nav#refreshData1 .dropdown-menu .dropdown-item {
    white-space: normal; overflow-wrap: anywhere;
}
html body .slvr-notifications .drop-content {
    height: auto !important;
    max-height: min(300px, calc(100dvh - 200px));
    overflow-y: auto;
}
@media (min-width: 576px) {
    html body #app nav#refreshData1 :is(#dropdown-1, #dropdown-2, #dropdown-4, #dropdown-5) .dropdown-menu {
        width: 340px !important; min-width: 0; max-width: calc(100vw - 32px);
    }
}