/*
 * GI Forms 2.0 — Universal Design Studio front-end system.
 * Structural classes control layout and interaction while visual values come
 * from scoped CSS variables. Existing form fields and payment inputs remain
 * ordinary semantic controls underneath every presentation mode.
 */

.gife-form-wrap {
	--gife-primary: #2563eb;
	--gife-primary-text: #ffffff;
	--gife-accent: #7c3aed;
	--gife-bg: #ffffff;
	--gife-panel-bg: #ffffff;
	--gife-field-bg: #f8fafc;
	--gife-field-text: #0f172a;
	--gife-text: #0f172a;
	--gife-muted: #64748b;
	--gife-label: #1e293b;
	--gife-border: #e2e8f0;
	--gife-focus: #2563eb;
	--gife-error: #dc2626;
	--gife-success: #059669;
	--gife-button-bg: #2563eb;
	--gife-button-text: #ffffff;
	--gife-radius: 16px;
	--gife-field-radius: 10px;
	--gife-btn-radius: 10px;
	--gife-shadow: 0 16px 45px rgba(15, 23, 42, 0.1);
	--gife-field-shadow: none;
	--gife-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--gife-field-height: 48px;
	--gife-padding: 28px;
	--gife-gap-x: 18px;
	--gife-gap-y: 20px;
	--gife-label-width: 190px;
	--gife-max-width: 920px;
	--gife-background-image: none;
	--gife-background-position: center center;
	--gife-background-size: cover;
	--gife-overlay-color: #ffffff;
	--gife-overlay-opacity: 0;

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-inline: auto;
	padding: clamp(16px, 3vw, 36px);
	overflow: hidden;
	background-color: var(--gife-bg);
	background-image: var(--gife-background-image);
	background-position: var(--gife-background-position);
	background-size: var(--gife-background-size);
	background-repeat: no-repeat;
	color: var(--gife-text);
	font-family: var(--gife-font);
	border-radius: var(--gife-radius);
}

.gife-form-wrap::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--gife-overlay-color);
	opacity: var(--gife-overlay-opacity);
	pointer-events: none;
}

.gife-form-wrap *,
.gife-form-wrap *::before,
.gife-form-wrap *::after {
	box-sizing: border-box;
}

.gife-form-wrap [hidden] {
	display: none !important;
}

.gife-form-shell {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: var(--gife-max-width);
	min-width: 0;
	margin-inline: auto;
	transform-origin: center center;
}

.gife-form-intro {
	padding: clamp(22px, 4vw, 46px);
	color: var(--gife-text);
}

.gife-intro-eyebrow,
.gife-modal-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--gife-primary);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gife-intro-eyebrow::before,
.gife-modal-kicker::before {
	content: "";
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
}

.gife-intro-title {
	max-width: 18ch;
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.gife-intro-text {
	max-width: 58ch;
	margin: 18px 0 0;
	color: var(--gife-muted);
	font-size: 15px;
	line-height: 1.7;
}

.gife-intro-decoration {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	min-height: 42px;
	margin-top: 28px;
}

.gife-intro-decoration span {
	display: block;
	width: 8px;
	background: var(--gife-primary);
	border-radius: 999px;
	opacity: 0.82;
}

.gife-intro-decoration span:nth-child(1) { height: 18px; }
.gife-intro-decoration span:nth-child(2) { height: 34px; background: var(--gife-accent); }
.gife-intro-decoration span:nth-child(3) { height: 25px; }

.gife-form-panel {
	position: relative;
	min-width: 0;
	padding: var(--gife-padding);
	background: var(--gife-panel-bg);
	border: 1px solid var(--gife-border);
	border-radius: var(--gife-radius);
	box-shadow: var(--gife-shadow);
}

.gife-form,
.gife-fields-grid,
.gife-field {
	min-width: 0;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Structural layouts
 * ---------------------------------------------------------------------- */
.gife-fields-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: var(--gife-gap-x);
	row-gap: var(--gife-gap-y);
	align-items: start;
}

.gife-field,
.gife-amount-summary {
	grid-column: span 6;
	min-width: 0;
	align-self: start;
}

.gife-field {
	display: flex;
	flex-direction: column;
}

.gife-width-half { grid-column: span 3; }
.gife-width-third { grid-column: span 2; }

.gife-layout-stacked .gife-width-half,
.gife-layout-stacked .gife-width-third,
.gife-layout-conversational .gife-width-half,
.gife-layout-conversational .gife-width-third {
	grid-column: span 6;
}

.gife-layout-compact .gife-form-panel {
	--gife-padding: clamp(18px, 3vw, 26px);
	--gife-gap-x: 12px;
	--gife-gap-y: 14px;
}

.gife-layout-compact .gife-field-label {
	margin-bottom: 5px;
	font-size: 13px;
}

.gife-layout-compact .gife-submit-btn {
	margin-top: 14px;
}

.gife-layout-split-card .gife-form-shell {
	grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr);
	align-items: stretch;
}

.gife-layout-split-card .gife-form-intro {
	position: relative;
	overflow: hidden;
	background: var(--gife-button-bg);
	color: var(--gife-button-text);
	border: 1px solid transparent;
	border-radius: var(--gife-radius) 0 0 var(--gife-radius);
	box-shadow: var(--gife-shadow);
}

.gife-layout-split-card .gife-form-intro::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -80px;
	width: 210px;
	height: 210px;
	border: 42px solid currentColor;
	border-radius: 50%;
	opacity: 0.08;
}

.gife-layout-split-card .gife-intro-eyebrow,
.gife-layout-split-card .gife-intro-text {
	color: inherit;
}

.gife-layout-split-card .gife-form-panel {
	border-left: 0;
	border-radius: 0 var(--gife-radius) var(--gife-radius) 0;
}

.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) {
	display: grid;
	grid-template-columns: minmax(120px, var(--gife-label-width)) minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 7px;
	align-items: start;
}

.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) > .gife-field-label {
	grid-column: 1;
	padding-top: calc((var(--gife-field-height) - 20px) / 2);
	margin: 0;
}

.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) > :not(.gife-field-label) {
	grid-column: 2;
}

.gife-layout-label-left .gife-field-heading,
.gife-layout-label-left .gife-field-consent {
	grid-column: span 6;
}

.gife-layout-conversational .gife-form-panel {
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gife-layout-conversational .gife-fields-grid {
	display: block;
}

.gife-layout-conversational .gife-field,
.gife-layout-conversational .gife-amount-summary {
	animation: gife-step-enter 0.32s ease both;
}

.gife-layout-conversational .gife-field-label {
	margin-bottom: 12px;
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 750;
	line-height: 1.3;
}

.gife-layout-conversational .gife-heading {
	margin-bottom: 20px;
	font-size: clamp(22px, 3vw, 32px);
}

/* Explicit alignment controls. They intentionally target presentation
 * elements only; field inputs and payment values retain their semantic flow. */
.gife-content-align-center .gife-form-intro,
.gife-content-align-center .gife-heading {
	text-align: center;
}

.gife-content-align-center .gife-intro-eyebrow {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.gife-content-align-center .gife-intro-title,
.gife-content-align-center .gife-intro-text {
	margin-inline: auto;
}

.gife-content-align-center .gife-intro-decoration {
	justify-content: center;
}

.gife-content-align-right .gife-form-intro,
.gife-content-align-right .gife-heading {
	text-align: right;
}

.gife-content-align-right .gife-intro-eyebrow {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-left: auto;
}

.gife-content-align-right .gife-intro-title,
.gife-content-align-right .gife-intro-text {
	margin-left: auto;
}

.gife-content-align-right .gife-intro-decoration {
	justify-content: flex-end;
}

/* -------------------------------------------------------------------------
 * Labels and controls
 * ---------------------------------------------------------------------- */
.gife-field-label {
	display: block;
	min-height: 20px;
	margin: 0 0 8px;
	color: var(--gife-label);
	font-size: 14px;
	font-weight: 650;
	line-height: 20px;
}

.gife-req {
	margin-left: 3px;
	color: var(--gife-error);
}

.gife-form-wrap input[type="text"],
.gife-form-wrap input[type="email"],
.gife-form-wrap input[type="tel"],
.gife-form-wrap input[type="number"],
.gife-form-wrap input[type="date"],
.gife-form-wrap input[type="time"],
.gife-form-wrap input[type="file"],
.gife-form-wrap select,
.gife-form-wrap textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 11px 14px;
	background: var(--gife-field-bg);
	border: 1px solid var(--gife-border);
	border-radius: var(--gife-field-radius);
	box-shadow: var(--gife-field-shadow);
	color: var(--gife-field-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 450;
	line-height: 1.4;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gife-form-wrap input[type="text"],
.gife-form-wrap input[type="email"],
.gife-form-wrap input[type="tel"],
.gife-form-wrap input[type="number"],
.gife-form-wrap input[type="date"],
.gife-form-wrap input[type="time"],
.gife-form-wrap select {
	height: var(--gife-field-height);
}

.gife-form-wrap select {
	padding-right: 38px;
	background-image: linear-gradient(45deg, transparent 50%, var(--gife-muted) 50%), linear-gradient(135deg, var(--gife-muted) 50%, transparent 50%);
	background-position: calc(100% - 17px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.gife-form-wrap input[type="file"] {
	min-height: var(--gife-field-height);
	padding: 8px 10px;
}

.gife-form-wrap textarea {
	min-height: 112px;
	resize: vertical;
}

.gife-form-wrap input::placeholder,
.gife-form-wrap textarea::placeholder {
	color: var(--gife-muted);
	opacity: 0.78;
}

.gife-form-wrap input:focus,
.gife-form-wrap select:focus,
.gife-form-wrap textarea:focus {
	outline: none;
	border-color: var(--gife-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gife-focus) 20%, transparent), var(--gife-field-shadow);
}

.gife-form-wrap input:focus-visible,
.gife-form-wrap select:focus-visible,
.gife-form-wrap textarea:focus-visible,
.gife-form-wrap button:focus-visible {
	outline: 2px solid var(--gife-focus);
	outline-offset: 3px;
}

.gife-field-style-filled input[type="text"],
.gife-field-style-filled input[type="email"],
.gife-field-style-filled input[type="tel"],
.gife-field-style-filled input[type="number"],
.gife-field-style-filled input[type="date"],
.gife-field-style-filled input[type="time"],
.gife-field-style-filled input[type="file"],
.gife-field-style-filled select,
.gife-field-style-filled textarea {
	border-color: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gife-border) 45%, transparent);
}

.gife-field-style-underline input[type="text"],
.gife-field-style-underline input[type="email"],
.gife-field-style-underline input[type="tel"],
.gife-field-style-underline input[type="number"],
.gife-field-style-underline input[type="date"],
.gife-field-style-underline input[type="time"],
.gife-field-style-underline input[type="file"],
.gife-field-style-underline select,
.gife-field-style-underline textarea {
	padding-inline: 2px;
	background: transparent;
	border-width: 0 0 2px;
	border-radius: 0;
	box-shadow: none;
}

.gife-field-style-soft-card .gife-field:not(.gife-field-heading) {
	padding: 15px;
	background: color-mix(in srgb, var(--gife-field-bg) 78%, transparent);
	border: 1px solid color-mix(in srgb, var(--gife-border) 82%, transparent);
	border-radius: calc(var(--gife-field-radius) + 5px);
}

.gife-field-style-soft-card .gife-field:not(.gife-field-heading) input,
.gife-field-style-soft-card .gife-field:not(.gife-field-heading) select,
.gife-field-style-soft-card .gife-field:not(.gife-field-heading) textarea {
	background: var(--gife-panel-bg);
}

.gife-form-wrap .gife-field.gife-field-invalid input,
.gife-form-wrap .gife-field.gife-field-invalid select,
.gife-form-wrap .gife-field.gife-field-invalid textarea {
	border-color: var(--gife-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gife-error) 16%, transparent);
}

.gife-field-error {
	margin: 6px 0 0;
	color: var(--gife-error);
	font-size: 12px;
	font-weight: 550;
	line-height: 1.45;
}

.gife-field-hint {
	margin: 6px 0 0;
	color: var(--gife-muted);
	font-size: 12px;
	line-height: 1.45;
}

.gife-heading {
	margin: 6px 0 0;
	color: var(--gife-text);
	font-size: clamp(18px, 2.4vw, 25px);
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.018em;
}

.gife-subrow {
	display: flex;
	gap: 10px;
	min-width: 0;
}

.gife-subrow > * {
	flex: 1 1 0;
	min-width: 0;
}

.gife-field-phone {
	container-type: inline-size;
}

.gife-phone-row {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
	gap: 10px;
	width: 100%;
}

.gife-phone-row .gife-phone-country,
.gife-phone-row .gife-phone-number {
	width: 100%;
	min-width: 0;
}

/* A third-width phone field can become narrow inside split/label layouts.
 * Stack the two controls based on the field's own width instead of the
 * viewport, preventing overflow without weakening the normal 3-column grid. */
@container (max-width: 310px) {
	.gife-phone-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gife-address-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	width: 100%;
}

.gife-address-block > * {
	width: 100%;
	max-width: 100%;
}

.gife-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.gife-choice,
.gife-consent-label,
.gife-gateway-choice label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--gife-text);
	font-size: 14px;
	font-weight: 450;
	line-height: 1.45;
	cursor: pointer;
}

.gife-choice input,
.gife-consent-label input,
.gife-gateway-choice input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--gife-primary);
}

.gife-honeypot {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
	height: 0;
	overflow: hidden;
}

.gife-uppercase { text-transform: uppercase; }

.gife-product-row {
	display: flex;
	gap: 10px;
	min-width: 0;
}

.gife-product-row .gife-product-select {
	flex: 1 1 auto;
	min-width: 0;
}

.gife-product-row .gife-product-qty {
	flex: 0 0 92px;
	width: 92px;
}

/* -------------------------------------------------------------------------
 * Pricing controls
 * ---------------------------------------------------------------------- */
.gife-pricing-buttons,
.gife-tier-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

.gife-tier-buttons { margin-bottom: 12px; }

.gife-pricing-btn,
.gife-tier-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 118px;
	min-height: var(--gife-field-height);
	max-width: 100%;
	padding: 10px 18px;
	background: var(--gife-field-bg);
	border: 1px solid var(--gife-border);
	border-radius: var(--gife-btn-radius);
	color: var(--gife-field-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.gife-pricing-btn:hover,
.gife-tier-btn:hover {
	transform: translateY(-1px);
	border-color: var(--gife-primary);
}

.gife-pricing-btn.is-active,
.gife-tier-btn.is-active {
	background: var(--gife-button-bg);
	border-color: var(--gife-primary);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--gife-primary) 25%, transparent);
	color: var(--gife-button-text);
}

.gife-pricing-custom-wrap {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	max-width: 380px;
	margin-top: 13px;
}

.gife-pricing-custom-label {
	color: var(--gife-label);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.4;
}

.gife-pricing-unit {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	margin-top: 12px;
}

.gife-pricing-unit .gife-pricing-units {
	flex: 0 0 92px;
	width: 92px;
}

.gife-pricing-unit-label {
	color: var(--gife-label);
	font-size: 14px;
	font-weight: 550;
	line-height: 1.4;
	white-space: nowrap;
}

.gife-pricing-total {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	min-width: 165px;
	min-height: var(--gife-field-height);
	margin-left: auto;
	padding: 9px 14px;
	background: color-mix(in srgb, var(--gife-primary) 8%, var(--gife-field-bg));
	border: 1px solid color-mix(in srgb, var(--gife-primary) 28%, var(--gife-border));
	border-radius: var(--gife-field-radius);
	color: var(--gife-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}

.gife-pricing-total strong {
	color: var(--gife-primary);
	font-size: 16px;
}

.gife-amount-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px;
	background: color-mix(in srgb, var(--gife-primary) 7%, var(--gife-panel-bg));
	border: 1px solid color-mix(in srgb, var(--gife-primary) 25%, var(--gife-border));
	border-radius: calc(var(--gife-field-radius) + 4px);
}

.gife-amount-summary-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.gife-amount-summary-kicker {
	color: var(--gife-muted);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.gife-amount-summary-label {
	color: var(--gife-label);
	font-size: 15px;
}

.gife-amount-summary-value {
	color: var(--gife-primary);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 800;
}

.gife-amount-summary-button,
.gife-amount-confirm-btn {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 9px 16px;
	background: var(--gife-button-bg);
	border: 1px solid transparent;
	border-radius: var(--gife-btn-radius);
	color: var(--gife-button-text);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Gateways, submit state, errors, and success
 * ---------------------------------------------------------------------- */
.gife-gateway-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 18px 0 0;
}

.gife-gateway-choice label {
	align-items: center;
	padding: 10px 13px;
	background: var(--gife-field-bg);
	border: 1px solid var(--gife-border);
	border-radius: var(--gife-field-radius);
}

.gife-submit-btn,
.gife-step-next,
.gife-step-back,
.gife-success-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--gife-field-height);
	padding: 11px 28px;
	border-radius: var(--gife-btn-radius);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.gife-submit-btn {
	margin-top: 20px;
	background: var(--gife-button-bg);
	border: 1px solid transparent;
	color: var(--gife-button-text);
}

.gife-button-align-left .gife-submit-btn,
.gife-button-align-center .gife-submit-btn,
.gife-button-align-right .gife-submit-btn {
	display: flex;
	width: max-content;
	max-width: 100%;
}

.gife-button-align-left .gife-submit-btn {
	margin-right: auto;
	margin-left: 0;
}

.gife-button-align-center .gife-submit-btn {
	margin-right: auto;
	margin-left: auto;
}

.gife-button-align-right .gife-submit-btn {
	margin-right: 0;
	margin-left: auto;
}

.gife-button-align-stretch .gife-submit-btn {
	display: flex;
	width: 100%;
}

.gife-button-style-gradient .gife-submit-btn,
.gife-button-style-gradient .gife-step-next,
.gife-button-style-gradient .gife-amount-confirm-btn,
.gife-button-style-gradient .gife-amount-summary-button {
	background: linear-gradient(135deg, var(--gife-primary), var(--gife-accent));
}

.gife-button-style-outline .gife-submit-btn,
.gife-button-style-outline .gife-step-next,
.gife-button-style-outline .gife-amount-confirm-btn,
.gife-button-style-outline .gife-amount-summary-button {
	background: transparent;
	border-color: var(--gife-primary);
	color: var(--gife-primary);
}

.gife-button-style-glow .gife-submit-btn,
.gife-button-style-glow .gife-step-next,
.gife-button-style-glow .gife-amount-confirm-btn,
.gife-button-style-glow .gife-amount-summary-button {
	box-shadow: 0 10px 32px color-mix(in srgb, var(--gife-primary) 48%, transparent), 0 0 0 1px color-mix(in srgb, var(--gife-accent) 35%, transparent);
}

.gife-submit-btn:hover,
.gife-step-next:hover,
.gife-success-close:hover,
.gife-amount-confirm-btn:hover,
.gife-amount-summary-button:hover {
	transform: translateY(-1px);
	filter: brightness(0.96) saturate(1.04);
}

.gife-submit-btn[disabled],
.gife-step-next[disabled],
.gife-step-back[disabled] {
	cursor: not-allowed;
	opacity: 0.58;
	transform: none;
}

.gife-submit-spinner {
	display: none;
	width: 17px;
	height: 17px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gife-spin 0.7s linear infinite;
}

.gife-form.is-submitting .gife-submit-spinner { display: inline-block; }

.gife-form-error {
	margin: 16px 0 0;
	padding: 11px 14px;
	background: color-mix(in srgb, var(--gife-error) 8%, var(--gife-panel-bg));
	border: 1px solid color-mix(in srgb, var(--gife-error) 32%, transparent);
	border-radius: var(--gife-field-radius);
	color: var(--gife-error);
	font-size: 13px;
	font-weight: 550;
}

.gife-thankyou {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 5vw, 54px);
	background: color-mix(in srgb, var(--gife-success) 8%, var(--gife-panel-bg));
	border: 1px solid color-mix(in srgb, var(--gife-success) 30%, var(--gife-border));
	border-radius: calc(var(--gife-radius) - 4px);
	color: var(--gife-text);
	text-align: center;
}

.gife-thankyou h3,
.gife-success-dialog h3 {
	margin: 16px 0 8px;
	color: var(--gife-text);
	font-size: clamp(23px, 3vw, 32px);
	line-height: 1.2;
}

.gife-thankyou p,
.gife-success-dialog p {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--gife-muted);
	font-size: 15px;
	line-height: 1.65;
}

.gife-success-visual {
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto;
	background: color-mix(in srgb, var(--gife-success) 14%, var(--gife-panel-bg));
	border: 2px solid color-mix(in srgb, var(--gife-success) 42%, transparent);
	border-radius: 50%;
	color: var(--gife-success);
}

.gife-success-check span::before {
	content: "";
	display: block;
	width: 28px;
	height: 15px;
	border: solid currentColor;
	border-width: 0 0 4px 4px;
	transform: translateY(-3px) rotate(-45deg);
	animation: gife-check-pop 0.46s ease both;
}

.gife-success-pulse {
	animation: gife-success-pulse 1.1s ease-out 2;
}

.gife-success-none { display: none; }

.gife-success-close {
	margin-top: 22px;
	background: var(--gife-button-bg);
	border: 0;
	color: var(--gife-button-text);
}

.gife-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.gife-confetti i {
	position: absolute;
	top: -12px;
	left: var(--gife-confetti-x);
	width: 8px;
	height: 15px;
	background: var(--gife-primary);
	transform: rotate(var(--gife-confetti-rotate));
	animation: gife-confetti-fall 1.8s var(--gife-confetti-delay) cubic-bezier(0.2, 0.65, 0.4, 1) forwards;
}

.gife-confetti i:nth-child(3n) { background: var(--gife-accent); }
.gife-confetti i:nth-child(3n + 1) { border-radius: 50%; }
.gife-confetti i:nth-child(4n) { width: 12px; height: 7px; }

/* -------------------------------------------------------------------------
 * Conversational navigation
 * ---------------------------------------------------------------------- */
.gife-conversation-progress {
	margin-bottom: 26px;
}

.gife-conversation-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
	color: var(--gife-muted);
	font-size: 12px;
	font-weight: 700;
}

.gife-conversation-progress-track {
	height: 5px;
	overflow: hidden;
	background: color-mix(in srgb, var(--gife-border) 72%, transparent);
	border-radius: 999px;
}

.gife-conversation-progress-track span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gife-primary), var(--gife-accent));
	border-radius: inherit;
	transition: width 0.3s ease;
}

.gife-conversation-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.gife-step-next {
	margin-left: auto;
	background: var(--gife-button-bg);
	border: 1px solid transparent;
	color: var(--gife-button-text);
}

.gife-step-back {
	padding-inline: 10px;
	background: transparent;
	border: 0;
	color: var(--gife-muted);
}

/* -------------------------------------------------------------------------
 * Preloaders and entrance motion
 * ---------------------------------------------------------------------- */
.gife-preloader {
	position: absolute;
	z-index: 20;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 280px;
	background: color-mix(in srgb, var(--gife-bg) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--gife-primary);
}

.gife-preloader p {
	margin: 0;
	color: var(--gife-muted);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.gife-is-loading .gife-form-shell {
	visibility: hidden;
	opacity: 0;
}

.gife-preloader-spinner .gife-preloader-visual > span {
	display: block;
	width: 42px;
	height: 42px;
	border: 4px solid color-mix(in srgb, var(--gife-primary) 20%, transparent);
	border-top-color: var(--gife-primary);
	border-radius: 50%;
	animation: gife-spin 0.8s linear infinite;
}

.gife-preloader-dots .gife-preloader-visual {
	display: flex;
	gap: 7px;
}

.gife-preloader-dots .gife-preloader-visual span {
	width: 10px;
	height: 10px;
	background: var(--gife-primary);
	border-radius: 50%;
	animation: gife-dot-bounce 0.8s ease-in-out infinite alternate;
}

.gife-preloader-dots .gife-preloader-visual span:nth-child(2) { animation-delay: 0.14s; }
.gife-preloader-dots .gife-preloader-visual span:nth-child(3) { animation-delay: 0.28s; }

.gife-preloader-pulse .gife-preloader-visual > span {
	display: block;
	width: 48px;
	height: 48px;
	border: 3px solid var(--gife-primary);
	border-radius: 50%;
	animation: gife-loader-pulse 1.1s ease-out infinite;
}

.gife-preloader-lotus .gife-preloader-visual {
	position: relative;
	width: 76px;
	height: 60px;
}

.gife-preloader-lotus .gife-preloader-visual span {
	position: absolute;
	bottom: 4px;
	left: 50%;
	width: 28px;
	height: 46px;
	margin-left: -14px;
	background: linear-gradient(180deg, var(--gife-accent), var(--gife-primary));
	border-radius: 80% 15% 80% 15%;
	transform-origin: 50% 100%;
	animation: gife-lotus-bloom 1.1s ease-in-out infinite alternate;
}

.gife-preloader-lotus .gife-preloader-visual span:nth-child(1) { transform: rotate(-62deg) scale(0.78); opacity: 0.62; }
.gife-preloader-lotus .gife-preloader-visual span:nth-child(2) { transform: rotate(-32deg) scale(0.9); opacity: 0.82; animation-delay: 0.08s; }
.gife-preloader-lotus .gife-preloader-visual span:nth-child(3) { transform: rotate(0deg); animation-delay: 0.16s; }
.gife-preloader-lotus .gife-preloader-visual span:nth-child(4) { transform: rotate(32deg) scale(0.9); opacity: 0.82; animation-delay: 0.24s; }
.gife-preloader-lotus .gife-preloader-visual span:nth-child(5) { transform: rotate(62deg) scale(0.78); opacity: 0.62; animation-delay: 0.32s; }

.gife-is-ready.gife-animation-fade-up .gife-form-shell { animation: gife-fade-up 0.55s cubic-bezier(0.2, 0.75, 0.35, 1) both; }
.gife-is-ready.gife-animation-fade-in .gife-form-shell { animation: gife-fade-in 0.5s ease both; }
.gife-is-ready.gife-animation-slide-left .gife-form-shell { animation: gife-slide-left 0.55s cubic-bezier(0.2, 0.75, 0.35, 1) both; }
.gife-is-ready.gife-animation-slide-right .gife-form-shell { animation: gife-slide-right 0.55s cubic-bezier(0.2, 0.75, 0.35, 1) both; }
.gife-is-ready.gife-animation-zoom-in .gife-form-shell { animation: gife-zoom-in 0.52s cubic-bezier(0.2, 0.75, 0.35, 1) both; }
.gife-is-ready.gife-animation-stagger .gife-field { animation: gife-fade-up 0.42s ease both; }
.gife-is-ready.gife-animation-stagger .gife-field:nth-child(2) { animation-delay: 0.05s; }
.gife-is-ready.gife-animation-stagger .gife-field:nth-child(3) { animation-delay: 0.1s; }
.gife-is-ready.gife-animation-stagger .gife-field:nth-child(4) { animation-delay: 0.15s; }
.gife-is-ready.gife-animation-stagger .gife-field:nth-child(5) { animation-delay: 0.2s; }
.gife-is-ready.gife-animation-stagger .gife-field:nth-child(n + 6) { animation-delay: 0.25s; }

/* -------------------------------------------------------------------------
 * Accessible modal layer
 * ---------------------------------------------------------------------- */
body.gife-modal-open { overflow: hidden; }

.gife-modal {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.gife-modal.is-open { opacity: 1; }

.gife-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.68);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gife-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(620px, 100%);
	max-height: min(86vh, 780px);
	overflow: auto;
	padding: clamp(24px, 4vw, 38px);
	background: var(--gife-panel-bg);
	border: 1px solid var(--gife-border);
	border-radius: var(--gife-radius);
	box-shadow: 0 30px 100px rgba(2, 6, 23, 0.35);
	color: var(--gife-text);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.18s ease;
}

.gife-modal.is-open .gife-modal-dialog { transform: translateY(0) scale(1); }

.gife-modal-dialog > h3 {
	margin: 0 36px 22px 0;
	color: var(--gife-text);
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.15;
}

.gife-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--gife-field-bg);
	border: 1px solid var(--gife-border);
	border-radius: 50%;
	color: var(--gife-text);
	font-family: inherit;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}

.gife-amount-modal-host .gife-field {
	width: 100%;
	margin: 0;
}

.gife-amount-modal-host .gife-field-label {
	font-size: 16px;
}

.gife-amount-confirm-btn {
	width: 100%;
	margin-top: 24px;
}

.gife-success-dialog {
	position: relative;
	overflow: hidden;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Keyframes
 * ---------------------------------------------------------------------- */
@keyframes gife-spin { to { transform: rotate(360deg); } }
@keyframes gife-dot-bounce { to { transform: translateY(-10px); opacity: 0.46; } }
@keyframes gife-loader-pulse {
	0% { transform: scale(0.55); opacity: 1; }
	100% { transform: scale(1.25); opacity: 0; }
}
@keyframes gife-lotus-bloom {
	0% { filter: saturate(0.85); transform-origin: 50% 100%; }
	100% { filter: saturate(1.2) brightness(1.08); }
}
@keyframes gife-fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes gife-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gife-slide-left {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes gife-slide-right {
	from { opacity: 0; transform: translateX(30px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes gife-zoom-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes gife-step-enter {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes gife-check-pop {
	0% { opacity: 0; transform: translateY(-3px) rotate(-45deg) scale(0.5); }
	100% { opacity: 1; transform: translateY(-3px) rotate(-45deg) scale(1); }
}
@keyframes gife-success-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gife-success) 42%, transparent); }
	100% { box-shadow: 0 0 0 22px transparent; }
}
@keyframes gife-confetti-fall {
	0% { opacity: 0; transform: translateY(-20px) rotate(var(--gife-confetti-rotate)); }
	12% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(20px, 520px, 0) rotate(720deg); }
}

/* -------------------------------------------------------------------------
 * Responsive behaviour
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.gife-width-third { grid-column: span 3; }

	.gife-layout-split-card .gife-form-shell {
		grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
	}

	.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) {
		grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.gife-layout-split-card .gife-form-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.gife-layout-split-card .gife-form-intro {
		border-radius: var(--gife-radius) var(--gife-radius) 0 0;
	}

	.gife-layout-split-card .gife-form-panel {
		border-top: 0;
		border-left: 1px solid var(--gife-border);
		border-radius: 0 0 var(--gife-radius) var(--gife-radius);
	}

	.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.gife-layout-label-left .gife-field:not(.gife-field-heading):not(.gife-field-consent) > .gife-field-label {
		padding-top: 0;
		margin-bottom: 8px;
	}

	.gife-layout-conversational .gife-form-panel {
		min-height: 400px;
	}
}

@media (max-width: 640px) {
	.gife-form-wrap {
		padding: 12px;
		border-radius: min(var(--gife-radius), 18px);
	}

	.gife-form-panel {
		padding: clamp(18px, 5vw, 24px);
	}

	.gife-form-intro {
		padding: 24px;
	}

	.gife-intro-title {
		font-size: clamp(26px, 9vw, 38px);
	}

	.gife-fields-grid {
		row-gap: 17px;
	}

	.gife-width-half,
	.gife-width-third {
		grid-column: span 6;
	}

	.gife-pricing-btn,
	.gife-tier-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.gife-pricing-custom-wrap {
		max-width: 100%;
	}

	.gife-pricing-unit {
		flex-wrap: wrap;
	}

	.gife-pricing-total {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}

	.gife-amount-summary {
		align-items: stretch;
		flex-direction: column;
	}

	.gife-amount-summary-button,
	.gife-submit-btn,
	.gife-step-next,
	.gife-success-close {
		width: 100%;
	}

	.gife-conversation-actions {
		flex-wrap: wrap;
	}

	.gife-step-back {
		width: auto;
	}

	.gife-modal {
		align-items: end;
		padding: 0;
	}

	.gife-modal-dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--gife-radius) var(--gife-radius) 0 0;
		transform: translateY(30px);
	}
}

@media (max-width: 520px) {
	.gife-phone-row,
	.gife-subrow,
	.gife-product-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.gife-product-row .gife-product-qty {
		width: 100%;
		max-width: 100%;
	}

	.gife-form-wrap input,
	.gife-form-wrap select,
	.gife-form-wrap textarea,
	.gife-form-wrap button {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gife-form-wrap *,
	.gife-form-wrap *::before,
	.gife-form-wrap *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.gife-is-loading .gife-form-shell {
		visibility: visible;
		opacity: 1;
	}
}