/**
 * Salon Booking — front-end styles.
 */

.salon-booking-wrap {
	max-width: 640px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.salon-booking-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
}

.salon-booking-form .salon-field {
	margin-bottom: 1.1rem;
}

.salon-booking-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.salon-required {
	color: #d63638;
}

.salon-booking-form input[type="text"],
.salon-booking-form input[type="email"],
.salon-booking-form input[type="tel"],
.salon-booking-form input[type="date"],
.salon-booking-form select,
.salon-booking-form textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 1rem;
	background: #fff;
}

.salon-booking-form input:focus,
.salon-booking-form select:focus,
.salon-booking-form textarea:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.salon-field-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.salon-field-row .salon-field {
	flex: 1 1 200px;
}

.salon-divider {
	border: none;
	border-top: 1px solid #e5e5e5;
	margin: 1.5rem 0;
}

/* Slots */
.salon-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-height: 2.5rem;
}

.salon-slot {
	border: 1px solid #2271b1;
	background: #fff;
	color: #2271b1;
	padding: 0.45rem 0.8rem;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.95rem;
	transition: background 0.15s ease;
}

.salon-slot:hover {
	background: #eaf2fb;
}

.salon-slot.is-selected {
	background: #2271b1;
	color: #fff;
}

.salon-slots-hint,
.salon-booking-empty {
	color: #666;
	font-style: italic;
	margin: 0;
}

/* Button */
.salon-submit-btn {
	display: inline-block;
	background: #2271b1;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.7rem 1.4rem;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.salon-submit-btn:hover {
	background: #135e96;
}

.salon-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Messages */
.salon-booking-messages {
	margin-bottom: 1rem;
}

.salon-booking-messages.is-error,
.salon-booking-messages.is-success {
	padding: 0.8rem 1rem;
	border-radius: 6px;
}

.salon-booking-messages.is-error {
	background: #fcebec;
	border: 1px solid #d63638;
	color: #8a1f21;
}

.salon-booking-messages.is-success {
	background: #edfaef;
	border: 1px solid #2a8c3c;
	color: #1d6b2c;
}

/* Dashboard table */
.salon-bookings-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

.salon-bookings-table th,
.salon-bookings-table td {
	text-align: left;
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid #e5e5e5;
}

.salon-bookings-table th {
	background: #f6f7f7;
	font-weight: 600;
}

.salon-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
}

.salon-badge-pending {
	background: #fff3cd;
	color: #8a6d00;
}

.salon-badge-confirmed {
	background: #d4edda;
	color: #1d6b2c;
}

.salon-badge-completed {
	background: #d1e7f5;
	color: #0a558c;
}

.salon-badge-cancelled {
	background: #f8d7da;
	color: #8a1f21;
}

/* Responsive table → cards */
@media (max-width: 600px) {
	.salon-bookings-table thead {
		display: none;
	}

	.salon-bookings-table,
	.salon-bookings-table tbody,
	.salon-bookings-table tr,
	.salon-bookings-table td {
		display: block;
		width: 100%;
	}

	.salon-bookings-table tr {
		margin-bottom: 1rem;
		border: 1px solid #e5e5e5;
		border-radius: 6px;
		padding: 0.5rem;
	}

	.salon-bookings-table td {
		border: none;
		display: flex;
		justify-content: space-between;
	}

	.salon-bookings-table td::before {
		content: attr(data-label);
		font-weight: 600;
	}
}