/* ==========================================================================
   Amitry Booking -- wizard frontend
   Light, modern, calm. Mobile-first. CSS transitions only.
   ========================================================================== */

/* ---------- Self-hosted Geist (SIL OFL 1.1) ---------- */
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Geist-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Geist-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/Geist-Bold.woff2") format("woff2");
}

:root {
	--amitry-booking-bg:           #FAFAF7;
	--amitry-booking-surface:      #FFFFFF;
	--amitry-booking-surface-2:    #F4F4EF;
	--amitry-booking-ink:          #0E0E10;
	--amitry-booking-ink-2:        #45464B;
	--amitry-booking-ink-3:        #8A8C91;
	--amitry-booking-line:         #E8E8E2;
	--amitry-booking-accent:       #4F46E5;
	--amitry-booking-accent-hover: #4338CA;
	--amitry-booking-accent-soft:  #EEF2FF;
	--amitry-booking-success:      #16A34A;
	--amitry-booking-danger:       #B42318;

	--amitry-booking-radius-s:     8px;
	--amitry-booking-radius-m:     14px;
	--amitry-booking-radius-l:     20px;

	--amitry-booking-shadow-card:  0 1px 0 rgba(14,14,16,0.04), 0 12px 30px -16px rgba(14,14,16,0.12);
	--amitry-booking-shadow-pop:   0 8px 30px -8px rgba(79,70,229,0.35);

	--amitry-booking-ease:         cubic-bezier(0.22, 1, 0.36, 1);
	--amitry-booking-dur-fast:     180ms;
	--amitry-booking-dur-med:      320ms;
	--amitry-booking-dur:          340ms;
	--amitry-booking-dur-slow:     520ms;

	--amitry-booking-font:         'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--amitry-booking-tracking-h:   -0.025em;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--amitry-booking-bg);
	color: var(--amitry-booking-ink);
	font-family: var(--amitry-booking-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.amitry-booking-body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ---------- Stage ---------- */

.amitry-booking-stage {
	flex: 1;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 20px 20px 48px;
	position: relative;
}

@media (min-width: 720px) {
	.amitry-booking-stage {
		padding: 28px 32px 64px;
	}
}

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

.amitry-booking-progress {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--amitry-booking-line);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 16px;
	opacity: 0;
	transition: opacity var(--amitry-booking-dur) var(--amitry-booking-ease);
	z-index: 6;
}

.amitry-booking-progress.is-visible { opacity: 1; }

.amitry-booking-progress__bar {
	height: 100%;
	width: 0%;
	background: var(--amitry-booking-accent);
	transition: width var(--amitry-booking-dur-slow) var(--amitry-booking-ease);
	border-radius: 999px;
}

/* ---------- Back button ---------- */

/* The display rule below would otherwise override the browser default for the
   hidden attribute, leaving a dead back button on the first and last step. */
.amitry-booking-back[hidden] { display: none; }

.amitry-booking-back {
	position: absolute;
	top: 40px;          /* clears the progress bar above and the card below */
	left: 16px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	color: var(--amitry-booking-ink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            color var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            transform var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
	z-index: 5;
}

@media (min-width: 720px) {
	.amitry-booking-back { top: 40px; left: 32px; }
}

.amitry-booking-back:hover { color: var(--amitry-booking-ink); background: var(--amitry-booking-surface-2); }
.amitry-booking-back:active { transform: scale(0.94); }

/* ---------- Frames & transitions ---------- */

.amitry-booking-frame {
	position: absolute;
	left: 0;
	right: 0;
	top: 32px;
	padding: 50px 20px 48px;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity var(--amitry-booking-dur) var(--amitry-booking-ease),
	            transform var(--amitry-booking-dur) var(--amitry-booking-ease);
}

@media (min-width: 720px) {
	.amitry-booking-frame { padding: 40px 32px 80px; top: 56px; }
}

.amitry-booking-frame.is-active {
	position: relative;
	top: 0;            /* the base rule sets top:56px for the absolute stacked
	                      frames; as a relative element that would offset the
	                      active frame downward, creating a large gap. Reset it. */
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.amitry-booking-frame.is-leaving {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

.amitry-booking-frame__inner {
	max-width: 100%;
}

/* ---------- Intro frame ---------- */

.amitry-booking-intro {
	padding-top: 40px;
}

.amitry-booking-intro__eyebrow {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--amitry-booking-ink-3);
	margin: 0 0 16px;
}

.amitry-booking-intro__title {
	font-size: clamp(34px, 7vw, 52px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: var(--amitry-booking-tracking-h);
	margin: 0 0 20px;
	color: var(--amitry-booking-ink);
}

.amitry-booking-intro__name {
	color: var(--amitry-booking-accent);
	font-weight: 600;
}

.amitry-booking-intro__note,
.amitry-booking-intro__lead {
	font-size: 17px;
	color: var(--amitry-booking-ink-2);
	margin: 0 0 32px;
	max-width: 32ch;
}

.amitry-booking-intro__note {
	padding: 16px 18px;
	background: var(--amitry-booking-accent-soft);
	border-left: 3px solid var(--amitry-booking-accent);
	border-radius: 0 var(--amitry-booking-radius-s) var(--amitry-booking-radius-s) 0;
	color: var(--amitry-booking-ink);
	font-style: italic;
}

.amitry-booking-intro__cta {
	margin-top: 4px;
}

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

.amitry-booking-btn {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.005em;
	padding: 14px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            color var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            transform var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            box-shadow var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-btn:active { transform: scale(0.98); }

.amitry-booking-btn--primary {
	background: var(--amitry-booking-ink);
	color: #fff;
	box-shadow: 0 1px 0 rgba(14,14,16,0.04), 0 6px 18px -10px rgba(14,14,16,0.5);
}

.amitry-booking-btn--primary:hover {
	background: var(--amitry-booking-accent);
	box-shadow: var(--amitry-booking-shadow-pop);
}

.amitry-booking-btn--block {
	width: 100%;
	justify-content: center;
}

.amitry-booking-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Step head ---------- */

.amitry-booking-step-head {
	margin-bottom: 24px;
}

.amitry-booking-step-head__counter {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
	color: var(--amitry-booking-ink-3);
	margin: 0 0 12px;
}

.amitry-booking-step-head__title {
	font-size: clamp(26px, 5.5vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--amitry-booking-tracking-h);
	margin: 0 0 6px;
}

.amitry-booking-step-head__hint {
	font-size: 15px;
	color: var(--amitry-booking-ink-2);
	margin: 0;
}

.amitry-booking-step-head__preview {
	margin-top: 12px;
	font-size: 12px;
	color: var(--amitry-booking-ink-3);
	padding: 8px 12px;
	background: var(--amitry-booking-surface-2);
	border-radius: var(--amitry-booking-radius-s);
	display: inline-block;
}

/* ---------- Cards ---------- */

.amitry-booking-cards {
	display: grid;
	gap: 12px;
}

.amitry-booking-cards--cat {
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.amitry-booking-cards--cat { grid-template-columns: 1fr 1fr; }
}

.amitry-booking-cards--svc {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

@media (min-width: 600px) {
	.amitry-booking-cards--svc { gap: 12px; }
}

.amitry-booking-card {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	text-align: left;
	background: var(--amitry-booking-surface);
	border: 1px solid var(--amitry-booking-line);
	border-radius: var(--amitry-booking-radius-m);
	padding: 18px 18px;
	cursor: pointer;
	color: var(--amitry-booking-ink);
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	transition: border-color var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            box-shadow var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            transform var(--amitry-booking-dur-fast) var(--amitry-booking-ease),
	            background var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
	opacity: 0;
	transform: translateY(8px);
	animation: amitryBookingCardIn var(--amitry-booking-dur) var(--amitry-booking-ease) forwards;
}

.amitry-booking-card:hover {
	border-color: var(--amitry-booking-ink);
	box-shadow: var(--amitry-booking-shadow-card);
}

.amitry-booking-card:active { transform: scale(0.99); }

.amitry-booking-card--svc {
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.amitry-booking-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--amitry-booking-surface-2);
	background-size: cover;
	background-position: center;
}

.amitry-booking-card__media--placeholder {
	background-image: linear-gradient(135deg, #EEF2FF 0%, #F4F4EF 100%);
}

.amitry-booking-card__body {
	display: block;
	padding: 12px 12px 14px;
}

@media (min-width: 600px) {
	.amitry-booking-card__body { padding: 16px 18px 18px; }
}

.amitry-booking-card__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
	margin: 0 0 4px;
	color: var(--amitry-booking-ink);
}

@media (min-width: 600px) {
	.amitry-booking-card__title { font-size: 17px; line-height: 1.25; }
}

.amitry-booking-card__short {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: 12px;
	color: var(--amitry-booking-ink-2);
	margin: 0 0 8px;
	line-height: 1.4;
}

@media (min-width: 600px) {
	.amitry-booking-card__short { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
}

.amitry-booking-card__meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.amitry-booking-card__tag {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--amitry-booking-surface-2);
	color: var(--amitry-booking-ink-2);
	letter-spacing: 0.01em;
}

.amitry-booking-card__tag--accent {
	background: var(--amitry-booking-accent-soft);
	color: var(--amitry-booking-accent);
}

.amitry-booking-card__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--amitry-booking-ink-3);
	font-weight: 500;
}

.amitry-booking-card__chevron {
	margin-left: auto;
	color: var(--amitry-booking-ink-3);
	flex-shrink: 0;
	transition: transform var(--amitry-booking-dur-fast) var(--amitry-booking-ease), color var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-card:hover .amitry-booking-card__chevron {
	transform: translateX(3px);
	color: var(--amitry-booking-accent);
}

@keyframes amitryBookingCardIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Calendar (fake slots) ---------- */

.amitry-booking-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin: 8px 0 20px;
}

.amitry-booking-cal__head {
	grid-column: span 7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.amitry-booking-cal__month {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.amitry-booking-cal__nav {
	display: flex;
	gap: 6px;
}

.amitry-booking-cal__nav button {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	color: var(--amitry-booking-ink-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--amitry-booking-dur-fast) var(--amitry-booking-ease), color var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-cal__nav button:hover { background: var(--amitry-booking-surface-2); color: var(--amitry-booking-ink); }
.amitry-booking-cal__nav button[disabled] { opacity: 0.35; cursor: not-allowed; }

.amitry-booking-cal__weekday {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--amitry-booking-ink-3);
	text-align: center;
	padding: 4px 0;
}

.amitry-booking-cal__day {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	border: 1px solid transparent;
	background: transparent;
	border-radius: var(--amitry-booking-radius-s);
	padding: 8px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--amitry-booking-ink);
	cursor: pointer;
	min-height: 40px;
	transition: background var(--amitry-booking-dur-fast) var(--amitry-booking-ease), color var(--amitry-booking-dur-fast) var(--amitry-booking-ease), border-color var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-cal__day:hover:not([disabled]) { background: var(--amitry-booking-surface-2); }

.amitry-booking-cal__day[disabled] { color: var(--amitry-booking-ink-3); cursor: not-allowed; opacity: 0.45; }

.amitry-booking-cal__day.is-today { border-color: var(--amitry-booking-line); }

.amitry-booking-cal__day.is-selected {
	background: var(--amitry-booking-ink);
	color: #fff;
	border-color: var(--amitry-booking-ink);
}

.amitry-booking-cal__day.is-empty { visibility: hidden; }

.amitry-booking-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin-top: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--amitry-booking-dur) var(--amitry-booking-ease), transform var(--amitry-booking-dur) var(--amitry-booking-ease);
}

.amitry-booking-slots:not([hidden]) { opacity: 1; transform: none; }

.amitry-booking-slot {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 11px 8px;
	border-radius: var(--amitry-booking-radius-s);
	border: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	color: var(--amitry-booking-ink);
	cursor: pointer;
	transition: border-color var(--amitry-booking-dur-fast) var(--amitry-booking-ease), background var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-slot:hover { border-color: var(--amitry-booking-ink); }
.amitry-booking-slot.is-selected { background: var(--amitry-booking-ink); color: #fff; border-color: var(--amitry-booking-ink); }

/* ---------- Form ---------- */

.amitry-booking-summary {
	background: var(--amitry-booking-accent-soft);
	border-radius: var(--amitry-booking-radius-m);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--amitry-booking-ink);
}

.amitry-booking-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.amitry-booking-summary__row span:first-child { color: var(--amitry-booking-ink-3); }
.amitry-booking-summary__row span:last-child  { font-weight: 500; text-align: right; }

.amitry-booking-form { display: flex; flex-direction: column; gap: 14px; }

.amitry-booking-field { display: flex; flex-direction: column; gap: 6px; }

.amitry-booking-field__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--amitry-booking-ink-2);
	letter-spacing: 0.005em;
}

.amitry-booking-field input:not([type="checkbox"]):not([type="radio"]),
.amitry-booking-field textarea {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 15px;
	padding: 12px 14px;
	border-radius: var(--amitry-booking-radius-s);
	border: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	color: var(--amitry-booking-ink);
	transition: border-color var(--amitry-booking-dur-fast) var(--amitry-booking-ease), box-shadow var(--amitry-booking-dur-fast) var(--amitry-booking-ease);
}

.amitry-booking-field input:not([type="checkbox"]):not([type="radio"]):focus,
.amitry-booking-field textarea:focus {
	outline: none;
	border-color: var(--amitry-booking-ink);
	box-shadow: 0 0 0 3px rgba(14,14,16,0.06);
}

.amitry-booking-field--consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	color: var(--amitry-booking-ink-2);
	margin-top: 4px;
	cursor: pointer;
	line-height: 1.5;
}

/* Custom but real checkbox: keeps native click/focus, replaces look. */
.amitry-booking-field--consent input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	padding: 0;
	border: 1.5px solid var(--amitry-booking-ink-3);
	border-radius: 5px;
	background: var(--amitry-booking-surface);
	cursor: pointer;
	position: relative;
	transition: border-color 120ms ease, background 120ms ease;
}

.amitry-booking-field--consent input[type="checkbox"]:hover {
	border-color: var(--amitry-booking-ink);
}

.amitry-booking-field--consent input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--amitry-booking-ink);
	box-shadow: 0 0 0 3px rgba(14,14,16,0.12);
}

.amitry-booking-field--consent input[type="checkbox"]:checked {
	background: var(--amitry-booking-ink);
	border-color: var(--amitry-booking-ink);
}

/* Checkmark drawn as a single rotated rectangle for crisp rendering. */
.amitry-booking-field--consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.amitry-booking-form__error {
	color: var(--amitry-booking-danger);
	font-size: 13px;
	margin: 0;
	padding: 8px 12px;
	background: #fef2f2;
	border-radius: var(--amitry-booking-radius-s);
}

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

.amitry-booking-success {
	text-align: center;
	padding: 48px 0 24px;
}

.amitry-booking-success__icon {
	color: var(--amitry-booking-success);
	margin-bottom: 16px;
	animation: amitryBookingPopIn var(--amitry-booking-dur-slow) var(--amitry-booking-ease) both;
}

@keyframes amitryBookingPopIn {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: none; }
}

.amitry-booking-success__title {
	font-size: clamp(28px, 5.5vw, 40px);
	font-weight: 600;
	letter-spacing: var(--amitry-booking-tracking-h);
	margin: 0 0 8px;
}

.amitry-booking-success__body {
	font-size: 16px;
	color: var(--amitry-booking-ink-2);
	max-width: 36ch;
	margin: 0 auto 24px;
}

.amitry-booking-success__summary {
	max-width: 360px;
	margin: 0 auto;
	background: var(--amitry-booking-surface);
	border: 1px solid var(--amitry-booking-line);
	border-radius: var(--amitry-booking-radius-m);
	padding: 16px 20px;
	text-align: left;
	font-size: 14px;
}

.amitry-booking-success__summary .amitry-booking-summary__row { padding: 4px 0; }

/* ---------- Empty state ---------- */

.amitry-booking-empty {
	text-align: center;
	padding: 80px 0;
	color: var(--amitry-booking-ink-3);
	font-size: 15px;
}

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

@media (prefers-reduced-motion: reduce) {
	.amitry-booking-frame,
	.amitry-booking-card,
	.amitry-booking-slots,
	.amitry-booking-slot,
	.amitry-booking-slotcol,
	.amitry-booking-frame__inner--slot,
	.amitry-booking-progress__bar,
	.amitry-booking-success__icon {
		transition: none !important;
		animation: none !important;
	}
}

/* --- Calendar: unavailable + loading states (phase 6a) --- */

.amitry-booking-cal__day.is-unavailable {
	color: var(--amitry-booking-ink-3);
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-color: rgba(14,14,16,0.25);
	text-decoration-thickness: 1px;
}

.amitry-booking-cal__day.is-loading {
	color: var(--amitry-booking-ink-3);
	position: relative;
}

.amitry-booking-cal__day.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--amitry-booking-ink-3);
	opacity: 0.5;
	animation: amitryBookingPulse 1.2s ease-in-out infinite;
}

@keyframes amitryBookingPulse {
	0%, 100% { opacity: 0.2; transform: translateX(-50%) scale(0.8); }
	50%      { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
}

/* --- Slots area: loading / empty / error --- */

.amitry-booking-slots__loading,
.amitry-booking-slots__empty,
.amitry-booking-slots__error {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 16px;
	font-size: 13px;
	border-radius: var(--amitry-booking-radius-s);
	text-align: center;
}

.amitry-booking-slots__loading {
	color: var(--amitry-booking-ink-3);
	background: var(--amitry-booking-surface-2);
}

.amitry-booking-slots__loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border: 2px solid var(--amitry-booking-ink-3);
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: -2px;
	animation: amitryBookingSpin 0.7s linear infinite;
}

@keyframes amitryBookingSpin {
	to { transform: rotate(360deg); }
}

.amitry-booking-slots__empty {
	color: var(--amitry-booking-ink-2);
	background: var(--amitry-booking-surface-2);
	font-style: italic;
}

.amitry-booking-slots__error {
	color: var(--amitry-booking-danger);
	background: #fef2f2;
	border: 1px solid #fecaca;
}

/* --- Calendar heatmap: day cells as fill containers --------------------
 * Each day cell is a small "vessel" whose fill height shows how booked
 * that day already is. 4 load stages map to 4 fill colours.
 *
 * Bookable days always show at least a thin coloured base (min-height) so
 * the calendar looks alive from day one, even before the first booking.
 */

.amitry-booking-cal__day {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.amitry-booking-cal__day-num {
	position: relative;
	z-index: 2;
}

.amitry-booking-cal__day-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	z-index: 1;
	border-radius: 0 0 var(--amitry-booking-radius-s) var(--amitry-booking-radius-s);
	background: var(--amitry-booking-fill-color, transparent);
	transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1),
	            background-color 200ms ease;
	pointer-events: none;
}

/* Once revealed, grow to at least min-fill, or higher if load demands it.
 * The CSS max() picks whichever of the two values is larger, giving us a
 * visible base for empty days and growing it as bookings accumulate. */
.amitry-booking-cal__day.is-revealed .amitry-booking-cal__day-fill {
	height: max(28%, var(--amitry-booking-fill, 0%));
}

/* Per-stage fill colors. Soft enough not to overwhelm light cells, strong
 * enough to read at a glance. */
.amitry-booking-cal__day.is-load-green  { --amitry-booking-fill-color: rgba(22,163,74,0.22); }   /* 0-25% booked */
.amitry-booking-cal__day.is-load-yellow { --amitry-booking-fill-color: rgba(234,179,8,0.34); }   /* 26-50% */
.amitry-booking-cal__day.is-load-orange { --amitry-booking-fill-color: rgba(234,88,12,0.38); }   /* 51-75% */
.amitry-booking-cal__day.is-load-red    { --amitry-booking-fill-color: rgba(220,38,38,0.42); }   /* 76-99% */

/* Subtle hover lift on filled days (clickable ones). */
.amitry-booking-cal__day.is-load-green:hover:not([disabled]),
.amitry-booking-cal__day.is-load-yellow:hover:not([disabled]),
.amitry-booking-cal__day.is-load-orange:hover:not([disabled]),
.amitry-booking-cal__day.is-load-red:hover:not([disabled]) {
	background: transparent;
}

.amitry-booking-cal__day.is-load-green:hover:not([disabled])  .amitry-booking-cal__day-fill { background: rgba(22,163,74,0.34); }
.amitry-booking-cal__day.is-load-yellow:hover:not([disabled]) .amitry-booking-cal__day-fill { background: rgba(234,179,8,0.46); }
.amitry-booking-cal__day.is-load-orange:hover:not([disabled]) .amitry-booking-cal__day-fill { background: rgba(234,88,12,0.50); }
.amitry-booking-cal__day.is-load-red:hover:not([disabled])    .amitry-booking-cal__day-fill { background: rgba(220,38,38,0.54); }

/* When selected, the dark background wins; hide the fill layer. */
.amitry-booking-cal__day.is-selected .amitry-booking-cal__day-fill { opacity: 0; }

/* Loading state: pulsing dot from phase 6a still applies; fill stays at 0. */

/* Reduced motion: snap to final fill height. */
@media (prefers-reduced-motion: reduce) {
	.amitry-booking-cal__day-fill { transition: none !important; }
}

/* ============================================================
   Success summary: location block
   ============================================================ */

.amitry-booking-summary__location {
	margin-top: 18px;
	padding: 16px 18px;
	background: var(--amitry-booking-accent-soft, #EEF2FF);
	border-radius: 12px;
	text-align: left;
}

.amitry-booking-summary__location-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--amitry-booking-accent, #4F46E5);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

.amitry-booking-summary__location-detail {
	font-size: 15px;
	color: var(--amitry-booking-ink, #0E0E10);
	line-height: 1.55;
	white-space: pre-line;
}

/* Required-marker for the phone field when service demands it */
.amitry-booking-field__req {
	color: var(--amitry-booking-accent, #4F46E5);
	font-weight: 600;
	margin-left: 2px;
}

.amitry-booking-field.is-required input {
	border-color: var(--amitry-booking-line, #E8E8E2);
}

.amitry-booking-field.is-required input:invalid {
	/* don't visually scream while typing - native :invalid is too aggressive */
	box-shadow: none;
}

/* ============================================================
   Split layout (Calendly-style) for slot + contact steps
   ============================================================ */

/* When a split frame is active, let the stage grow wider. */
/* Contact and other split frames: moderate width. */
.amitry-booking-stage:has(.amitry-booking-frame.is-active .amitry-booking-frame__inner--split),
body.amitry-booking-has-split .amitry-booking-stage {
	max-width: 880px;
}

/* Slot frame needs room for three columns. The card is 914px wide; with the
   frame's 32px horizontal padding and the stage's 32px padding on each side,
   the stage needs 914 + 64 + 64 = 1042px. 1060 gives a small buffer so the
   card never hits its containing block (which would clip the slot column). */
.amitry-booking-stage:has(.amitry-booking-frame.is-active .amitry-booking-frame__inner--slot),
body.amitry-booking-has-slot-frame .amitry-booking-stage {
	max-width: 1060px;
}

.amitry-booking-frame__inner--split {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0;
	align-items: stretch;
	background: var(--amitry-booking-surface);
	border: 1px solid var(--amitry-booking-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(14, 14, 16, 0.05);
}

/* Slot frame: the card grows to the right when the slot column appears.
   The columns are ALWAYS a fixed 300/392/220 (= 912px of content). With
   box-sizing:border-box the 1px border on each side is included in width,
   so the card width is 912 + 2 = 914 to give the columns their exact content
   box (otherwise the border eats 2px and the slot column overflows and gets
   clipped). The narrow state is 692 + 2 = 694. The whole card animates its
   width; the slot column sits past the narrow edge until the card widens. */
/* Slot frame: the card grows to the right when the slot column appears.
   The columns are ALWAYS a fixed 300/392/220 (= 912px of content). With
   box-sizing:border-box the 1px border on each side is included, so the card
   width is 912 + 2 = 914 (narrow state 692 + 2 = 694). The whole card animates
   its width; the slot column sits past the narrow edge until the card widens.
   NOTE: no max-width here. The frame's own horizontal padding shrinks the
   containing block below 914px, so max-width:100% would clamp the card back
   down (to ~872px) and clip the slot column. On mobile the media query below
   resets width to auto, so overflow is handled there instead. */
.amitry-booking-frame__inner--slot {
	grid-template-columns: 300px 392px 220px;
	width: 694px;
	margin: 0 auto;
	transition: width var(--amitry-booking-dur-med, 320ms) var(--amitry-booking-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.amitry-booking-frame__inner--slot.has-slots {
	width: 914px;
}

/* The slot column on the far right of the card. Its width comes from the grid
   track (220px); while the card is at its narrow width the column sits past
   the card's right edge and is clipped by overflow:hidden. When the card
   widens, the column comes into view and its contents fade in. */
.amitry-booking-slotcol {
	border-left: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	overflow: hidden;
	padding: 32px 22px;
	opacity: 0;
	transition: opacity var(--amitry-booking-dur-med, 320ms) var(--amitry-booking-ease, ease);
}

/* While collapsed, hide the column's left border so no stray line shows. */
.amitry-booking-frame__inner--slot:not(.has-slots) .amitry-booking-slotcol {
	border-left-color: transparent;
}

/* Revealed state: fade contents in */
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slotcol {
	opacity: 1;
}

.amitry-booking-slotcol__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--amitry-booking-ink-2);
	margin: 0;
	white-space: nowrap;
}

.amitry-booking-slotcol__label:empty { display: none; }

/* Left info column */
.amitry-booking-sidecard {
	padding: 32px 28px;
	border-right: 1px solid var(--amitry-booking-line);
	background: var(--amitry-booking-surface);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.amitry-booking-sidecard__host {
	display: flex;
	align-items: center;
	gap: 12px;
}

.amitry-booking-sidecard__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--amitry-booking-surface-2);
}

.amitry-booking-sidecard__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.amitry-booking-sidecard__host-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--amitry-booking-ink-2);
	line-height: 1.3;
}

.amitry-booking-sidecard__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--amitry-booking-ink);
	line-height: 1.25;
	margin: 0;
	letter-spacing: -0.01em;
}

.amitry-booking-sidecard__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.amitry-booking-sidecard__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--amitry-booking-ink-2);
}

.amitry-booking-sidecard__meta-item svg {
	color: var(--amitry-booking-ink-3);
	flex-shrink: 0;
}

.amitry-booking-sidecard__slot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--amitry-booking-accent);
	background: var(--amitry-booking-accent-soft);
	padding: 10px 12px;
	border-radius: 10px;
}

.amitry-booking-sidecard__slot svg { flex-shrink: 0; }

/* Reschedule: the previous appointment, shown struck through above the new
   slot so the change reads clearly before submitting. */
.amitry-booking-sidecard__reschedule {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
}

.amitry-booking-sidecard__reschedule-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--amitry-booking-ink-3);
}

.amitry-booking-sidecard__reschedule-old {
	font-size: 13px;
	color: var(--amitry-booking-ink-3);
	text-decoration: line-through;
	text-decoration-color: var(--amitry-booking-ink-3);
}

.amitry-booking-sidecard__image {
	border-radius: 12px;
	overflow: hidden;
	background: var(--amitry-booking-surface-2);
}

.amitry-booking-sidecard__image img {
	width: 100%;
	height: auto;
	display: block;
}

.amitry-booking-sidecard__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--amitry-booking-ink-2);
	margin: 0;
}

.amitry-booking-sidecard__location {
	margin-top: 4px;
	padding: 14px 16px;
	background: var(--amitry-booking-surface-2);
	border-radius: 12px;
}

.amitry-booking-sidecard__location-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--amitry-booking-ink);
	margin-bottom: 4px;
}

.amitry-booking-sidecard__location-detail {
	font-size: 13px;
	line-height: 1.55;
	color: var(--amitry-booking-ink-2);
}

/* Right interaction column */
.amitry-booking-booking {
	padding: 32px 28px;
	min-width: 0;
}

.amitry-booking-step-head--compact {
	margin-bottom: 20px;
	text-align: left;
}

/* In the compact (split-layout) header, the calendar column is a fixed width,
   so the title uses a fixed size instead of a viewport-based clamp. This keeps
   it from growing on wide screens and stretching the column. overflow-wrap
   lets a long word wrap rather than push the column wider. */
.amitry-booking-step-head--compact .amitry-booking-step-head__title {
	font-size: 30px;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* The whole compact header must not exceed the calendar column width. */
.amitry-booking-step-head--compact {
	min-width: 0;
	max-width: 100%;
}

/* Calendar fills its column (392px booking column minus padding) and lays
   out a clean 7-column grid that never overflows into the slot column. */
.amitry-booking-booking__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}

.amitry-booking-cal {
	width: 100%;
}

/* Slots: vertical scroll list inside the right-hand slot column */
.amitry-booking-slotcol .amitry-booking-slots {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
	padding-right: 4px;
	margin: 0;
}

.amitry-booking-slotcol .amitry-booking-slots[hidden] { display: none; }

.amitry-booking-slotcol .amitry-booking-slots .amitry-booking-slot {
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

/* Slot buttons animate in with a soft staggered rise once the column opens.
   The has-slots gate ensures it only runs on reveal, not on every re-render. */
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot {
	animation: amitryBookingSlotRise var(--amitry-booking-dur-med, 320ms) var(--amitry-booking-ease, ease) backwards;
}
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(1) { animation-delay: 60ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(2) { animation-delay: 100ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(3) { animation-delay: 140ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(4) { animation-delay: 180ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(5) { animation-delay: 220ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(6) { animation-delay: 260ms; }
.amitry-booking-frame__inner--slot.has-slots .amitry-booking-slots .amitry-booking-slot:nth-child(n+7) { animation-delay: 300ms; }

@keyframes amitryBookingSlotRise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive: stack on mobile ---------- */
@media (max-width: 768px) {
	.amitry-booking-stage:has(.amitry-booking-frame.is-active .amitry-booking-frame__inner--split),
	.amitry-booking-stage:has(.amitry-booking-frame.is-active .amitry-booking-frame__inner--slot),
	body.amitry-booking-has-split .amitry-booking-stage,
	body.amitry-booking-has-slot-frame .amitry-booking-stage {
		max-width: 560px;
	}

	.amitry-booking-frame__inner--split {
		grid-template-columns: 1fr;
		border-radius: 16px;
	}

	/* Slot frame on mobile: single column, full width, card no longer grows
	   sideways. Sidecard, calendar, then slots stack vertically. */
	.amitry-booking-frame__inner--slot,
	.amitry-booking-frame__inner--slot.has-slots {
		grid-template-columns: 1fr;
		width: auto;
		margin: 0;
	}

	.amitry-booking-sidecard {
		border-right: none;
		border-bottom: 1px solid var(--amitry-booking-line);
		padding: 24px 22px;
	}

	.amitry-booking-booking {
		padding: 24px 22px;
	}

	.amitry-booking-cal {
		width: 100%;
	}

	.amitry-booking-booking__grid {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	/* Slot column moves under the calendar, slots become a wrapping grid */
	.amitry-booking-slotcol {
		border-left: none;
		border-top: 1px solid var(--amitry-booking-line);
		padding: 22px;
	}

	.amitry-booking-slotcol .amitry-booking-slots {
		max-height: none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	}
}

/* ============================================================
   Timezone selector (under the calendar)
   ============================================================ */

.amitry-booking-tz {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--amitry-booking-line, #E8E8E2);
	color: var(--amitry-booking-ink-3, #8A8C91);
}

.amitry-booking-tz[hidden] { display: none; }

.amitry-booking-tz__icon {
	flex-shrink: 0;
	color: var(--amitry-booking-ink-3, #8A8C91);
}

.amitry-booking-tz__select {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--amitry-booking-ink-2, #45464B);
	background: transparent;
	border: 1px solid var(--amitry-booking-line, #E8E8E2);
	border-radius: 8px;
	padding: 7px 10px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 140ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8C91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
}

.amitry-booking-tz__select:hover {
	border-color: var(--amitry-booking-ink-3, #C5C5BD);
}

.amitry-booking-tz__select:focus {
	outline: none;
	border-color: var(--amitry-booking-accent, #4F46E5);
	box-shadow: 0 0 0 3px var(--amitry-booking-accent-soft, #EEF2FF);
}

/* On the split layout, keep the tz selector aligned under the booking column */
.amitry-booking-booking .amitry-booking-tz {
	max-width: 100%;
}

/* ============================================================
   Legal footer (privacy + imprint links)
   ============================================================ */

.amitry-booking-legal {
	width: 100%;
	padding: 20px 20px 28px;
	text-align: center;
}

.amitry-booking-legal[hidden] { display: none; }

.amitry-booking-legal__nav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.amitry-booking-legal__link {
	font-size: 12px;
	color: var(--amitry-booking-ink-3, #8A8C91);
	text-decoration: none;
	transition: color 140ms ease;
}

.amitry-booking-legal__link:hover {
	color: var(--amitry-booking-ink-2, #45464B);
	text-decoration: underline;
}

.amitry-booking-legal__sep {
	color: var(--amitry-booking-line, #E8E8E2);
	font-size: 12px;
}