/*
 * CaryTamura sign-up popups — two Elementor Popups:
 *   CT Article Signup Popup (5678)     "Like What You're Reading?", two steps
 *   CT Exclusive Listings Popup (5679) "Are you interested in buying a home?"
 *
 * SCOPE. Loaded only where either popup can open (functions.php,
 * carytamura_has_signup_popup()). Every rule is scoped under .ct-signup-popup,
 * the popups' CSS class, so no other popup or form is reached.
 *
 * VALUES. Measured from the live CTA Sign Up and Email Sign Up modals at
 * 1440, 1024, 768 and 375 wide (FACT): a white 860px panel on a 92% black
 * veil, 70px clear of the viewport sides (24px from 768); 80px padding (24px
 * article / 30px listings from 768); Playfair titles 43px (32px from 767),
 * Playfair leads 21px (18px from 767); a 420px (article) or 415px (listings)
 * column of underline inputs; 12px consent copy; the site's red button, full
 * width from 767; a 40px close cross 5px in from the corner, the listings
 * one at 20% as live.
 *
 * WHAT ELEMENTOR OWNS. Display conditions, width, overlay colour,
 * background, close button, closing, scroll lock and the forms themselves
 * are the popups' own settings. When and how often they open is
 * signup-popups.js (live's rule, which Elementor's timing cannot express).
 * This file holds the layout and type those cannot express.
 */

/* ----------------------------------------------------------------- shell -- */
.ct-signup-popup .dialog-widget-content {
	max-width: calc(100vw - 140px);
	border-radius: 0;
	box-shadow: none;
}

.ct-signup-popup .dialog-message {
	max-width: 100%;
	max-height: calc(100vh - 48px);
	overflow-x: hidden;
	overflow-y: auto;
}

/* Close: live's cross — two 20px by 2px strokes in a 40px box, 5px in. */
.ct-signup-popup .dialog-close-button {
	top: 5px;
	right: 5px;
	z-index: 11;
	width: 40px;
	height: 40px;
	margin: 0;
	color: var(--ct-ink);
	opacity: 1;
}

.ct-signup-popup--listings .dialog-close-button {
	opacity: 0.2;
}

.ct-signup-popup .dialog-close-button svg,
.ct-signup-popup .dialog-close-button i {
	display: none;
}

.ct-signup-popup .dialog-close-button::before,
.ct-signup-popup .dialog-close-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ct-signup-popup .dialog-close-button::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ct-signup-popup .dialog-close-button:focus-visible {
	outline: 2px solid var(--ct-accent);
	outline-offset: -2px;
}

/* ----------------------------------------------------------------- panel -- */
.ct-signup-popup .ct-signup.e-con {
	--padding-top: 80px;
	--padding-bottom: 80px;
	--padding-left: 80px;
	--padding-right: 80px;
	--gap: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	align-items: center;
	text-align: center;
	color: var(--ct-ink);
}

.ct-signup-popup .ct-signup > .elementor-widget {
	width: 100%;
	margin: 0;
}

/* Title and lead: the article's live inside the form's first step (an HTML
 * field); the listings popup's are Heading and Text Editor widgets. */
.ct-signup-popup h2.ct-signup__title,
.ct-signup-popup .ct-signup__title .elementor-heading-title {
	margin: 0 0 24px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-size-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--ct-ink);
}

.ct-signup-popup p.ct-signup__lead,
.ct-signup-popup .ct-signup__lead p {
	margin: 0 0 24px;
	font-family: var(--ct-font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 1px;
	text-align: center;
	color: var(--ct-ink);
}

/* Live's title group leaves 8px more under the listings lead. */
.ct-signup-popup--listings .ct-signup__lead p {
	margin-bottom: 32px;
}

/* ------------------------------------------------------------------ form -- */
.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper {
	margin: 0 auto;
}

.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .elementor-field-group {
	margin: 0 auto 16px;
	padding: 0;
}

/* The first step is the title, lead and Next only; live's title group
 * leaves 8px more under the lead. */
.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-html {
	margin: 0 0 8px;
}

/* Inputs, consent and the button sit in a narrow centred column. */
.ct-signup-popup .ct-signup__form .elementor-field-type-text,
.ct-signup-popup .ct-signup__form .elementor-field-type-email,
.ct-signup-popup .ct-signup__form .elementor-field-type-tel,
.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance {
	max-width: 420px;
	margin-inline: auto;
}

.ct-signup-popup--listings .ct-signup__form .elementor-field-type-email,
.ct-signup-popup--listings .ct-signup__form .elementor-field-type-acceptance {
	max-width: 415px;
}

.ct-signup-popup--listings .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-email {
	margin-bottom: 24px;
}

.ct-signup-popup--listings .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-acceptance {
	margin-bottom: 20px;
}

.ct-signup-popup .ct-signup__form .elementor-field-textual.elementor-field {
	min-height: 0;
	height: 26px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #999;
	border-radius: 0;
	background: transparent;
	font-family: var(--ct-font-body);
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 1px;
	color: var(--ct-ink);
	box-shadow: none;
}

.ct-signup-popup .ct-signup__form .elementor-field-textual::placeholder {
	color: var(--ct-ink);
	opacity: 1;
}

/* Focus: the underline darkens and thickens (live shows no ring). */
.ct-signup-popup .ct-signup__form .elementor-field-textual:focus {
	outline: none;
	border-bottom-color: var(--ct-ink);
	box-shadow: 0 1px 0 var(--ct-ink);
}

/* Consent: the checkbox, then the copy justified beside it. */
.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance .elementor-field-subgroup,
.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: 0;
}

.ct-signup-popup .ct-signup__form .elementor-acceptance-field {
	flex: 0 0 13px;
	width: 13px;
	height: 13px;
	margin: 2px 8.4px 0 0;
	accent-color: var(--ct-accent);
}

.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance label,
.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance a {
	font-family: var(--ct-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 15.6px;
	letter-spacing: 1px;
	text-align: justify;
	color: var(--ct-ink);
}

.ct-signup-popup .ct-signup__form .elementor-field-type-acceptance a {
	text-decoration: underline;
}

/* Buttons: the site's red control (.ct-btn), centred. Live has no Back. */
.ct-signup-popup .ct-signup__form .e-form__buttons {
	justify-content: center;
	margin: 0;
	padding: 0;
}

.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .e-form__buttons__wrapper,
.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Without steps Elementor leaves Submit loose in the field row; give it the
 * whole row, centred, as the stepped form's button row is. */
.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper > .elementor-field-type-submit {
	display: flex;
	flex-basis: 100%;
	justify-content: center;
	width: 100%;
}

.ct-signup-popup .ct-signup__form .elementor-field-type-previous {
	display: none;
}

.ct-signup-popup .ct-signup__form .elementor-button {
	width: auto;
	min-height: 58px;
}

/* Hover inverts, as the site's buttons do (live: transparent fill, red label
 * and border). Elementor's own form colours outrank buttons-links.css. */
.ct-signup-popup .ct-signup__form .elementor-button:hover,
.ct-signup-popup .ct-signup__form .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--ct-accent);
}

/* Elementor's own success line is replaced by the thank-you block. */
.ct-signup-popup .ct-signup__form .elementor-message-success {
	display: none;
}

.ct-signup-popup .ct-signup__form .elementor-message-danger {
	margin-top: 16px;
	font-family: var(--ct-font-body);
	font-size: 14px;
	color: var(--ct-accent);
}

/* ------------------------------------------------------------- thank you --
 * Live: the form gives way to its title and one button (signup-popups.js adds
 * .is-sent on a successful submission). */
.ct-signup-popup .ct-signup__thanks.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
	display: none;
	align-items: center;
	width: 100%;
}

.ct-signup-popup .is-sent .ct-signup__thanks.e-con {
	display: flex;
}

.ct-signup-popup .is-sent > .ct-signup__form,
.ct-signup-popup .is-sent > .ct-signup__title,
.ct-signup-popup .is-sent > .ct-signup__lead {
	display: none;
}

.ct-signup-popup .ct-signup__thanks > .elementor-widget {
	width: 100%;
	margin: 0;
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 768px) {
	.ct-signup-popup .dialog-widget-content {
		max-width: calc(100vw - 48px);
	}

	.ct-signup-popup .ct-signup.e-con {
		--padding-top: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
		--padding-right: 24px;
	}

	.ct-signup-popup--listings .ct-signup.e-con {
		--padding-top: 30px;
		--padding-bottom: 30px;
		--padding-left: 30px;
		--padding-right: 30px;
	}

	.ct-signup-popup .ct-signup__form .elementor-field-textual.elementor-field {
		height: 21px;
		line-height: 21px;
	}

	/* Live's article inputs stand 41px apart here (21px + 20px). */
	.ct-signup-popup--article .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-text,
	.ct-signup-popup--article .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-email,
	.ct-signup-popup--article .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-tel {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.ct-signup-popup h2.ct-signup__title,
	.ct-signup-popup .ct-signup__title .elementor-heading-title {
		margin-bottom: 16px;
		font-size: 32px;
		line-height: 1.4;
		letter-spacing: 0.75px;
	}

	.ct-signup-popup p.ct-signup__lead,
	.ct-signup-popup .ct-signup__lead p,
	.ct-signup-popup--listings .ct-signup__lead p {
		margin-bottom: 16px;
		font-size: 18px;
		line-height: 1.6;
		letter-spacing: 0.75px;
	}

	.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-html {
		margin-bottom: 0;
	}

	/* Live's checkbox cell widens to 24.2px here. */
	.ct-signup-popup .ct-signup__form .elementor-acceptance-field {
		margin-right: 11.2px;
	}

	.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .e-form__buttons__wrapper,
	.ct-signup-popup .ct-signup__form .elementor-form-fields-wrapper .elementor-field-type-submit {
		flex-basis: 100%;
		width: 100%;
	}

	.ct-signup-popup .ct-signup__form .elementor-button,
	.ct-signup-popup .ct-signup__view .elementor-button {
		width: 100%;
	}
}