/* Listeo Booking Plus — multi-slot span booking frontend styles.
   Loaded only when the listing has at least one service with duration set. */

/* Duration shown as a subtitle directly below the service name. */
.pricing-menu-details .lbp-service-duration {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: -2px 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: #888;
	line-height: 1.3;
}
.pricing-menu-details .lbp-service-duration i {
	font-size: 12px;
	line-height: 1;
}
.pricing-menu-details h5 + .lbp-service-duration { margin-top: 2px; }

/* Duration badge inside the booking widget's service selector — shown
   under the service name, where the customer actually picks the add-on. */
.bookable-services .single-service label .lbp-widget-service-duration {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 500;
	color: #888;
	line-height: 1.3;
}
.bookable-services .single-service label .lbp-widget-service-duration i {
	font-size: 12px;
	line-height: 1;
}
/* Selected service has an accent background + white text, so lift the
   duration badge to a translucent white instead of the dim grey (which
   was unreadable on the accent fill). */
.bookable-services input[type="radio"]:checked + label .lbp-widget-service-duration,
.bookable-services input[type="checkbox"]:checked + label .lbp-widget-service-duration {
	color: #fff;
	opacity: 0.85;
}
.bookable-services input[type="radio"]:checked + label .lbp-widget-service-duration i,
.bookable-services input[type="checkbox"]:checked + label .lbp-widget-service-duration i {
	color: #fff !important;
}

/* ---------------------------------------------------------------
 * Single-slot mode — visual hint for the auto-computed span.
 *
 * Mirrors the theme's `.time-slot input:checked~label` look so the
 * additional slots show as "also selected" alongside the starter.
 * ------------------------------------------------------------- */
.time-slot.lbp-slot-in-span label {
	background: #66676b;
	color: #fff;
}
.time-slot.lbp-slot-in-span label span,
.time-slot.lbp-slot-in-span label strong {
	color: #fff;
	opacity: 0.9;
}
.time-slot.lbp-slot-in-span.lbp-slot-span-start label {
	background: var(--lbp-popup-accent, #f43758);
}

/* ---------------------------------------------------------------
 * Grid layout (`listeo_time_slot_layout = 'grid'`) — highlights
 * applied to Core's `.calendar-slot` buttons in the day-column
 * carousel for both single (service-driven span) and multi-slot
 * modes. Same colour treatment as the dropdown layout above so the
 * customer sees a consistent "selected slot + extension" pattern.
 * ------------------------------------------------------------- */
/* .calendar-slot.lbp-slot-in-span {
	background: #66676b;
	color: #fff;
	border-color: #66676b;
} */
.calendar-slot.lbp-slot-in-span:hover {
	opacity: 0.8;
}
.calendar-slot.lbp-slot-in-span.lbp-slot-span-start {
	
	border-color: var(--lbp-popup-accent, #f43758);
}
.calendar-slot.lbp-slot-in-span.lbp-slot-span-start:hover {
	background: color-mix(in srgb, var(--lbp-popup-accent, #f43758) 82%, #000);
	border-color: color-mix(in srgb, var(--lbp-popup-accent, #f43758) 82%, #000);
}

/* "Doesn't fit the selected service" — slots from which the chosen
   service's duration can't complete (e.g. the last 1h slot for a 1.5h
   service). Rendered like an unavailable/booked slot: dimmed, struck
   through and not clickable. Uses opacity + pointer-events so it works
   in any container (popup + classic grid) without a specificity fight
   against the `calendar-slot-available` background. */
.calendar-slot.lbp-slot-unfit {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Service-extension hint (grid): the next free slot the customer may add
   beyond the service's auto-span. Dashed accent affordance = "tap to add". */
.calendar-slot.lbp-slot-extendable {
	border-style: dashed;
	border-color: var(--lbp-popup-accent, #f43758);
	background: color-mix(in srgb, var(--lbp-popup-accent, #f43758) 6%, #fff);
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * Multi-slot mode — BP-owned picker (replaces Core's radio list
 * inside the same .time-slots-dropdown container).
 * ------------------------------------------------------------- */

.lbp-ms-empty {
	padding: 16px;
	color: #888;
	font-size: 13px;
	text-align: center;
}

/* Mirror Core's native .time-slot look: block tiles, centered content,
   subtle background, rounded corners, time on top + meta below. */
.lbp-ms-grid {
	display: block;
	padding: 0;
}

.lbp-ms-slot {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 12px 10px;
	border: none;
	border-radius: 4px;
	background: #f6f6f6;
	color: #777;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.lbp-ms-slot:last-child { margin-bottom: 0; }
.lbp-ms-slot:hover {
	color: #66676b;
	background-color: rgba( 102, 103, 107, 0.08 );
}

.lbp-ms-slot__time {
	display: block;
	font-weight: 600;
	color: #333;
	line-height: 1.25;
}
.lbp-ms-slot__meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	opacity: 0.85;
}

/* Selected — mirrors `.time-slot input:checked~label` exactly. */
.lbp-ms-state-selected,
.lbp-ms-state-selected:hover {
	background-color: #66676b;
	color: #fff;
}
.lbp-ms-state-selected .lbp-ms-slot__time,
.lbp-ms-state-selected .lbp-ms-slot__meta { color: #fff; }
.lbp-ms-state-selected .lbp-ms-slot__meta { opacity: 0.8; }

/* Extendable — the next slot on either side of the current span. */
.lbp-ms-state-extendable {
	background-color: rgba( 244, 55, 88, 0.08 );
	color: #c1263a;
}
.lbp-ms-state-extendable:hover {
	background-color: rgba( 244, 55, 88, 0.22 );
	color: #c1263a;
}
.lbp-ms-state-extendable .lbp-ms-slot__time { color: #c1263a; }
.lbp-ms-state-extendable .lbp-ms-slot__meta { color: #b93751; }

/* Unavailable / blocked — muted, not clickable. */
.lbp-ms-slot.is-unavailable,
.lbp-ms-slot.is-unavailable:hover {
	opacity: 0.45;
	cursor: not-allowed;
	background-color: #f6f6f6;
	color: #999;
	pointer-events: none;
}
.lbp-ms-slot.is-unavailable .lbp-ms-slot__time { color: #999; }

/* Unfit (service-driven mode): the chosen service can't fit a span
   starting at this slot. Visually identical to is-unavailable but
   the meta line spells out why. */
.lbp-ms-state-unfit .lbp-ms-slot__meta { color: #b06a00; }

/* Non-selected neutrals while a span exists — fade to the background. */
.lbp-ms-grid:has(.lbp-ms-state-selected) .lbp-ms-state-neutral {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}


/* Refusal shake — applied briefly when a click is rejected because the
   per-listing max-slot cap is already reached. Reused for both the
   dropdown multi-slot tiles and the grid layout's calendar slots. */
@keyframes lbpMsShake {
	0%, 100% { transform: translate3d(0, 0, 0); }
	15%      { transform: translate3d(-5px, 0, 0); }
	30%      { transform: translate3d(4px, 0, 0); }
	45%      { transform: translate3d(-3px, 0, 0); }
	60%      { transform: translate3d(2px, 0, 0); }
	75%      { transform: translate3d(-1px, 0, 0); }
}
.lbp-ms-shake {
	animation: lbpMsShake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}