/**
 * HSMH Wait Time Checker — frontend styles
 * Scoped with .hsmh- prefixes so nothing leaks into the host theme.
 */

:root {
	--hsmh-accent: #86E0C9;
	--hsmh-accent-dark: #5BC7A8;
	--hsmh-accent-lighter: #DFF5EE;
	--hsmh-accent-tint: #F2FAF7;
	--hsmh-ink: #0F2524;
	--hsmh-text: #4A5A57;
	--hsmh-muted: #8A9A96;
	--hsmh-border: #E4EEEA;
	--hsmh-border-strong: #CFE0DA;
	--hsmh-danger: #B42318;
	--hsmh-danger-bg: #FEF3F2;
	--hsmh-danger-border: #FEE4E2;
	--hsmh-radius-sm: 10px;
	--hsmh-radius: 16px;
	--hsmh-radius-lg: 24px;
	--hsmh-radius-pill: 999px;
	--hsmh-shadow: 0 10px 30px rgba(15, 37, 36, 0.08);
	--hsmh-shadow-lg: 0 30px 80px rgba(15, 37, 36, 0.25);
	--hsmh-font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base reset ---------- */
.hsmh-hero,
.hsmh-modal,
.hsmh-inline,
.hsmh-trigger-btn {
	font-family: var(--hsmh-font);
	color: var(--hsmh-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
.hsmh-hero *,
.hsmh-modal *,
.hsmh-inline *,
.hsmh-trigger-btn * {
	box-sizing: border-box;
}

/* Theme-override: postcode inputs must be fully borderless/transparent.
   Many WP themes (Elementor especially) apply page-scoped input styles with
   higher specificity and !important, so we match that with doubled class
   selectors (specificity 0,2,1) and drop every possible visual property. */
input.hsmh-hero-input.hsmh-hero-input,
input.hsmh-input-pc.hsmh-input-pc,
input.hsmh-hero-input.hsmh-hero-input:focus,
input.hsmh-input-pc.hsmh-input-pc:focus,
input.hsmh-hero-input.hsmh-hero-input:hover,
input.hsmh-input-pc.hsmh-input-pc:hover,
input.hsmh-hero-input.hsmh-hero-input:active,
input.hsmh-input-pc.hsmh-input-pc:active {
	border: 0 none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	background: transparent none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: 0 none !important;
	outline-width: 0 !important;
	outline-offset: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	filter: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
}

/* ---------- Trigger button (shortcode) ---------- */
.hsmh-trigger-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--hsmh-radius-pill);
	border: 0;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
	line-height: 1;
	text-decoration: none;
}
.hsmh-trigger-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hsmh-trigger-primary { background: var(--hsmh-accent); color: var(--hsmh-ink); }
.hsmh-trigger-primary:hover { background: var(--hsmh-accent-dark); transform: translateY(-1px); box-shadow: var(--hsmh-shadow); }
.hsmh-trigger-dark { background: var(--hsmh-ink); color: #fff; }
.hsmh-trigger-dark:hover { background: #1b3634; }
.hsmh-trigger-ghost { background: #fff; color: var(--hsmh-ink); box-shadow: inset 0 0 0 2px var(--hsmh-border-strong); }
.hsmh-trigger-ghost:hover { box-shadow: inset 0 0 0 2px var(--hsmh-accent); color: var(--hsmh-ink); }
.hsmh-trigger-size-sm { padding: 10px 18px; font-size: 13px; }
.hsmh-trigger-size-lg { padding: 18px 30px; font-size: 16px; }

/* ---------- Hero search widget ---------- */
.hsmh-hero {
	width: 100%;
	max-width: 620px;
}
.hsmh-hero-text { margin-bottom: 14px; }
.hsmh-hero-heading {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--hsmh-ink);
}
.hsmh-hero-sub {
	margin: 0;
	font-size: 14.5px;
	color: var(--hsmh-text);
	line-height: 1.5;
}
.hsmh-hero.is-compact .hsmh-hero-text { display: none; }

.hsmh-hero-form { margin: 0; }

.hsmh-hero-field {
	display: flex;
	align-items: center;
	gap: 0;
	background: #fff;
	border: 0;
	border-radius: var(--hsmh-radius-pill);
	padding: 5px 5px 5px 20px;
	transition: box-shadow .2s ease;
	box-shadow: 0 2px 10px rgba(15, 37, 36, 0.05);
}
.hsmh-hero-field:focus-within {
	box-shadow: 0 4px 18px rgba(15, 37, 36, 0.08), 0 0 0 3px rgba(134, 224, 201, 0.35);
}
.hsmh-hero-field .hsmh-pin {
	width: 20px; height: 20px;
	color: var(--hsmh-accent-dark);
	flex: 0 0 auto;
}
.hsmh-hero-input {
	flex: 1;
	border: 0;
	outline: 0;
	padding: 13px 12px;
	font-size: 15px;
	font-family: var(--hsmh-font);
	color: var(--hsmh-ink);
	background: transparent;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	min-width: 0;
}
.hsmh-hero-input::placeholder {
	color: var(--hsmh-muted);
	text-transform: none;
	letter-spacing: 0;
}
.hsmh-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hsmh-ink);
	color: #fff;
	border: 0;
	border-radius: var(--hsmh-radius-pill);
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--hsmh-font);
	transition: background .15s ease, transform .12s ease;
	white-space: nowrap;
	line-height: 1;
}
.hsmh-hero-btn:hover { background: #1b3634; transform: translateX(2px); }
.hsmh-hero-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.hsmh-hero-btn .hsmh-arrow { width: 14px; height: 14px; }

/* Dark theme variant — when hero sits on a light background */
.hsmh-hero-dark .hsmh-hero-heading,
.hsmh-hero-dark .hsmh-hero-sub { color: var(--hsmh-ink); }

/* Neutralise browser autofill yellow in all postcode inputs */
.hsmh-hero-input:-webkit-autofill,
.hsmh-hero-input:-webkit-autofill:hover,
.hsmh-hero-input:-webkit-autofill:focus,
.hsmh-input-pc:-webkit-autofill,
.hsmh-input-pc:-webkit-autofill:hover,
.hsmh-input-pc:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: var(--hsmh-ink) !important;
	caret-color: var(--hsmh-ink);
	transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Modal ---------- */
.hsmh-modal[hidden] { display: none !important; }
.hsmh-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: hsmh-modal-in .2s ease;
}
@keyframes hsmh-modal-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.hsmh-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 37, 36, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hsmh-modal-panel {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: min(92vh, 860px);
	background: #fff;
	border-radius: var(--hsmh-radius-lg);
	box-shadow: var(--hsmh-shadow-lg);
	overflow: hidden;
	animation: hsmh-panel-in .3s cubic-bezier(.22,1,.36,1);
	display: flex;
	flex-direction: column;
}
@keyframes hsmh-panel-in {
	from { opacity: 0; transform: translateY(20px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.hsmh-modal-scroll {
	overflow-y: auto;
	padding: 44px 40px 32px;
	-webkit-overflow-scrolling: touch;
}
.hsmh-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--hsmh-border);
	background: #fff;
	color: var(--hsmh-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
	box-shadow: 0 2px 6px rgba(15, 37, 36, 0.06);
}
.hsmh-modal-close:hover {
	background: var(--hsmh-ink);
	color: #fff;
	border-color: var(--hsmh-ink);
	transform: rotate(90deg);
}
.hsmh-close-x {
	display: block;
	font-size: 26px;
	line-height: 1;
	font-weight: 300;
	color: inherit;
	margin-top: -2px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------- Shared header / search / results ---------- */
.hsmh-hd { text-align: center; margin-bottom: 22px; }
.hsmh-eyebrow {
	display: inline-block;
	padding: 7px 14px;
	background: var(--hsmh-accent);
	color: var(--hsmh-ink);
	border-radius: var(--hsmh-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 14px;
}
.hsmh-hd h2 {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hsmh-ink);
	letter-spacing: -0.01em;
}
.hsmh-hd p {
	margin: 0 auto;
	max-width: 460px;
	font-size: 15px;
	color: var(--hsmh-text);
	line-height: 1.5;
}

.hsmh-search { margin: 0 0 4px; }
.hsmh-search-field {
	display: flex;
	align-items: center;
	background: var(--hsmh-accent-tint);
	border: 0;
	border-radius: var(--hsmh-radius-pill);
	padding: 5px 5px 5px 20px;
	transition: box-shadow .2s ease, background .2s ease;
}
.hsmh-search-field:focus-within {
	background: #fff;
	box-shadow: 0 2px 14px rgba(15, 37, 36, 0.06), 0 0 0 3px rgba(134, 224, 201, 0.35);
}
.hsmh-search-field .hsmh-pin {
	width: 20px; height: 20px;
	color: var(--hsmh-accent-dark);
	flex: 0 0 auto;
}
.hsmh-input-pc {
	flex: 1;
	border: 0;
	outline: 0;
	padding: 14px 12px;
	font-size: 16px;
	font-family: var(--hsmh-font);
	color: var(--hsmh-ink);
	background: transparent;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	min-width: 0;
}
.hsmh-input-pc::placeholder {
	color: var(--hsmh-muted);
	text-transform: none;
	letter-spacing: 0;
}
.hsmh-submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--hsmh-accent);
	color: var(--hsmh-ink);
	border: 0;
	border-radius: var(--hsmh-radius-pill);
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--hsmh-font);
	transition: background .15s ease, transform .12s ease;
	white-space: nowrap;
	line-height: 1;
}
.hsmh-submit:hover { background: var(--hsmh-accent-dark); }
.hsmh-submit:disabled { opacity: .7; cursor: wait; }
.hsmh-submit .hsmh-arrow { width: 14px; height: 14px; }

.hsmh-error {
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--hsmh-danger-bg);
	border: 1px solid var(--hsmh-danger-border);
	border-radius: var(--hsmh-radius-sm);
	color: var(--hsmh-danger);
	font-size: 14px;
	line-height: 1.5;
}
.hsmh-error[hidden] { display: none; }

/* Skeleton loading */
.hsmh-skeleton { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.hsmh-skeleton[hidden] { display: none; }
.hsmh-sk {
	background: linear-gradient(90deg, var(--hsmh-accent-tint) 0%, #fff 40%, var(--hsmh-accent-tint) 80%);
	background-size: 200% 100%;
	border-radius: var(--hsmh-radius);
	animation: hsmh-sk 1.2s linear infinite;
}
.hsmh-sk-1 { height: 72px; }
.hsmh-sk-2 { height: 180px; }
.hsmh-sk-3 { height: 52px; }
@keyframes hsmh-sk {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Results */
.hsmh-results { margin-top: 24px; animation: hsmh-fade .35s ease; }
.hsmh-results[hidden] { display: none; }
@keyframes hsmh-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.hsmh-area-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--hsmh-border);
	padding: 14px 16px;
	border-radius: var(--hsmh-radius);
	margin-bottom: 18px;
}
.hsmh-area-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--hsmh-accent-tint);
	color: var(--hsmh-accent-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.hsmh-area-icon svg { width: 22px; height: 22px; }
.hsmh-area-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.hsmh-area-la {
	font-size: 12px;
	font-weight: 500;
	color: var(--hsmh-muted);
	line-height: 1.3;
}
.hsmh-area-icb {
	font-size: 16px;
	font-weight: 700;
	color: var(--hsmh-ink);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hsmh-area-change {
	background: transparent;
	border: 1px solid var(--hsmh-border);
	color: var(--hsmh-text);
	font-family: var(--hsmh-font);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--hsmh-radius-pill);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
	flex: 0 0 auto;
}
.hsmh-area-change:hover { border-color: var(--hsmh-ink); color: var(--hsmh-ink); background: #fff; }

/* Tabs */
.hsmh-tabs-wrap {
	border: 1px solid var(--hsmh-border);
	border-radius: var(--hsmh-radius);
	overflow: hidden;
	background: #fff;
}
.hsmh-tabs-nav {
	display: flex;
	background: var(--hsmh-accent-tint);
	padding: 6px;
	gap: 4px;
}
.hsmh-tab-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 12px 14px;
	font-family: var(--hsmh-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--hsmh-text);
	border-radius: calc(var(--hsmh-radius) - 6px);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.hsmh-tab-btn:hover { color: var(--hsmh-ink); }
.hsmh-tab-btn.is-active {
	background: #fff;
	color: var(--hsmh-ink);
	box-shadow: 0 2px 8px rgba(15, 37, 36, 0.06);
}
.hsmh-tab-dot {
	width: 8px; height: 8px; border-radius: 50%;
	flex: 0 0 auto;
}
.hsmh-tab-dot-nhs { background: var(--hsmh-accent-dark); }
.hsmh-tab-dot-prv { background: var(--hsmh-ink); }

.hsmh-tab-panel { display: none; padding: 8px 18px 18px; }
.hsmh-tab-panel.is-active { display: block; }

.hsmh-service-list { display: flex; flex-direction: column; }
.hsmh-service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--hsmh-border);
}
.hsmh-service-row:last-child { border-bottom: 0; }
.hsmh-service-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--hsmh-text);
}
.hsmh-service-wait {
	font-size: 18px;
	font-weight: 700;
	color: var(--hsmh-ink);
	letter-spacing: -0.01em;
	text-align: right;
}
.hsmh-service-wait.is-na { color: var(--hsmh-danger); font-size: 14px; font-weight: 600; }
.hsmh-service-wait.is-private { color: var(--hsmh-accent-dark); }

.hsmh-note-line {
	margin: 10px 4px 0;
	font-size: 11.5px;
	color: var(--hsmh-muted);
	line-height: 1.5;
}

.hsmh-info {
	margin-top: 18px;
	padding: 18px 20px;
	background: #FFF7ED;
	border: 1px solid #FED7AA;
	border-radius: var(--hsmh-radius);
	font-size: 13.5px;
	color: #7C2D12;
	line-height: 1.6;
}
.hsmh-info[hidden] { display: none; }
.hsmh-info strong:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #9A3412;
	margin-bottom: 2px;
}
.hsmh-info a { color: var(--hsmh-accent-dark); font-weight: 600; text-decoration: underline; }
.hsmh-info a:hover { color: var(--hsmh-ink); }

.hsmh-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin-top: 22px;
	padding: 14px 0;
	border-top: 1px dashed var(--hsmh-border);
	border-bottom: 1px dashed var(--hsmh-border);
}
.hsmh-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hsmh-text);
}
.hsmh-trust-item svg {
	width: 16px; height: 16px;
	color: var(--hsmh-accent-dark);
	flex: 0 0 auto;
}

.hsmh-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 22px;
}
.hsmh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--hsmh-radius-pill);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	font-family: var(--hsmh-font);
	transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
	border: 0;
	cursor: pointer;
	line-height: 1;
}
.hsmh-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hsmh-btn-primary {
	background: var(--hsmh-ink);
	color: #fff;
}
.hsmh-btn-primary:hover {
	background: #1b3634;
	transform: translateY(-1px);
	box-shadow: var(--hsmh-shadow);
}
.hsmh-btn-ghost {
	background: #fff;
	color: var(--hsmh-ink);
	box-shadow: inset 0 0 0 2px var(--hsmh-border-strong);
}
.hsmh-btn-ghost:hover {
	box-shadow: inset 0 0 0 2px var(--hsmh-accent);
	color: var(--hsmh-ink);
}

.hsmh-foot {
	margin-top: 22px;
	text-align: center;
	font-size: 11.5px;
	color: var(--hsmh-muted);
	line-height: 1.55;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.hsmh-foot-dot { color: var(--hsmh-border-strong); }

/* ---------- Inline page layout ---------- */
.hsmh-inline {
	max-width: 680px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* ---------- Body lock when modal open ---------- */
body.hsmh-modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
	.hsmh-modal { padding: 0; align-items: stretch; }
	.hsmh-modal-panel { max-height: 100vh; border-radius: 0; }
	.hsmh-modal-scroll { padding: 56px 20px 28px; }
	.hsmh-hd h2, .hsmh-hero-heading { font-size: 22px; }
	.hsmh-hero-field { padding: 6px 6px 6px 16px; }
	.hsmh-hero-field .hsmh-pin { width: 18px; height: 18px; }
	.hsmh-hero-input { padding: 14px 10px; font-size: 15px; }
	.hsmh-hero-btn { padding: 12px 16px; font-size: 14px; }
	.hsmh-search-field { padding: 6px 6px 6px 14px; }
	.hsmh-submit { padding: 11px 16px; font-size: 13px; }
	.hsmh-area-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
	.hsmh-area-change { align-self: flex-end; }
	.hsmh-service-wait { font-size: 16px; }
	.hsmh-trust { gap: 12px; }
	.hsmh-btn { flex: 1; min-width: 0; }
	.hsmh-cta { flex-direction: column; }
	.hsmh-cta .hsmh-btn { width: 100%; }
}