/**
 * Check availability — Travhawk premium strip (design-system tokens).
 */

#check-availability-section.check-availability-section.th-check-avail-premium {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding-top: clamp(2rem, 5vw, 3.25rem);
	padding-bottom: clamp(2rem, 5vw, 3.25rem);
	border-top: 1px solid rgba(var(--th-rgb-denim), 0.1);
	border-bottom: 1px solid rgba(var(--th-rgb-denim), 0.08);
	/* Travhawk surfaces: denim / turquoise / seagull wash over subtle page neutrals */
	background:
		radial-gradient(ellipse 110% 85% at 50% -15%, rgba(var(--th-rgb-turquoise), 0.22) 0%, transparent 52%),
		radial-gradient(ellipse 75% 60% at 12% 55%, rgba(var(--th-rgb-seagull), 0.2) 0%, transparent 56%),
		radial-gradient(ellipse 70% 55% at 94% 70%, rgba(var(--th-rgb-denim), 0.12) 0%, transparent 52%),
		linear-gradient(
			178deg,
			rgba(var(--th-rgb-turquoise), 0.12) 0%,
			var(--th-color-bg-muted) 38%,
			var(--th-color-bg-subtle) 68%,
			var(--th-palette-white) 100%
		);
}

/* Premium front page — align strip with hero/main wash (still token-driven). */
body.th-home-premium-site.home #check-availability-section.check-availability-section.th-check-avail-premium {
	border-top-color: rgba(var(--th-rgb-turquoise), 0.12);
	border-bottom-color: rgba(var(--th-rgb-denim), 0.06);
}

#check-availability-section .check-availability {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(72rem, 100%);
	margin-inline: auto;
	display: flex;
	justify-content: center;
	padding-inline: clamp(0.75rem, 3vw, 1.5rem);
}

/* Wide glass card — fills theme .container rhythm */
#check-availability-section .th-check-avail-panel {
	width: 100%;
	max-width: min(68rem, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.35rem, 3.5vw, 2rem) clamp(1.25rem, 3.5vw, 2rem);
	border-radius: clamp(22px, 3.2vw, 32px);
	background:
		linear-gradient(
			155deg,
			rgba(255, 255, 255, 0.97) 0%,
			rgba(255, 255, 255, 0.9) 45%,
			rgba(var(--th-rgb-seagull), 0.05) 100%
		);
	border: 1px solid rgba(var(--th-rgb-denim), 0.11);
	box-shadow:
		0 0 0 1px rgba(var(--th-rgb-turquoise), 0.12),
		0 1px 0 rgba(255, 255, 255, 0.98) inset,
		0 28px 64px rgba(var(--th-rgb-denim), 0.11),
		0 8px 24px rgba(var(--th-rgb-denim), 0.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	text-align: center;
}

#check-availability-section .th-check-avail-panel__title {
	margin: 0 0 clamp(1.25rem, 2.8vw, 1.65rem);
	width: 100%;
}

#check-availability-section .th-check-avail-panel__title .title-text {
	font-family: var(--th-font-display);
	font-size: clamp(1.45rem, 1.05rem + 1.25vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.15;
	color: var(--th-color-ink);
	padding-bottom: 0.55rem;
	border-bottom: 3px solid var(--th-palette-turquoise);
	display: inline-block;
	max-width: 100%;
	box-decoration-break: clone;
}

/* Form column — centered in card (wins over legacy float / fixed widths on .coverage-form) */
#check-availability-section .th-check-avail-panel__form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	max-width: min(40rem, 100%);
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}

#check-availability-section .th-check-avail-panel__form > .coverage-form {
	width: min(40rem, 100%) !important;
	max-width: min(40rem, 100%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
	clear: both !important;
	display: block !important;
}

/* Region links — chip grid (no pipe characters; uses denim / turquoise / seagull) */
#check-availability-section .th-check-avail-panel .areas-list {
	list-style: none;
	margin: 0 0 clamp(1.35rem, 3vw, 1.85rem);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.65rem 0.85rem;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	text-align: center;
}

@media (min-width: 768px) {
	#check-availability-section .th-check-avail-panel .areas-list {
		grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	}
}

#check-availability-section .th-check-avail-panel .areas-list li {
	display: block;
	margin: 0;
	position: relative;
}

/* Kill legacy snapshot / pipe pseudo-elements (vertical “connector” glitches in grid) */
#check-availability-section .th-check-avail-panel .areas-list li::before,
#check-availability-section .th-check-avail-panel .areas-list li::after,
#check-availability-section .th-check-avail-panel .areas-list li + li::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	position: absolute !important;
	left: -9999px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#check-availability-section .areas-list__link::before,
#check-availability-section .areas-list__link::after {
	content: none !important;
	display: none !important;
}

#check-availability-section .areas-list__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1.02rem);
	text-decoration: none;
	color: var(--th-palette-denim);
	border: 1.5px solid rgba(var(--th-rgb-turquoise), 0.55);
	background:
		linear-gradient(180deg, var(--th-palette-white) 0%, rgba(var(--th-rgb-seagull), 0.09) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 4px 14px rgba(var(--th-rgb-denim), 0.06);
	transition:
		color var(--th-transition),
		border-color var(--th-transition),
		background var(--th-transition),
		box-shadow var(--th-transition),
		transform var(--th-duration-fast) var(--th-ease-out);
}

#check-availability-section .areas-list__link:hover,
#check-availability-section .areas-list__link:focus-visible {
	color: var(--th-palette-white);
	border-color: rgba(255, 255, 255, 0.35);
	background: linear-gradient(
		135deg,
		var(--th-palette-denim) 0%,
		#1f7fd2 48%,
		var(--th-palette-turquoise) 100%
	);
	box-shadow:
		0 10px 28px rgba(var(--th-rgb-turquoise), 0.35),
		0 2px 8px rgba(var(--th-rgb-denim), 0.15);
	transform: translateY(-2px);
}

/* Postcode pill — full width of centered .coverage-form */
#check-availability-section .th-check-avail-panel .coverage-form .coverage-form-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	float: none !important;
}

/*
 * Bundled wpr_usedcss sets .coverage-form--large .search-form { width: 400px } (and 320px @768px),
 * which loads after this file — pill stays narrow + left unless we win with #id + !important.
 */
#check-availability-section .coverage-form.coverage-form--large .search-form.submit-icon,
#check-availability-section .coverage-form--large .search-form.submit-icon {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row;
	align-items: center;
	border-radius: 999px;
	border: 2px solid var(--th-palette-turquoise);
	outline: none;
	background: linear-gradient(180deg, var(--th-palette-white) 0%, var(--th-color-bg-warm) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 1) inset,
		0 14px 40px rgba(var(--th-rgb-turquoise), 0.16),
		0 2px 10px rgba(var(--th-rgb-denim), 0.08);
	min-height: 48px;
	transition:
		border-color var(--th-transition),
		box-shadow var(--th-transition);
}

#check-availability-section .coverage-form--large .search-form.submit-icon:focus-within {
	border-color: var(--th-palette-denim);
	box-shadow:
		0 0 0 3px rgba(var(--th-rgb-turquoise), 0.28),
		0 18px 48px rgba(var(--th-rgb-denim), 0.12),
		0 1px 0 rgba(255, 255, 255, 1) inset;
}

#check-availability-section .coverage-form--large .search-form .search-submit {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background-color: var(--th-palette-turquoise) !important;
	background-image: none !important;
	border: none !important;
	/* Vertical margin breaks flex cross-axis centering; margin-left auto pins to end */
	margin: 0 8px 0 auto !important;
	padding: 0 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	box-shadow: 0 2px 12px rgba(var(--th-rgb-turquoise), 0.4);
	transition: background-color var(--th-transition);
}

#check-availability-section .coverage-form--large .search-form .search-submit .icon.dashicons,
#check-availability-section .coverage-form--large .search-form .search-submit .dashicons {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	line-height: 1 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	font-size: 1.125rem !important;
	color: #ffffff !important;
}

#check-availability-section .coverage-form--large .search-form .search-submit .dashicons::before {
	line-height: 1 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	font-size: 1.125rem !important;
	display: block !important;
	text-align: center !important;
	color: #ffffff !important;
}

#check-availability-section .coverage-form--large .search-form .search-submit:hover {
	background-color: var(--th-palette-denim) !important;
}

#check-availability-section .coverage-form--large .search-form .form-control.search-field,
#check-availability-section .coverage-form--large .search-form.submit-icon input[type="text"].form-control {
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	color: var(--th-color-ink);
	font-weight: 500;
}

/* Phone: hide circular submit — keyboard “Go” still submits; button stays for a11y */
@media (max-width: 767.98px) {
	#check-availability-section .coverage-form--large .search-form.submit-icon {
		position: relative !important;
	}

	#check-availability-section .coverage-form--large .search-form .search-submit {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	#check-availability-section .coverage-form--large .search-form .form-control.search-field {
		padding-right: 1rem !important;
	}
}

/* --- Layout overrides (were inline in functions.php): kill legacy snapshot pseudo-connectors + width caps. `.home` = WP front page. --- */
#check-availability-section.th-check-avail-premium .th-check-avail-panel .areas-list li::before,
#check-availability-section.th-check-avail-premium .th-check-avail-panel .areas-list li::after,
#check-availability-section.th-check-avail-premium .th-check-avail-panel .areas-list li + li::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body:not(.home) #check-availability-section .th-check-avail-panel__form {
	align-items: center !important;
	justify-content: center !important;
	max-width: min(40rem, 100%) !important;
}

body.home #check-availability-section .th-check-avail-panel__form {
	align-items: stretch !important;
	justify-content: center !important;
	max-width: 100% !important;
}

body:not(.home) #check-availability-section .th-check-avail-panel__form > .coverage-form.coverage-form--large {
	width: min(40rem, 100%) !important;
	max-width: min(40rem, 100%) !important;
}

body.home #check-availability-section .th-check-avail-panel__form > .coverage-form.coverage-form--large {
	width: 100% !important;
	max-width: 100% !important;
}

body:not(.home) #check-availability-section .th-check-avail-panel .coverage-form .coverage-form-wrapper,
body.home #check-availability-section .th-check-avail-panel .coverage-form .coverage-form-wrapper {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * Dedicated hooks from airband_render_postcode_search_form( 'large', 'check-avail' ) —
 * survives theme/load-order/cache issues; explicit teal rim (never Bootstrap black / #999).
 */
#check-availability-section.th-check-avail-premium .coverage-form.coverage-form--large.th-premium-postcode-strip {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip > .coverage-form-wrapper.th-premium-postcode-strip__wrap {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	align-self: stretch !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip form.search-form.submit-icon.th-premium-postcode-strip__shell {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.35rem !important;
	min-height: 48px !important;
	padding: 4px 9px 4px 12px !important;
	border-radius: 999px !important;
	outline: none !important;
	/* teal rim only — veto snapshot black / grey */
	border: 2px solid #57d6e2 !important;
	border-style: solid !important;
	border-color: #57d6e2 !important;
	box-shadow:
		0 0 0 1px rgba(87, 214, 226, 0.18),
		0 1px 0 rgba(255, 255, 255, 1) inset,
		0 20px 56px rgba(23, 110, 186, 0.07),
		0 12px 32px rgba(87, 214, 226, 0.12) !important;
	background:
		linear-gradient(180deg, #ffffff 0%, #faf8f8 100%) !important;
	transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip form.th-premium-postcode-strip__shell:focus-within {
	border-color: #176eba !important;
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px rgba(87, 214, 226, 0.22),
		0 0 0 3px rgba(87, 214, 226, 0.24),
		0 1px 0 rgba(255, 255, 255, 1) inset,
		0 24px 64px rgba(23, 110, 186, 0.09),
		0 16px 40px rgba(87, 214, 226, 0.14) !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__field.form-control,
#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__shell input[type="text"],
#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__shell .form-control {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	background-clip: padding-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	color: #16181a !important;
	font-weight: 650 !important;
	font-size: 0.98rem !important;
	letter-spacing: -0.01em !important;
	padding: 0.5rem 0.85rem !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__field::placeholder {
	color: rgba(22, 24, 26, 0.45) !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit.search-submit {
	flex-shrink: 0 !important;
	width: clamp(40px, 9vw, 46px) !important;
	height: clamp(40px, 9vw, 46px) !important;
	min-width: clamp(40px, 9vw, 46px) !important;
	margin: 0 4px 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	background-image: linear-gradient(135deg, #57d6e2 0%, #6ec1e4 100%) !important;
	color: #ffffff !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	box-shadow:
		0 12px 32px rgba(87, 214, 226, 0.38),
		0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit .icon.dashicons,
#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit .dashicons {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	line-height: 1 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	font-size: 1.125rem !important;
	color: #ffffff !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit .dashicons::before {
	line-height: 1 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	font-size: 1.125rem !important;
	display: block !important;
	text-align: center !important;
	color: #ffffff !important;
}

#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit.search-submit:hover,
#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit.search-submit:focus-visible {
	transform: translateY(-1px) scale(1.03);
	background-image: linear-gradient(135deg, #176eba 0%, #57d6e2 100%) !important;
	box-shadow:
		0 14px 40px rgba(23, 110, 186, 0.28),
		0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
}

@media (max-width: 767.98px) {
	#check-availability-section.th-check-avail-premium .th-premium-postcode-strip form.th-premium-postcode-strip__shell.search-form.submit-icon {
		position: relative !important;
	}

	/*
	 * Default mobile rule hides .search-submit in this section; strip submit must stay visible + tappable.
	 */
	#check-availability-section.th-check-avail-premium .th-premium-postcode-strip .th-premium-postcode-strip__submit.search-submit {
		position: static !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		padding: 0 !important;
		margin: 0 4px 0 auto !important;
	}
}