/* ==========================================================================
   Wind Flow – ZIP Code Checker

   Layout model
   ------------
   Two states, one markup:
     inline  - the field is a pill: bordered wrapper, input + button side by side
     stacked - the wrapper dissolves (no border, no padding, no fixed height)
               and the input becomes a real bordered field of its own

   The switch is a CONTAINER query, not a viewport query, so the form stacks
   when the widget itself is narrow - inside a sidebar or a 3-column section
   on desktop too, not only on phones.

   Elementor writes CSS VARIABLES only, never final properties. That keeps its
   higher-specificity rules from fighting the stacked state: the stacked state
   overrides --wfzc-s-* variables that Elementor never touches.
   ========================================================================== */

/* The container context must live on a PARENT: a @container rule can only
   style descendants of the container, never the container element itself. */
.wfzc-scope {
	container-type: inline-size;
	container-name: wfzc;
}

.wfzc {
	--wfzc-card-bg: #ffffff;
	--wfzc-card-border: #0c1449;
	--wfzc-card-border-width: 1.5px;
	--wfzc-card-radius: 22px;
	--wfzc-gap: 20px;
	--wfzc-head-gap: 8px;

	--wfzc-title-color: #0c1449;
	--wfzc-text-color: #3f4563;

	--wfzc-field-bg: #ffffff;
	--wfzc-field-border: #0c1449;
	--wfzc-field-border-width: 1.5px;
	--wfzc-field-radius: 100px;
	--wfzc-field-height: 76px;
	--wfzc-field-pad: 10px 10px 10px 24px;
	--wfzc-field-gap: 12px;

	--wfzc-input-color: #0c1449;
	--wfzc-placeholder-color: #676c8c;
	--wfzc-input-size: 16px;

	/* Used only in the stacked state, where the input is its own box. */
	--wfzc-input-height: 48px;
	--wfzc-input-radius: 12px;
	--wfzc-input-border: var(--wfzc-field-border);
	--wfzc-input-border-width: var(--wfzc-field-border-width);
	--wfzc-input-pad: 12px 16px;

	--wfzc-btn-bg: #0c1449;
	--wfzc-btn-color: #ffffff;
	--wfzc-btn-bg-hover: #1b2a6b;
	--wfzc-btn-color-hover: #ffffff;
	--wfzc-btn-radius: 100px;
	--wfzc-btn-padding: 32px;
	--wfzc-btn-stack-height: 48px;
	--wfzc-btn-stack-pad: 20px;

	--wfzc-msg-radius: 100px;

	--wfzc-ok-bg: #d9f9e6;
	--wfzc-ok-border: #55b685;
	--wfzc-ok-color: #295e48;
	--wfzc-ok-icon-bg: #55b685;

	--wfzc-err-bg: #fdecea;
	--wfzc-err-border: #e0836f;
	--wfzc-err-color: #7a2e22;
	--wfzc-err-icon-bg: #d9644b;

	--wfzc-info-bg: #f2f3f7;

	display: flex;
	flex-direction: column;
	gap: var(--wfzc-gap);
	box-sizing: border-box;
	background: var(--wfzc-card-bg);
	border: var(--wfzc-card-border-width) solid var(--wfzc-card-border);
	border-radius: var(--wfzc-card-radius);
	padding: 28px;
}

.wfzc *,
.wfzc *::before,
.wfzc *::after {
	box-sizing: border-box;
}

.wfzc [hidden] {
	display: none !important;
}

/* ---------- Header ---------- */

.wfzc__head {
	display: flex;
	flex-direction: column;
	gap: var(--wfzc-head-gap);
}

.wfzc__title {
	margin: 0;
	color: var(--wfzc-title-color);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.wfzc__desc {
	margin: 0;
	color: var(--wfzc-text-color);
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- Field ---------- */

.wfzc__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wfzc__field {
	display: flex;
	flex-direction: var(--wfzc-s-dir, row);
	align-items: var(--wfzc-s-align, center);
	gap: var(--wfzc-field-gap);
	min-height: var(--wfzc-s-fh, var(--wfzc-field-height));
	padding: var(--wfzc-s-fpad, var(--wfzc-field-pad));
	background: var(--wfzc-s-fbg, var(--wfzc-field-bg));
	border: var(--wfzc-s-fbw, var(--wfzc-field-border-width)) solid var(--wfzc-field-border);
	border-radius: var(--wfzc-s-frad, var(--wfzc-field-radius));
}

.wfzc__field:focus-within {
	outline: var(--wfzc-s-fring, 2px solid var(--wfzc-field-border));
	outline-offset: 2px;
}

/* The double class outweighs theme rules such as `.entry input[type="text"]`,
   so the field never inherits a stray border, radius or shadow. */
/* The visible box lives on this span, never on the <input> itself.
   Theme and kit stylesheets reset `input[type="text"]` - often with
   !important - but nothing resets a span, so the border always survives. */
.wfzc__control {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	width: var(--wfzc-s-cw, auto);
	min-height: var(--wfzc-s-ch, auto);
	padding: var(--wfzc-s-cpad, 0);
	border: var(--wfzc-s-cbw, 0) solid var(--wfzc-input-border);
	border-radius: var(--wfzc-s-crad, 0);
	background: var(--wfzc-s-cbg, transparent);
	transition: border-color 0.15s ease;
}

.wfzc__control:focus-within {
	outline: var(--wfzc-s-cring, none);
	outline-offset: 2px;
}

/* The input is only text now: no box of its own, in either state. */
.wfzc .wfzc__field input.wfzc__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wfzc-input-color);
	font-family: inherit;
	font-size: var(--wfzc-input-size);
	line-height: 1.4;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.wfzc .wfzc__field input.wfzc__input:focus,
.wfzc .wfzc__field input.wfzc__input:focus-visible {
	background: transparent;
	box-shadow: none;
	outline: none;
}

.wfzc .wfzc__field input.wfzc__input::placeholder {
	color: var(--wfzc-placeholder-color);
	opacity: 1;
}

/* iOS Safari zooms the whole page when a focused input is under 16px.
   Only clamp on touch devices so desktop can still use a smaller size. */
@media (pointer: coarse) {

	.wfzc .wfzc__field input.wfzc__input {
		font-size: max(16px, var(--wfzc-input-size));
	}
}

.wfzc__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wfzc-s-bw, auto);
	height: var(--wfzc-s-bh, var(--wfzc-btn-height, calc(var(--wfzc-field-height) - 24px)));
	padding-inline: var(--wfzc-s-bpad, var(--wfzc-btn-padding));
	border: 0;
	border-radius: var(--wfzc-btn-radius);
	background: var(--wfzc-btn-bg);
	color: var(--wfzc-btn-color);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.wfzc__btn:hover,
.wfzc__btn:focus-visible {
	background: var(--wfzc-btn-bg-hover);
	color: var(--wfzc-btn-color-hover);
}

.wfzc__btn:focus-visible {
	outline: 3px solid var(--wfzc-field-border);
	outline-offset: 3px;
}

.wfzc__btn:active {
	transform: translateY(1px);
}

/* ---------- Stacked state ----------
   Every value below is a --wfzc-s-* override. Elementor never writes these,
   so no specificity conflict is possible. Threshold is picked in the panel. */

.wfzc--stack-always {
	--wfzc-s-dir: column;
	--wfzc-s-align: stretch;
	--wfzc-s-fh: auto;
	--wfzc-s-fpad: 0;
	--wfzc-s-fbg: none;
	--wfzc-s-fbw: 0;
	--wfzc-s-frad: 0;
	--wfzc-s-fring: none;
	--wfzc-s-cw: 100%;
	--wfzc-s-ch: var(--wfzc-input-height);
	--wfzc-s-cpad: var(--wfzc-input-pad);
	--wfzc-s-cbw: var(--wfzc-input-border-width);
	--wfzc-s-crad: var(--wfzc-input-radius);
	--wfzc-s-cbg: var(--wfzc-field-bg);
	--wfzc-s-cring: 2px solid var(--wfzc-field-border);
	--wfzc-s-bw: 100%;
	--wfzc-s-bh: var(--wfzc-btn-stack-height);
	--wfzc-s-bpad: var(--wfzc-btn-stack-pad);
}

@container wfzc (max-width: 420px) {

	.wfzc--stack-420 {
		--wfzc-s-dir: column;
		--wfzc-s-align: stretch;
		--wfzc-s-fh: auto;
		--wfzc-s-fpad: 0;
		--wfzc-s-fbg: none;
		--wfzc-s-fbw: 0;
		--wfzc-s-frad: 0;
		--wfzc-s-fring: none;
		--wfzc-s-cw: 100%;
		--wfzc-s-ch: var(--wfzc-input-height);
		--wfzc-s-cpad: var(--wfzc-input-pad);
		--wfzc-s-cbw: var(--wfzc-input-border-width);
		--wfzc-s-crad: var(--wfzc-input-radius);
		--wfzc-s-cbg: var(--wfzc-field-bg);
		--wfzc-s-cring: 2px solid var(--wfzc-field-border);
		--wfzc-s-bw: 100%;
		--wfzc-s-bh: var(--wfzc-btn-stack-height);
		--wfzc-s-bpad: var(--wfzc-btn-stack-pad);
	}
}

@container wfzc (max-width: 480px) {

	.wfzc--stack-480 {
		--wfzc-s-dir: column;
		--wfzc-s-align: stretch;
		--wfzc-s-fh: auto;
		--wfzc-s-fpad: 0;
		--wfzc-s-fbg: none;
		--wfzc-s-fbw: 0;
		--wfzc-s-frad: 0;
		--wfzc-s-fring: none;
		--wfzc-s-cw: 100%;
		--wfzc-s-ch: var(--wfzc-input-height);
		--wfzc-s-cpad: var(--wfzc-input-pad);
		--wfzc-s-cbw: var(--wfzc-input-border-width);
		--wfzc-s-crad: var(--wfzc-input-radius);
		--wfzc-s-cbg: var(--wfzc-field-bg);
		--wfzc-s-cring: 2px solid var(--wfzc-field-border);
		--wfzc-s-bw: 100%;
		--wfzc-s-bh: var(--wfzc-btn-stack-height);
		--wfzc-s-bpad: var(--wfzc-btn-stack-pad);
	}
}

@container wfzc (max-width: 560px) {

	.wfzc--stack-560 {
		--wfzc-s-dir: column;
		--wfzc-s-align: stretch;
		--wfzc-s-fh: auto;
		--wfzc-s-fpad: 0;
		--wfzc-s-fbg: none;
		--wfzc-s-fbw: 0;
		--wfzc-s-frad: 0;
		--wfzc-s-fring: none;
		--wfzc-s-cw: 100%;
		--wfzc-s-ch: var(--wfzc-input-height);
		--wfzc-s-cpad: var(--wfzc-input-pad);
		--wfzc-s-cbw: var(--wfzc-input-border-width);
		--wfzc-s-crad: var(--wfzc-input-radius);
		--wfzc-s-cbg: var(--wfzc-field-bg);
		--wfzc-s-cring: 2px solid var(--wfzc-field-border);
		--wfzc-s-bw: 100%;
		--wfzc-s-bh: var(--wfzc-btn-stack-height);
		--wfzc-s-bpad: var(--wfzc-btn-stack-pad);
	}
}

/* Fallback for engines without container queries: viewport width instead. */
@supports not (container-type: inline-size) {

	@media (max-width: 600px) {

		.wfzc--stack-420,
		.wfzc--stack-480,
		.wfzc--stack-560 {
			--wfzc-s-dir: column;
			--wfzc-s-align: stretch;
			--wfzc-s-fh: auto;
			--wfzc-s-fpad: 0;
			--wfzc-s-fbg: none;
			--wfzc-s-fbw: 0;
			--wfzc-s-frad: 0;
			--wfzc-s-fring: none;
			--wfzc-s-cw: 100%;
			--wfzc-s-ch: var(--wfzc-input-height);
			--wfzc-s-cpad: var(--wfzc-input-pad);
			--wfzc-s-cbw: var(--wfzc-input-border-width);
			--wfzc-s-crad: var(--wfzc-input-radius);
			--wfzc-s-cbg: var(--wfzc-field-bg);
			--wfzc-s-cring: 2px solid var(--wfzc-field-border);
			--wfzc-s-bw: 100%;
			--wfzc-s-bh: var(--wfzc-btn-stack-height);
			--wfzc-s-bpad: var(--wfzc-btn-stack-pad);
		}
	}
}

/* ---------- Feedback ---------- */

.wfzc__msg {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border: 1.5px solid transparent;
	border-radius: var(--wfzc-msg-radius);
	animation: wfzc-in 0.28s ease both;
}

.wfzc__msg--ok {
	background: var(--wfzc-ok-bg);
	border-color: var(--wfzc-ok-border);
	color: var(--wfzc-ok-color);
}

.wfzc__msg--err {
	background: var(--wfzc-err-bg);
	border-color: var(--wfzc-err-border);
	color: var(--wfzc-err-color);
}

.wfzc__msg--info {
	background: var(--wfzc-info-bg);
	color: var(--wfzc-title-color);
	padding-block: 14px;
}

.wfzc__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
}

.wfzc__msg--ok .wfzc__icon {
	background: var(--wfzc-ok-icon-bg);
}

.wfzc__msg--err .wfzc__icon {
	background: var(--wfzc-err-icon-bg);
}

.wfzc__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.wfzc__msg-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wfzc__msg-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.wfzc__msg-text {
	font-size: 15px;
	line-height: 1.45;
}

/* A pill radius on a two-line message clips the text, so cap it when narrow. */
@container wfzc (max-width: 480px) {

	.wfzc__msg {
		align-items: flex-start;
		padding: 16px;
		border-radius: min(var(--wfzc-msg-radius), 16px);
	}

	.wfzc__icon {
		width: 40px;
		height: 40px;
	}

	.wfzc__icon svg {
		width: 20px;
		height: 20px;
	}
}

@keyframes wfzc-in {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wfzc__msg {
		animation: none;
	}

	.wfzc__btn,
	.wfzc .wfzc__field input.wfzc__input {
		transition: none;
	}
}