/* =============================================================================
   Suntup Subscribe Popup
   File: assets/css/popup-subscribe.css

   Layout    : Two-column — image left (42%), form right
   Typography: Headline → freight-text-pro, serif
                Subhead  → freight-sans-pro, sans-serif
                All else → freight-sans-pro, sans-serif
   ============================================================================= */

/* ── Fade-in animations ───────────────────────────────────────────────────────── */
@keyframes suntupOverlayFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes suntupPopupFadeIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Overlay — full viewport coverage ────────────────────────────────────────── */
.suntup-popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 2147483647 !important;
	background: rgba(0, 0, 0, 0.92) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.5rem !important;
	animation: suntupOverlayFadeIn 0.25s ease forwards;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.suntup-popup-overlay[hidden] {
	display: none !important;
}

/* ── Modal ────────────────────────────────────────────────────────────────────── */
.suntup-popup {
	position: relative;
	display: flex;
	max-width: 860px;
	width: 100%;
	background: #1a1a1a;
	color: #f0ece4;
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	animation: suntupPopupFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Image panel ──────────────────────────────────────────────────────────────── */
.suntup-popup__image {
	width: 42%;
	flex-shrink: 0;
	position: relative;
	min-height: 540px;
}

.suntup-popup__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ── Form panel ───────────────────────────────────────────────────────────────── */
.suntup-popup__form {
	flex: 1;
	padding: 2.25rem 2.25rem 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

/* ── Close button ─────────────────────────────────────────────────────────────── */
.suntup-popup__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: none;
	color: rgba(240, 236, 228, 0.4);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s ease;
}

.suntup-popup__close:hover,
.suntup-popup__close:focus {
	color: #f0ece4;
	outline: none;
}

/* ── Header ───────────────────────────────────────────────────────────────────── */
.suntup-popup__eyebrow {
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(240, 236, 228, 0.38);
	margin-bottom: 0.55rem;
}

.suntup-popup__headline {
	font-family: 'freight-text-pro', serif;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.15;
	color: #f0ece4;
	margin-bottom: 0.4rem;
}

.suntup-popup__subheadline {
	font-family: 'freight-sans-pro', sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: rgba(240, 236, 228, 0.62);
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

/* ── Gravity Forms wrapper ────────────────────────────────────────────────────── */
.suntup-popup__form-wrap {
	margin-bottom: 0;
}

.suntup-popup .gform_wrapper,
.suntup-popup .gform_wrapper.gravity-theme {
	margin: 0 !important;
	padding: 0 !important;
}

.suntup-popup .gform_body {
	margin: 0 !important;
	padding: 0 !important;
}

.suntup-popup .gform_fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.suntup-popup .gfield {
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Field labels ─────────────────────────────────────────────────────────────── */
.suntup-popup .gfield_label,
.suntup-popup .gform-field-label,
.suntup-popup .gform_wrapper .gfield_label,
.suntup-popup .gform_wrapper .gform-field-label {
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: rgba(240, 236, 228, 0.6) !important;
	margin-bottom: 0.28rem !important;
	display: block !important;
	font-weight: normal !important;
	line-height: 1 !important;
}

/* Hide the "SMS CONSENT" legend above checkbox field */
.suntup-popup .gfield--type-checkbox legend.gfield_label,
.suntup-popup .gfield--type-checkbox > .gfield_label,
.suntup-popup .gfield--type-checkbox > .gform-field-label {
	display: none !important;
}

/* Hide "(Required)" text appended by GF */
.suntup-popup .gfield_required,
.suntup-popup .gfield_required_text,
.suntup-popup .gfield_required_asterisk {
	display: none !important;
}

/* "OPTIONAL" label injected via JS next to Phone Number label */
.suntup-popup__optional {
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.6rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: rgba(240, 236, 228, 0.4) !important;
	margin-left: 0.4rem !important;
	font-weight: normal !important;
}

/* ── Inputs ───────────────────────────────────────────────────────────────────── */
.suntup-popup input[type="email"],
.suntup-popup input[type="tel"],
.suntup-popup input[type="text"] {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
	color: #f0ece4 !important;
	padding: 0.6rem 0.875rem !important;
	font-size: 0.9375rem !important;
	border-radius: 0 !important;
	outline: none !important;
	transition: border-color 0.2s ease, background 0.2s ease !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	height: auto !important;
	line-height: normal !important;
}

.suntup-popup input[type="email"]:focus,
.suntup-popup input[type="tel"]:focus,
.suntup-popup input[type="text"]:focus {
	border-color: rgba(240, 236, 228, 0.5) !important;
	border-bottom-color: rgba(240, 236, 228, 0.5) !important;
	background: rgba(255, 255, 255, 0.1) !important;
	box-shadow: none !important;
	outline: none !important;
}

.suntup-popup input[type="email"]::placeholder,
.suntup-popup input[type="tel"]::placeholder,
.suntup-popup input[type="text"]::placeholder {
	color: rgba(240, 236, 228, 0.3) !important;
}

/* ── SMS checkbox row ─────────────────────────────────────────────────────────── */
.suntup-popup .gchoice {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.65rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Native checkbox — styled via appearance:none below, not hidden */
.suntup-popup .gfield-choice-input {
	position: static !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ── Kill theme's custom checkbox pseudo-elements ─────────────────────────────── */
.suntup-popup .gfield_checkbox label::before,
.suntup-popup .gfield_checkbox label::after {
	display: none !important;
	content: none !important;
	background: none !important;
	border: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Remove theme's label padding that was making room for the pseudo-element */
.suntup-popup .gfield_checkbox label,
.suntup-popup .gfield_checkbox .gform-field-label {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	text-indent: 0 !important;
}

/* ── Checkbox label text ──────────────────────────────────────────────────────── */

/* Checkbox label text */
.suntup-popup .gchoice label,
.suntup-popup .gfield--type-checkbox label.gform-field-label {
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.75rem !important;
	color: rgba(240, 236, 228, 0.5) !important;
	line-height: 1.25 !important;
	cursor: pointer !important;
	font-weight: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 !important;
}

/* Links in SMS consent text */
.suntup-popup .gchoice label a {
	color: rgba(240, 236, 228, 0.5) !important;
	text-decoration: underline !important;
}

.suntup-popup .gchoice label a:hover {
	color: rgba(240, 236, 228, 0.75) !important;
}

/* ── Submit button ────────────────────────────────────────────────────────────── */
.suntup-popup .gform_footer,
.suntup-popup .gform_page_footer {
	margin-top: 18px !important;
	padding: 0 !important;
}

.suntup-popup input[type="submit"],
.suntup-popup button[type="submit"] {
	width: 100% !important;
	background: #b98757 !important;
	color: #ffffff !important;
	border: none !important;
	padding: 0.8rem 1.5rem !important;
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
	-webkit-appearance: none !important;
}

.suntup-popup input[type="submit"]:hover,
.suntup-popup button[type="submit"]:hover {
	background: #c9975f !important;
}

/* ── Confirmation message ─────────────────────────────────────────────────────── */
.suntup-popup .gform_confirmation_wrapper {
	text-align: center;
	padding: 1.5rem 0 0.5rem;
	color: rgba(240, 236, 228, 0.85);
	font-size: 1.5375rem;
	line-height: 1.6;
}

/* ── Validation errors ────────────────────────────────────────────────────────── */
.suntup-popup .gfield_error input {
	border-color: #c0392b !important;
}

.suntup-popup .validation_message {
	font-family: 'freight-sans-pro', sans-serif !important;
	color: #e74c3c;
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

/* ── Hide header and privacy note when confirmation is showing ────────────────── */
.suntup-popup .gform_confirmation_wrapper ~ .suntup-popup__privacy {
	display: none !important;
}

.suntup-popup:has(.gform_confirmation_wrapper) .suntup-popup__header {
	display: none !important;
}

.suntup-popup:has(.gform_confirmation_wrapper) .suntup-popup__privacy {
	display: none !important;
}

/* ── Privacy note ─────────────────────────────────────────────────────────────── */
.suntup-popup__privacy {
	font-family: 'freight-sans-pro', sans-serif !important;
	font-size: 0.75rem;
	color: rgba(240, 236, 228, 0.45);
	text-align: center;
	margin-top: 0.65rem;
	letter-spacing: 0.04em;
}

/* ── Responsive — hide image on mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
	.suntup-popup__image {
		display: none;
	}

	.suntup-popup__form {
		padding: 2.25rem 1.5rem 1.75rem;
	}

	.suntup-popup__headline {
		font-size: 1.5rem;
	}
}

/* ── Extra GF spacing overrides ───────────────────────────────────────────────── */
.suntup-popup .ginput_container {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.suntup-popup .gfield_description {
	display: none !important;
}
.suntup-popup .gform_fields .gfield + .gfield {
	margin-top: 0.25rem !important;
}
.suntup-popup .gfield--type-email,
.suntup-popup .gfield--type-phone,
.suntup-popup .gfield--type-checkbox {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.suntup-popup .gform_wrapper .top_label .gfield_label {
	margin-top: 0 !important;
	margin-bottom: 0.28rem !important;
}
.suntup-popup li.gfield {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Override native checkbox appearance completely ───────────────────────────── */
.suntup-popup input[type="checkbox"].gfield-choice-input {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 1rem !important;
	height: 1rem !important;
	min-width: 1rem !important;
	border: 1px solid rgba(240, 236, 228, 0.25) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	position: relative !important;
	flex-shrink: 0 !important;
	margin-top: 0.18rem !important;
	display: block !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.suntup-popup input[type="checkbox"].gfield-choice-input:checked {
	background-color: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(240, 236, 228, 0.6) !important;
}

.suntup-popup input[type="checkbox"].gfield-choice-input:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 0.3rem !important;
	height: 0.55rem !important;
	border: 2px solid #f0ece4 !important;
	border-top: none !important;
	border-left: none !important;
	transform: translate(-50%, -60%) rotate(45deg) !important;
	display: block !important;
}