/* ==========================================================================
   Аренда помещений — часовые слоты (этап 3).
   Переменные (--navy, --coral, --line, --muted, --ink) заданы в style.css.
   ========================================================================== */

.slots-wrap { margin-top: .25rem; }

.slots-hint {
	color: var(--muted);
	font-size: .9rem;
}

.slot-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.slot-btn {
	position: relative;
}

.slot-btn input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.slot-btn label {
	display: inline-block;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: .95rem;
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.slot-btn label:hover {
	border-color: var(--coral);
}

.slot-btn input:checked + label {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.slot-btn input:focus-visible + label {
	box-shadow: 0 0 0 .18rem rgba(242, 104, 79, .25);
}

.slot-btn.is-taken label {
	background: rgba(242, 104, 79, .12);
	border-color: transparent;
	color: var(--coral-dark);
	text-decoration: line-through;
	cursor: not-allowed;
}

.slot-btn.is-taken label:hover {
	border-color: transparent;
}