/*
 * Booking UI styles
 * Tokens from the parent theme's :root are available here.
 *
 * Sections:
 *   1. Shell & layout
 *   2. Calendar
 *   3. Slots
 *   4. Form
 *   5. Success state
 *   6. Responsive
 */

/* ============================================================
   1. SHELL & LAYOUT
   ============================================================ */

.vp-booking-shell {
	display: flex;
	flex-direction: column;
	gap: clamp( 2rem, 3vw, 3rem );
	margin: 0 auto;
	min-width: 0;
	max-width: 100%;
}

.vp-panel-intro {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.vp-panel-intro__eyebrow {
	color: var( --vp-color-text-muted );
	font-size: var( --vp-font-size-xs );
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

.vp-panel-intro__body {
	color: var( --vp-color-text-muted );
	font-size: var( --vp-font-size-small );
	line-height: 1.7;
	margin: 0;
}

/* ============================================================
   2. CALENDAR
   ============================================================ */

.vp-booking-calendar {
	background: var( --vp-color-surface-card );
	border: 1px solid var( --vp-color-border-light );
	border-radius: var( --vp-radius-lg );
	box-shadow: none;
	overflow: hidden;
	margin: 0 auto;
	max-width: 620px;
	min-width: 0;
	padding: 0.85rem;
	width: 100%;
}

/* --- 7-day strip --- */

.vp-cal-strip-row {
	align-items: stretch;
	display: flex;
	gap: 0;
	border: 1px solid var( --vp-color-border-light );
	border-radius: calc( var( --vp-radius-lg ) - 0.35rem );
	box-shadow: none;
	min-width: 0;
	overflow: hidden;
}

.vp-cal-strip {
	display: flex;
	flex: 1 1 auto;
	gap: 0;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.vp-cal-strip::-webkit-scrollbar {
	display: none;
}

.vp-cal-strip-day {
	align-items: center;
	background: transparent;
	border: none;
	border-right: 1px solid var( --vp-color-border-light );
	box-shadow: none;
	cursor: pointer;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 2.2rem;
	padding: 0.5rem 0.2rem;
	transition: background var( --vp-transition );
}

.vp-cal-strip-dow {
	color: var( --vp-color-text-faint );
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vp-cal-strip-num {
	color: var( --vp-color-text );
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.vp-cal-strip-day:hover:not( :disabled ) {
	background: var( --vp-color-primary-ghost );
}

.vp-cal-strip-day--disabled {
	cursor: default;
	opacity: 0.28;
}

.vp-cal-strip-day--today .vp-cal-strip-num {
	color: var( --vp-color-primary );
}

.vp-cal-strip-day--selected,
.vp-cal-strip-day--selected:hover {
	background: var( --vp-color-primary );
}

.vp-cal-strip-day--selected .vp-cal-strip-dow,
.vp-cal-strip-day--selected .vp-cal-strip-num {
	color: #fff;
}

/* --- Calendar toggle button --- */

.vp-cal-toggle {
	align-items: center;
	background: transparent;
	border: none;
	border-left: 1px solid var( --vp-color-border-light );
	box-shadow: none;
	color: var( --vp-color-text-faint );
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	padding: 0 1.1rem;
	transition: background var( --vp-transition ), color var( --vp-transition );
}

.vp-cal-toggle:hover,
.vp-cal-toggle--open {
	background: var( --vp-color-primary-ghost );
	color: var( --vp-color-primary );
}

/* --- Full month calendar (expandable) --- */

.vp-cal-full {
	border-top: 1px solid var( --vp-color-border-light );
	box-shadow: none;
	margin-top: 0.75rem;
	padding: 0.75rem 0.1rem 0;
}

.vp-cal-full--open {
	animation: vpCalSlideIn 0.22s ease;
}

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

/* Header: prev | Month Year | next */
.vp-cal-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.45rem;
}

.vp-cal-title {
	color: var( --vp-color-primary-strong );
	font-family: var( --vp-font-heading );
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.vp-cal-nav {
	align-items: center;
	background: var( --vp-color-primary-ghost );
	border: 1px solid var( --vp-color-border-light );
	border-radius: var( --vp-radius-pill );
	box-shadow: none;
	color: var( --vp-color-primary );
	cursor: pointer;
	display: inline-flex;
	font-size: 0.85rem;
	height: 1.25rem;
	justify-content: center;
	line-height: 1;
	transition: background var( --vp-transition ), color var( --vp-transition );
	width: 1.25rem;
}

.vp-cal-nav:hover:not( :disabled ),
.vp-cal-nav:focus:not( :disabled ) {
	background: var( --vp-color-primary-pale );
	color: var( --vp-color-primary-strong );
}

.vp-cal-nav:disabled {
	color: var( --vp-color-text-faint );
	cursor: default;
	opacity: 0.45;
}

/* Day-of-week row */
.vp-cal-dow {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	margin-bottom: 0.15rem;
	text-align: center;
}

.vp-cal-dow span {
	color: var( --vp-color-text-faint );
	font-size: 0.52rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.1rem 0;
	text-transform: uppercase;
}

/* Day grid */
.vp-cal-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat( 7, 1fr );
	margin: 0 auto;
	max-width: 560px;
}

.vp-cal-day {
	align-items: center;
	aspect-ratio: auto;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --vp-radius-xs );
	box-shadow: none;
	color: var( --vp-color-text );
	cursor: pointer;
	display: flex;
	font-size: 0.64rem;
	font-weight: 600;
	justify-content: center;
	min-height: 3.1rem;
	transition: background var( --vp-transition ),
	            border-color var( --vp-transition ),
	            color var( --vp-transition );
	width: 100%;
}

.vp-cal-day:hover:not( :disabled ) {
	background: var( --vp-color-primary-ghost );
	border-color: var( --vp-color-border );
	color: var( --vp-color-primary );
}

.vp-cal-day--empty {
	border: none;
	cursor: default;
}

.vp-cal-day--disabled {
	cursor: default;
	opacity: 0.32;
}

.vp-cal-day--weekend {
	color: var( --vp-color-text-faint );
}

.vp-cal-day--today {
	border-color: var( --vp-color-primary-light );
	color: var( --vp-color-primary );
}

.vp-cal-day--selected,
.vp-cal-day--selected:hover {
	background: var( --vp-color-primary );
	border-color: var( --vp-color-primary );
	color: #fff;
}

/* ============================================================
   3. SLOTS
   ============================================================ */

.vp-booking-slots {
	background: var( --vp-color-surface-card );
	border: 1px solid var( --vp-color-border-light );
	border-radius: var( --vp-radius-lg );
	box-shadow: none;
	min-width: 0;
	padding: clamp( 1.25rem, 2vw, 2rem );
}

.vp-slots-heading {
	color: var( --vp-color-primary-strong );
	font-family: var( --vp-font-heading );
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.vp-slots-loading,
.vp-slots-error,
.vp-slots-empty {
	color: var( --vp-color-text-muted );
	font-size: var( --vp-font-size-small );
	margin: 0;
}

.vp-slots-error {
	color: var( --vp-color-danger );
}

.vp-slots-grid {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat( auto-fill, minmax( 7.5rem, 1fr ) );
	min-width: 0;
}

.vp-slot-btn {
	background: var( --vp-color-primary-ghost );
	border: 1.5px solid var( --vp-color-border );
	border-radius: var( --vp-radius-md );
	box-shadow: none;
	color: var( --vp-color-primary-strong );
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.85rem 1rem;
	text-align: center;
	transition: background var( --vp-transition ),
	            border-color var( --vp-transition ),
	            color var( --vp-transition ),
	            transform var( --vp-transition );
	width: 100%;
}

.vp-slot-btn--free:hover,
.vp-slot-btn--free:focus {
	background: var( --vp-color-primary-pale );
	border-color: var( --vp-color-primary-light );
	color: var( --vp-color-primary );
	transform: translateY( -1px );
}

.vp-slot-btn--selected,
.vp-slot-btn--selected:hover {
	background: var( --vp-color-primary );
	border-color: var( --vp-color-primary );
	color: #fff;
	transform: translateY( -1px );
}

.vp-slot-btn--filled {
	background: var( --vp-color-surface-alt );
	border-color: var( --vp-color-border-light );
	color: var( --vp-color-text-faint );
	cursor: not-allowed;
	opacity: 0.6;
	text-decoration: line-through;
	transform: none;
}

.vp-slot-btn--filled:hover,
.vp-slot-btn--filled:focus {
	background: var( --vp-color-surface-alt );
	border-color: var( --vp-color-border-light );
	color: var( --vp-color-text-faint );
	transform: none;
}

/* ============================================================
   4. FORM
   ============================================================ */

.vp-booking-form {
	background: var( --vp-color-surface-card );
	border: 1px solid var( --vp-color-border-light );
	border-radius: var( --vp-radius-lg );
	box-shadow: none;
	min-width: 0;
	padding: clamp( 1.25rem, 2vw, 2rem );
	scroll-margin-top: 6rem;
}

/* Selected slot indicator */
.vp-form-slot-bar {
	align-items: center;
	background: var( --vp-color-primary-ghost );
	border: 1px solid var( --vp-color-primary-pale );
	border-radius: var( --vp-radius-md );
	color: var( --vp-color-primary );
	display: flex;
	font-size: var( --vp-font-size-small );
	font-weight: 700;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
}

.vp-form-slot-icon {
	color: var( --vp-color-primary );
	flex-shrink: 0;
}

.vp-form-selected-slot {
	color: var( --vp-color-primary-strong );
}

.vp-form-heading {
	color: var( --vp-color-primary-strong );
	font-size: 1.3rem;
	margin: 0 0 1.25rem;
}

/* Form rows */
.vp-form-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vp-form-row--2col {
	flex-direction: row;
}

.vp-form-row--2col .vp-form-group {
	flex: 1 1 0;
	min-width: 0;
}

.vp-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.vp-form-group:last-of-type {
	margin-bottom: 0;
}

.vp-form-group label {
	color: var( --vp-color-text-muted );
	font-size: var( --vp-font-size-xs );
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 0;
}

.vp-form-group input,
.vp-form-group select,
.vp-form-group textarea {
	background: #fff;
	border: 1px solid var( --vp-color-border );
	border-radius: 14px;
	box-shadow: none;
	color: var( --vp-color-text );
	font: inherit;
	min-height: 3rem;
	padding: 0.85rem 0.95rem;
	transition: border-color var( --vp-transition ), box-shadow var( --vp-transition ), background var( --vp-transition );
	width: 100%;
}

.vp-form-group textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.vp-form-group input::placeholder,
.vp-form-group textarea::placeholder {
	color: var( --vp-color-text-faint );
}

.vp-form-group input:focus,
.vp-form-group select:focus,
.vp-form-group textarea:focus {
	background: #fff;
	border-color: var( --vp-color-primary-light );
	outline: none;
}

.vp-form-optional {
	color: var( --vp-color-text-faint );
	font-weight: 400;
}

.vp-form-consent {
	margin: 0.25rem 0 0;
}

.vp-form-consent label {
	align-items: flex-start;
	color: var( --vp-color-text-muted );
	display: flex;
	gap: 0.75rem;
	line-height: 1.65;
}

.vp-form-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
	min-height: 0;
	width: auto;
}

.vp-form-consent a {
	color: var( --vp-color-primary );
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

/* Error */
.vp-form-error {
	background: var( --vp-color-danger-pale );
	border: 1px solid rgba( 163, 71, 56, 0.3 );
	border-radius: var( --vp-radius-sm );
	color: var( --vp-color-danger );
	font-size: var( --vp-font-size-small );
	font-weight: 600;
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
}

/* Submit */
.vp-form-submit {
	margin-top: 1.25rem;
	width: 100%;
	justify-content: center;
}

/* Locked state — shown before a slot is selected */
.vp-booking-form {
	transition: opacity 0.25s ease;
}

.vp-booking-form--locked {
	opacity: 0.48;
	pointer-events: none;
	user-select: none;
}

/* ============================================================
   5. SUCCESS STATE
   ============================================================ */

.vp-booking-success {
	background: var( --vp-color-surface-card );
	border: 1px solid var( --vp-color-border-light );
	border-radius: var( --vp-radius-lg );
	box-shadow: none;
	padding: clamp( 2rem, 4vw, 3.5rem );
	text-align: center;
}

.vp-success-icon {
	color: var( --vp-color-success );
	margin: 0 auto 1.25rem;
}

.vp-success-icon svg {
	height: 3rem;
	width: 3rem;
}

.vp-booking-success h2 {
	color: var( --vp-color-primary-strong );
	margin-bottom: 0.75rem;
}

.vp-success-message {
	color: var( --vp-color-text-muted );
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media ( max-width: 640px ) {

	.vp-booking-calendar,
	.vp-booking-slots,
	.vp-booking-form,
	.vp-booking-success {
		border-radius: 18px;
		padding-left: 0.9rem;
		padding-right: 0.9rem;
	}

	.vp-cal-strip-row {
		display: grid;
		gap: 0.45rem;
		grid-template-columns: minmax( 0, 1fr ) auto;
		overflow: visible;
	}

	.vp-cal-strip {
		display: grid;
		gap: 0.35rem;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		overflow: visible;
	}

	.vp-cal-strip-day {
		min-width: 0;
		padding: 0.55rem 0.1rem;
	}

	.vp-cal-strip-num {
		font-size: 0.82rem;
	}

	.vp-cal-strip-dow {
		font-size: 0.52rem;
	}

	.vp-cal-toggle {
		border-left: none;
		border-radius: 14px;
		padding: 0 0.85rem;
	}

	.vp-booking-calendar,
	.vp-cal-grid {
		max-width: none;
	}

	.vp-cal-day {
		font-size: 0.56rem;
		min-height: 2.45rem;
	}

	.vp-form-row--2col {
		flex-direction: column;
	}

	.vp-slots-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.5rem;
	}
}