/* ==========================================================================
   LatePoint skin for Bukslay
   Restyles LatePoint's booking lightbox with the Bukslay design tokens.
   Only CSS: LatePoint markup, steps and logic are untouched, so plugin
   updates keep working. Everything is scoped to LatePoint's own classes.
   ========================================================================== */

/* LatePoint prints its colour variables on :root; html:root wins on specificity. */
html:root {
	--latepoint-brand-primary: #801020;
	--latepoint-body-color: #211614;
	--latepoint-headings-color: #211614;
	--latepoint-color-text-faded: #6d5f59;
	--latepoint-timeslot-selected-color: #801020;
	--latepoint-calendar-weekday-label-color: #6d5f59;
	--latepoint-calendar-weekday-label-bg: transparent;
	--latepoint-side-panel-bg: #f4ede5;
	--latepoint-summary-panel-bg: #fbf8f4;
	--latepoint-border-radius: 10px;
	--latepoint-border-radius-sm: 6px;
	--latepoint-border-radius-md: 14px;
	--latepoint-border-radius-lg: 18px;
}

/* Typography ---------------------------------------------------------------- */
.latepoint-w,
.latepoint-lightbox-w,
.latepoint-lightbox-w button,
.latepoint-lightbox-w input,
.latepoint-lightbox-w select,
.latepoint-lightbox-w textarea {
	font-family: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
}
.latepoint-w h1, .latepoint-w h2, .latepoint-w h3, .latepoint-w h4,
.latepoint-lightbox-w h1, .latepoint-lightbox-w h2, .latepoint-lightbox-w h3, .latepoint-lightbox-w h4 {
	font-family: "Cormorant", "Cormorant Garamond", Georgia, serif !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

/* Backdrop & frame ------------------------------------------------------------ */
.latepoint-lightbox-w {
	background-color: rgba(33, 22, 20, .58) !important;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.latepoint-lightbox-w .latepoint-lightbox-shadow { background: transparent !important; }
.latepoint-lightbox-w .latepoint-lightbox-i {
	background-color: #fbf8f4 !important;
	box-shadow: 0 40px 100px -30px rgba(33, 22, 20, .55), 0 2px 6px rgba(33, 22, 20, .12) !important;
}
.latepoint-booking-form-element {
	background-color: #fbf8f4 !important;
	color: #211614;
}
.latepoint-booking-form-element .latepoint-form-w { background-color: #fbf8f4 !important; }

/* Side panel (left) — calmer, branded */
.latepoint-booking-form-element .latepoint-side-panel {
	background-color: #f4ede5 !important;
	border-right: 1px solid #e8ddd1 !important;
}
.latepoint-booking-form-element .latepoint-step-desc-w .latepoint-step-desc,
.latepoint-booking-form-element .latepoint-step-desc {
	color: #4a3a35 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
}
.latepoint-booking-form-element .latepoint-step-desc .latepoint-desc-title,
.latepoint-booking-form-element .latepoint-desc-title {
	font-family: "Cormorant", Georgia, serif !important;
	font-size: 26px !important;
	line-height: 1.1 !important;
	color: #211614 !important;
}
.latepoint-booking-form-element .latepoint-step-svg-highlight { fill: #e9cfc6 !important; }
.latepoint-booking-form-element .latepoint-step-svg-base { stroke: #801020 !important; }
.latepoint-booking-form-element .latepoint-questions { color: #4a3a35 !important; }
.latepoint-booking-form-element .latepoint-questions a { color: #801020 !important; font-weight: 600; }

/* Summary panel (right) */
.latepoint-booking-form-element .latepoint-summary-w {
	background-color: #fbf8f4 !important;
	border-left: 1px solid #e8ddd1 !important;
}
.latepoint-booking-form-element .latepoint-summary-w .summary-header,
.latepoint-booking-form-element .latepoint-summary-w h3 { color: #211614 !important; }

/* Step heading bar */
.latepoint-booking-form-element .latepoint-heading-w {
	border-bottom: 1px solid #e8ddd1 !important;
	background: #fbf8f4 !important;
}
.latepoint-booking-form-element .latepoint-heading-w .os-heading-text,
.latepoint-booking-form-element .latepoint-heading-w h2,
.latepoint-booking-form-element .latepoint-heading-w h3 {
	font-family: "Cormorant", Georgia, serif !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #211614 !important;
}

/* Footer buttons ------------------------------------------------------------- */
.latepoint-booking-form-element .latepoint-footer {
	background: #fbf8f4 !important;
	border-top: 1px solid #e8ddd1 !important;
}
.latepoint-w .latepoint-btn,
.latepoint-lightbox-w .latepoint-btn {
	border-radius: 999px !important;
	font-weight: 500 !important;
	letter-spacing: .03em !important;
	box-shadow: none !important;
}
.latepoint-w .latepoint-btn.latepoint-btn-primary,
.latepoint-lightbox-w .latepoint-btn.latepoint-btn-primary {
	background-color: #801020 !important;
	border-color: #801020 !important;
	color: #fff !important;
}
.latepoint-w .latepoint-btn.latepoint-btn-primary:hover,
.latepoint-lightbox-w .latepoint-btn.latepoint-btn-primary:hover { background-color: #640c19 !important; border-color: #640c19 !important; }
.latepoint-w .latepoint-btn.latepoint-btn-link,
.latepoint-lightbox-w .latepoint-btn.latepoint-btn-link { color: #211614 !important; }

/* Selectable items (services, extras, agents) -------------------------------- */
.latepoint-booking-form-element .os-items .os-item .os-item-i {
	background: #fff !important;
	border: 1px solid #e8ddd1 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(33, 22, 20, .04) !important;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.latepoint-booking-form-element .os-items .os-item .os-item-i:hover {
	border-color: #c9a9a0 !important;
	box-shadow: 0 10px 24px -16px rgba(33, 22, 20, .45) !important;
}
.latepoint-booking-form-element .os-items .os-item.selected .os-item-i,
.latepoint-booking-form-element .os-items .os-item .os-item-i.selected {
	border-color: #801020 !important;
	box-shadow: 0 0 0 1px #801020, 0 10px 24px -16px rgba(128, 16, 32, .6) !important;
	background: #fdf7f6 !important;
}
.latepoint-booking-form-element .os-item-name { color: #211614 !important; font-weight: 600 !important; }
.latepoint-booking-form-element .os-item-desc { color: #6d5f59 !important; line-height: 1.5 !important; }
.latepoint-booking-form-element .os-item-price,
.latepoint-booking-form-element .os-item-price-w .os-item-price { color: #801020 !important; font-weight: 600 !important; }

/* Agent cards ("Morning Booking" / "Afternoon Booking") read as time windows */
.latepoint-booking-form-element .os-agents .os-item .os-item-img-w,
.latepoint-booking-form-element .step-agents-w .os-item .os-item-img-w {
	background-color: #f4ede5 !important;
	border-radius: 12px !important;
}

/* Form fields ------------------------------------------------------------------ */
.latepoint-booking-form-element .os-form-group .os-form-control,
.latepoint-booking-form-element .os-form-group select,
.latepoint-booking-form-element .os-form-group textarea,
.latepoint-booking-form-element input.os-form-control {
	background-color: #fff !important;
	border: 1px solid #e3d8cc !important;
	border-radius: 10px !important;
	color: #211614 !important;
	box-shadow: none !important;
}
.latepoint-booking-form-element .os-form-group .os-form-control:focus,
.latepoint-booking-form-element .os-form-group select:focus,
.latepoint-booking-form-element .os-form-group textarea:focus {
	border-color: #801020 !important;
	box-shadow: 0 0 0 4px #f8eeee !important;
}
.latepoint-booking-form-element .os-form-group label { color: #4a3a35 !important; }
.latepoint-booking-form-element .os-form-checkbox-group input[type="checkbox"],
.latepoint-booking-form-element input[type="checkbox"] { accent-color: #801020; }

/* Calendar ---------------------------------------------------------------------- */
.latepoint-booking-form-element .os-monthly-calendar-days .os-day .os-day-number { color: #211614; }
.latepoint-booking-form-element .os-day.selected .os-day-box,
.latepoint-booking-form-element .os-day.os-day-current.selected .os-day-box { background-color: #801020 !important; }
.latepoint-booking-form-element .os-day.os-today .os-day-box { box-shadow: inset 0 0 0 1px #b4865a !important; }
.latepoint-booking-form-element .os-day .os-day-status .day-available { background-color: #2f8f5b !important; }
.latepoint-booking-form-element .dp-timeslot.selected,
.latepoint-booking-form-element .dp-timepicker-trigger.selected { background-color: #801020 !important; color: #fff !important; }
.latepoint-booking-form-element .dp-timepicker-trigger:not(.is-booked):not(.is-off):hover { box-shadow: 0 0 0 1px #801020 !important; }

/* Summary price block */
.latepoint-booking-form-element .summary-price-breakdown-w,
.latepoint-booking-form-element .os-summary-lines { color: #211614 !important; }
.latepoint-booking-form-element .summary-price-item-w.spi-total .spi-price,
.latepoint-booking-form-element .spi-total .spi-price { color: #801020 !important; }

/* Mobile: full-height sheet with safe areas ---------------------------------- */
@media (max-width: 767px) {
	.latepoint-lightbox-w .latepoint-lightbox-i { border-radius: 0 !important; }
	.latepoint-booking-form-element .latepoint-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
}

/* ---------------------------------------------------------------------------
   Refinements from testing on staging
   ------------------------------------------------------------------------ */

/* Step copy in the side panel: lighter, easier to read (text itself is set in LatePoint) */
.latepoint-booking-form-element .latepoint-step-desc,
.latepoint-booking-form-element .latepoint-step-desc p,
.latepoint-booking-form-element .latepoint-step-desc strong,
.latepoint-booking-form-element .latepoint-step-desc b {
	font-weight: 400 !important;
	color: #4a3a35 !important;
}
.latepoint-booking-form-element .latepoint-questions strong,
.latepoint-booking-form-element .latepoint-questions h4 { font-family: "Cormorant", Georgia, serif !important; font-size: 20px !important; font-weight: 600 !important; color: #211614 !important; }

/* Summary heading in the display face */
.latepoint-booking-form-element .latepoint-summary-w .summary-header,
.latepoint-booking-form-element .latepoint-summary-w .os-summary-heading,
.latepoint-booking-form-element .summary-heading {
	font-family: "Cormorant", Georgia, serif !important;
	font-size: 24px !important;
	font-weight: 600 !important;
}
.latepoint-booking-form-element .latepoint-summary-w .summary-header:before,
.latepoint-booking-form-element .latepoint-summary-w .summary-header:after { opacity: .35; }

/* Time-of-day agents: Morning (12) and Afternoon (13) shown as sun / moon instead of the logo */
.latepoint-booking-form-element .step-agents-w .os-items { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px !important; }
.latepoint-booking-form-element .step-agents-w .os-items .os-item { width: auto !important; margin: 0 !important; max-width: none !important; flex: none !important; }
.latepoint-booking-form-element .step-agents-w .os-item .os-item-i { padding: 22px 16px 18px !important; text-align: center; }
.latepoint-booking-form-element .step-agents-w .os-item .os-item-name {
	font-family: "Cormorant", Georgia, serif !important;
	font-size: 22px !important;
	line-height: 1.1 !important;
}
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="12"] .os-item-img-w,
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="13"] .os-item-img-w {
	width: 64px !important;
	height: 64px !important;
	margin: 0 auto 12px !important;
	border-radius: 50% !important;
	background: #f8eeee !important;
	border: 0 !important;
	position: relative;
}
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="12"] .os-avatar,
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="13"] .os-avatar {
	background: none !important;
	width: 100% !important;
	height: 100% !important;
	-webkit-mask: var(--bk-agent-icon) center / 30px no-repeat;
	mask: var(--bk-agent-icon) center / 30px no-repeat;
	background-color: #801020 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="12"] { --bk-agent-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E"); }
.latepoint-booking-form-element .step-agents-w .os-item[data-item-id="13"] { --bk-agent-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v1.5M3 12h1.5M19.5 12H21M5.6 5.6l1.1 1.1M17.3 6.7l1.1-1.1'/%3E%3Cpath d='M2.5 16.5h19M5.5 20h13'/%3E%3C/svg%3E"); }

/* Calendar */
.latepoint-booking-form-element .os-current-month-label-w .os-current-month-label,
.latepoint-booking-form-element .os-current-month-label {
	font-family: "Cormorant", Georgia, serif !important;
	font-weight: 600 !important;
}
.latepoint-booking-form-element .os-weekdays,
.latepoint-booking-form-element .os-weekdays .weekday { background: transparent !important; color: #6d5f59 !important; }
.latepoint-booking-form-element .os-day.os-today .os-day-box { background: #f8eeee !important; box-shadow: none !important; }
.latepoint-booking-form-element .os-day.os-today .os-day-box .os-day-number { color: #801020 !important; background: transparent !important; }
.latepoint-booking-form-element .os-day.selected .os-day-box .os-day-number { color: #fff !important; }
.latepoint-booking-form-element .os-month-prev-btn,
.latepoint-booking-form-element .os-month-next-btn { border-radius: 50% !important; }
.latepoint-booking-form-element .times-header { font-family: "Cormorant", Georgia, serif !important; font-size: 20px !important; font-weight: 600 !important; }

/* Time slots */
.latepoint-booking-form-element .dp-timepicker-trigger {
	border-radius: 999px !important;
	background: #eef6f0 !important;
	color: #1f5a3a !important;
	box-shadow: inset 0 0 0 1px #cfe5d6 !important;
	font-weight: 500 !important;
}
.latepoint-booking-form-element .dp-timepicker-trigger:hover { box-shadow: inset 0 0 0 1px #801020 !important; color: #801020 !important; background: #fff !important; }
.latepoint-booking-form-element .dp-timepicker-trigger.selected { background: #801020 !important; color: #fff !important; box-shadow: none !important; }

/* Close button */
.latepoint-lightbox-w .latepoint-lightbox-close { border-radius: 50% !important; }