/**
 * BPS Modal — shared front-end styles for the BPS Modal Container feature.
 *
 * Palette-token-aware: inherits the active BPS skin where present (--bg, --bps-text,
 * --accent, radius/shadow tokens) with safe fallbacks for skin-less pages. Kept low
 * specificity; no !important. Companion runtime: assets/js/bps-modal.js.
 *
 * @package MOA_BPS
 * @since 3.6.84
 */

/* Pre-hide: a classic host carries data-bps-modal at render. Hiding it by that attribute
   (this stylesheet is in <head>) means it NEVER paints in the page flow, even for the
   instant before the runtime mounts it — eliminating the on-load flicker where the
   modal content flashed then vanished. The runtime still reads + moves the children;
   only the host element is hidden. Triggers carry data-target (not data-bps-modal),
   so they are unaffected.

   EXCEPTION — inline hosts: a host with data-bps-modal-render="inline" is meant to KEEP
   rendering in the page (it also opens as a modal when triggered). It must NOT be
   pre-hidden — the :not() below lets it paint normally. The runtime borrows its live
   content into the modal on open and returns it on close, so there is never a moment
   where it needs the pre-hide. Classic hosts (no render attr) stay hidden as before. */
[data-bps-modal]:not([data-bps-modal-render="inline"]) {
	display: none !important;
}

/* Outer "host" container never shows on the page — the runtime moves its first
   child into the managed shell. Belt-and-suspenders alongside the inline style and
   the pre-hide rule above (kept for back-compat / any host without the attribute). */
.bps-modal-host--mounted {
	display: none !important;
}

/* Scroll-lock applied to <body> while any modal is open. */
.bps-modal-scroll-lock {
	overflow: hidden;
}

/* Full-viewport shell that holds overlay + panel. */
.bps-modal-shell {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	box-sizing: border-box;
}

.bps-modal-shell[hidden] {
	display: none;
}

/* Overlay backdrop. */
.bps-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}

.bps-modal-overlay--transparent {
	background: transparent;
	cursor: default;
}

/* The modal panel — a transparent frame. The VISIBLE surface (background, padding,
   radius) is owned by the author's content (the inner Elementor container they style),
   so there is no white "crust" framing a styled container. The panel itself only does
   positioning, sizing, the drop shadow, and hosts the × button.

   Bare-modal responsibility: if the author styles NOTHING, the content takes a surface and
   a text colour from one tone as a zero-weight default (EP-F10, below), so its words never
   sit on the dimmed page; the × stays visible (see --default below). Want a card? Style
   your container. */
.bps-modal-panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 90vw;            /* default; overridden inline by data-bps-modal-width */
	max-width: 600px;       /* default; overridden inline by data-bps-modal-max-width */
	max-height: 90vh;
	overflow: visible;      /* let the author's container own clipping/scroll + radius */
	background: transparent;
	color: var(--bps-text, var(--bg-color-text, inherit));
	/* No background / padding / radius here — the content provides them. The shadow
	   stays so even a styled container reads as a lifted modal; an author who doesn't
	   want it can override box-shadow on their container or via theme. */
	filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.35));
}

/* 🔴 EP-F10 (BUG-tutfix-34, 2026-10-14). A pop-up whose content the author did not style had no surface at all, so
   its words sat on the dimmed page and could not be read where they crossed a dark section (W1 on tut-silvermoss).
   The content now gets a surface and a text colour as a PAIR, from one tone, so inherited text never lands on a
   surface it was not made for:
     - in a tone (a tone class on the content, or on an ancestor): that tone's --bg and --text-color;
     - in no tone (the shell is moved to <body>, so the page's sections are not its ancestors): the palette's Light
       ground and Light text from :root, with plain fallbacks for a site with no palette.
   The surface and text rules are wholly in :where(), weight 0,0,0, so any background or colour the author gives the
   content (Elementor's style, a tone class, a BPS section) wins, and a styled card has no crust around it. Content that is
   only an image, a video or an embed keeps no surface (a see-through pop-up stays see-through).
   bps-modal.css serves the Gutenberg modal block as well as Elementor's BPS Modal, so both get this. */
:where(.bps-modal-panel > :not(.bps-modal-close, img, video, picture, iframe, figure,
		:has(> :is(img, video, picture, iframe, figure):only-child),
		:has(> .elementor-widget-image:only-child, > .elementor-widget-video:only-child),
		:has(> .e-con-inner > .elementor-widget-image:only-child, > .e-con-inner > .elementor-widget-video:only-child))) {
	--bps-modal-ink: var(--light-text, #1f2933);
	background-color: var(--bg, var(--light-bg, #ffffff));
	color: var(--bps-modal-ink);
}
:where(.light, .light2, .light3, .dark, .dark2, .dark3) :where(.bps-modal-panel > :not(.bps-modal-close)),
:where(.bps-modal-panel > :is(.light, .light2, .light3, .dark, .dark2, .dark3)) {
	--bps-modal-ink: var(--text-color);
}
/* Headings: Astra paints h1 to h6 directly (`h2 { color: var(--ast-global-color-3) }`, 0,0,1), so on a dark page
   they would keep the page's light colour on the light surface. This one rule is (0,1,0): above Astra's pin, below a
   tone section's painter (`.section.dark h2`, 0,2,1), Elementor's kit heading colour and its per-element picker. */
.bps-modal-panel > :where(:not(.bps-modal-close)) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--bps-modal-ink, inherit);
}

/* The author's immediate content should be able to scroll if it's tall. Excludes the
   close button (also a direct child) — it must keep its own fixed 2rem box. */
.bps-modal-panel > *:not(.bps-modal-close) {
	max-height: 90vh;
	overflow: auto;
	box-sizing: border-box;
}

/* Default close button (×) — sits inside the content's top-right corner. Its own
   translucent dark chip + white glyph keep it visible on any content background (light
   card or dark panel), so it never depends on the (now transparent) panel surface. */
.bps-modal-close--default {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 1.9rem;
	height: 1.9rem;
	line-height: 1;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #ffffff;
	opacity: 0.85;
	cursor: pointer;
	border-radius: 50%;
	transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.bps-modal-close--default:hover,
.bps-modal-close--default:focus {
	opacity: 1;
	background: rgba(0, 0, 0, 0.7);
	transform: scale(1.05);
	outline: none;
}

/* ---- Animations ---- */

/* Base hidden state for the panel/overlay before the shell gets .is-open. */
.bps-modal-shell .bps-modal-overlay {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bps-modal-shell .bps-modal-panel {
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.bps-modal-shell.is-open .bps-modal-overlay {
	opacity: 1;
}
.bps-modal-shell.is-open .bps-modal-panel {
	opacity: 1;
	transform: none;
}

/* fade (default): opacity only — already handled by base. */

/* slide-up: panel rises into place. */
.bps-modal-anim-slide-up .bps-modal-panel {
	transform: translateY(24px);
}

/* none: no transition. */
.bps-modal-anim-none .bps-modal-overlay,
.bps-modal-anim-none .bps-modal-panel {
	transition: none;
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.bps-modal-shell .bps-modal-overlay,
	.bps-modal-shell .bps-modal-panel {
		transition: none;
	}
	.bps-modal-anim-slide-up .bps-modal-panel {
		transform: none;
	}
}

/* Mobile: panels go near-full-width regardless of configured width. The panel has no
   padding of its own now (the author's content owns it), so none is set here. */
@media (max-width: 600px) {
	.bps-modal-panel {
		width: 100% !important;
		max-width: 100% !important;
	}
}