/* 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; }

/* ---------------------------------------------------------------
 * 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: #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 {
	background: #f43758;
	border-color: #f43758;
}
.calendar-slot.lbp-slot-in-span.lbp-slot-span-start:hover {
	background: #d62a47;
	border-color: #d62a47;
}

/* ---------------------------------------------------------------
 * 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;
}