/* Oct 2026 popup. Measurements from Figma "Pop up - Form" (1:185, 629×600), "Pop up - Success"
   (1:252) and their "- Mobile" frames (390×657 visible panel). The form uses the framework's
   --form-* variables. The success step is the flat Figma art with a live "Keep Shopping" link over
   its baked-in CTA. */
#popup-oct {
	--popup-width: 629px;
	--popup-height: 600px;
	--popup-max-width: calc(100vw - 20px);
	--popup-max-height: none;
	--popup-align: flex-start;           /* framework centres vertically; Figma pins content to the top */
	--popup-padding-top: 83px;           /* title glyphs start at y 83 */
	--form-text-width: auto;             /* the title image at its own size */
	--thanks-width: 100%;                /* success art: transparent, no baked close X or background */
	--thanks-ratio: 629 / 600;           /* Figma "Pop up - Success"; the Keep Shopping link is placed in % of it */
	--close-right: 26px;                 /* close X centre at (585, 44) in the render; icon is 36px */
	--close-top: 26px;                   /* (the Figma instance is rotated 45°, so its x/y is not its box) */
	--text-dist: 27px;                   /* title bottom (132) → fields top (172), less the 13px field padding */
	--submit-dist: 32px;                 /* fields bottom (458) → submit top (490) */
	--form-width: 584px;                 /* 564px fields + 2 × 10px field padding */
	--form-field-padding: 13px 10px;     /* 26px row gap, 20px column gap */
	--form-input-height: 52px;
	--form-input-radius: 6px;
	--form-input-bg: #ffffff;
	--form-label-font-size: 17px;
	--form-input-font-size: 17px;
	/* the framework switches to these at ≤567px */
	--form-width-mobile: 350px;          /* Figma mobile fields: 350 wide, 52 tall, 17.2px apart */
	--form-field-padding-mobile: 8.6px 0;
	--form-label-font-size-mobile: 17px;
	--form-input-font-size-mobile: 17px;
	--form-input-radius-mobile: 6px;
}

#popup-oct .popup-content {
	width: var(--popup-width);
	max-width: var(--popup-max-width);
	height: var(--popup-height);
	max-height: var(--popup-max-height);
}

/* The background sits on .popup-content so both steps (form and success) show it. */
#popup-oct .popup-content {
	background-color: #f5388f;
	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-oct .popup-close {
	top: var(--close-top);
	right: var(--close-right);
	padding: 0;
	width: 36px;
	height: 36px;
}

#popup-oct .popup-default {
	align-items: var(--popup-align);
}

#popup-oct .popup-form {
	padding-top: var(--popup-padding-top);
}

#popup-oct .form-text {
	width: var(--form-text-width);
	height: auto;
	margin-bottom: var(--text-dist);
}

#popup-oct form.uni-style {
	margin: 0 auto;
}

#popup-oct form.uni-style .form-field input:not([type="radio"]):not([type="checkbox"]),
#popup-oct form.uni-style .form-field select {
	border: 1.3px solid #c3c3c5;
	color: #373737;
}

#popup-oct .form-action {
	display: flex;
	justify-content: center;
	padding-top: 0;
	margin-top: calc(var(--submit-dist) - 13px);
}

/* Submit: Figma CTA 1:250, white pill, black Avenir Black 20px, 136×45 */
#popup-oct .promoLead {
	width: 136px;
	height: 45px;
	padding: 0;
	border-radius: 50px;
	background-color: #ffffff;
	color: #000000;
	font-size: 20px;
	line-height: 1;
}

/* Success step */
#popup-oct .popup-thanks {
	padding: 0;
}

/* The flat success art keeps its frame's proportions, so the Keep Shopping link stays on its baked-in
   button whatever size the popup is. */
#popup-oct .oct-thanks {
	width: var(--thanks-width);
	height: auto;
	aspect-ratio: var(--thanks-ratio);
}

#popup-oct .oct-thanks-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keep Shopping: Figma CTA 1:317 at (203, 515) 225×45 in 629×600 */
#popup-oct .oct-keep-shopping {
	left: 32.27%;
	top: 85.83%;
	width: 35.77%;
	height: 7.5%;
	padding: 0;
	border-radius: 50px;
	background-color: #ffffff;
	color: #000000;
	font-size: 20px;
	line-height: 1;
}

@media (max-width: 567px) {
	/* Full screen on phones, as the framework intends (css/popup.css makes .popup-content 100% × 100% at
	   ≤567px). Content scales with the screen width from the 390-wide Figma mobile frames. */
	#popup-oct {
		--popup-width: 100%;
		--popup-height: 100%;
		--popup-max-width: 100%;
		--popup-align: center;           /* centre the form on tall screens */
		--popup-padding-top: 0px;
		--close-right: 12px;             /* mobile X centre at (360, 29) in the render */
		--close-top: 11px;
		--text-dist: 25px;               /* title bottom (111) → fields top (145), less the 8.6px field padding */
		--submit-dist: 25px;             /* fields bottom (543) → submit top (568) */
		--form-width-mobile: min(89.744vw, 525px);   /* Figma fields 350 of 390 */
		--form-text-width: min(84.615vw, 495px);     /* Figma title 330 of 390 */
		--thanks-width: min(100%, calc(100dvh * 390 / 657));   /* success art 390×657, as large as fits */
		--thanks-ratio: 390 / 657;
	}

	#popup-oct .popup-content {
		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);
	}

	/* Keep Shopping: Figma CTA 66:336 at (83, 554) 225×45 in 390×657 */
	#popup-oct .oct-keep-shopping {
		left: 21.28%;
		top: 84.32%;
		width: 57.69%;
		height: 6.85%;
	}
}