/*
 * Offer popup (template-parts/offer-popup.php, js/offer-popup.js).
 *
 * Card: the image on top with its badge, then the tag, title, text, price,
 * countdown and button. From 768px, with an image, the image moves beside the
 * text. Without an image a navy panel with the badge stands in for it.
 * Poster: the image alone at its own shape, as large as the screen allows.
 *
 * Above the live chat (9990), below the counseling popup (9995), which a
 * #free-counseling link on the offer opens. Plain CSS, outside the frozen
 * Tailwind build.
 */

.tia-offer {
	--to-primary: #4F46E5;
	--to-navy: #0F172A;
	--to-ink: #0F172A;
	--to-text: #475569;
	--to-muted: #64748B;
	--to-line: #E2E8F0;
	--to-amber: #F59E0B;
	--to-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: fixed;
	inset: 0;
	z-index: 9993;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	color: var(--to-ink);
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: 1.5;
	text-align: left;
}

.tia-offer[hidden] {
	display: none;
}

.tia-offer *,
.tia-offer *::before,
.tia-offer *::after {
	box-sizing: border-box;
}

/* The page under it stays put; the gutter keeps it from jumping sideways. */
html.tia-offer-lock {
	overflow: hidden;
}

html.tia-offer-lock body {
	padding-right: var(--tia-offer-gutter, 0px);
}

.tia-offer__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Backdrop and dialog
 * ------------------------------------------------------------------------ */

.tia-offer__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(15 23 42 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.28s ease;
}

.tia-offer.is-open .tia-offer__backdrop {
	opacity: 1;
}

.tia-offer__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 22px;
	background-color: #FFFFFF;
	box-shadow: 0 30px 70px -25px rgb(15 23 42 / 0.65);
	outline: none;
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.3s ease, transform 0.4s var(--to-ease);
}

.tia-offer.is-open .tia-offer__dialog {
	opacity: 1;
	transform: none;
}

/* Over a picture or the navy panel: dark glass with a white ×. */
.tia-offer__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgb(15 23 42 / 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.tia-offer__close:hover {
	background-color: rgb(15 23 42 / 0.8);
	transform: rotate(90deg);
}

.tia-offer__close:focus-visible {
	outline: 2px solid #22D3EE;
	outline-offset: 2px;
}

.tia-offer .tia-offer__close .material-symbols-outlined {
	font-size: 22px;
}

/* ---------------------------------------------------------------------------
 * Card: picture, or the navy panel when there is none
 * ------------------------------------------------------------------------ */

.tia-offer__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: #1E293B;
}

.tia-offer__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--to-ease);
}

.tia-offer__media:hover .tia-offer__img {
	transform: scale(1.04);
}

.tia-offer__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: var(--to-amber);
	box-shadow: 0 10px 20px -8px rgb(0 0 0 / 0.5);
	color: var(--to-navy);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.tia-offer__hero {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	overflow: hidden;
	padding: 30px 24px 26px;
	background-color: var(--to-navy);
	text-align: center;
}

.tia-offer__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tia-offer .tia-offer__hero-icon {
	position: relative;
	display: grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 18px;
	background-color: rgb(255 255 255 / 0.08);
	color: #FBBF24;
	font-size: 30px;
}

.tia-offer__hero-badge {
	position: relative;
	color: #FBBF24;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* ---------------------------------------------------------------------------
 * Card: text
 * ------------------------------------------------------------------------ */

.tia-offer__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px 22px 18px;
}

.tia-offer__tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: #EEF2FF;
	color: var(--to-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.tia-offer .tia-offer__tag .material-symbols-outlined {
	font-size: 15px;
}

.tia-offer__title {
	margin: 10px 0 0;
	color: var(--to-ink);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
}

.tia-offer__text {
	margin: 8px 0 0;
	color: var(--to-text);
	font-size: 14px;
	line-height: 1.6;
}

.tia-offer__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 14px 0 0;
}

.tia-offer__price strong {
	color: var(--to-primary);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.tia-offer__price del {
	color: var(--to-muted);
	font-size: 15px;
	font-weight: 600;
}

.tia-offer__countdown {
	margin-top: 14px;
}

.tia-offer__countdown[hidden] {
	display: none;
}

.tia-offer__countdown-label {
	display: block;
	margin-bottom: 6px;
	color: var(--to-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tia-offer__units {
	display: flex;
	gap: 6px;
}

.tia-offer__unit {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	padding: 6px 4px;
	border: 1px solid var(--to-line);
	border-radius: 10px;
	background-color: #F8FAFC;
	color: var(--to-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tia-offer__unit strong {
	color: var(--to-ink);
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1.2;
}

.tia-offer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 14px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.tia-offer__cta:hover,
.tia-offer__cta:focus,
.tia-offer__cta:visited {
	color: #FFFFFF;
}

.tia-offer__cta:focus-visible {
	outline: 2px solid var(--to-primary);
	outline-offset: 3px;
}

.tia-offer .tia-offer__cta .material-symbols-outlined {
	font-size: 20px;
	transition: transform 0.25s ease;
}

.tia-offer__cta:hover .material-symbols-outlined {
	transform: translateX(3px);
}

.tia-offer__skip {
	align-self: center;
	margin: 8px 0 0;
	padding: 6px 10px;
	border: 0;
	background: none;
	color: var(--to-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.tia-offer__skip:hover {
	color: var(--to-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tia-offer__skip:focus-visible {
	outline: 2px solid var(--to-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Card from 768px: the picture beside the text
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) {
	.tia-offer--card.tia-offer--has-image .tia-offer__dialog {
		max-width: 780px;
		flex-direction: row;
	}

	.tia-offer--card.tia-offer--has-image .tia-offer__media {
		flex: 0 0 46%;
		min-height: 400px;
		aspect-ratio: auto;
	}

	.tia-offer--card.tia-offer--has-image .tia-offer__body {
		justify-content: center;
		padding: 36px 32px 26px;
	}

	/* The × now sits over the white text side. */
	.tia-offer--card.tia-offer--has-image .tia-offer__close {
		background-color: #F1F5F9;
		color: var(--to-ink);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.tia-offer--card.tia-offer--has-image .tia-offer__close:hover {
		background-color: #E2E8F0;
	}

	.tia-offer--card .tia-offer__title {
		font-size: 26px;
	}

	.tia-offer--card:not(.tia-offer--has-image) .tia-offer__dialog {
		max-width: 440px;
	}
}

/* ---------------------------------------------------------------------------
 * Poster: the image alone
 * ------------------------------------------------------------------------ */

.tia-offer--poster .tia-offer__dialog {
	width: auto;
	max-width: min(520px, 100%);
	overflow: visible;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.tia-offer__poster {
	display: block;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.7);
}

.tia-offer__poster:focus-visible {
	outline: 3px solid #22D3EE;
	outline-offset: 3px;
}

.tia-offer__poster-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
}

.tia-offer--poster .tia-offer__close {
	top: 10px;
	right: 10px;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.tia-offer__backdrop,
	.tia-offer__dialog,
	.tia-offer__img,
	.tia-offer__close,
	.tia-offer .tia-offer__cta .material-symbols-outlined {
		transition: none;
	}

	.tia-offer__dialog {
		transform: none;
	}

	.tia-offer__media:hover .tia-offer__img,
	.tia-offer__close:hover,
	.tia-offer__cta:hover .material-symbols-outlined {
		transform: none;
	}
}