/* oct2 popup (CAP BS Sale). Values from the Figma frames `Pop up - Form` (1:5049), `Pop up - Success` (1:7477)
   and their `- Mobile` frames (1:52364, 1:54793). Scoped to #popup-oct2.
   Named promo-popup.css, not popup.css: the job runner's write guard treats every path ending in
   css/popup.css as the rto-form-popups framework file. */
#popup-oct2 {
	--popup-width: 629px;
	--popup-height: 600px;
	--popup-max-width: calc(100vw - 20px);
	--popup-max-height: none;
	--popup-align: flex-start;
	--popup-top: 98px;                 /* form title top */
	--thanks-top: 110px;               /* success copy top */
	--thanks-justify: flex-start;
	--close-x: 26px;                   /* 629 - 568 - 35.4 */
	--close-y: 44px;
	--submit-width: 136px;
	--submit-height: 45px;
	--submit-radius: 50px;
	--submit-bg: #000000;
	--submit-color: #ffffff;
	--submit-font-size: 20px;
	--text-dist: 24px;                 /* title bottom 188 → fields 212 */
	--submit-dist: 40px;               /* fields bottom 420 → submit 460 */
	--thanks-button-dist: 19px;        /* copy bottom 393 → CTA 412 */
	--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-oct2 .popup-default,
#popup-oct2 .popup-thanks {
	align-items: var(--popup-align);
	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-default {
	padding-top: var(--popup-top);
}

/* .popup-thanks is a flex column: align-items is the horizontal axis (keep the copy centred) and the copy starts at
   --thanks-top on desktop (Figma 110px), centred vertically on phones. */
#popup-oct2 .popup-thanks {
	padding-top: var(--thanks-top);
	align-items: center;
	justify-content: var(--thanks-justify);
}

#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-close {
	top: 0;
	right: 0;
	padding: var(--close-y) var(--close-x);
}

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

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

#popup-oct2 .promoLead,
#popup-oct2 .popup-thanks .button {
	height: var(--submit-height);
	border-radius: var(--submit-radius);
	background: var(--submit-bg);
	color: var(--submit-color);
	font-size: var(--submit-font-size);
	line-height: 1;
	padding: 0;
}

#popup-oct2 .promoLead {
	width: var(--submit-width);
	margin-top: var(--submit-dist);
}

#popup-oct2 .popup-thanks .button {
	width: 225px;
	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 makes .popup-content 100% × 100% at ≤567px). Content follows the
	   390-wide mobile frames, centred vertically; widths scale with the viewport up to 1.5× the frame. */
	#popup-oct2 {
		--popup-width: 100%;
		--popup-height: 100%;
		--popup-max-width: 100%;
		--popup-align: center;
		--popup-top: 0px;
		--thanks-top: 0px;
		--thanks-justify: center;
		--close-x: 13px;               /* 390 - 342 - 35.4 */
		--close-y: 29px;
		--submit-width: 91px;
		--submit-height: 40px;
		--submit-font-size: 16px;
		--text-dist: 22px;             /* title bottom 217 → fields 239 */
		--submit-dist: 30px;           /* fields bottom 568 → submit 598 */
		--thanks-button-dist: -12px;   /* the copy's text box runs past its last line: CTA top 494, box bottom 506 */
		--form-width-mobile: min(calc(350 / 390 * 100vw), 525px);
	}

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

	#popup-oct2 .thanks {
		width: min(100vw, 585px);
		height: auto;
	}

	#popup-oct2 .popup-thanks .button {
		width: 162px;
	}

	#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);
	}
}