/**
 * Bộ chọn giờ đặt bàn. Bám theo biến màu của theme để đổi màu thương hiệu là đổi theo,
 * không phải sửa file này.
 */

.rstl-booking {
	text-align: left;
	margin-bottom: 1.5rem;
}

.rstl-booking-controls {
	display: flex;
	gap: .6rem;
	margin-bottom: 1.25rem;
	/* Căn đáy chứ không căn đỉnh: GTranslate dịch nhãn sang tiếng khác có thể làm một nhãn
	   dài ra 2 dòng, căn đỉnh sẽ khiến ô select của cột đó tụt xuống lệch hẳn so với 2 cột
	   còn lại. Căn đáy thì các ô select luôn thẳng hàng dù nhãn dài ngắn khác nhau. */
	align-items: flex-end;
}

.rstl-booking-control {
	display: block;
	min-width: 0; /* Cho phép select co lại trong flex thay vì tràn ra ngoài thẻ. */
}

.rstl-booking-control-party { flex: 0 1 6rem; }
.rstl-booking-control-date { flex: 1 1 auto; }
.rstl-booking-control-time { flex: 0 1 7rem; }

.rstl-booking-control > span {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .35rem;
	color: #000;
}

.rstl-booking-control select {
	width: 100%;
	padding: .6rem .5rem;
	border: 1px solid var(--theme-color-light-dark, #ccc);
	border-radius: 4px;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	box-sizing: border-box;
	cursor: pointer;
}

.rstl-booking-control select:focus-visible {
	outline: 2px solid var(--theme-color-primary, #8B1E1E);
	outline-offset: 1px;
}

.rstl-booking-slots {
	border-top: 1px solid var(--theme-color-light, #e5e5e5);
	padding-top: 1.25rem;
}

.rstl-booking-slots-title {
	margin: 0 0 .75rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #000;
}

.rstl-booking-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
}

.rstl-slot {
	padding: .6rem .25rem;
	border: 1px solid var(--theme-color-light-dark, #ccc);
	border-radius: 4px;
	background: #fff;
	color: var(--theme-color-primary, #8B1E1E);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.rstl-slot:hover { border-color: var(--theme-color-primary, #8B1E1E); }

.rstl-slot:focus-visible {
	outline: 2px solid var(--theme-color-primary, #8B1E1E);
	outline-offset: 1px;
}

.rstl-slot.is-selected {
	background: var(--theme-color-primary, #8B1E1E);
	border-color: var(--theme-color-primary, #8B1E1E);
	color: #fff;
}

/* Trạng thái hết chỗ. Chưa dùng tới ở bản này (mọi khung giờ đều nhận đặt) — sẵn sàng
   cho phần quản lý sức chứa sau này chỉ cần thêm thuộc tính disabled vào nút. */
.rstl-slot[disabled] {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.rstl-booking-note {
	margin: .75rem 0 0;
	font-size: .9rem;
	color: #666;
}

/* ============================ Hai bước ============================ */

.rstl-step[hidden] { display: none; }

/* --- Bước 1: nút chuyển sang bước điền thông tin --- */

.rstl-booking-next {
	width: 100%;
	background: var(--theme-color-primary, #8B1E1E);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: .8rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
}

.rstl-booking-next:hover { opacity: .9; }

/* --- Bước 2: đầu trang, tóm tắt lựa chọn, thông tin liên hệ --- */

.rstl-step-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.25rem;
}

.rstl-booking-back {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--theme-color-light, #f0f0f0);
	color: #000;
	cursor: pointer;
}

.rstl-booking-back:hover { background: var(--theme-color-light-dark, #e0e0e0); }
.rstl-booking-back svg { width: 1.2rem; height: 1.2rem; }

.rstl-step-title {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: #000;
}

.rstl-step-subtitle {
	font-size: .85rem;
	line-height: 1.3;
	color: #666;
}

.rstl-booking-summary {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--theme-color-light, #e5e5e5);
}

.rstl-summary-row {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .95rem;
	line-height: 1.5;
	color: #000;
}

.rstl-summary-row + .rstl-summary-row { margin-top: .85rem; }

.rstl-summary-row svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .15rem;
	color: var(--theme-color-primary, #8B1E1E);
}

.rstl-summary-row b { font-weight: 600; }

.rstl-step-section {
	margin-bottom: .75rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #000;
}

/* Ô nhập gốc của CF7 sau khi đã được bộ chọn thay thế. Cần !important vì theme đặt
   display:flex cho .row với độ ưu tiên cao hơn thuộc tính hidden mặc định. */
.rstl-hidden { display: none !important; }

/* Thông báo phản hồi và trạng thái gửi form */
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0 !important;
	padding: 0.85rem 1.25rem !important;
	border-radius: 6px !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	text-align: center !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border: 1.5px solid #28a745 !important;
	background: #e8f5e9 !important;
	color: #1b5e20 !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border: 1.5px solid #dc3545 !important;
	background: #ffebee !important;
	color: #b71c1c !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #dc3545 !important;
	font-size: 0.85rem !important;
	margin-top: 0.25rem !important;
	display: block !important;
	text-align: left !important;
}

.wpcf7 .wpcf7-spinner {
	margin: 0.75rem auto 0 !important;
	display: block !important;
}