/*
Lamy LP — Final CTA + Form (Phase 8)

The conversion-critical section. Section id="final-form" is the scroll
target for every primary CTA on the page (Hero, Header, Authority,
Fit Check, Sticky CTA).

Strategy FF1 — single column form, max-width 560px; H2 + intro wider above.

Purple Accent H (climax atmosphere): TWO layered radial gradients —
purple-electric near top, purple-atmosphere near bottom — for a strong
purple presence absent from earlier sections.

Form inputs at font-size: 16px minimum to prevent iOS Safari focus-zoom.
*/

/* Phase 27: "מה תקבל בשיחה?" value block above the form */
.lp-final-form__value {
	max-width: 560px;
	margin: clamp(20px, 3vw, 28px) auto clamp(24px, 3.5vw, 32px);
	padding: clamp(18px, 2.5vw, 24px) clamp(20px, 3vw, 28px);
	background: var(--bg-card);
	border: 1px solid rgba(212, 175, 55, 0.30);
	border-radius: 14px;
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.08), 0 0 50px rgba(138, 79, 255, 0.06);
	text-align: start;
}
.lp-final-form__value-title {
	font-family: 'Rubik', 'Heebo', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 1.8vw, 22px);
	color: var(--gold-highlight);
	margin: 0 0 8px;
}
.lp-final-form__value-text {
	font-family: 'Heebo', sans-serif;
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.6;
	color: var(--text-body);
	margin: 0;
}

/* ============================================================
   Section
   ============================================================ */
.lp-final-form {
	position: relative;
	overflow: hidden;
	background: var(--bg-primary);
	padding-inline: clamp(64px, 10vw, 128px);
	/* Phase 8.9.4: reduced desktop max from 128px -> 96px (>120px band
	   per spacing audit). Mobile floor (64px) and viewport scaling (10vw)
	   preserved. padding-inline untouched.
	   Phase 8.9.6: desktop max 96px -> 64px (round 2 reduction). Mobile
	   floor 64 -> 48 (per spec mobile rule "64-80 band -> 48"). Scaling
	   rate 10vw -> 8vw aligned with other sections for consistency.
	   Phase 8.9.8: round 3 reduction - clamp(48, 8vw, 64) -> clamp(32, 5vw, 40). */
	padding-block: clamp(32px, 5vw, 40px);
}

.lp-final-form > .lp-divider-gradient {
	height: 1px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	margin-block: clamp(48px, 8vw, 96px);
	margin-block-start: 0;
	background: var(--accent-gradient);
	border: 0;
}

/* Purple Accent Location H — climax atmosphere, TWO layered gradients */
.lp-final-form__bg-glow-primary {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 30%, var(--purple-electric) 0%, transparent 60%);
	opacity: 0.15;
	filter: blur(80px);
	z-index: 0;
	pointer-events: none;
}

.lp-final-form__bg-glow-secondary {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 90%, var(--purple-atmosphere) 0%, transparent 70%);
	opacity: 0.25;
	filter: blur(120px);
	z-index: 0;
	pointer-events: none;
}

.lp-final-form .lp-container {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

/* ============================================================
   Pill section label (scoped, centered for this section)
   ============================================================ */
.lp-final-form .lp-section-label {
	display: inline-block;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 6px 14px;
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid var(--gold-primary);
	border-radius: 999px;
	color: var(--gold-highlight);
	margin-bottom: 16px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.lp-final-form .lp-section-label::before,
.lp-final-form .lp-section-label::after {
	content: none;
}

.lp-final-form > .lp-container > .lp-section-label {
	display: block;
	margin-inline: auto;
	width: max-content;
}

/* ============================================================
   Heading + intro (climax — slightly larger than other H2s)
   ============================================================ */
.lp-final-form__heading {
	font-family: 'Rubik', 'Heebo', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 4.5vw, 56px);
	color: var(--text-heading);
	text-wrap: balance;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 16px 0;
	text-align: center;
}

/* Gold-highlight accent for the key promise phrase inside the H2 (Phase 8.5).
   Matches brand pattern used in Hero / Fit Check teaser for emphasis on
   the core "growth engine" promise. */
.lp-final-form__h2-accent {
	color: var(--gold-highlight);
}

.lp-final-form__intro {
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--text-meta);
	max-width: 700px;
	margin: 0 auto clamp(32px, 4vw, 48px);
	line-height: 1.6;
	text-align: center;
	text-wrap: pretty;
}

/* ============================================================
   Form wrapper + form
   ============================================================ */
.lp-final-form__form-wrapper {
	max-width: 560px;
	margin-inline: auto;
}

.lp-final-form__form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ============================================================
   Field, label, input
   ============================================================ */
.lp-final-form__field {
	margin-block-end: clamp(16px, 2vw, 24px);
}

.lp-final-form__label {
	display: block;
	font-family: 'Heebo', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-heading);
	margin-block-end: 8px;
	text-align: right;
}

.lp-final-form__input {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	background: var(--bg-card);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	/* !important needed to defeat GeneratePress parent theme's typed-attribute
	   selectors (e.g., input[type="text"]) which have higher specificity than
	   this class-only rule. Phase 8.9.1 fix - inputs were rendering rectangular.
	   Phase 8.9.2: tuned 24px -> 16px (24px on 48px-tall inputs was pill-shaped). */
	border-radius: 16px !important;
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
	font-size: 16px; /* iOS Safari zoom-prevention threshold */
	color: var(--text-heading);
	text-align: right;
	direction: rtl;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lp-final-form__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.lp-final-form__input:hover:not(:focus) {
	border-color: rgba(138, 79, 255, 0.35);
	box-shadow: inset 0 0 16px rgba(138, 79, 255, 0.08);
}

.lp-final-form__input:focus {
	border-color: var(--purple-electric);
	box-shadow:
		inset 0 0 32px rgba(138, 79, 255, 0.25),
		0 0 0 1.5px var(--gold-highlight),
		0 0 32px 6px rgba(138, 79, 255, 0.40);
	outline: none;
}

/* === AUTOFILL OVERRIDE ============================================
   Chrome (and other Chromium browsers) paint autofilled inputs with a
   light/cream background via UA stylesheet that beats normal author CSS.
   Two rules together fully defeat it:
     1) Base autofill (hover/active/non-focused) forces the dark bg via
        the classic 1000px inset shadow trick PLUS explicit background-
        color + background-image overrides PLUS a 9999s deferred
        transition so the UA transition can't repaint it.
     2) Autofill + focus preserves the full 3-layer focus aura (inner
        purple + gold hairline + outer purple glow) and stacks the dark
        bg overlay LAST so the inner aura renders ON TOP of it.

   Selectors include both :-webkit-autofill (legacy Chromium/Safari) and
   :autofill (unprefixed standard) for cross-browser coverage. !important
   is required throughout — this is the ONLY place !important appears in
   this stylesheet. */
.lp-final-form__input:-webkit-autofill,
.lp-final-form__input:-webkit-autofill:hover,
.lp-final-form__input:-webkit-autofill:active,
.lp-final-form__input:autofill,
.lp-final-form__input:autofill:hover,
.lp-final-form__input:autofill:active {
	-webkit-text-fill-color: var(--text-heading) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
	box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
	background-color: var(--bg-card) !important;
	background-image: none !important;
	caret-color: var(--text-heading) !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

.lp-final-form__input:-webkit-autofill:focus,
.lp-final-form__input:autofill:focus {
	-webkit-text-fill-color: var(--text-heading) !important;
	background-color: var(--bg-card) !important;
	background-image: none !important;
	border-color: var(--purple-electric) !important;
	-webkit-box-shadow:
		inset 0 0 32px rgba(138, 79, 255, 0.25),
		0 0 0 1.5px var(--gold-highlight),
		0 0 32px 6px rgba(138, 79, 255, 0.40),
		inset 0 0 0 1000px var(--bg-card) !important;
	box-shadow:
		inset 0 0 32px rgba(138, 79, 255, 0.25),
		0 0 0 1.5px var(--gold-highlight),
		0 0 32px 6px rgba(138, 79, 255, 0.40),
		inset 0 0 0 1000px var(--bg-card) !important;
	caret-color: var(--text-heading) !important;
	outline: none !important;
}

/* Show invalid styling only after user interaction (submit attempt or blur).
   :user-invalid is well-supported in modern browsers; older browsers gracefully
   skip the rule (no red flash on initial empty form). */
.lp-final-form__input:user-invalid {
	border-color: rgba(255, 80, 80, 0.5);
}

.lp-final-form__input--textarea {
	min-height: 100px;
	resize: vertical;
}

/* ============================================================
   Submit button — reuses global .btn-cta-primary + --lg
   ============================================================ */
.lp-final-form__submit-wrap {
	display: flex;
	justify-content: center;
	margin-block: clamp(24px, 3vw, 32px) 16px;
}

.lp-final-form__submit {
	width: 100%;
	/* Phase 9.4: removed max-width: 320px so the CTA matches the FULL
	   WIDTH of the text inputs above. Form column is capped at 560px
	   by .lp-final-form__form-wrapper - button fills that width. */
	max-width: 100%;
}

/* ============================================================
   G-6: newsletter consent BETWEEN submit and privacy text
   ============================================================ */
.lp-final-form__newsletter-wrap {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block: 16px;
}

.lp-final-form__checkbox {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-block-start: 2px;
	accent-color: var(--gold-primary);
	flex-shrink: 0;
	cursor: pointer;
}

.lp-final-form__checkbox-label {
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--text-body);
	line-height: 1.5;
	cursor: pointer;
	flex: 1;
	text-align: right;
}

/* ============================================================
   Privacy text — paragraph per locked copy V2.5 (NOT a checkbox)
   ============================================================ */
.lp-final-form__privacy {
	font-family: 'Heebo', sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--text-meta);
	line-height: 1.7;
	margin: 8px 0 0 0;
	text-align: center;
	text-wrap: pretty;
}

.lp-final-form__privacy a {
	color: var(--gold-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lp-final-form__privacy a:hover {
	color: var(--gold-highlight);
}

/* ============================================================
   Phase 8.9.1 - Force rounded corners on all form inputs via
   3 redundant selector paths. Defeats any GP-parent or UA rule
   that pins border-radius to 0 (or a lower value) via typed-
   attribute, descendant, or ID selectors. Belt-and-suspenders
   to the !important on .lp-final-form__input above.
   ============================================================ */
.lp-final-form input[type="text"],
.lp-final-form input[type="tel"],
.lp-final-form input[type="email"],
.lp-final-form-mid input[type="text"],
.lp-final-form-mid input[type="tel"],
.lp-final-form-mid input[type="email"],
#final-form input,
#final-form-mid input {
	border-radius: 16px !important;
}