/**
 * Midwest Appointment Booking — front-end styles.
 * Mobile first. White / teal / blue medical palette, glass cards, soft shadows.
 */

.mab {
	/* Palette */
	--mab-teal: #dfb1ed;
	--mab-teal-bright: #dfb1ed;
	--mab-blue: #7f6b7e;
	--mab-blue-bright: #3b82f6;
	--mab-ink: #0d1f2b;
	--mab-ink-soft: #55707f;
	--mab-line: #dbe7ee;
	--mab-surface: #ffffff;
	--mab-glass: rgba(255, 255, 255, 0.72);
	--mab-canvas: linear-gradient(160deg, #f2f9fb 0%, #eaf3fb 45%, #f7fbfd 100%);
	--mab-tint: rgba(15, 118, 110, 0.07);
	--mab-danger: #c2410c;
	--mab-success: #0f766e;

	/* Shape & motion */
	--mab-radius: 20px;
	--mab-radius-sm: 12px;
	--mab-shadow: 0 20px 45px -25px rgba(13, 63, 84, 0.45);
	--mab-shadow-soft: 0 8px 24px -14px rgba(13, 63, 84, 0.35);
	--mab-ring: 0 0 0 4px rgba(20, 184, 166, 0.22);
	--mab-ease: cubic-bezier(0.22, 0.75, 0.28, 1);

	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px);
	background: #fff;
	border: 1px solid var(--mab-line);
	border-radius: calc(var(--mab-radius) + 8px);
	box-shadow: var(--mab-shadow);
	color: var(--mab-ink);
	font-family: inherit;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

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

.mab__header {
	text-align: center;
	margin-bottom: 26px;
}

.mab__eyebrow {
	margin: 0 0 8px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mab-teal);
}

.mab__title {
	margin: 0 0 6px;
	font-size: clamp(1.55rem, 4.4vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--mab-ink);
}

.mab__subtitle {
	margin: 0;
	font-size: 0.98rem;
	color: var(--mab-ink-soft);
}

/* ---------- Progress ---------- */

.mab__progress {
	margin-bottom: 26px;
}

.mab__rail {
	display: flex;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.mab__rail-item {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-width: 0;
	opacity: 0.55;
	transition: opacity 0.35s var(--mab-ease);
}

.mab__rail-item.is-current,
.mab__rail-item.is-done {
	opacity: 1;
}

.mab__rail-dot {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--mab-line);
	border-radius: 50%;
	background: var(--mab-surface);
	color: var(--mab-ink-soft);
	font-size: 0.82rem;
	font-weight: 700;
	transition: transform 0.35s var(--mab-ease), background 0.35s var(--mab-ease), color 0.35s var(--mab-ease), border-color 0.35s var(--mab-ease);
}

.mab__rail-item.is-current .mab__rail-dot {
	background: linear-gradient(135deg, var(--mab-teal), var(--mab-blue));
	border-color: transparent;
	color: #fff;
	transform: scale(1.08);
	box-shadow: var(--mab-ring);
}

.mab__rail-item.is-done .mab__rail-dot {
	background: var(--mab-teal);
	border-color: transparent;
	color: #fff;
}

.mab__rail-name {
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mab-ink-soft);
}

.mab__rail-item.is-current .mab__rail-name {
	color: var(--mab-ink);
}

.mab__bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(13, 63, 84, 0.09);
	overflow: hidden;
}

.mab__bar-fill {
	display: block;
	width: 33.33%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mab-teal-bright), var(--mab-blue));
	transition: width 0.55s var(--mab-ease);
}

.mab__sr-status {
	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;
}

/* ---------- Panels ---------- */

.mab__stage {
	position: relative;
}

.mab__panel {
	background: var(--mab-glass);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--mab-radius);
	box-shadow: var(--mab-shadow-soft);
	padding: clamp(20px, 3.5vw, 30px);
	outline: none;
}

.mab__panel[hidden] {
	display: none;
}

.mab__panel.is-active {
	animation: mab-in 0.45s var(--mab-ease) both;
}

.mab__panel.is-active.is-back {
	animation-name: mab-in-back;
}

@keyframes mab-in {
	from {
		opacity: 0;
		transform: translate3d(18px, 6px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mab-in-back {
	from {
		opacity: 0;
		transform: translate3d(-18px, 6px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.mab__panel-title {
	margin: 0 0 6px;
	font-size: clamp(1.2rem, 3.2vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--mab-ink);
}

.mab__panel-sub {
	margin: 0 0 22px;
	font-size: 0.95rem;
	color: var(--mab-ink-soft);
}

/* ---------- Step 1 cards ---------- */

.mab__choices {
	display: grid;
	gap: 14px;
	margin: 20px 0 18px;
}

.mab-choice {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px;
	border: 1px solid var(--mab-line);
	border-radius: var(--mab-radius);
	background: var(--mab-surface);
	box-shadow: var(--mab-shadow-soft);
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: transform 0.3s var(--mab-ease), box-shadow 0.3s var(--mab-ease), border-color 0.3s var(--mab-ease);
}

.mab-choice:hover,
.mab-choice:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(20, 184, 166, 0.5);
	box-shadow: 0 22px 40px -22px rgba(13, 63, 84, 0.5);
	outline: none;
}

.mab-choice:focus-visible {
	box-shadow: var(--mab-ring), var(--mab-shadow-soft);
}

.mab-choice__glyph {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--mab-teal), var(--mab-blue));
	color: #fff;
}

.mab-choice__glyph svg,
.mab-choice__arrow svg,
.mab-btn__icon svg,
.mab-option__tick svg,
.mab-select__chevron svg,
.mab-seal svg {
	width: 22px;
	height: 22px;
	display: block;
}

.mab-choice__body {
	display: block;
	min-width: 0;
}

.mab-choice__title {
	display: block;
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--mab-ink);
}

.mab-choice__desc {
	display: block;
	margin-top: 4px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--mab-ink-soft);
}

.mab-choice__arrow {
	flex: none;
	margin-left: auto;
	color: var(--mab-teal);
	transition: transform 0.3s var(--mab-ease);
}

.mab-choice:hover .mab-choice__arrow {
	transform: translateX(4px);
}

.mab__helper {
	margin: 0;
	text-align: center;
	font-size: 0.92rem;
	color: var(--mab-ink-soft);
}

.mab__phone-link {
	color: var(--mab-teal);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(15, 118, 110, 0.35);
}

.mab__phone-link:hover,
.mab__phone-link:focus-visible {
	color: var(--mab-blue);
	border-bottom-color: currentColor;
}

/* ---------- Forms ---------- */

.mab-form {
	margin: 0;
}

.mab-grid {
	display: grid;
	gap: 16px;
}

.mab-field {
	min-width: 0;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

.mab-field--full {
	grid-column: 1 / -1;
}

fieldset.mab-field {
	margin-bottom: 22px;
}

.mab-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--mab-ink);
}

.mab-input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--mab-line);
	border-radius: var(--mab-radius-sm);
	background: var(--mab-surface);
	color: var(--mab-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.25s var(--mab-ease), box-shadow 0.25s var(--mab-ease);
	appearance: none;
	-webkit-appearance: none;
}

.mab-input::placeholder {
	color: #9db2be;
}

.mab-input:focus {
	border-color: var(--mab-teal-bright);
	box-shadow: var(--mab-ring);
	outline: none;
}

.mab-textarea {
	min-height: 110px;
	resize: vertical;
}

.mab-select {
	position: relative;
}

.mab-select select {
	padding-right: 44px;
	cursor: pointer;
}

.mab-select__chevron {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--mab-ink-soft);
}

.mab-field.is-invalid .mab-input {
	border-color: var(--mab-danger);
	box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.12);
}

.mab-error {
	display: none;
	margin: 7px 0 0;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--mab-danger);
}

.mab-field.is-invalid .mab-error,
.mab-error.is-visible {
	display: block;
	animation: mab-nudge 0.3s var(--mab-ease);
}

.mab-error--block {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--mab-radius-sm);
	background: rgba(194, 65, 12, 0.08);
}

@keyframes mab-nudge {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Reason options ---------- */

.mab-options {
	display: grid;
	gap: 10px;
}

.mab-options__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mab-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--mab-line);
	border-radius: var(--mab-radius-sm);
	background: var(--mab-surface);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mab-ink);
	transition: transform 0.22s var(--mab-ease), border-color 0.22s var(--mab-ease), background 0.22s var(--mab-ease), box-shadow 0.22s var(--mab-ease);
}

.mab-option:hover {
	transform: translateY(-2px);
	border-color: rgba(20, 184, 166, 0.45);
	box-shadow: var(--mab-shadow-soft);
}

.mab-option__tick {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--mab-line);
	border-radius: 8px;
	background: #f4f9fb;
	color: transparent;
	transition: background 0.22s var(--mab-ease), color 0.22s var(--mab-ease), border-color 0.22s var(--mab-ease);
}

.mab-option__tick svg {
	width: 15px;
	height: 15px;
}

.mab-options__input:checked + .mab-option {
	border-color: var(--mab-teal);
	background: var(--mab-tint);
	box-shadow: var(--mab-shadow-soft);
}

.mab-options__input:checked + .mab-option .mab-option__tick {
	background: linear-gradient(135deg, var(--mab-teal), var(--mab-blue));
	border-color: transparent;
	color: #fff;
}

.mab-options__input:focus-visible + .mab-option {
	box-shadow: var(--mab-ring);
	outline: none;
}

/* ---------- Summary ---------- */

.mab-summary {
	margin: 0 0 18px;
	border: 1px solid var(--mab-line);
	border-radius: var(--mab-radius-sm);
	background: var(--mab-surface);
	overflow: hidden;
}

.mab-summary__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--mab-line);
}

.mab-summary__row:last-child {
	border-bottom: 0;
}

.mab-summary__row[hidden] {
	display: none;
}

.mab-summary dt {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mab-ink-soft);
}

.mab-summary dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mab-ink);
	overflow-wrap: anywhere;
}

.mab-note {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-left: 3px solid var(--mab-teal);
	border-radius: 0 var(--mab-radius-sm) var(--mab-radius-sm) 0;
	background: var(--mab-tint);
	font-size: 0.9rem;
	color: var(--mab-ink);
}

/* ---------- Buttons ---------- */

.mab-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.mab-actions--center {
	justify-content: center;
}

.mab-btn {
	position: relative;
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--mab-ease), box-shadow 0.25s var(--mab-ease), opacity 0.25s var(--mab-ease), background 0.25s var(--mab-ease);
}

.mab-btn--primary {
	background: linear-gradient(120deg, var(--mab-teal), var(--mab-blue));
	background-size: 160% 160%;
	color: #fff;
	box-shadow: 0 16px 30px -16px rgba(29, 78, 216, 0.7);
}

.mab-btn--primary:hover:not(:disabled),
.mab-btn--primary:focus-visible:not(:disabled) {
	transform: translateY(-2px);
	background-position: 100% 50%;
	box-shadow: 0 22px 36px -16px rgba(29, 78, 216, 0.75);
}

.mab-btn--ghost {
	flex: 0 1 auto;
	background: var(--mab-surface);
	border-color: var(--mab-line);
	color: var(--mab-ink);
}

.mab-btn--ghost:hover,
.mab-btn--ghost:focus-visible {
	transform: translateY(-2px);
	border-color: var(--mab-teal);
	color: var(--mab-teal);
}

.mab-btn:focus-visible {
	outline: none;
	box-shadow: var(--mab-ring);
}

.mab-btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
	transform: none;
	box-shadow: none;
}

.mab-btn__icon {
	display: inline-grid;
	place-items: center;
}

/* Loading state */

.mab-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
}

.mab-btn.is-loading {
	cursor: progress;
	pointer-events: none;
}

.mab-btn.is-loading .mab-spinner {
	display: block;
	animation: mab-spin 0.7s linear infinite;
}

@keyframes mab-spin {
	to {
		transform: rotate(360deg);
	}
}

.mab-restart {
	display: block;
	margin: 20px auto 0;
	padding: 6px 4px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mab-ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mab-restart:hover,
.mab-restart:focus-visible {
	color: var(--mab-teal);
}

/* ---------- Success ---------- */

.mab__panel--success {
	text-align: center;
}

.mab-seal {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin: 4px auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mab-teal), var(--mab-blue));
	color: #fff;
	box-shadow: 0 0 0 10px rgba(20, 184, 166, 0.12);
	animation: mab-pop 0.55s var(--mab-ease) both;
}

.mab-seal svg {
	width: 30px;
	height: 30px;
}

@keyframes mab-pop {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	60% {
		transform: scale(1.06);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------- Misc ---------- */

.mab-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mab__footnote {
	margin: 22px 0 0;
	text-align: center;
	font-size: 0.86rem;
	color: var(--mab-ink-soft);
}

/* ---------- Larger screens ---------- */

@media (min-width: 640px) {
	.mab-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.mab-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mab__choices {
		gap: 16px;
	}

	.mab-summary__row {
		grid-template-columns: 200px 1fr;
		gap: 16px;
		align-items: baseline;
	}
}

/* ---------- Dark mode ---------- */

@media (prefers-color-scheme: dark) {
	.mab {
		--mab-ink: #eaf4f8;
		--mab-ink-soft: #9db6c4;
		--mab-line: rgba(148, 190, 210, 0.22);
		--mab-surface: #10222d;
		--mab-glass: rgba(16, 34, 45, 0.72);
		--mab-canvas: linear-gradient(160deg, #0a1720 0%, #0d2231 55%, #0a1a24 100%);
		--mab-tint: rgba(20, 184, 166, 0.14);
		--mab-teal: #2dd4bf;
		--mab-blue: #60a5fa;
		--mab-danger: #fca5a5;
		--mab-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.8);
		--mab-shadow-soft: 0 10px 26px -16px rgba(0, 0, 0, 0.7);
		color: var(--mab-ink);
	}

	.mab__panel {
		border-color: rgba(148, 190, 210, 0.16);
	}

	.mab-option__tick {
		background: rgba(148, 190, 210, 0.1);
	}

	.mab-input::placeholder {
		color: #6f8b9b;
	}

	.mab-btn--primary,
	.mab-choice__glyph,
	.mab-seal,
	.mab-options__input:checked + .mab-option .mab-option__tick,
	.mab__rail-item.is-current .mab__rail-dot {
		color: #04141c;
	}
}

/* Explicit dark mode for themes that toggle a class or attribute. */
[data-theme="dark"] .mab,
.dark-mode .mab {
	--mab-ink: #eaf4f8;
	--mab-ink-soft: #9db6c4;
	--mab-line: rgba(148, 190, 210, 0.22);
	--mab-surface: #10222d;
	--mab-glass: rgba(16, 34, 45, 0.72);
	--mab-canvas: linear-gradient(160deg, #0a1720 0%, #0d2231 55%, #0a1a24 100%);
	--mab-tint: rgba(20, 184, 166, 0.14);
	color: #eaf4f8;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mab *,
	.mab *::before,
	.mab *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.mab-btn.is-loading .mab-spinner {
		animation: mab-spin 1.2s linear infinite !important;
	}
}