/*
 * Shared site-wide popup enquiry form modal (#tp-enquiry-popup).
 *
 * Figma: node 1788:4740 "form new_" — 594x580. This replaces the earlier
 * build against 1752:4282 ("Get In Touch"), which was a plain white card with
 * a black 28px title and six fields.
 *
 * The whole desktop layout below is derived from one consistent set of Figma
 * absolute offsets, so the arithmetic is worth writing down once:
 *
 *   dialog            594 wide, radius 24, gradient bg          y 0
 *   title  1788:4742  left 24, top 24, Poppins Medium 24        y 24..60
 *   close  1788:4745  left 542 (= right 32), top 32, 20x20      y 32..52
 *   card   1788:4741  white, radius 24, 594x496                 y 84..580
 *   fields 1788:4747  left 24, top 109  -> card padding-top 25  y 109
 *     name   546x56                                             y 109..165
 *     row    261 + 24 + 261 = 546, 56 tall                      y 189..245
 *     message 546x74                                            y 269..343
 *   consent 1788:4790                                           y 354..377
 *   captcha 1588:3938 65 tall                                   y 397..462
 *   divider 1788:4744 546x1                                     y 487
 *   submit  1788:4743 546x45, radius 55                         y 511..556
 *   card bottom padding 24                                      y 580
 *
 * Summing that back: 25+234+11+22.75+20+65+25+1+24+45+24 = 496.75, i.e. the
 * card's stated 496 height. The stack is therefore reproduced in normal flow
 * rather than absolutely, so it still reflows on small screens.
 *
 * Responsive down to 320px.
 */

/* ---------------------------------------------------------------------
 * Fonts
 *
 * tokens.css sets the SITE face to Plus Jakarta Sans and explicitly treats
 * the Roboto/Open Sans/Inter nodes in Figma as third-party widget chrome.
 * This node is different: 1788:4740 specifies Poppins for the title, labels,
 * placeholders and consent copy, and Manrope Bold for the Submit label — as
 * the design's own type, not chrome. Both families were already sitting
 * unused and self-hosted in assets/fonts/ (no Google Fonts CDN — the CDN is
 * blocked in this project's review browser), so they are declared here rather
 * than in tokens.css: scoped to the popup, they can't leak into the site face.
 * ------------------------------------------------------------------- */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins/poppins-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins/poppins-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope/manrope-variable.woff2') format('woff2');
}

.tp-popup {
	--tp-popup-font: 'Poppins', var(--tp-font-body);
	--tp-popup-btn-font: 'Manrope', var(--tp-font-body);
	/* Figma 1788:4743 / the gradient's first stop — #0d6efd, NOT the site's
	   --tp-blue (#1977f3). Kept literal so a later token change can't silently
	   repaint this card. */
	--tp-popup-blue: #0d6efd;

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tp-popup.is-open {
	display: flex;
}

.tp-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19, 19, 19, 0.6);
}

/* Figma 1788:4740 — 594 wide, radius 24, and the four-stop vertical gradient.
   Only the top ~86px of that gradient is ever visible (the white card covers
   everything from y=84 down); it is reproduced in full anyway so the strip
   still reads correctly if the card grows on a narrow screen. */
.tp-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 594px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: linear-gradient(
		180deg,
		#0d6efd 4.3269%,
		#003e99 14.904%,
		#ffffff 67.788%,
		#eef4fb 100%
	);
	border-radius: 24px;
	box-shadow: 0 24px 64px rgba(19, 19, 19, 0.25);
	transform: translateY(12px);
	opacity: 0;
	transition: transform var(--tp-speed) var(--tp-ease), opacity var(--tp-speed) var(--tp-ease);
}

.tp-popup.is-open .tp-popup__dialog {
	transform: translateY(0);
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Gradient header strip (Figma: the 84px above the white card)
 * ------------------------------------------------------------------- */

.tp-popup__header {
	position: relative;
	/* 24 top + the title's 36px line + 24 = the card's 84px offset. */
	padding: 24px 24px 24px;
}

/* Figma 1788:4742 — Poppins Medium 24, white, capitalize. Line-height is
   "normal" in Figma; pinned to 36px here because that single value is what
   makes the header resolve to exactly 84px and the card start at y=84. */
.tp-popup__title {
	margin: 0;
	max-width: 398px;
	font-family: var(--tp-popup-font);
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	text-transform: capitalize;
	color: var(--tp-white);
}

/* Figma 1788:4745 — 20x20 at left 542 of 594, i.e. 32px in from the right,
   top 32 (which centres it on the 36px title line). White at 40%. */
.tp-popup__close {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	color: rgba(255, 255, 255, 0.4);
	transition: color var(--tp-speed-fast) var(--tp-ease);
	z-index: 1;
}

.tp-popup__close:hover,
.tp-popup__close:focus-visible {
	color: var(--tp-white);
}

/* ---------------------------------------------------------------------
 * White card (Figma 1788:4741)
 * ------------------------------------------------------------------- */

.tp-popup__card {
	background: var(--tp-white);
	border-radius: 24px;
	/* Figma: fields start at y=109, card at y=84. 594 - 546 = 48 -> 24 a side.
	   Bottom 24 is the gap under the 45px submit to the card's y=580 edge. */
	padding: 25px 24px 24px;
}

.tp-popup__form {
	display: flex;
	flex-direction: column;
}

/* Figma 1788:4748 — the three field rows, 24px apart. */
.tp-popup__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Figma 1788:4759 — Email ID and Phone Number share a row, 24px apart, at
   261px each (261 + 24 + 261 = the 546 content width). */
.tp-popup-row {
	display: flex;
	gap: 24px;
}

/* ---------------------------------------------------------------------
 * Material-style outlined field with a floating label
 * (Figma 1788:4749 / 4760 / 4770 / 4780)
 * ------------------------------------------------------------------- */

.tp-pfield {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* Figma 1788:4755 — the label box sits at left -4 / top -12 of a content box
   that is itself inset 16 left / 4 top, i.e. left 12 / top -8 of the field,
   with 4px of white padding either side so it notches the border. */
.tp-pfield__label {
	position: absolute;
	top: -8px;
	left: 12px;
	padding: 0 4px;
	background: var(--tp-white);
	font-family: var(--tp-popup-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #49454f;
	white-space: nowrap;
	z-index: 1;
}

.tp-pfield__req {
	color: #fb2c36;
}

.tp-pfield__control {
	/* Block, not the default inline-block: as an inline the control sits on a
	   line box and drags a descender gap along under it, which pushed
	   everything below the 74px message box ~4px down the card. */
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 16px;
	font-family: var(--tp-popup-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--tp-black);
	background: var(--tp-white);
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	transition: border-color var(--tp-speed-fast) var(--tp-ease);
}

.tp-pfield__control::placeholder {
	color: rgba(29, 27, 32, 0.49);
}

.tp-pfield__control:focus {
	outline: none;
	border-color: var(--tp-popup-blue);
}

/* Figma 1788:4781 — the message box is 74 tall, not 56. */
.tp-pfield--textarea .tp-pfield__control {
	height: 74px;
	padding-top: 16px;
	resize: vertical;
}

/* ---------------------------------------------------------------------
 * Consent + captcha (Figma 1788:4790)
 * ------------------------------------------------------------------- */

/* 11px, not 24. Figma's field group 1788:4748 declares itself 221 tall while
   its last child (the message box) renders 74 rather than the 56 the wrapper
   claims, so the 24px auto-layout gap that follows is measured from a bottom
   edge 13px above where the box actually ends. The design therefore RENDERS
   an 11px gap here, and that is what is reproduced. */
.tp-popup-consent {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 11px;
}

/* Figma 1788:4791 — 16px box, 8px gap, top-aligned. */
.tp-popup-checkbox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.tp-popup-checkbox input[type='checkbox'] {
	position: absolute;
	width: 16px;
	height: 16px;
	opacity: 0;
	margin: 0;
}

/* Figma 1788:4792 — #f3f3f5, 1px rgba(0,0,0,.1), radius 4, 1px ambient shadow. */
.tp-popup-checkbox__box {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #f3f3f5;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	position: relative;
	transition: background var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease);
}

.tp-popup-checkbox input[type='checkbox']:checked + .tp-popup-checkbox__box {
	background: var(--tp-popup-blue);
	border-color: var(--tp-popup-blue);
}

.tp-popup-checkbox input[type='checkbox']:checked + .tp-popup-checkbox__box::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid var(--tp-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Figma 1788:4795 — Poppins Regular 14/22.75, #0a0a0a; the link #030213,
   underlined. The label box is 444 wide, which is what keeps the sentence on
   one line at 594. */
.tp-popup-checkbox__label {
	max-width: 444px;
	font-family: var(--tp-popup-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 22.75px;
	color: #0a0a0a;
}

.tp-popup-checkbox__label a {
	color: #030213;
	text-decoration: underline;
}

/* Turnstile renders its own 300x65 iframe. Figma mocks the widget at 341x65;
   the 65px height (which is all the vertical rhythm above depends on) matches,
   the 41px of extra width does not and can't be without scaling a third-party
   iframe, so it is left at its native size. */
/* Pinned to the design's 65px rather than left to the widget. Turnstile's
   "normal" widget is a fixed 300x65 in every state, so nothing real is lost —
   what this does clip is the extra "For testing only, report to site owner"
   banner Cloudflare stacks under the box when the TEST sitekey is in use. That
   banner is ~5px of local-only chrome, and without this it walked the divider
   and submit button down the card on dev but not on production. */
.cf-turnstile {
	height: 65px;
	overflow: hidden;
}

/* Same descender problem as the field controls: Turnstile injects an inline
   iframe, so without this the 65px widget occupies ~70px and walks the divider
   and submit button down the card. */
.cf-turnstile iframe {
	display: block;
}

.tp-popup__error {
	margin: 0 0 20px;
	padding: 10px 14px;
	font: var(--tp-body-sm);
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--tp-radius-sm);
}

/* ---------------------------------------------------------------------
 * Divider + submit (Figma 1788:4744 / 1788:4743)
 * ------------------------------------------------------------------- */

/* Figma 1788:4744 — a 546x1 rule, stroke black at 10%, 25px under the captcha. */
.tp-popup__divider {
	height: 1px;
	margin-top: 25px;
	background: rgba(0, 0, 0, 0.1);
}

/* Figma 1788:4743 -> button I1788:4743;500:1093 — 546x45, radius 55, #0d6efd,
   Manrope Bold 16/24 white, centred. Note this does NOT use .tp-btn: that
   component is the 44px/radius-59 site pill with the sliding icon-disc hover,
   and this one is a plain full-width bar. */
.tp-popup__submit {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 45px;
	margin-top: 24px;
	padding: 10px 12px;
	background: var(--tp-popup-blue);
	border-radius: 55px;
	font-family: var(--tp-popup-btn-font);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--tp-white);
	text-align: center;
	transition: background var(--tp-speed-fast) var(--tp-ease);
}

/* Figma I1788:4743;500:1098 — a 26x95.022 white-gradient streak rotated -150deg
   and clipped by the button, offset so its centre lands at (-11.036, 6.8) from
   the button's top-left. */
.tp-popup__submit::before {
	content: '';
	position: absolute;
	left: -24.036px;
	top: -40.711px;
	width: 26px;
	height: 95.022px;
	transform: rotate(-150deg);
	background: linear-gradient(
		89.657deg,
		rgba(255, 255, 255, 0.2) 1.2232%,
		rgba(255, 255, 255, 0.108) 44.514%,
		rgba(255, 255, 255, 0) 99.098%
	);
	pointer-events: none;
}

.tp-popup__submit > * {
	position: relative;
}

.tp-popup__submit:hover {
	background: #0b5ed7;
}

.tp-popup__submit:disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Thank-you state — not part of node 1788:4740; kept from the previous
 * build so the post-submit screen still has a design.
 * ------------------------------------------------------------------- */

.tp-popup__thankyou-state {
	text-align: center;
	padding: 24px 0;
}

.tp-popup__thankyou-title {
	margin: 0 0 12px;
	font-family: var(--tp-popup-font);
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: var(--tp-black);
}

.tp-popup__subtitle {
	margin: 0 0 28px;
	font-family: var(--tp-popup-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--tp-gray-700);
}

.tp-popup__continue {
	display: inline-flex;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media (max-width: 640px) {
	.tp-popup {
		padding: 0;
	}

	.tp-popup__dialog {
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.tp-popup__card {
		/* Fill the rest of the sheet so the white card doesn't stop short and
		   show a band of gradient under the submit button. */
		min-height: calc(100% - 84px);
		border-radius: 24px 24px 0 0;
	}
}

@media (max-width: 425px) {
	.tp-popup-row {
		flex-direction: column;
		gap: 24px;
	}

	.tp-popup__header {
		padding: 20px 20px;
	}

	.tp-popup__title {
		font-size: 20px;
		line-height: 30px;
	}

	.tp-popup__close {
		top: 25px;
		right: 20px;
	}

	.tp-popup__card {
		padding: 25px 20px 24px;
		min-height: calc(100% - 70px);
	}
}

@media (max-width: 320px) {
	.tp-popup__header {
		padding: 16px;
	}

	.tp-popup__title {
		font-size: 18px;
		line-height: 28px;
	}

	.tp-popup__close {
		top: 21px;
		right: 16px;
	}

	.tp-popup__card {
		padding: 25px 16px 24px;
		min-height: calc(100% - 60px);
	}
}