/* ==========================================================================
   Gravity Forms — Custom Theme Styles
   Jewelry Studio 1944

   GF's built-in CSS (Orbital) is disabled via gform_disable_css — this file
   owns the complete presentation. Load order: gform_enqueue_scripts ensures
   this file enqueues only on pages that render a form.

   Figma measurements (all relative to 867px form wrapper):
     Field height:   74px  (inputs, select)
     Field height:  233px  (textarea)
     Row gap:        24px
     Col gap:        21px  (two-column rows)
     Submit margin:  47px  above button
     Submit size:  268×43px, centered
     Label inside:   left 25px, uppercase, #242122, 16px, weight 400
     Label floated:  top 12px, 11px, primary gold, animated
   ========================================================================== */


/* ── 1. Wrapper ─────────────────────────────────────────────────────────── */

/* Style 2 — compact newsletter form (268 × 43 px, label-fade pattern)
   ─────────────────────────────────────────────────────────────────────
   Activation: add "style-2_wrapper" to the Gravity Form CSS Class field
   (Form Settings → CSS Class). GF will add it to .gform_wrapper.

   Two classes chained on the same element gives specificity [0,2,0],
   which beats every single-class base rule [0,1,0] — no !important needed.

   Key differences from the default form:
     • max-width 268 px
     • Single-column grid; fields stacked with no gap
     • Inputs 43 px tall, 0.5 px border, zero border-radius
     • Labels stay at vertical center and fade to opacity 0 on focus/content
       (no position shift); error state keeps label visible and centered
     • Submit: 100% wide, 43 px, Libre Franklin 10 px, 4 px above-button gap
   ─────────────────────────────────────────────────────────────────────── */

/* S2.1 — Wrapper */
.gform_wrapper.style-2_wrapper {
	max-width: 268px;
}

/* S2.2 — Single-column grid; row-gap handled by gform_footer margin instead */
.gform_wrapper.style-2_wrapper .gform_fields {
	/*grid-template-columns: 1fr;*/
	row-gap: 0;
}

/* S2: Force every field to full width regardless of GF width class */
.gform_wrapper.style-2_wrapper .gfield,
.gform_wrapper.style-2_wrapper .gfield--width-half {
	grid-column: 1 / -1;
}

/* S2.3 — Inputs: 43 px, hairline border, squared */
.gform_wrapper.style-2_wrapper .ginput_container input[type="text"],
.gform_wrapper.style-2_wrapper .ginput_container input[type="email"],
.gform_wrapper.style-2_wrapper .ginput_container input[type="tel"],
.gform_wrapper.style-2_wrapper .ginput_container input[type="number"],
.gform_wrapper.style-2_wrapper .ginput_container input[type="url"] {
	height: 43px;
	padding: 0 15px;
	border-width: 0.5px;
	border-radius: 0;
	font-size: 12px;
}

/* S2.4 — Label: Pistara 10 px, muted; transitions opacity only */
.gform_wrapper.style-2_wrapper .gfield_label {
	font-family: var( --wp--preset--font-family--pistara );
	font-size: 10px;
	color: rgba( 0, 0, 0, 0.62 );
	transition: opacity 0.2s ease;
}

/* S2: On focus or has content — fade label out, keep it centered (no float) */
.gform_wrapper.style-2_wrapper .gfield:focus-within .gfield_label,
.gform_wrapper.style-2_wrapper .gfield:has( input:not( :placeholder-shown ) ) .gfield_label {
	top: 50%;
	transform: translateY( -50% );
	font-size: 10px;
	letter-spacing: 0;
	color: rgba( 0, 0, 0, 0.62 );
	opacity: 0;
}

/* S2: Error state — override base forced-float; label stays centered + visible.
   The red border communicates the error; the label remains readable. */
.gform_wrapper.style-2_wrapper .gfield_error .gfield_label {
	top: 50%;
	transform: translateY( -50% );
	font-size: 10px;
	letter-spacing: 0;
	color: rgba( 0, 0, 0, 0.62 );
	opacity: 1;
}

/* S2: Error + focus or has content — fade even in the error state */
.gform_wrapper.style-2_wrapper .gfield_error:focus-within .gfield_label,
.gform_wrapper.style-2_wrapper .gfield_error:has( input:not( :placeholder-shown ) ) .gfield_label {
	opacity: 0;
}

/* S2.5 — Footer: 4 px gap from the last field; button fills full width */
.gform_wrapper.style-2_wrapper .gform_footer {
	margin-top: 4px;
}

.gform_wrapper.style-2_wrapper .gform_button {
	width: 100%;
	min-width: unset;
	height: 43px;
	padding: 0;
	font-family: var( --wp--preset--font-family--zeitung );
	font-size: 10px;
	letter-spacing: 0.8px;
	border-radius: 0;
}

/* S2.6 — Compact validation */
.gform_wrapper.style-2_wrapper .gform_validation_errors {
	padding: 0.5rem 0.6rem;
	margin-bottom: 0.5rem;
}

.gform_wrapper.style-2_wrapper .gform_submission_error {
	font-size: 0.7rem;
	margin-bottom: 0.3rem;
}

.gform_wrapper.style-2_wrapper .gform_validation_errors li {
	font-size: 0.7rem;
}

.gform_wrapper.style-2_wrapper .validation_message {
	font-size: 0.68rem;
}

/* ── 2. Form Header ─────────────────────────────────────────────────────── */

.gform_wrapper .gform_heading, .gform_wrapper .gform_description {
	margin-bottom: 0.5rem;
}

.gform_wrapper .gform_title {
	font-family: var( --wp--preset--font-family--pistara );
	font-size: clamp( 1.25rem, 2vw, 1.75rem );
	font-weight: 700;
}


/* ── 3. Fields Grid ─────────────────────────────────────────────────────── */

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(auto-fill,auto);
	column-gap: 21px;
	row-gap: 24px;
	align-items: start; /* each cell sizes to its own content, not the tallest sibling.
	                       prevents validation_message on one field from expanding the
	                       adjacent field's .gfield and pushing its top:50% label down */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Full-width: name, textarea, and any gfield--width-full field */
.gform_wrapper .gfield--type-name,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--width-full {
	grid-column: 1 / -1;
}

/* Half-width fields (email, phone) — each takes one column */
.gform_wrapper .gfield--width-half {
	grid-column: auto;
}

/* Honeypot + required legend: always hidden */
.gform_wrapper .gform_validation_container,
.gform-theme--foundation .gform_validation_container,
.gform_wrapper .gform_required_legend,
.hide-gf_required_legend_wrapper .gform_required_legend {
	display: none !important;
}


/* ── 4. Floating Label — Base State (label inside, centered) ────────────── */
/*
   All labels sit absolutely inside their field at vertical center.
   On focus or content, they float to the top and shrink.

   Detection:
     • :focus-within          → user is actively in the field
     • :has(input:not(:placeholder-shown)) → field has content after blur
       (requires placeholder=" " on inputs — set by the JS in gravity-forms.php)
*/

.gform_wrapper .gfield {
	position: relative; /* anchor for absolutely-positioned labels */
	margin: 0;          /* spacing handled by grid row-gap */
}

.gform_wrapper fieldset.gfield {
	border: none
}

/* Main field labels */
.gform_wrapper .gfield_label {
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY( -50% );
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	font-family: inherit;
	color: #242122;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
	transition:
		top 0.2s ease,
		transform 0.2s ease,
		font-size 0.2s ease,
		color 0.2s ease,
		letter-spacing 0.2s ease;
}

/* Textarea label: Figma positions it near the top (not centered) because
   the field is 233px tall — centering would look off */
.gform_wrapper .gfield--type-textarea .gfield_label {
	top: 32px;
	transform: none;
}

/* Keep GF's own hidden_label from being overridden */
.gform_wrapper .hidden_label .gfield_label {
	display: none !important;
}

/* Required asterisk: hidden — required state is communicated by aria-required */
.gform_wrapper .gfield_required {
	display: none;
}

/* Field description */
.gform_wrapper .gfield_description {
	font-size: 0.82rem;
	margin-top: 0.4rem;
	opacity: 0.7;
	text-transform: none;
}


/* ── 5. Floating Label — Active State (focused OR has content) ──────────── */

/* Focused */
.gform_wrapper .gfield:focus-within .gfield_label {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}

/* Has content (placeholder-shown trick activated by inline JS) */
.gform_wrapper .gfield:has( input:not( :placeholder-shown ) ) .gfield_label,
.gform_wrapper .gfield:has( textarea:not( :placeholder-shown ) ) .gfield_label {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}

/* Textarea floating overrides (no translateY since base has none) */
.gform_wrapper .gfield--type-textarea:focus-within .gfield_label,
.gform_wrapper .gfield--type-textarea:has( textarea:not( :placeholder-shown ) ) .gfield_label {
	top: 10px;
	transform: none;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}


/* ── 6. Input Controls ──────────────────────────────────────────────────── */

/* Shared styles for all text-type inputs and select */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
	width: 100%;
	background-color: #fff;
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 9px;
	color: #242122;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Text inputs + select: 74px height.
   padding-top: 26px pushes the typed text below the floated label
   (floated label sits at top: 12px, font 11px ≈ occupies 12–23px) */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container select {
	height: 74px;
	padding: 26px 25px 8px;
	line-height: normal;
}

/* Textarea */
.gform_wrapper .ginput_container textarea {
	height: 233px;
	/* padding-top: 40px reserves space for the floated label at top: 10px */
	padding: 40px 25px 16px;
	resize: vertical;
	line-height: 1.6;
}

/* Focus ring */
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
	border-color: var( --wp--preset--color--primary );
	box-shadow: 0 0 0 3px rgba( 198, 168, 94, 0.2 );
}

/* Placeholder (shown when GF sets actual placeholder text) */
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
	color: transparent; /* hide the space character injected by JS */
	opacity: 0;
}


/* ── 7. Name Field (two-column compound: First Name / Last Name) ─────────── */
/*
   Structure:
     fieldset.gfield--type-name (full-width in gform_fields grid)
       div.ginput_complex.gform-grid-row
         span.name_first.gform-grid-col
           label.gform-field-label--type-sub  "First Name"
           input[type=text]
         span.name_last.gform-grid-col
           label.gform-field-label--type-sub  "Last Name"
           input[type=text]
*/

.gform_wrapper .ginput_complex.ginput_container--name {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 21px;
	padding: 0;
}

/* Each name column: position:relative anchors the floating sub-label */
.gform_wrapper .gform-grid-col {
	position: relative;
}

/* Sub-labels mirror the main label's floating behavior exactly */
.gform_wrapper .gform-field-label--type-sub {
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY( -50% );
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	font-family: inherit;
	color: #242122;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
	transition:
		top 0.2s ease,
		transform 0.2s ease,
		font-size 0.2s ease,
		color 0.2s ease,
		letter-spacing 0.2s ease;
}

/* Focused */
.gform_wrapper .gform-grid-col:focus-within .gform-field-label--type-sub {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}

/* Has content */
.gform_wrapper .gform-grid-col:has( input:not( :placeholder-shown ) ) .gform-field-label--type-sub {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}

/* Name inputs: inherit all shared input styles, ensure full width */
.gform_wrapper .gform-grid-col input[type="text"] {
	display: block;
	width: 100%;
}


/* ── 8. Select (Service) ────────────────────────────────────────────────── */

/* Custom dropdown arrow */
.gform_wrapper .ginput_container_select {
	position: relative;
}

.gform_wrapper .ginput_container_select::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY( -50% );
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var( --wp--preset--color--primary );
	pointer-events: none;
}

/* Option text: don't uppercase option items (only the selected display) */
.gform_wrapper .ginput_container select option {
	text-transform: none;
}

/* Select floating label — two triggers:
   1. :focus-within  → dropdown is open / field is active
   2. .gfield--select-has-value → a real option has been chosen (class set by JS) */
.gform_wrapper .gfield--type-select:focus-within .gfield_label,
.gform_wrapper .gfield--select-has-value .gfield_label {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--primary );
}


/* ── 9. Checkbox & Radio ────────────────────────────────────────────────── */

.gform_wrapper .gfield--type-checkbox .gfield_checkbox,
.gform_wrapper .gfield--type-radio .gfield_radio {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.gform_wrapper .gfield--type-checkbox .gfield_checkbox li,
.gform_wrapper .gfield--type-radio .gfield_radio li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Checkbox/radio: reset shared input styles that don't apply */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.gform_wrapper .gfield--type-radio input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
	width: 1.1rem;
	height: 1.1rem;
	padding: 0;
	border: none;
	border-radius: 0;
	line-height: normal;
	flex-shrink: 0;
}

/* Checkbox/radio field label: not inside an input — reset to normal flow */
.gform_wrapper .gfield--type-checkbox .gfield_label,
.gform_wrapper .gfield--type-radio .gfield_label {
	position: static;
	transform: none;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
	color: #242122;
	pointer-events: auto;
	transition: none;
}


/* ── 10. Submit Button ──────────────────────────────────────────────────── */
/*
   Figma: 268×43px, centered, #C6A85E bg, white text,
   22px, weight 600, uppercase, letter-spacing 1.76px
*/

.gform_wrapper .gform_footer {
	padding: 0;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.gform_wrapper .gform_button {
	height: 43px;
	padding: 0 2.5rem;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
	border: 1px solid var( --wp--preset--color--primary );
	border-radius: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.76px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper .gform_button:hover {
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
}

.gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
}


/* ── 11. Validation & Errors ────────────────────────────────────────────── */

/* ── Validation summary box (top of form, after failed submit) ──────────── */

.gform_wrapper .gform_validation_errors {
	padding: 1.1rem 1.25rem 1.1rem 1.5rem;
	margin-bottom: 2rem;
	border-left: 3px solid #c0392b;
	background-color: #fdf2f2;
}

/* Heading row: icon + message */
.gform_wrapper .gform_submission_error {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	color: #c0392b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}

/* GF's icon font won't render without its own CSS — replace with a CSS circle ✕ */
.gform_wrapper .gform-icon--circle-error {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c0392b;
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	color: #c0392b;
}

.gform_wrapper .gform-icon--circle-error::after {
	content: '✕';
}

/* Error list */
.gform_wrapper .gform_validation_errors ol {
	margin: 0;
	padding-left: 1.1rem;
	list-style: decimal;
}

.gform_wrapper .gform_validation_errors li {
	font-size: 0.88rem;
	color: #242122;
	line-height: 1.5;
}

.gform_wrapper .gform_validation_errors li + li {
	margin-top: 0.25rem;
}

/* Error links — scroll user to the problem field */
.gform_wrapper .gform_validation_error_link {
	color: #c0392b;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: opacity 0.15s ease;
}

.gform_wrapper .gform_validation_error_link:hover {
	opacity: 0.7;
	text-decoration: none;
}

/* ── Inline field-level error (old GF compatibility class) ──────────────── */

.gform_wrapper .validation_error {
	padding: 0.75rem 1rem;
	border-left: 3px solid #c0392b;
	background-color: #fdf2f2;
	color: #c0392b;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

/* ── Individual field error state ───────────────────────────────────────── */

.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container select,
.gform_wrapper .gfield_error .ginput_container textarea {
	border-color: #c0392b;
}

/* Error state: float the label so it stays clear of the red-bordered input */
.gform_wrapper .gfield_error .gfield_label, .gform_wrapper .gfield_error .gform-field-label--type-sub {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: #c0392b;
}

/* Name sub-labels in error: float + red when the sub-field has content */
.gform_wrapper .gfield_error .gform-grid-col:focus-within .gform-field-label--type-sub,
.gform_wrapper .gfield_error .gform-grid-col:has( input:not( :placeholder-shown ) ) .gform-field-label--type-sub {
	top: 12px;
	transform: translateY( 0 );
	font-size: 11px;
	letter-spacing: 0.04em;
	color: #c0392b;
}

/* Per-field validation message */
.gform_wrapper .validation_message {
	font-size: 0.82rem;
	color: #c0392b;
	margin-top: 0.35rem;
}


/* ── 12. Confirmation Message ───────────────────────────────────────────── */

.gform_wrapper .gform_confirmation_wrapper {
	padding: 1.5rem;
	border-left: 3px solid var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--cream );
}

.gform_wrapper .gform_confirmation_message {
	font-size: 1rem;
	line-height: 1.75;
}

/* ── 13. Recaptcha ───────────────────────────────────────────── */

.gform_wrapper .ginput_recaptcha > div {
	margin: auto;
}

/* ── 14. Media Queries ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
	.gform_wrapper .gfield--width-half {
		grid-column: span 6;
	}

	.gform_wrapper .gform_button {
		min-width: 268px;
	}
}

@media ( max-width: 600px ) {

	.gform_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	.gform_wrapper .gfield--width-half {
		grid-column: 1 / -1;
	}

	.gform_wrapper .ginput_complex.ginput_container--name {
		grid-template-columns: 1fr;
	}

	.gform_wrapper .ginput_container input[type="text"], .gform_wrapper .ginput_container input[type="email"], .gform_wrapper .ginput_container input[type="tel"], .gform_wrapper .ginput_container input[type="number"], .gform_wrapper .ginput_container input[type="url"], .gform_wrapper .ginput_container select,
	.gform_wrapper .ginput_container textarea {		
		padding-left:15px;
		padding-right:15px;
	}

	.gform_wrapper .ginput_container textarea {
		padding-top: 20px;
	}

	.gform_wrapper .ginput_container input[type="text"], .gform_wrapper .ginput_container input[type="email"], .gform_wrapper .ginput_container input[type="tel"], .gform_wrapper .ginput_container input[type="number"], .gform_wrapper .ginput_container input[type="url"], .gform_wrapper .ginput_container select {
		height: 60px;
	}

	.gform_wrapper .gform-field-label--type-sub,
	.gform_wrapper .gfield_label {
		left: 15px;
		font-size: 12px;
	}

	.gform_wrapper .gfield--type-textarea .gfield_label {
		top: 20px;
	}
}

@media (max-width: 360px) {
	.gform_wrapper .ginput_recaptcha > div {
		transform: scale(0.75);
		transform-origin: left;
	}
}