/* ==========================================================================
   Pop-up (modal) close buttons are red, so they are easy to see (user,
   7 Nov 2026). Pop-ups close only with these buttons (no tap outside, no
   Escape), so the button has to stand out: white on #dc2626 (4.8:1).

   Only pop-ups: notices (flash banners, the "Open in the app" card, status
   lines), menus, panels, the sidebar, dropdown sheets, the tour and the chat
   widget keep their own close buttons (user, same day). A .modal-close that
   is not in a pop-up's header (a picked photo's remove button) is not one.

   Loaded last on each page (index.php, marketplace.php, s.php, landing.php).
   !important because some pop-ups write their own styles at runtime
   (filters.js, doc-viewer.js, pay-modal.js, deliver-file.js) and the
   marketplace's own close rules use it; its strongest selectors are matched
   here. Public forms colour their own (src/forms_core.php, .fi-x).
   ========================================================================== */

:root { --close-red: #dc2626; --close-red-deep: #b91c1c; }

body .modal-header .modal-close,
body.mp2.m2 .modal-overlay .modal-header .modal-close,
body.mp2.m2 .mp-map-modal-inner .modal-header .modal-close,
body .filter-drawer-close,
body .snv .snv-btn.snv-close,
body .snp-x,
body .country-modal-close,
body .ed-x,
body .fm-viewer-btn[aria-label="Close"],
body .mk-image-modal-close,
body .promo-close {
    background: var(--close-red) !important;
    border-color: var(--close-red) !important;
    color: #fff !important;
    opacity: 1 !important;
}

body .modal-header .modal-close:hover,
body.mp2.m2 .modal-overlay .modal-header .modal-close:hover,
body.mp2.m2 .mp-map-modal-inner .modal-header .modal-close:hover,
body .filter-drawer-close:hover,
body .snv .snv-btn.snv-close:hover,
body .snp-x:hover,
body .country-modal-close:hover,
body .ed-x:hover,
body .fm-viewer-btn[aria-label="Close"]:hover,
body .mk-image-modal-close:hover,
body .promo-close:hover {
    background: var(--close-red-deep) !important;
    border-color: var(--close-red-deep) !important;
    color: #fff !important;
}

/* The icon inside follows the button (some rules colour the <i> itself). */
body .modal-header .modal-close i, body .filter-drawer-close i, body .snv .snv-close i, body .snv .snv-close svg,
body .snp-x i, body .country-modal-close i, body .ed-x i, body .fm-viewer-btn[aria-label="Close"] i,
body .mk-image-modal-close i, body .promo-close i {
    color: #fff !important;
}

body .modal-header .modal-close:focus-visible, body .filter-drawer-close:focus-visible, body .snp-x:focus-visible {
    outline: 3px solid rgba(220, 38, 38, .35) !important;
    outline-offset: 2px !important;
}

/* The file-ready sheet's "Close" (a text button): red words. */
body .sf-sheet .sf-close { color: var(--close-red) !important; font-weight: 800 !important; }