/*
 * Subscribe Popup — frontend.
 * Every rule is scoped under .td-popup. Style knobs arrive as custom properties
 * (set inline by PHP): --td-popup-accent, --td-popup-overlay, --td-popup-max-width,
 * --td-popup-radius. Override in a child theme by redefining them on :root.
 */

:root {
	--td-popup-accent: #0ebfe9;
	--td-popup-accent-hover: #00677f;
	--td-popup-button: #00677f;        /* white text on this = 6.3:1 (AA) */
	--td-popup-button-hover: #004b5c;
	--td-popup-overlay: 0.6;
	--td-popup-max-width: 520px;
	--td-popup-radius: 8px;
	--td-popup-text: #111;
	--td-popup-muted: #333;
	--td-popup-faint: #666;
	--td-popup-border: #ddd;
}

/* Genesis and others ship unscoped `dialog { display:block }` rules. */
.td-popup:not([open]) { display: none !important; }

.td-popup {
	position: fixed;
	inset: 0;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	width: min(100% - 2rem, var(--td-popup-max-width));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	overflow: visible;
	color: var(--td-popup-text);
	font-family: inherit;
	z-index: 100000;
}
.td-popup--image_left { --td-popup-max-width: 760px; }

.td-popup::backdrop {
	background: rgba(0, 0, 0, var(--td-popup-overlay));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.td-popup__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--td-popup-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	max-height: calc(100dvh - 2rem);
}
.td-popup--image_left .td-popup__card { flex-direction: row; }

.td-popup__media {
	flex: 0 0 40%;
	min-height: 320px;
	background: #eee;
}
.td-popup__media img,
.td-popup__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.td-popup__main {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.td-popup__bar { height: 4px; background: var(--td-popup-accent); }

.td-popup__content { padding: 32px 40px 28px; }

.td-popup__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--td-popup-muted);
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	min-height: 0;
}
.td-popup__close:hover { color: var(--td-popup-button); background: #f2f2f2; }
.td-popup__close:focus-visible { color: var(--td-popup-button); background: transparent; outline: 3px solid var(--td-popup-button); outline-offset: 2px; }

.td-popup__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font: 700 11px/1 inherit;
	letter-spacing: 0.08em;
	padding: 4px 6px;
	background: #ffef99;
	color: #5a4a00;
	border-radius: 3px;
}

.td-popup__title {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--td-popup-text);
	text-wrap: pretty;
}
.td-popup:focus, .td-popup__title:focus { outline: none; }

.td-popup__body { font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--td-popup-muted); }
.td-popup__body p { margin: 0 0 12px; }
.td-popup__body p:last-child { margin-bottom: 0; }
.td-popup__body a { color: var(--td-popup-accent); }
.td-popup__body a:hover { color: var(--td-popup-accent-hover); }

.td-popup__form { margin-top: 16px; }

/* Gravity Forms inside the card: quiet the theme and align to the accent. */
.td-popup .gform_wrapper { margin: 0; --gf-ctrl-btn-bg-color-primary: var(--td-popup-button); --gf-ctrl-btn-bg-color-hover-primary: var(--td-popup-button-hover); --gf-ctrl-border-color: var(--td-popup-border); --gf-ctrl-border-color-focus: var(--td-popup-accent); --gf-color-primary: var(--td-popup-accent); }
.td-popup .gform_wrapper .gform_heading { display: none; }
.td-popup .gform_wrapper .gfield_label,
.td-popup .gform_wrapper .gform-field-label { font-size: 13px; font-weight: 400; color: var(--td-popup-muted); }
.td-popup .gform_wrapper input[type="text"],
.td-popup .gform_wrapper input[type="email"] { width: 100%; min-height: 44px; font-size: 16px; border: 1px solid var(--td-popup-border); border-radius: 4px; padding: 8px 12px; background: #fff; color: var(--td-popup-text); box-shadow: none; }
.td-popup .gform_wrapper input:focus { border-color: var(--td-popup-accent); outline: 2px solid var(--td-popup-accent); outline-offset: 0; }
.td-popup .gform_wrapper .gform_footer { margin: 12px 0 0; padding: 0; }
.td-popup .gform_wrapper .gform_button,
.td-popup .gform_wrapper .gform-button,
.td-popup__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: var(--td-popup-button);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	transition: background 0.15s ease;
}
.td-popup .gform_wrapper .gform_button:hover,
.td-popup .gform_wrapper .gform-button:hover,
.td-popup__button:hover,
.td-popup__button:focus-visible { background: var(--td-popup-button-hover); color: #fff; }
.td-popup .gform_wrapper .gform_button:focus-visible,
.td-popup .gform_wrapper .gform-button:focus-visible,
.td-popup__button:focus-visible,
.td-popup__followup-link:focus-visible { outline: 3px solid var(--td-popup-button); outline-offset: 3px; }
.td-popup .gform_wrapper .gform_validation_errors { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px; }
.td-popup .gform_wrapper .gfield_validation_message,
.td-popup .gform_wrapper .validation_message { font-size: 13px; margin-top: 6px; }
.td-popup .gform_wrapper .gform_ajax_spinner { margin-left: 8px; }

.td-popup__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-top: 12px;
}
.td-popup__privacy { margin: 0; font-size: 12px; line-height: 1.4; color: var(--td-popup-faint); font-weight: 300; text-wrap: balance; }
.td-popup__no-thanks {
	flex: 0 0 auto;
	margin: 0;
	min-height: 44px;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: #555;
	font: inherit;
	font-size: 13px;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
}
.td-popup__no-thanks:hover { color: var(--td-popup-button); background: transparent; }
.td-popup__no-thanks:focus-visible { outline: 3px solid var(--td-popup-button); outline-offset: 2px; border-radius: 2px; }

.td-popup__success { padding: 40px; text-align: left; }
.td-popup__success-text { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--td-popup-muted); }
.td-popup__success-text p { margin: 0 0 12px; }
.td-popup__success-text p:last-child { margin: 0; }
.td-popup__success-text strong { color: var(--td-popup-text); font-weight: 700; }
.td-popup__followup { margin: 12px 0 0; }
.td-popup__success-text a { color: var(--td-popup-accent); font-weight: 700; text-decoration: underline; }
.td-popup__success-text a:hover { color: var(--td-popup-accent-hover); }
.td-popup--converted .td-popup__content { display: none; }

/* Motion. */
@media (prefers-reduced-motion: no-preference) {
	.td-popup[open] { animation: td-popup-in 260ms ease-out; }
	.td-popup[open]::backdrop { animation: td-popup-fade 200ms ease-out; }
	.td-popup.td-popup--closing { animation: td-popup-out 180ms ease-in forwards; }
	.td-popup.td-popup--closing::backdrop { animation: td-popup-fade 180ms ease-in reverse forwards; }
}
@media (prefers-reduced-motion: reduce) {
	.td-popup[open] { animation: td-popup-fade 120ms ease-out; }
	.td-popup.td-popup--closing { animation: td-popup-fade 120ms ease-in reverse forwards; }
}
@keyframes td-popup-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes td-popup-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes td-popup-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mobile: bottom sheet. */
@media (max-width: 639px) {
	.td-popup__content { padding: 24px 24px 28px; }
	.td-popup__title { font-size: 24px; }
	.td-popup__media { display: none; }
	.td-popup--image_left .td-popup__card { flex-direction: column; }

	.td-popup--sheet {
		inset: auto 0 0 0;
		margin: 0;
		width: 100%;
		max-height: 90dvh;
	}
	.td-popup--sheet .td-popup__card {
		border-radius: 12px 12px 0 0;
		max-height: 90dvh;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
	}
	@media (prefers-reduced-motion: no-preference) {
		.td-popup--sheet[open] { animation: td-popup-sheet-in 300ms ease-out; }
		.td-popup--sheet.td-popup--closing { animation: td-popup-sheet-out 200ms ease-in forwards; }
	}
}
@keyframes td-popup-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes td-popup-sheet-out { from { transform: none; } to { transform: translateY(100%); } }

body.td-popup-open { overflow: hidden; }