/*
 * The Get Pro popup: one navy look for every Sovlix plugin (owner, 2026-11-05).
 *
 * One BEM block, no framework, portable: copy the folder, and only the custom
 * properties below change if a product ever needs to. Built from the owner's
 * SVG ("get pro popup.svg", 602 x 422) at the approved 520 x 458: every
 * position is that drawing's coordinate, centred, with 36px of extra air. With
 * no clock the card closes up to 400px instead of leaving a hole.
 *
 * Contrast, measured on #00022A: heading white 21:1, muted #9CA6C8 8.3:1, close
 * mark white 40% 3.7:1 (an icon, 3:1 needed), unit labels 8.3:1; navy digits on
 * the #F2F6FF boxes 18.6:1, on the amber seconds 11.2:1, on gold 12:1, on orange
 * 8.9:1; white on the #0F6FE8 button 4.7:1, on its hover 6.4:1. The card edge
 * #1C87FF is 5.7:1 against the card.
 *
 * SPECIFICITY, which matters inside wp-admin: WordPress ships
 * `a:active, a:focus, a:hover { color: <scheme blue> }` at (0,1,1). Every rule
 * here is scoped under the block, (0,2,0), and the two links also qualify the
 * element, `a.pro-modal__cta` at (0,2,1), so a white label never turns blue on
 * hover. No `!important` anywhere.
 */

.pro-modal {
	--pm-navy: #00022a;
	--pm-edge: #1c87ff;
	--pm-text: #ffffff;
	--pm-muted: #9ca6c8;
	--pm-sep: #9ba3c1;
	--pm-box: #f2f6ff;
	--pm-box-line: #edf1f4;
	--pm-cta: #0f6fe8;
	--pm-cta-hover: #0a5cc7;
	--pm-cta-active: #084ba3;
	--pm-tick: #ffb224; /* the seconds, "ember" tone (sovlix.com campaign bars) */
	--pm-tick-hi: #ffd27a;
	--pm-final: #fb923c; /* the last 72 hours */
	--pm-final-hi: #fdba74;
	--pm-scrim: rgba( 0, 0, 0, 0.6 );
	--pm-z: 999999;

	/* Positions, from the SVG, plus the approved air. */
	--pm-title-top: 179px;
	--pm-line-top: 217px;
	--pm-clock-top: 240px;
	--pm-cta-top: 328px;
	--pm-demo-top: 381px;

	position: fixed;
	inset: 0;
	z-index: var( --pm-z );
	display: flex;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	background: var( --pm-scrim );
	backdrop-filter: blur( 4px );
	container-type: size;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	animation: pro-modal-fade 160ms ease-out both;
}

.pro-modal.pro-modal--sky {
	--pm-tick: #fbbf24;
	--pm-tick-hi: #ffd766;
}

/* Preflight is off in some hosts and on in others. State it and stop guessing. */
.pro-modal,
.pro-modal *,
.pro-modal *::before,
.pro-modal *::after {
	box-sizing: border-box;
}

.pro-modal .pro-modal__card {
	position: relative;
	flex: none;
	width: 520px;
	height: 458px;
	margin: auto; /* centred, yet its top never scrolls out of reach */
	overflow: hidden;
	border: 1px solid var( --pm-edge );
	border-radius: 38px;
	background: var( --pm-navy );
	color: var( --pm-text );
	text-align: center;
	-webkit-font-smoothing: antialiased;
	animation: pro-modal-panel 220ms cubic-bezier( 0.2, 0.8, 0.25, 1 ) both;
}

.pro-modal .pro-modal__card--compact {
	height: 400px;
	--pm-cta-top: 270px;
	--pm-demo-top: 323px;
}

/* No text link under the button: the card ends 45px under it, as with the link. */
.pro-modal .pro-modal__card--compact.pro-modal__card--no-link {
	height: 363px;
}

/*
 * A long heading on two balanced lines: everything under it moves down one
 * title line (28.8px). Without the text link the card ends 45px under the
 * button, the same air the link leaves on the other cards.
 */
.pro-modal .pro-modal__card--two-line {
	height: 430px;
	--pm-line-top: 246px;
	--pm-cta-top: 299px;
	--pm-demo-top: 352px;
}

.pro-modal .pro-modal__card--two-line.pro-modal__card--no-link {
	height: 392px;
}

.pro-modal .pro-modal__art {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 389px;
	height: 133px;
	transform: translateX( -50% );
}

.pro-modal .pro-modal__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 15px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: rgba( 255, 255, 255, 0.4 );
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.pro-modal .pro-modal__close:hover {
	background: rgba( 242, 246, 255, 0.08 );
	color: rgba( 255, 255, 255, 0.85 );
}

.pro-modal .pro-modal__close:active {
	background: rgba( 242, 246, 255, 0.14 );
	color: #ffffff;
}

.pro-modal .pro-modal__close:focus-visible {
	outline: 2px solid var( --pm-edge );
	outline-offset: 0;
}

.pro-modal .pro-modal__title {
	position: absolute;
	top: var( --pm-title-top );
	right: 24px;
	left: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var( --pm-text );
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.pro-modal .pro-modal__title-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

.pro-modal .pro-modal__title-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 340px breaks "ZooMeet Pro is installed / but not active" even where text-wrap: balance is missing. */
.pro-modal .pro-modal__card--two-line .pro-modal__title {
	right: 0;
	left: 0;
	max-width: 340px;
	margin-inline: auto;
	white-space: normal;
	text-wrap: balance;
}

.pro-modal .pro-modal__card--two-line .pro-modal__title-text {
	overflow: visible;
}

.pro-modal .pro-modal__line {
	position: absolute;
	top: var( --pm-line-top );
	right: 24px;
	left: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	color: var( --pm-muted );
	font-size: 12px;
	line-height: 15px;
	white-space: nowrap;
}

.pro-modal .pro-modal__line-icon {
	flex: none;
	width: 12px;
	height: 12px;
}

.pro-modal .pro-modal__soon {
	color: var( --pm-final-hi );
	font-weight: 700;
}

/* Clock: four 30 x 33 boxes, 48px apart. */
.pro-modal .pro-modal__countdown {
	position: absolute;
	top: var( --pm-clock-top );
	right: 0;
	left: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.pro-modal .pro-modal__unit {
	display: grid;
	justify-items: center;
	width: 30px;
}

.pro-modal .pro-modal__unit-box {
	display: grid;
	place-items: center;
	width: 30px;
	height: 33px;
	border-radius: 8px;
	background: var( --pm-box );
	box-shadow: inset 0 0 0 1px var( --pm-box-line );
	color: var( --pm-navy );
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.pro-modal .pro-modal__unit-label {
	margin-top: 4px;
	color: var( --pm-muted );
	font-size: 10px;
	line-height: 12px;
}

/* The two dots between units, in an 18px gap. */
.pro-modal .pro-modal__sep {
	position: relative;
	flex: none;
	width: 18px;
	height: 33px;
}

.pro-modal .pro-modal__sep::before,
.pro-modal .pro-modal__sep::after {
	position: absolute;
	left: 8.2px;
	width: 1.6px;
	height: 1.6px;
	border-radius: 50%;
	background: var( --pm-sep );
	content: "";
}

.pro-modal .pro-modal__sep::before {
	top: 15.4px;
}

.pro-modal .pro-modal__sep::after {
	top: 19.6px;
}

/*
 * Seconds: the one live part, in the campaign's tone as on sovlix.com, then
 * orange for the last 72 hours together with "Ending Soon!".
 */
.pro-modal .pro-modal__unit--secs .pro-modal__unit-box {
	background: linear-gradient( 180deg, var( --pm-tick-hi ) 0%, var( --pm-tick ) 100% );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.45 ), 0 0 16px -4px var( --pm-tick );
	font-weight: 700;
}

.pro-modal .pro-modal__unit--secs .pro-modal__unit-label {
	color: var( --pm-tick );
	font-weight: 600;
}

.pro-modal .pro-modal__card.is-final .pro-modal__unit--secs .pro-modal__unit-box {
	background: linear-gradient( 180deg, var( --pm-final-hi ) 0%, var( --pm-final ) 100% );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.45 ), 0 0 18px -3px var( --pm-final );
}

.pro-modal .pro-modal__card.is-final .pro-modal__unit--secs .pro-modal__unit-label {
	color: var( --pm-final-hi );
}

.pro-modal .pro-modal__unit--secs .pro-modal__digit {
	display: inline-block;
	animation: pro-modal-tick 420ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pro-modal a.pro-modal__cta,
.pro-modal a.pro-modal__cta:link,
.pro-modal a.pro-modal__cta:visited {
	position: absolute;
	top: var( --pm-cta-top );
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 198px;
	height: 48px;
	margin: 0 auto;
	padding: 0 24px;
	border-radius: 12px;
	background: var( --pm-cta );
	box-shadow: 0 10px 24px -12px rgba( 28, 135, 255, 0.8 ), inset 0 1px 0 rgba( 255, 255, 255, 0.18 );
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, transform 160ms ease;
}

.pro-modal a.pro-modal__cta:hover,
.pro-modal a.pro-modal__cta:focus {
	background: var( --pm-cta-hover );
	color: #ffffff;
	text-decoration: none;
}

.pro-modal a.pro-modal__cta:active {
	background: var( --pm-cta-active );
	color: #ffffff;
	transform: translateY( 1px );
}

.pro-modal a.pro-modal__cta:focus-visible {
	outline: 2px solid var( --pm-edge );
	outline-offset: 3px;
}

.pro-modal a.pro-modal__secondary,
.pro-modal a.pro-modal__secondary:link,
.pro-modal a.pro-modal__secondary:visited {
	position: absolute;
	top: var( --pm-demo-top );
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: max-content;
	height: 32px;
	margin: 0 auto;
	padding: 0 10px;
	color: var( --pm-muted );
	font-size: 13px;
	line-height: 16px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: color 160ms ease;
}

.pro-modal a.pro-modal__secondary:hover,
.pro-modal a.pro-modal__secondary:focus {
	color: #f2f6ff;
}

.pro-modal a.pro-modal__secondary:active {
	color: #ffffff;
}

.pro-modal a.pro-modal__secondary:focus-visible {
	border-radius: 6px;
	outline: 2px solid var( --pm-edge );
	outline-offset: 0;
}

.pro-modal .pro-modal__sr-only {
	position: absolute;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

/*
 * Every screen.
 * The overlay is the container, measured inside its 16px padding, so each
 * threshold is exactly where the card stops fitting.
 *   Wide but short (a 1366 x 768 window with browser bars, dev tools open):
 *   the whole card scales to 92%, then 84%; below that the overlay scrolls, so
 *   text never gets smaller than 84%.
 *   Narrower than the card (520px): it stops being a drawing and reflows, fills
 *   the width, keeps text at full size and the button at least 232px.
 */
@container ( min-width: 520px ) and ( max-height: 457px ) {
	.pro-modal .pro-modal__card {
		zoom: 0.92;
	}

	.pro-modal .pro-modal__card--compact {
		zoom: 1;
	}
}

@container ( min-width: 520px ) and ( max-height: 420px ) {
	.pro-modal .pro-modal__card {
		zoom: 0.84;
	}

	.pro-modal .pro-modal__card--compact {
		zoom: 1;
	}
}

/* The 400px card fits more often, so it scales later. */
@container ( min-width: 520px ) and ( max-height: 399px ) {
	.pro-modal .pro-modal__card--compact {
		zoom: 0.92;
	}
}

@container ( min-width: 520px ) and ( max-height: 367px ) {
	.pro-modal .pro-modal__card--compact {
		zoom: 0.84;
	}
}

@container ( max-width: 519px ) {
	.pro-modal .pro-modal__card,
	.pro-modal .pro-modal__card--compact,
	.pro-modal .pro-modal__card--compact.pro-modal__card--no-link,
	.pro-modal .pro-modal__card--two-line.pro-modal__card--no-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 520px;
		height: auto;
		padding: 0 20px 22px;
		border-radius: 28px;
	}

	.pro-modal .pro-modal__art {
		position: relative;
		left: auto;
		width: min( 389px, 86% );
		height: auto;
		transform: none;
	}

	.pro-modal .pro-modal__close {
		top: 6px;
		inset-inline-end: 6px;
	}

	/* :link and :visited listed too: the base rules name them, (0,3,1). */
	.pro-modal .pro-modal__title,
	.pro-modal .pro-modal__line,
	.pro-modal .pro-modal__countdown,
	.pro-modal a.pro-modal__cta,
	.pro-modal a.pro-modal__cta:link,
	.pro-modal a.pro-modal__cta:visited,
	.pro-modal a.pro-modal__secondary,
	.pro-modal a.pro-modal__secondary:link,
	.pro-modal a.pro-modal__secondary:visited {
		position: static;
	}

	.pro-modal .pro-modal__title {
		margin-top: 26px;
		font-size: 22px;
		line-height: 1.25;
		white-space: normal;
		text-wrap: balance;
	}

	.pro-modal .pro-modal__title-text {
		overflow: visible;
	}

	.pro-modal .pro-modal__line {
		flex-wrap: wrap;
		row-gap: 2px;
		margin-top: 10px;
		white-space: normal;
		text-wrap: balance;
	}

	.pro-modal .pro-modal__countdown {
		margin-top: 16px;
	}

	.pro-modal a.pro-modal__cta,
	.pro-modal a.pro-modal__cta:link,
	.pro-modal a.pro-modal__cta:visited {
		width: auto;
		min-width: 232px;
		max-width: 100%;
		height: 50px;
		margin-top: 26px;
		padding: 0 28px;
		font-size: 19px;
	}

	.pro-modal a.pro-modal__secondary,
	.pro-modal a.pro-modal__secondary:link,
	.pro-modal a.pro-modal__secondary:visited {
		height: 40px;
		margin-top: 8px;
	}
}

@container ( max-width: 359px ) {
	.pro-modal .pro-modal__card,
	.pro-modal .pro-modal__card--compact {
		padding: 0 14px 18px;
		border-radius: 24px;
	}

	.pro-modal .pro-modal__title {
		font-size: 20px;
	}

	.pro-modal a.pro-modal__cta,
	.pro-modal a.pro-modal__cta:link,
	.pro-modal a.pro-modal__cta:visited {
		font-size: 17px;
	}
}

/*
 * RTL: the close mark follows the page direction through inset-inline-end, so
 * it needs no `.rtl` rule (a prefixed host stylesheet could never match one);
 * the clock keeps Days to Secs.
 */
.rtl .pro-modal .pro-modal__countdown {
	direction: ltr;
}

@keyframes pro-modal-fade {
	from {
		opacity: 0;
	}
}

@keyframes pro-modal-panel {
	from {
		opacity: 0;
		transform: translateY( 8px ) scale( 0.98 );
	}
}

@keyframes pro-modal-tick {
	from {
		opacity: 0.35;
		transform: translateY( -4px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pro-modal,
	.pro-modal .pro-modal__card,
	.pro-modal .pro-modal__unit--secs .pro-modal__digit {
		animation: none;
	}

	.pro-modal .pro-modal__close,
	.pro-modal a.pro-modal__cta,
	.pro-modal a.pro-modal__secondary {
		transition: none;
	}
}