/*
 * Res.Viet360 Connector — form đặt bàn: bố cục cơ bản, không phụ thuộc theme.
 * Màu lấy theo chữ của theme (currentColor); theme đổi bằng biến:
 *   --rv360-line (viền ô), --rv360-accent / --rv360-on-accent (ô đang chọn, nút gửi), --rv360-error, --rv360-muted (độ mờ chữ phụ), --rv360-max (rộng form).
 * Theme BLA Asian ghi đè trong assets/css/theme.css (mục "FORM ĐẶT BÀN").
 */
.rv360-rsv {
  --rv360-line: rgba(127, 127, 127, .45);
  --rv360-accent: currentColor;
  --rv360-on-accent: #fff;
  --rv360-error: #c0392b;
  --rv360-muted: .7;
  --rv360-max: 820px;
  --rv360-gap: 14px;
  max-width: var(--rv360-max);
  margin-inline: auto;
  scroll-margin-top: 120px; /* đầu trang cố định của theme */
}
.rv360-rsv *, .rv360-rsv *::before, .rv360-rsv *::after { box-sizing: border-box; }
/* Giữ chỗ cho form khi JS chưa dựng xong (bớt xô trang — CLS): theme đặt --rv360-loading-h bằng chiều cao bước 1 lúc chưa chọn ngày (T19) */
.rv360-rsv[data-rv360]:has(> .rv360-fallback) { min-height: var(--rv360-loading-h, 440px); }
@media (max-width: 767px) { .rv360-rsv[data-rv360]:has(> .rv360-fallback) { min-height: var(--rv360-loading-h-m, 710px); } }
.rv360-rsv fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rv360-rsv p { margin: 0; }

.rv360-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--rv360-gap); }
.rv360-grid + .rv360-grid { margin-top: 36px; }
.rv360-field.is-wide { grid-column: 1 / -1; }
.rv360-pick__side { display: flex; flex-direction: column; gap: 28px; }
.rv360-label { display: block; margin: 0 0 10px; padding: 0; font-size: .95em; opacity: var(--rv360-muted); }

.rv360-rsv input[type="text"], .rv360-rsv input[type="tel"], .rv360-rsv input[type="email"],
.rv360-rsv input[type="number"], .rv360-rsv input[type="time"], .rv360-rsv textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; margin: 0;
  border: 1px solid var(--rv360-line); border-radius: 0; background: transparent; color: inherit; font: inherit;
}
.rv360-rsv textarea { min-height: 96px; resize: vertical; }
.rv360-rsv [aria-invalid="true"] { border-color: var(--rv360-error); }

/* Ô chọn (ngày, số người, giờ) */
.rv360-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv360-chip, .rv360-day, .rv360-cal__nav {
  min-width: 44px; min-height: 44px; padding: 6px 10px; margin: 0;
  border: 1px solid var(--rv360-line); border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: 1.2; cursor: pointer;
}
.rv360-chip[aria-pressed="true"], .rv360-day[aria-pressed="true"] { background: var(--rv360-accent); border-color: var(--rv360-accent); color: var(--rv360-on-accent); }
.rv360-chip:disabled, .rv360-day:disabled, .rv360-cal__nav:disabled { opacity: .28; cursor: not-allowed; }
.rv360-day.is-none { border-color: transparent; }
.rv360-party__more { margin-top: 12px; }
.rv360-party__input, .rv360-time__input { max-width: 200px; margin-top: 10px !important; }

/* Lịch theo tháng */
.rv360-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rv360-cal__title { text-transform: capitalize; }
.rv360-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 400px) { .rv360-cal__grid { gap: 2px; } } /* ô ngày ≥ 44px ở màn hình 360px */
.rv360-cal__wd { text-align: center; font-size: .8em; opacity: var(--rv360-muted); padding: 2px 0; }
.rv360-day { min-width: 0; padding: 6px 0; text-align: center; }

.rv360-check { display: flex; gap: 12px; align-items: center; min-height: 44px; margin-top: 24px; cursor: pointer; } /* cả dòng chữ là vùng bấm */
.rv360-check input { margin: 0; width: 22px; height: 22px; flex: none; accent-color: var(--rv360-accent); }
.rv360-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rv360-privacy { margin-top: 18px !important; font-size: .9em; opacity: var(--rv360-muted); }
.rv360-privacy a { color: inherit; text-decoration: underline; }
.rv360-note { margin-top: 10px !important; font-size: .9em; opacity: var(--rv360-muted); }
.rv360-note.is-large { opacity: 1; }
.rv360-intake:not([hidden]) { margin-bottom: 24px; padding: 12px 16px; border: 1px solid var(--rv360-line); }
.rv360-error { color: var(--rv360-error); font-size: .95em; margin-top: 14px !important; }
.rv360-error:empty { display: none; }
.rv360-actions { margin-top: 26px !important; text-align: center; }
.rv360-submit { min-width: 200px; min-height: 52px; cursor: pointer; }
.rv360-submit:disabled { opacity: .6; cursor: progress; }

/* Hai bước (T19): bước 1 ngày/số người/giờ → "Weiter", bước 2 tóm tắt + thông tin khách ăn. Bước ẩn vẫn giữ dữ liệu. */
.rv360-step[hidden] { display: none !important; }
.rv360-rsv .rv360-step__title { margin: 0 0 28px; padding: 0; text-align: center; font-size: 1.3em; font-weight: 500; line-height: 1.3; }
.rv360-step__title:focus { outline: none; } /* nhận tiêu điểm bằng mã khi đổi bước (tabindex=-1), không phải ô bấm */
.rv360-rsv .rv360-step__num { display: block; margin-bottom: 6px; font-family: var(--wp--preset--font-family--body, inherit); font-size: .62em; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: var(--rv360-muted); }
.rv360-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 32px; padding: 14px 18px; border: 1px solid var(--rv360-line); }
.rv360-summary__body { flex: 1 1 260px; min-width: 0; }
.rv360-summary__text { font-weight: 500; }
.rv360-summary .rv360-note { margin-top: 6px !important; }
.rv360-back { flex: none; min-height: 44px; min-width: 44px; padding: 6px 18px; margin: 0; border: 1px solid var(--rv360-line); border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rv360-back:hover, .rv360-back:focus-visible { border-color: var(--rv360-accent); }
.rv360-step--2 .rv360-guest { margin-top: 0; }

/* Màn hình thành công */
.rv360-done { text-align: center; padding: 30px 20px; border: 1px solid var(--rv360-line); }
.rv360-done:focus { outline: none; }
.rv360-done__title { margin: 0 0 18px; }
.rv360-done__label { opacity: var(--rv360-muted); font-size: .9em; letter-spacing: .1em; text-transform: uppercase; }
.rv360-done__code { font-size: 2em; font-weight: 600; letter-spacing: .12em; margin: 4px 0 12px !important; }
.rv360-done__when { margin-bottom: 8px !important; }
.rv360-unavailable { text-align: center; }
.rv360-unavailable p + p { margin-top: 12px; }

@media (max-width: 767px) {
  .rv360-grid { grid-template-columns: 1fr; }
  .rv360-summary { flex-direction: column; align-items: stretch; text-align: center; }
  .rv360-summary__body { flex: none; }
}