/* oct2 popup. Values from the Figma `Pop up - Form` / `Pop up - Success` frames (630x600) and their `- Mobile` frames. */
#popup-oct2 {
	--popup-width: 630px;
	--popup-height: 600px;
	--popup-max-width: calc(100vw - 20px);
	--popup-max-height: none;
	--popup-align: flex-start;
	--close-x: 34px;            /* rendered X: 20x19 at (576, 34) */
	--close-y: 34px;
	--submit-width: 136px;
	--submit-height: 45px;
	--submit-radius: 50px;
	--submit-bg: #000000;
	--submit-color: #ffffff;
	--form-top: 106px;          /* form title glyph top */
	--thanks-top: 189px;        /* success art top */
	--text-dist: 35px;          /* title bottom 177 → first field 212 */
	--submit-dist: 40px;        /* last field bottom 420 → submit 460 */
	--thanks-button-dist: 32px; /* success art bottom 373 → CTA 405 */
	--form-width: 564px;
	--form-width-mobile: 350px;
	--form-field-padding-mobile: 8px 0;
	--form-input-radius-mobile: 6px;
	--form-label-font-size-mobile: 16px;
	--form-input-font-size-mobile: 16px;
}

/* .popup-default is a row (align-items is vertical); .popup-thanks is a column (justify-content is). */
#popup-oct2 .popup-default {
	align-items: var(--popup-align);
	padding-top: var(--form-top);
}

#popup-oct2 .popup-thanks {
	justify-content: flex-start;
	padding-top: var(--thanks-top);
}

#popup-oct2 .popup-content {
	position: relative;
	width: var(--popup-width);
	max-width: var(--popup-max-width);
	height: var(--popup-height);
	max-height: var(--popup-max-height);
}

#popup-oct2 .popup-default,
#popup-oct2 .popup-thanks {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/hero/popup-back.jpg);
	background-image: -webkit-image-set(url("../images/hero/popup-back.webp") 1x, url("../images/hero/popup-back@2x.webp") 2x);
	background-image: image-set(url("../images/hero/popup-back.webp") 1x, url("../images/hero/popup-back@2x.webp") 2x);
}

#popup-oct2 .popup-close {
	top: 0;
	right: 0;
	padding: var(--close-y) var(--close-x);
}

#popup-oct2 form {
	margin-top: 0;
	margin-bottom: 0;
}

#popup-oct2 form select,
#popup-oct2 form input {
	border-color: #c3c3c5;
	border-radius: 6px;
	font-size: 17px;
}

#popup-oct2 .form-text {
	margin-bottom: var(--text-dist);
}

#popup-oct2 .promoLead {
	width: var(--submit-width);
	height: var(--submit-height);
	border-radius: var(--submit-radius);
	background: var(--submit-bg);
	color: var(--submit-color);
	font-size: 20px;
	padding: 0;
	margin-top: var(--submit-dist);
}

#popup-oct2 .popup-thanks .button {
	width: 262px;
	height: 45px;
	border-radius: var(--submit-radius);
	background: var(--submit-bg);
	color: var(--submit-color);
	font-size: 20px;
	padding: 0;
	margin-top: var(--thanks-button-dist);
}

#popup-oct2 .popup-thanks .button span {
	color: var(--submit-color);
}

@media (max-width: 567px) {
	/* Full screen on phones (rto-form-popups); content scales from the 390-wide Figma mobile frame. */
	#popup-oct2 {
		--popup-width: 100%;
		--popup-height: 100%;
		--popup-max-width: 100%;
		--popup-align: center;
		--form-top: 0px;
		--thanks-top: 0px;
		--text-dist: 27px;          /* mobile title bottom 224 → first field 251 (Figma) */
		--submit-dist: 31px;        /* last field bottom 581 → submit 612 */
		--thanks-button-dist: 29px; /* success art bottom 445 → CTA 474 */
		--submit-width: 91px;
		--submit-height: 40px;
		--form-width-mobile: min(calc(350 / 390 * 100vw), calc(350px * 1.5));
	}

	#popup-oct2 .popup-thanks {
		justify-content: center;
	}

	#popup-oct2 .form-text,
	#popup-oct2 .thanks {
		width: min(calc(var(--w) / 390 * 100vw), calc(var(--w) * 1.5px));
		height: auto;
	}

	#popup-oct2 .form-text { --w: 305; }
	#popup-oct2 .thanks { --w: 357; }

	#popup-oct2 form select,
	#popup-oct2 form input {
		font-size: 16px;
	}

	#popup-oct2 .promoLead {
		font-size: 16px;
	}

	#popup-oct2 .popup-thanks .button {
		width: 191px;
		height: 40px;
		font-size: 16px;
	}

	#popup-oct2 .popup-default,
	#popup-oct2 .popup-thanks {
		background-image: url(../images/hero/popup-back-m.jpg);
		background-image: -webkit-image-set(url("../images/hero/popup-back-m.webp") 1x, url("../images/hero/popup-back-m@2x.webp") 2x);
		background-image: image-set(url("../images/hero/popup-back-m.webp") 1x, url("../images/hero/popup-back-m@2x.webp") 2x);
	}
}