/**
 * LatePoint Booking Form Skin
 * Scoped under .latepoint-booking-form-element.lp-bfs-skin — no core edits.
 */

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin {
	--lp-bfs-surface: #fff;
	--lp-bfs-muted: color-mix(in srgb, var(--latepoint-brand-primary) 7%, #f6f7f9);
	--lp-bfs-border: color-mix(in srgb, var(--latepoint-body-color, #1f222b) 9%, transparent);
	--lp-bfs-border-strong: color-mix(in srgb, var(--latepoint-brand-primary) 45%, transparent);
	--lp-bfs-shadow: 0 1px 2px rgba(20, 22, 29, 0.04), 0 10px 28px rgba(20, 22, 29, 0.07);
	--lp-bfs-shadow-sm: 0 1px 2px rgba(20, 22, 29, 0.05);
	--lp-bfs-radius: var(--latepoint-border-radius-md, 12px);
	--lp-bfs-radius-sm: var(--latepoint-border-radius, 8px);
	--lp-bfs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	letter-spacing: -0.01em;
}

/* ——— Shell ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-form-w {
	background: var(--lp-bfs-surface);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-heading-w {
	padding: 16px 20px;
	border-bottom: 1px solid var(--lp-bfs-border);
	background: color-mix(in srgb, var(--latepoint-side-panel-bg, #fff) 70%, #fff);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-heading-w .os-heading-text,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-heading-w h3,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-heading-w h4 {
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--latepoint-headings-color, #14161d);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-body {
	padding: 22px 22px 28px;
	/* Keep wheel/touch scroll inside the form — do not chain to the page behind */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Lock background page while LatePoint lightbox is open */
html.lp-bfs-scroll-lock,
html.lp-bfs-scroll-lock body,
body.latepoint-lightbox-active {
	overflow: hidden !important;
	overscroll-behavior: none;
}

html.lp-bfs-scroll-lock body.lp-bfs-scroll-lock-fixed {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

.latepoint-lightbox-w,
.latepoint-lightbox-w .latepoint-lightbox-i,
.latepoint-lightbox-w .latepoint-lightbox-content,
.latepoint-lightbox-w .latepoint-body {
	overscroll-behavior: contain;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-body .os-step-header {
	margin-bottom: 20px;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-body h3,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-body h4 {
	letter-spacing: -0.02em;
}

/* Soft step enter */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-step-enter .latepoint-body > * {
	animation: lpBfsStepIn 0.38s var(--lp-bfs-ease) both;
}

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

/* ——— Side panel ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-side-panel {
	background: var(--latepoint-side-panel-bg, #fff);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-desc-title {
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-step-progress {
	gap: 6px;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-step-progress .progress-item,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-progress .progress-item {
	border-radius: 999px;
	transition: background 0.2s var(--lp-bfs-ease), width 0.2s var(--lp-bfs-ease);
}

/* ——— Service / agent / location tiles ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-i {
	border-radius: var(--lp-bfs-radius-sm) !important;
	border-color: var(--lp-bfs-border) !important;
	background: var(--lp-bfs-surface);
	box-shadow: var(--lp-bfs-shadow-sm);
	transition:
		border-color 0.18s var(--lp-bfs-ease),
		box-shadow 0.18s var(--lp-bfs-ease),
		transform 0.18s var(--lp-bfs-ease),
		background 0.18s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items.os-as-rows .os-item .os-item-i {
	min-height: 64px;
	padding: 14px 16px;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item:hover .os-item-i,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item:focus .os-item-i {
	border-color: var(--lp-bfs-border-strong) !important;
	box-shadow: 0 0 0 1px var(--latepoint-brand-primary), var(--lp-bfs-shadow-sm) !important;
	transform: translateY(-1px);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item.selected .os-item-i {
	border-color: var(--latepoint-brand-primary) !important;
	box-shadow: 0 0 0 2px var(--latepoint-brand-primary), var(--lp-bfs-shadow) !important;
	background: color-mix(in srgb, var(--latepoint-brand-primary) 6%, #fff);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-name {
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--latepoint-headings-color, #14161d);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-desc,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-meta {
	color: var(--latepoint-color-text-faded, #7c85a3);
	font-size: 0.92em;
	line-height: 1.4;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-price-w,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-price-value {
	font-weight: 650;
	color: var(--latepoint-brand-primary);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items.os-as-grid .os-item .os-item-i {
	overflow: hidden;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items.os-as-grid .os-item .os-item-img-w {
	border-radius: calc(var(--lp-bfs-radius-sm) - 2px) calc(var(--lp-bfs-radius-sm) - 2px) 0 0;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items.os-as-grid .os-item .os-item-name-w {
	border-top-color: var(--lp-bfs-border) !important;
	padding-top: 12px;
}

/* Categories */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-item-category-info {
	border-radius: var(--lp-bfs-radius-sm);
	border: 1px solid var(--lp-bfs-border);
	box-shadow: var(--lp-bfs-shadow-sm);
	transition: border-color 0.18s var(--lp-bfs-ease), box-shadow 0.18s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-item-category-w:hover > .os-item-category-info-w .os-item-category-info,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-item-category-info:hover {
	border-color: var(--lp-bfs-border-strong);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--latepoint-brand-primary) 35%, transparent), var(--lp-bfs-shadow-sm);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-item-category-name {
	font-weight: 650;
	letter-spacing: -0.015em;
}

/* Payment / option cards */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .lp-options .lp-option {
	border-radius: var(--lp-bfs-radius-sm);
	box-shadow: 0 0 0 1.5px var(--lp-bfs-border) !important;
	transition: box-shadow 0.18s var(--lp-bfs-ease), transform 0.18s var(--lp-bfs-ease);
	overflow: hidden;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .lp-options .lp-option:hover,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .lp-options .lp-option.selected {
	box-shadow: 0 0 0 2px var(--latepoint-brand-primary) !important;
	transform: translateY(-1px);
}

/* ——— Calendar & timeslots ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-dates-and-times-w {
	gap: 8px;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-current-month-label .current-month {
	letter-spacing: -0.03em;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-weekdays .weekday {
	background: var(--lp-bfs-muted) !important;
	color: var(--latepoint-color-text-faded, #7c85a3) !important;
	border-left-color: transparent !important;
	font-size: 11px !important;
	letter-spacing: 0.06em;
	padding: 8px 0 6px !important;
	text-align: center !important;
	margin-left: 0 !important;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-monthly-calendar-days .os-day .os-day-box {
	border-radius: var(--lp-bfs-radius-sm);
	transition: background 0.15s var(--lp-bfs-ease), box-shadow 0.15s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-monthly-calendar-days .os-day:not(.os-day-passed):not(.os-month-off):hover .os-day-box {
	background: var(--lp-bfs-muted);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-monthly-calendar-days .os-day.selected .os-day-box {
	box-shadow: 0 0 0 2px var(--latepoint-brand-primary);
	background: color-mix(in srgb, var(--latepoint-brand-primary) 10%, #fff);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-monthly-calendar-days .os-day.selected .os-day-number {
	color: var(--latepoint-brand-primary);
	font-weight: 700;
}

/* Timeline bands — keep geometry; only polish selected / hover contrast */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot {
	transition: background-color 0.15s var(--lp-bfs-ease), filter 0.15s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot:not(.is-booked):not(.is-off):hover {
	filter: brightness(0.97);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot.selected:not(.is-booked),
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot.selected:not(.is-off) {
	background-color: var(--latepoint-timeslot-selected-color, var(--latepoint-brand-primary)) !important;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot.selected .dp-label {
	background-color: var(--latepoint-timeslot-selected-color, var(--latepoint-brand-primary)) !important;
	border-radius: 6px;
	box-shadow: var(--lp-bfs-shadow-sm);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timepicker-trigger {
	border-radius: var(--lp-bfs-radius-sm);
	transition: box-shadow 0.15s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timepicker-trigger.selected {
	box-shadow: 0 0 0 2px var(--latepoint-brand-primary);
}

/* ——— Forms / customer fields ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="text"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="email"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="tel"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="password"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="number"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input[type="date"],
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin select,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin textarea {
	border-radius: var(--lp-bfs-radius-sm) !important;
	border-color: var(--lp-bfs-border) !important;
	padding: 11px 14px !important;
	transition: border-color 0.15s var(--lp-bfs-ease), box-shadow 0.15s var(--lp-bfs-ease);
	background: var(--lp-bfs-surface);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin input:focus,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin select:focus,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin textarea:focus {
	border-color: var(--latepoint-brand-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--latepoint-brand-primary) 22%, transparent) !important;
	outline: none;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin label,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-form-group label {
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--latepoint-headings-color, #14161d);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-step-tabs {
	gap: 4px;
	padding: 4px;
	background: var(--lp-bfs-muted);
	border-radius: var(--lp-bfs-radius-sm);
	border: 1px solid var(--lp-bfs-border);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-step-tabs .os-step-tab {
	border-radius: calc(var(--lp-bfs-radius-sm) - 2px);
	font-weight: 600;
	transition: background 0.15s var(--lp-bfs-ease), color 0.15s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-step-tabs .os-step-tab.active {
	background: var(--lp-bfs-surface);
	box-shadow: var(--lp-bfs-shadow-sm);
	color: var(--latepoint-brand-primary);
}

/* ——— Footer / buttons ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer {
	padding: 12px 16px;
	border-top: 1px solid var(--lp-bfs-border);
	background: color-mix(in srgb, var(--lp-bfs-surface) 92%, var(--lp-bfs-muted));
	gap: 10px;
	align-items: center;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-btn {
	border-radius: var(--lp-bfs-radius-sm) !important;
	padding: 11px 18px !important;
	font-size: 14px !important;
	font-weight: 650 !important;
	letter-spacing: -0.01em;
	min-height: 44px;
	transition: transform 0.15s var(--lp-bfs-ease), box-shadow 0.15s var(--lp-bfs-ease), background 0.15s var(--lp-bfs-ease);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-next-btn:not(.disabled),
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-btn-primary {
	box-shadow: 0 1px 2px color-mix(in srgb, var(--latepoint-brand-primary) 35%, transparent);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-next-btn:not(.disabled):hover,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--latepoint-brand-primary) 30%, transparent);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-prev-btn {
	background: transparent !important;
	border: 1px solid var(--lp-bfs-border) !important;
	color: var(--latepoint-body-color, #1f222b) !important;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-prev-btn:hover {
	border-color: var(--lp-bfs-border-strong) !important;
	background: var(--lp-bfs-muted) !important;
}

/* ——— Summary panel ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-summary-w,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-booking-form-summary {
	background: var(--latepoint-summary-panel-bg, #fff);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-summary-w .summary-box {
	border-radius: var(--lp-bfs-radius-sm);
	border: 1px solid var(--lp-bfs-border);
	box-shadow: var(--lp-bfs-shadow-sm);
	overflow: hidden;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-summary-w .sbc-highlighted-item,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-summary-w .sbc-main-item {
	letter-spacing: -0.01em;
}

/* ——— Confirmation ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .confirmation-info-w,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .step-confirmation-head-info {
	border-radius: var(--lp-bfs-radius);
}

/* ——— Lightbox ——— */
.latepoint-lightbox-w .latepoint-booking-form-element.lp-bfs-skin {
	box-shadow: var(--lp-bfs-shadow);
}

/* ——— Mobile ——— */
@media (max-width: 768px) {
	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-body {
		padding: 16px 16px 22px;
	}

	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items.os-as-rows .os-item .os-item-i {
		min-height: 56px;
		padding: 12px 14px;
	}

	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-sticky-footer .latepoint-footer {
		position: sticky;
		bottom: 0;
		z-index: 20;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		background: color-mix(in srgb, var(--lp-bfs-surface) 85%, transparent);
		padding-bottom: max(12px, env(safe-area-inset-bottom));
		box-shadow: 0 -8px 24px rgba(20, 22, 29, 0.06);
	}

	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ——— Addon CTAs alignment (optional class) ——— */
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .wl-cta-compact {
	border-radius: var(--lp-bfs-radius-sm);
	background: color-mix(in srgb, var(--latepoint-brand-primary) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--latepoint-brand-primary) 28%, transparent);
	box-shadow: var(--lp-bfs-shadow-sm);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .wl-cta-title {
	color: var(--latepoint-headings-color, #14161d);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .wl-cta-text {
	color: var(--latepoint-color-text-faded, #7c85a3);
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .latepoint-loyalty-points-widget,
.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .latepoint-loyalty-points-redemption {
	border-radius: var(--lp-bfs-radius-sm);
	background: var(--lp-bfs-muted);
	border: 1px solid var(--lp-bfs-border);
	box-shadow: none;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .latepoint-modal {
	z-index: 1000015;
}

.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-align-addons .latepoint-modal-content {
	border-radius: var(--lp-bfs-radius);
	border: 1px solid var(--lp-bfs-border);
	box-shadow: var(--lp-bfs-shadow);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin.lp-bfs-step-enter .latepoint-body > *,
	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .os-items .os-item .os-item-i,
	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .dp-timeslot,
	.latepoint-w .latepoint-booking-form-element.lp-bfs-skin .latepoint-footer .latepoint-btn {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}