/**
 * Site Pop-up modal styles.
 *
 * Plain CSS (no SCSS build runs in this repo — mirrors assets/css/extra.css).
 * Built on top of the bundled UIKit modal (.uk-modal / .uk-modal-dialog).
 * Markup: template-parts/popup-modal.php. Config: inc/popup-fields.php.
 * Form: inc/gravity-forms/popup-signup-form.php.
 *
 * Matches the lead-form design in Figma (JT / pages → "Popup", node 335:3): a
 * 1080px panel with a full-bleed image down the left (46.5%) and a dark right
 * half holding the headline, intro copy, a Name / Email / Type / State form,
 * a full-width white SIGN UP button and fine print.
 *
 * Colours are admin-configurable, so rather than hard-coding the design's #333
 * panel the form derives from three custom properties set inline on the dialog
 * (see template-parts/popup-modal.php):
 *   --jt-popup-bg     panel background   (design: #333)
 *   --jt-popup-text   panel text colour  (design: #fff)
 *   --jt-popup-border input border       (design: #b5b5be)
 * The SIGN UP button inverts bg/text so it reads on light and dark panels alike.
 */

/* Dialog -------------------------------------------------------------------- */
.jt-popup .jt-popup__dialog {
	--jt-popup-bg: #fff;
	--jt-popup-text: #1d1d1d;
	--jt-popup-border: #b5b5be;
	/* UIkit sets `max-width: calc(100% - 0.01px) !important` on
	   .uk-modal-dialog, so any max-width here is dead on arrival — size the
	   panel with `width` instead and let that !important do the viewport clamp. */
	width: 600px;
	max-width: 600px;
	margin: 0 auto;
	padding: 40px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}

/* Keep content readable over a background image. */
.jt-popup--has-bg-image .jt-popup__body {
	position: relative;
	z-index: 1;
}

/* Close ✕ — sits top-right over the panel, inherits the panel text colour. */
.jt-popup__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	color: inherit;
	opacity: 0.7;
}

.jt-popup__close:hover,
.jt-popup__close:focus {
	opacity: 1;
}

/* Content ------------------------------------------------------------------- */
.jt-popup__heading {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	color: inherit;
}

.jt-popup__text {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.34;
	color: inherit;
}

.jt-popup__text p:last-child {
	margin-bottom: 0;
}

/* Form ---------------------------------------------------------------------- */
.jt-popup__form {
	margin-top: 20px;
}

/* Strip the chrome Gravity Forms adds around a standalone form — the pop-up
   supplies its own heading, spacing and button treatment. */
.jt-popup__form .gform_wrapper,
.jt-popup__form .gform_wrapper form,
.jt-popup__form .gform_heading {
	margin: 0;
	padding: 0;
}

.jt-popup__form .gform_heading {
	display: none;
}

/* Two-column field grid. Overrides Gravity Forms' own 12-column grid so the
   design's Type | State pairing works with or without GF's stylesheet. */
.jt-popup__form .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 32px;
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jt-popup__form .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jt-popup__form .gfield.gf_left_half {
	grid-column: 1 / 2;
}

.jt-popup__form .gfield.gf_right_half {
	grid-column: 2 / 3;
}

/* Field labels. */
.jt-popup__form label,
.jt-popup__form .gfield_label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: inherit;
}

.jt-popup__form .gfield_required {
	color: inherit;
	opacity: 0.7;
}

/* Text inputs, selects and textareas — transparent with a 1px border, square
   corners and the design's 35px height. */
.jt-popup__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.jt-popup__form select,
.jt-popup__form textarea {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 6px 12px;
	height: 35px;
	min-height: 35px;
	background-color: transparent;
	border: 1px solid var(--jt-popup-border, #b5b5be);
	border-radius: 0;
	color: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.jt-popup__form textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 12px;
}

.jt-popup__form input::placeholder,
.jt-popup__form textarea::placeholder {
	color: inherit;
	opacity: 0.6;
}

.jt-popup__form input:focus,
.jt-popup__form select:focus,
.jt-popup__form textarea:focus {
	outline: none;
	border-color: currentColor;
}

/* Native select options render in the OS palette, so pin them to a readable
   pairing rather than inheriting the panel's white-on-transparent. */
.jt-popup__form select option {
	color: #1d1d1d;
	background-color: #fff;
}

/* Select chevron. */
.jt-popup__form select {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b5b5be' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

/* Give admins a way to lay two fields side by side in a non-GF form by
   wrapping them in an element with .jt-popup__row in the form markup. */
.jt-popup__form .jt-popup__row {
	display: flex;
	gap: 32px;
}

.jt-popup__form .jt-popup__row > * {
	flex: 1 1 0;
}

/* Submit / form button — full-width, inverted against the panel colours, so on
   the design's #333 panel it renders as the white button with #333 text. */
.jt-popup__form .gform_footer {
	margin: 0;
	padding: 0;
}

.jt-popup__form input[type="submit"],
.jt-popup__form button[type="submit"],
.jt-popup__form button:not([type="button"]),
.jt-popup__form .gform_footer input,
.jt-popup__form .button {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	padding: 14px 24px;
	height: auto;
	min-height: 49px;
	background-color: var(--jt-popup-text, #1d1d1d);
	color: var(--jt-popup-bg, #fff);
	border: 0;
	border-radius: 0;
	font-size: 15px;
	font-weight: 700;
	/* The theme's global `.button` sets height/line-height:60px and a 50/80px
	   padding, all of which Gravity Forms' `gform_button button` class pulls in.
	   Reset line-height explicitly — overriding height and padding is not
	   enough on its own. */
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.jt-popup__form input[type="submit"]:hover,
.jt-popup__form button[type="submit"]:hover,
.jt-popup__form button:not([type="button"]):hover,
.jt-popup__form .gform_footer input:hover,
.jt-popup__form .button:hover,
.jt-popup__form input[type="submit"]:focus,
.jt-popup__form button[type="submit"]:focus,
.jt-popup__form .button:focus {
	opacity: 0.9;
}

/* Validation and confirmation messages need to stay legible on a dark panel. */
.jt-popup__form .gfield_description,
.jt-popup__form .gfield_validation_message,
.jt-popup__form .validation_message {
	margin: -12px 0 12px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	line-height: 1.35;
	color: #ffb4a1;
}

.jt-popup__form .gform_validation_errors {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: rgba(231, 65, 17, 0.12);
	border: 1px solid #e74111;
	border-radius: 0;
	box-shadow: none;
	font-size: 13px;
	color: inherit;
}

.jt-popup__form .gform_confirmation_message {
	font-size: 16px;
	line-height: 1.45;
	color: inherit;
}

/* Fine print (e.g. "*T&Cs Apply") shown beneath the button. */
.jt-popup__fineprint,
.jt-popup__form .jt-popup__fineprint,
.jt-popup__form small {
	display: block;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: inherit;
}

/* CTA button (Sale / Key-info layouts) — brand orange, overridable from admin. */
.jt-popup__actions {
	margin: 24px 0 0;
}

.jt-popup .jt-popup__button {
	display: inline-block;
	padding: 14px 32px;
	background-color: #e74111;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0;
	border: 0;
	cursor: pointer;
}

.jt-popup .jt-popup__button:hover,
.jt-popup .jt-popup__button:focus {
	opacity: 0.92;
}

/* Content image ------------------------------------------------------------- */
.jt-popup__media img {
	display: block;
	width: 100%;
	height: auto;
}

.jt-popup__media--top {
	margin-bottom: 20px;
}

/* Side-by-side layouts (image left / right) on desktop — the design's shape. */
@media (min-width: 768px) {
	.jt-popup--img-left .jt-popup__dialog,
	.jt-popup--img-right .jt-popup__dialog {
		display: flex;
		align-items: stretch;
		gap: 0;
		width: 1080px;
		max-width: 1080px;
		padding: 0;
		overflow: hidden;
	}

	.jt-popup--img-left .jt-popup__media,
	.jt-popup--img-right .jt-popup__media {
		flex: 0 0 46.5%;
	}

	.jt-popup--img-left .jt-popup__media img,
	.jt-popup--img-right .jt-popup__media img {
		height: 100%;
		object-fit: cover;
	}

	.jt-popup--img-left .jt-popup__body,
	.jt-popup--img-right .jt-popup__body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 56px 48px;
		align-self: center;
	}

	.jt-popup--img-right .jt-popup__dialog {
		flex-direction: row-reverse;
	}
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.jt-popup .jt-popup__dialog {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		padding: 28px 20px;
	}

	.jt-popup__heading {
		font-size: 24px;
	}

	/* On small screens, image-left/right collapse to stacked. */
	.jt-popup--img-left .jt-popup__media,
	.jt-popup--img-right .jt-popup__media {
		margin-bottom: 18px;
	}

	.jt-popup--img-left .jt-popup__media img,
	.jt-popup--img-right .jt-popup__media img {
		max-height: 180px;
		object-fit: cover;
	}

	/* Type / State stack rather than squeeze. */
	.jt-popup__form .gform_fields {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.jt-popup__form .gfield.gf_left_half,
	.jt-popup__form .gfield.gf_right_half {
		grid-column: 1 / -1;
	}

	.jt-popup__form .jt-popup__row {
		flex-direction: column;
		gap: 0;
	}
}