/*
 * Popup Manager - front-end stylesheet.
 *
 * Markup is produced by AIOWS_Popup_Renderer (includes/popup-manager/
 * class-popup-renderer.php); behaviour by admin/js/popup-frontend.js. The
 * three agree on this contract:
 *
 *   dialog.aiows-popup            the popup AND its overlay. Opened with
 *                                 showModal() it lives in the top layer; its
 *                                 background is the overlay colour with the
 *                                 opacity folded in (--aiows-overlay).
 *     .aiows-popup__box           the visible box (--aiows-w/-h/-bg/-pad/...)
 *       .aiows-popup__close       the close control (--aiows-x-*; a child of the
 *                                 dialog instead when placed at the screen corner)
 *       .aiows-popup__body        the elements (.aiows-el.aiows-el--{type})
 *
 * Every size and colour the editor controls is a CSS custom property set
 * inline by the renderer, so a media query here can override it (the old
 * inline max-width could not be overridden at all).
 *
 * SURVIVING THE THEME. The popup is printed at wp_footer, inside the theme's
 * page, and inherits the theme's face and colour on purpose: the preview is
 * the site, and a popup should look like the site it is on. What must NOT
 * reach it is the theme's rules that target elements by tag - `h2`, `p`,
 * `a`, `button`, `input` - through a scope that reaches the footer: the body
 * class Elementor prints (`.elementor-kit-N a { color }`, specificity 0,1,1)
 * or a wrapper (`.site a`), or an id (`#page button { border-radius: 0 }`,
 * 1,0,1). Measured against such a theme, a plain `.aiows-btn` (0,1,0) lost
 * its colour, its radius and gained an underline; the close control lost
 * its circle. Two moves, both in force here:
 *
 *   1. Every rule for something inside the dialog is prefixed with
 *      `dialog.aiows-popup`: (0,1,0) becomes (0,2,1), which beats every
 *      class-scoped theme rule. The user's custom CSS is scoped to the
 *      popup's id (1,1,0) and still wins over these.
 *   2. What the document SETS is printed inline by the renderer on the
 *      element it styles - a heading's colour and size, a button's face and
 *      label colour, the close control's size, shape and colours - and inline
 *      beats an id-scoped rule too. What nobody set (a paragraph's margin
 *      under `#page p`, an uppercase `h2`) stays the theme's, which is the
 *      inheritance the design wants.
 *
 * STACKING. The close control must paint above everything inside the box,
 * whatever a theme or the user's own CSS gives an element - `#page img
 * { position: relative; z-index: 40 }` is a real hover-effect rule. The body
 * is therefore its own stacking context (`isolation: isolate`, below): every
 * z-index inside it, ours (a pinned element's 3) or the theme's (40), ranks
 * elements against each other within the body only, and the body as a whole
 * sits under the close control's z-index 2 beside it. A number race
 * (giving the control a bigger z-index) would lose to the next theme;
 * isolation cannot. Measured: run.js R19 - a pinned image over the close
 * corner, plain and under that theme rule.
 *
 * Considered and rejected: a shadow root around the box. It would cut every
 * targeted theme rule while keeping inheritance - the cleanest split - but
 * id references do not cross the boundary, so the dialog's accessible name
 * (aria-labelledby on the first heading) would break; the user's custom CSS
 * would have to be injected inside; the editor's selection, the preview's
 * comparison and every harness would have to pierce it. Two to three days
 * for the cases the two moves above already cover. Do not propose it again
 * without a theme the two moves fail on; run.js R17 is where to add it.
 */

/* ---------------------------------------------------------------------------
   The dialog is the overlay
   --------------------------------------------------------------------------- */
dialog.aiows-popup {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	background: var(--aiows-overlay, rgba(0, 0, 0, 0.7));
	color: inherit;
	box-sizing: border-box;
	overflow: auto;
	z-index: 999999;
	display: none;
}

dialog.aiows-popup[open] {
	display: flex;
}

dialog.aiows-popup::backdrop {
	background: transparent;
}

/* No overlay (the "overlay" setting off): nothing is dimmed and the page
   behind stays usable - the dialog itself takes no pointer events, only the
   box does, so clicks beside the box reach the page (the runtime opens it
   without showModal() for the same reason: a modal dialog makes the page
   inert). At the top or the bottom it is a bar: flush with the edge, no
   gutter. The editor's preview keeps the dialog's pointer events so a click
   beside the box still deselects there; nothing in the preview acts anyway. */
dialog.aiows-popup--no-overlay {
	background: transparent;
}
dialog.aiows-popup--no-overlay:not([data-preview]) {
	pointer-events: none;
}
dialog.aiows-popup--no-overlay .aiows-popup__box {
	pointer-events: auto;
}
dialog.aiows-popup--no-overlay.aiows-popup--pos-top,
dialog.aiows-popup--no-overlay.aiows-popup--pos-bottom {
	padding: 0;
}

/* Positions: the box is a flex item of the full-viewport dialog. */
dialog.aiows-popup.aiows-popup--pos-center { align-items: center;     justify-content: center; }
dialog.aiows-popup.aiows-popup--pos-top { align-items: flex-start; justify-content: center; }
dialog.aiows-popup.aiows-popup--pos-bottom { align-items: flex-end;   justify-content: center; }
dialog.aiows-popup.aiows-popup--pos-top-left { align-items: flex-start; justify-content: flex-start; }
dialog.aiows-popup.aiows-popup--pos-top-right { align-items: flex-start; justify-content: flex-end; }
dialog.aiows-popup.aiows-popup--pos-bottom-left { align-items: flex-end;   justify-content: flex-start; }
dialog.aiows-popup.aiows-popup--pos-bottom-right { align-items: flex-end;   justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   The box
   --------------------------------------------------------------------------- */
dialog.aiows-popup .aiows-popup__box {
	position: relative;
	width: 100%;
	max-width: var(--aiows-w, 600px);
	height: var(--aiows-h, auto);
	max-height: 100%;
	background-color: var(--aiows-bg, #ffffff);
	background-image: var(--aiows-bg-image, none);
	background-size: var(--aiows-bg-size, cover);
	background-position: var(--aiows-bg-pos, center);
	background-repeat: no-repeat;
	color: var(--aiows-color, inherit);
	border-radius: var(--aiows-radius, 8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: var(--aiows-valign, flex-start);   /* where the content sits in a box taller than it */
	box-sizing: border-box;
	/* no overflow: hidden here - a close control placed outside the box is its
	   child; the body below clips the content to the rounded corners instead */
}
/* A box with nothing in the flow - a popup that is only its background image,
   or one whose every element is pinned - takes the proportions of that image
   (the renderer prints them) so the picture is seen at all and the close
   control sits at the corner of a box the picture fills, not of one collapsed
   to its padding. A set height wins, as it is a definite height; a viewport
   shorter than that caps it. */
dialog.aiows-popup .aiows-popup__box--image {
	aspect-ratio: var(--aiows-bg-ratio, 4 / 3);
}

dialog.aiows-popup .aiows-popup__body {
	flex: 0 1 auto;   /* content-sized, so the box's alignment can place it; shrinks and scrolls when taller than the box */
	min-height: 0;
	padding: var(--aiows-pad, 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: inherit;   /* a scroll container clips to its rounded box */
	/* Its own stacking context (see STACKING in the header): a pinned element's
	   z-index, or one a theme puts on an image, ranks inside the body and never
	   above the close control. Isolation positions nothing - a pinned element is
	   still placed by the box and still escapes this scroll container's clip. */
	isolation: isolate;
}

/* ---------------------------------------------------------------------------
   The close control. Every size, colour and offset is a custom property the
   renderer sets inline (--aiows-x-*); placement, corner, shape and icon are
   classes. The button is the hit area: --aiows-x-size wide and high, never
   under 24px (the schema's floor), with the background, border and shape
   painted on it - a transparent button keeps its whole target.
   --------------------------------------------------------------------------- */
dialog.aiows-popup .aiows-popup__close {
	position: absolute;
	width: var(--aiows-x-size, 36px);
	height: var(--aiows-x-size, 36px);
	padding: 0;
	border: var(--aiows-x-border, 0px) solid currentColor;
	background: var(--aiows-x-bg, rgba(0, 0, 0, 0.5));
	color: var(--aiows-x-color, #ffffff);
	font: inherit;
	font-size: var(--aiows-x-icon, 16px);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	box-sizing: border-box;
	z-index: 2;   /* above the body, which is one stacking context: nothing inside it can rise over the control (a pinned element once did, at z-index 3 in the same context) */
	transition: filter 0.15s ease;
}
dialog.aiows-popup .aiows-popup__close--with-text {
	width: auto;
	padding: 0 0.9em;   /* the text widens the button; the height stays the target */
	white-space: nowrap;
}
dialog.aiows-popup .aiows-popup__close-icon {
	width: var(--aiows-x-icon, 16px);
	height: var(--aiows-x-icon, 16px);
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}
dialog.aiows-popup .aiows-popup__close--square { border-radius: 0; }
dialog.aiows-popup .aiows-popup__close--rounded { border-radius: 6px; }
dialog.aiows-popup .aiows-popup__close--circle { border-radius: 999px; }   /* a circle; a pill once there is text */
dialog.aiows-popup .aiows-popup__close:hover,
dialog.aiows-popup .aiows-popup__close:focus-visible {
	filter: brightness(0.85);
}
dialog.aiows-popup .aiows-popup__close--icon-x:hover .aiows-popup__close-icon {
	transform: rotate(90deg);
}
dialog.aiows-popup .aiows-popup__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
/* The corner, inside the box */
dialog.aiows-popup .aiows-popup__close--top-right { top: var(--aiows-x-oy, 10px);    right: var(--aiows-x-ox, 10px); }
dialog.aiows-popup .aiows-popup__close--top-left { top: var(--aiows-x-oy, 10px);    left: var(--aiows-x-ox, 10px); }
dialog.aiows-popup .aiows-popup__close--bottom-right { bottom: var(--aiows-x-oy, 10px); right: var(--aiows-x-ox, 10px); }
dialog.aiows-popup .aiows-popup__close--bottom-left { bottom: var(--aiows-x-oy, 10px); left: var(--aiows-x-ox, 10px); }
/* Outside: beyond the box's top or bottom edge, aligned to the corner's side; the
   vertical offset is the gap from the edge, the horizontal one runs along it. */
dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--top-right,
dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--top-left {
	top: calc(-1 * (var(--aiows-x-size, 36px) + var(--aiows-x-oy, 10px)));
}
dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--bottom-right,
dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--bottom-left {
	bottom: calc(-1 * (var(--aiows-x-size, 36px) + var(--aiows-x-oy, 10px)));
}
/* Screen: the overlay's own corner, fixed to the viewport (a child of the dialog). */
dialog.aiows-popup .aiows-popup__close--screen {
	position: fixed;
}
/* The renderer prints `hidden` when the control appears after a delay; the runtime removes it. */
dialog.aiows-popup .aiows-popup__close[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   Elements. Every element carries its box as custom properties on its own tag
   (--aiows-el-*, printed by AIOWS_Popup_Renderer::el_open for every key): the
   same twelve for every type, so one rule here reads them all. The fallbacks
   are what an element looked like before it had a box.
   --------------------------------------------------------------------------- */
dialog.aiows-popup .aiows-el {
	box-sizing: border-box;
	margin: var(--aiows-el-mt, 0) 0 var(--aiows-el-mb, 16px);
	padding: var(--aiows-el-pad, 0);
	width: var(--aiows-el-w, 100%);   /* fit-content when the box width is 0: a tag */
	max-width: 100%;
	background: var(--aiows-el-bg, transparent);
	border: var(--aiows-el-bw, 0) var(--aiows-el-bs, solid) var(--aiows-el-bc, currentColor);
	border-radius: var(--aiows-el-radius, 0);
}
dialog.aiows-popup .aiows-popup__body > .aiows-el:last-child,
dialog.aiows-popup .aiows-col > .aiows-el:last-child {
	margin-bottom: 0;
}
/* Alignment is the content's, and it places a box narrower than its row too. */
dialog.aiows-popup .aiows-el--align-left { text-align: left; }
dialog.aiows-popup .aiows-el--align-center { text-align: center; margin-left: auto; margin-right: auto; }
dialog.aiows-popup .aiows-el--align-right { text-align: right; margin-left: auto; }
dialog.aiows-popup .aiows-el--shadow-soft { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
dialog.aiows-popup .aiows-el--shadow-strong { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
/* Pinned to one of nine points of the popup box, out of the flow: the corners,
   the middle of each edge, the centre. The offsets (--aiows-el-px / -py, px or
   %) move it from the anchor: inward from a corner or an edge, right and down
   from a centre; negative the other way. Positioned by the box, so the body's
   scrolling does not move it. The z-index lifts it over the flowing elements
   within the body's own stacking context; the close control is outside that
   context and stays above. */
dialog.aiows-popup [class*="aiows-el--pin-"] {
	position: absolute;
	z-index: 3;
	margin: 0;
}
dialog.aiows-popup .aiows-el--pin-top-left { top: var(--aiows-el-py, 0);    left: var(--aiows-el-px, 0); }
dialog.aiows-popup .aiows-el--pin-top-center { top: var(--aiows-el-py, 0);    left: calc(50% + var(--aiows-el-px, 0px)); transform: translateX(-50%); }
dialog.aiows-popup .aiows-el--pin-top-right { top: var(--aiows-el-py, 0);    right: var(--aiows-el-px, 0); }
dialog.aiows-popup .aiows-el--pin-middle-left { top: calc(50% + var(--aiows-el-py, 0px)); left: var(--aiows-el-px, 0); transform: translateY(-50%); }
dialog.aiows-popup .aiows-el--pin-center { top: calc(50% + var(--aiows-el-py, 0px)); left: calc(50% + var(--aiows-el-px, 0px)); transform: translate(-50%, -50%); }
dialog.aiows-popup .aiows-el--pin-middle-right { top: calc(50% + var(--aiows-el-py, 0px)); right: var(--aiows-el-px, 0); transform: translateY(-50%); }
dialog.aiows-popup .aiows-el--pin-bottom-left { bottom: var(--aiows-el-py, 0); left: var(--aiows-el-px, 0); }
dialog.aiows-popup .aiows-el--pin-bottom-center { bottom: var(--aiows-el-py, 0); left: calc(50% + var(--aiows-el-px, 0px)); transform: translateX(-50%); }
dialog.aiows-popup .aiows-el--pin-bottom-right { bottom: var(--aiows-el-py, 0); right: var(--aiows-el-px, 0); }

dialog.aiows-popup .aiows-el--heading {
	margin-top: 0;
	line-height: 1.25;
}

dialog.aiows-popup .aiows-el--text {
	line-height: 1.6;   /* the element's leading; tight and loose print theirs inline on the tag */
}
dialog.aiows-popup .aiows-el--text p {
	margin: 0 0 1em;
	font-size: inherit;     /* the element's size (its own tag), not a theme's `p { font-size }` */
	line-height: inherit;   /* and its leading */
}
/* The element's colour sits on its own tag and reaches its paragraphs only by
   inheritance, which ANY theme rule on `p { color }` outranks - measured: the
   document said red, the paragraph was the theme's green, and the editor's
   comparison (attributes) saw nothing wrong. Inheritance made explicit at
   (0,2,2) beats every class-scoped rule; `#page p { color }` remains the
   theme's, like its margins. Links keep the theme's colour on purpose. */
dialog.aiows-popup .aiows-el--text p,
dialog.aiows-popup .aiows-el--text li,
dialog.aiows-popup .aiows-el--text ul,
dialog.aiows-popup .aiows-el--text ol,
dialog.aiows-popup .aiows-el--text span {
	color: inherit;
}
dialog.aiows-popup .aiows-el--text ul,
dialog.aiows-popup .aiows-el--text ol {
	margin: 0 0 1em 1.4em;
	padding: 0;
}
dialog.aiows-popup .aiows-el--text > :last-child {
	margin-bottom: 0;
}

dialog.aiows-popup .aiows-el--image {
	margin-left: 0;
	margin-right: 0;
}
dialog.aiows-popup .aiows-el--image.aiows-el--align-center { margin-left: auto; margin-right: auto; }
dialog.aiows-popup .aiows-el--image.aiows-el--align-right { margin-left: auto; margin-right: 0; }
dialog.aiows-popup .aiows-el__img {
	display: inline-block;
	width: var(--aiows-img-w, 100%);
	max-width: 100%;
	height: auto;                              /* the picture's own; a frame prints height / object-fit / object-position inline */
	vertical-align: middle;
	border-radius: var(--aiows-el-radius, 0);   /* the box's corners clip the picture (the variable reaches it through a link too) */
}

dialog.aiows-popup .aiows-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: 6px;
	background: var(--aiows-btn-bg, #2271b1);
	color: var(--aiows-btn-color, #ffffff);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
	box-sizing: border-box;
}
dialog.aiows-popup .aiows-btn:hover,
dialog.aiows-popup .aiows-btn:focus-visible {
	filter: brightness(0.92);
}
dialog.aiows-popup .aiows-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
dialog.aiows-popup .aiows-btn--secondary {
	background: transparent;
	border-color: var(--aiows-btn-bg, #2271b1);
	color: var(--aiows-btn-color, var(--aiows-btn-bg, #2271b1));
}
dialog.aiows-popup .aiows-btn--link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--aiows-btn-color, var(--aiows-btn-bg, #2271b1));
	text-decoration: underline;
}
dialog.aiows-popup .aiows-btn--small { padding: 8px 18px;  font-size: 0.875em; }
dialog.aiows-popup .aiows-btn--large { padding: 16px 36px; font-size: 1.125em; }
dialog.aiows-popup .aiows-el--align-full .aiows-btn {
	display: flex;
	width: 100%;
}
dialog.aiows-popup .aiows-btn__icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	margin-right: 0.5em;
}
dialog.aiows-popup .aiows-btn--icon-only {
	padding-left: 0.85em;
	padding-right: 0.85em;
}
dialog.aiows-popup .aiows-btn--icon-only .aiows-btn__icon {
	margin-right: 0;
}

/* A row: consecutive elements marked "in a row", side by side, wrapping on a
   narrow box; aligned by the first element's alignment. */
dialog.aiows-popup .aiows-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
dialog.aiows-popup .aiows-row--left { justify-content: flex-start; }
dialog.aiows-popup .aiows-row--center { justify-content: center; }
dialog.aiows-popup .aiows-row--right { justify-content: flex-end; }
dialog.aiows-popup .aiows-row > .aiows-el {
	margin: 0;
	width: auto;
}
dialog.aiows-popup .aiows-popup__body > .aiows-row:last-child,
dialog.aiows-popup .aiows-col > .aiows-row:last-child {
	margin-bottom: 0;
}

dialog.aiows-popup .aiows-el--spacer {
	height: var(--aiows-spacer-h, 24px);
	margin: 0;
}

dialog.aiows-popup .aiows-el--divider {
	width: var(--aiows-divider-w, 100%);
	height: 0;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	border-top: var(--aiows-divider-h, 1px) var(--aiows-divider-style, solid) var(--aiows-divider-color, #e0e0e0);   /* a border, so it can be dashed or dotted */
	background: none;
}
dialog.aiows-popup .aiows-el--divider.aiows-el--align-left  { margin-left: 0; margin-right: auto; }
dialog.aiows-popup .aiows-el--divider.aiows-el--align-right { margin-left: auto; margin-right: 0; }

dialog.aiows-popup .aiows-el--columns {
	display: flex;
	gap: var(--aiows-gap, 24px);
}
dialog.aiows-popup .aiows-col {
	flex: 1 1 0;
	min-width: 0;
	/* the column's own box (a node since v2): the same variables every element
	   carries, minus margin and width - a flex item's size is the ratio's */
	box-sizing: border-box;
	padding: var(--aiows-el-pad, 0);
	background-color: var(--aiows-el-bg, transparent);
	background-image: var(--aiows-el-image, none);   /* an image filling the column edge to edge: the split shape */
	background-size: cover;
	background-position: var(--aiows-el-image-pos, center);
	border: var(--aiows-el-bw, 0) var(--aiows-el-bs, solid) var(--aiows-el-bc, currentColor);
	border-radius: var(--aiows-el-radius, 0);
	/* a column lays its elements out in a column of its own: where they sit in a
	   taller column is its valign (text centred beside an image is the split's
	   normal state); margins do not collapse in a flex column, and did not need to */
	display: flex;
	flex-direction: column;
	justify-content: var(--aiows-el-valign, flex-start);
}
dialog.aiows-popup .aiows-col.aiows-el--shadow-soft   { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
dialog.aiows-popup .aiows-col.aiows-el--shadow-strong { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
dialog.aiows-popup .aiows-el--columns-33 > .aiows-col:first-child { flex-grow: 1; }
dialog.aiows-popup .aiows-el--columns-33 > .aiows-col:last-child { flex-grow: 2; }
dialog.aiows-popup .aiows-el--columns-67 > .aiows-col:first-child { flex-grow: 2; }
dialog.aiows-popup .aiows-el--columns-67 > .aiows-col:last-child { flex-grow: 1; }
dialog.aiows-popup .aiows-el--columns-40 > .aiows-col:first-child { flex-grow: 2; }
dialog.aiows-popup .aiows-el--columns-40 > .aiows-col:last-child { flex-grow: 3; }
dialog.aiows-popup .aiows-el--columns-60 > .aiows-col:first-child { flex-grow: 3; }
dialog.aiows-popup .aiows-el--columns-60 > .aiows-col:last-child { flex-grow: 2; }

dialog.aiows-popup .aiows-el--html img,
dialog.aiows-popup .aiows-el--shortcode img {
	max-width: 100%;
	height: auto;
}

/* Video: the frame fills the element at the chosen proportions. */
dialog.aiows-popup .aiows-el--video .aiows-el__frame {
	display: block;
	width: 100%;
	aspect-ratio: var(--aiows-video-ratio, 16 / 9);
	border: 0;
	background: #000;
}

/* Countdown: four units in a row; the runtime writes the digits. */
dialog.aiows-popup .aiows-el--countdown {
	display: flex;
	justify-content: center;
	gap: 0.6em;
	color: var(--aiows-cd-color, inherit);
	font-size: var(--aiows-cd-size, 32px);
	line-height: 1.1;
	text-align: center;
}
dialog.aiows-popup .aiows-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.2em;
}
dialog.aiows-popup .aiows-countdown__value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}
dialog.aiows-popup .aiows-countdown__label {
	font-size: 0.34em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aiows-cd-label-color, inherit);
	opacity: 0.75;
	margin-top: 0.4em;
}
dialog.aiows-popup .aiows-el--countdown.aiows-el--align-left  { justify-content: flex-start; }
dialog.aiows-popup .aiows-el--countdown.aiows-el--align-right { justify-content: flex-end; }
dialog.aiows-popup .aiows-countdown__ended {
	font-size: 0.6em;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Subscribe: a form posting to the provider. Fields in a row that wraps, the
   consent line on its own row, the button the popup's own primary button.
   --------------------------------------------------------------------------- */
dialog.aiows-popup .aiows-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
	margin: 0;
}
dialog.aiows-popup .aiows-el--align-center .aiows-subscribe { justify-content: center; }
dialog.aiows-popup .aiows-el--align-right  .aiows-subscribe { justify-content: flex-end; }
dialog.aiows-popup .aiows-subscribe__input {
	flex: 1 1 160px;
	min-width: 0;
	padding: 10px 12px;
	font: inherit;
	line-height: 1.3;
	color: #1d2327;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	box-sizing: border-box;
}
dialog.aiows-popup .aiows-subscribe__input:focus-visible {
	outline: 2px solid var(--aiows-btn-bg, #2271b1);
	outline-offset: 1px;
}
dialog.aiows-popup .aiows-subscribe__consent {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 0.85em;
	line-height: 1.4;
	cursor: pointer;
}
dialog.aiows-popup .aiows-subscribe__consent input {
	flex: 0 0 auto;
	margin: 3px 0 0;
}
dialog.aiows-popup .aiows-subscribe .aiows-btn {
	flex: 0 0 auto;
	margin: 0;
}
/* stacked: each field and the button on a line of its own, full width */
dialog.aiows-popup .aiows-subscribe--stacked .aiows-subscribe__input,
dialog.aiows-popup .aiows-subscribe--stacked .aiows-btn {
	flex: 1 1 100%;
}
dialog.aiows-popup .aiows-subscribe__note {
	flex: 1 1 100%;
	font-size: 0.85em;
}
dialog.aiows-popup .aiows-subscribe__privacy {
	color: inherit;
	text-decoration: underline;
}
dialog.aiows-popup .aiows-subscribe__hp {
	position: absolute;
	left: -5000px;   /* off screen, as in the provider's own embed: a field no person fills in */
}
dialog.aiows-popup .aiows-subscribe__done {
	margin: 0;
	text-align: center;
	font-weight: 600;
}
dialog.aiows-popup .aiows-el--subscribe {
	position: relative;
}

/* ---------------------------------------------------------------------------
   Scroll lock (a class on <html>, set and cleared by the runtime)
   --------------------------------------------------------------------------- */
html.aiows-popup-open,
html.aiows-popup-open body {
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Motion. Entrance on the box while the dialog is open; exit while the
   runtime holds .is-closing, then it calls close().
   --------------------------------------------------------------------------- */
dialog.aiows-popup[open] {
	animation: aiows-overlay-in 0.25s ease;
}
dialog.aiows-popup.aiows-popup--anim-fade[open]       .aiows-popup__box { animation: aiows-fade-in 0.3s ease; }
dialog.aiows-popup.aiows-popup--anim-slide-up[open]   .aiows-popup__box { animation: aiows-slide-up 0.35s ease; }
dialog.aiows-popup.aiows-popup--anim-slide-down[open] .aiows-popup__box { animation: aiows-slide-down 0.35s ease; }
dialog.aiows-popup.aiows-popup--anim-zoom[open]       .aiows-popup__box { animation: aiows-zoom-in 0.3s ease; }
dialog.aiows-popup.aiows-popup--anim-none[open]       .aiows-popup__box { animation: none; }

dialog.aiows-popup.is-closing {
	animation: aiows-overlay-out 0.2s ease forwards;
}
dialog.aiows-popup.is-closing .aiows-popup__box {
	animation: aiows-box-out 0.2s ease forwards;
}
dialog.aiows-popup.aiows-popup--anim-none.is-closing,
dialog.aiows-popup.aiows-popup--anim-none.is-closing .aiows-popup__box {
	animation-duration: 0.01s;
}

@keyframes aiows-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiows-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aiows-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiows-slide-up    { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes aiows-slide-down  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes aiows-zoom-in     { from { opacity: 0; transform: scale(0.85); }       to { opacity: 1; transform: none; } }
@keyframes aiows-box-out     { from { opacity: 1; transform: none; }              to { opacity: 0; transform: scale(0.96); } }

@media (prefers-reduced-motion: reduce) {
	dialog.aiows-popup,
	dialog.aiows-popup .aiows-popup__box,
	dialog.aiows-popup .aiows-popup__close,
	dialog.aiows-popup .aiows-popup__close-icon {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	dialog.aiows-popup {
		padding: 12px;
	}
	dialog.aiows-popup .aiows-popup__body {
		padding: min(var(--aiows-pad, 32px), 20px);
	}
}
@media (max-width: 600px) {
	/* A phone has no room beyond the box's edge (the dialog keeps 12px around it):
	   an outside close control moves inside, to the same corner. The editor's
	   Mobile preview is a 390px viewport, so it shows exactly this. */
	dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--top-right,
	dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--top-left {
		top: var(--aiows-x-oy, 10px);
	}
	dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--bottom-right,
	dialog.aiows-popup .aiows-popup__close--outside.aiows-popup__close--bottom-left {
		bottom: var(--aiows-x-oy, 10px);
	}
	dialog.aiows-popup .aiows-el--columns-stack {
		flex-direction: column;
	}
	/* stacked, an image column with nothing in it would collapse to nothing: it keeps a band of its image */
	dialog.aiows-popup .aiows-el--columns-stack > .aiows-col--image.aiows-col--empty {
		min-height: 180px;
	}
	dialog.aiows-popup .aiows-el--columns-stack > .aiows-col {
		flex-grow: 1;
	}
	/* A corner position has no corner to sit in on a phone. */
	dialog.aiows-popup.aiows-popup--pos-top-left,
	dialog.aiows-popup.aiows-popup--pos-top-right {
		align-items: flex-start;
		justify-content: center;
	}
	dialog.aiows-popup.aiows-popup--pos-bottom-left,
	dialog.aiows-popup.aiows-popup--pos-bottom-right {
		align-items: flex-end;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   Editor preview: the element the editor has selected, and a render that
   replaced an open preview (is-swap, set by the runtime): an update, so no
   entrance animation - the popup would otherwise appear to reload on every
   change.
   --------------------------------------------------------------------------- */
dialog.aiows-popup[data-preview] [data-node].is-selected,
dialog.aiows-popup[data-preview] .aiows-popup__close.is-selected {
	outline: 2px dashed #2271b1;
	outline-offset: 3px;
}
dialog.aiows-popup[data-preview] [data-node].is-selected {
	border-radius: 2px;   /* the close control keeps the radius of its shape */
}
dialog.aiows-popup[data-preview].is-swap,
dialog.aiows-popup[data-preview].is-swap .aiows-popup__box {
	animation: none;
}