/* =========================================================================
   Trang đặt lịch — khoác hệ thiết kế "noir & 24K gold" của trang chủ.

   VÌ SAO CÓ FILE NÀY: dự án có HAI hệ thiết kế. luxury.css (đen + vàng) cho ba trang khách xem,
   app.css (kem + nâu đất #b06a4f) cho phần quản trị. Trang đặt lịch là trang KHÁCH xem nhưng lại
   dùng class của app.css, nên nó hiện ra dưới dạng thẻ TRẮNG nằm trên nền TỐI, nút bấm màu nâu đất
   không có ở đâu khác trên site. Đó không phải "thiếu chăm chút" mà là hai hệ màu chọi nhau trên
   cùng một trang.

   CÁCH LÀM: mọi thứ dưới đây bọc trong .luxe-booking. Không sửa một dòng nào của app.css, nên các
   trang quản trị giữ nguyên diện mạo cũ. Đây là phép cộng, không phải phép thay thế.

   Ba thứ bị khoá cứng cho toàn trang:
     - MỘT chủ đề: tối. Không có mảng sáng nào chen vào giữa.
     - MỘT màu nhấn: vàng. Không nâu đất, không xanh lá, không xanh dương.
     - MỘT hệ bo góc: thẻ và ô nhập 1rem, nút bấm bo tròn hoàn toàn — y như trang chủ.
   ========================================================================= */

.luxe-booking {
    font-family: var(--font-sans);
    color: var(--luxe-body);
    max-width: 760px;
    padding-bottom: 7rem;   /* chừa chỗ cho thanh nút dính đáy trên điện thoại */
}

/* ============================ Thanh đầu trang ============================ */
/*
   Trước đây trang đặt lịch trần trụi: mở ra là thấy ngay chữ "Book an appointment", không logo,
   không đường quay lại, không số điện thoại. Khách đi từ trang chủ sang có cảm giác rơi sang một
   website khác. Thanh này mỏng (56px) nên không ăn tranh chỗ của nội dung.
*/
.booking-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 56px;
    padding: 0 1rem;
    background: rgba(9, 8, 12, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.booking-topbar a {
    text-decoration: none;
    white-space: nowrap;
}

.booking-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--luxe-pearl);
}

.booking-brand-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--luxe-gold-light);
}

.booking-topbar-call {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--luxe-gold-light);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 9999px;
    padding: 0.4rem 0.85rem;
    min-height: 36px;
}

.booking-topbar-call:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--luxe-pearl);
}

/* ============================ Tiêu đề & tiến độ ============================ */

.luxe-booking h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--luxe-pearl);
    margin: 0 0 1.25rem;
}

.luxe-booking h3 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--luxe-gold-light);
    margin: 1.75rem 0 0.65rem;
}

.luxe-booking .wizard-steps {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.luxe-booking .wizard-step {
    flex: 1;
    height: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    transition: background-color 0.35s ease;
}

/* Bước đã qua: vàng đặc. Bước đang làm: vàng mờ. Hai trạng thái khác nhau rõ ràng, không cần chú thích. */
.luxe-booking .wizard-step.done { background: var(--luxe-gold-bright); opacity: 1; }
.luxe-booking .wizard-step.current { background: var(--luxe-gold); opacity: 0.55; }

.luxe-booking .wizard-caption {
    font-size: 0.8rem;
    color: var(--luxe-muted);
    margin-bottom: 1.25rem;
}

/* ============================ Ô "Cách hoạt động" ============================ */

.luxe-booking .help {
    background: var(--luxe-surface);
    border: 1px solid var(--luxe-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.luxe-booking .help > summary {
    color: var(--luxe-gold-light);
    background: transparent;
    border: 0;
    font-weight: 600;
    min-height: 44px;
}

.luxe-booking .help > summary:hover { background: rgba(212, 175, 55, 0.08); }
.luxe-booking .help[open] > summary { border-bottom: 1px solid var(--luxe-border); }

.luxe-booking .help-icon {
    background: rgba(212, 175, 55, 0.18);
    color: var(--luxe-gold-bright);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.luxe-booking .help[open] .help-icon {
    background: var(--luxe-gold);
    color: #0c0a10;
}

.luxe-booking .help-body { color: var(--luxe-body); }
.luxe-booking .help-body strong { color: var(--luxe-pearl); }
.luxe-booking .help-body em { color: var(--luxe-gold-light); font-style: normal; font-weight: 600; }

/* ============================ Danh sách chọn ============================ */

.luxe-booking .pick-list {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .pick {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.15rem;
    min-height: 64px;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1rem;
    color: var(--luxe-body);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
}

.luxe-booking .pick:hover {
    border-color: rgba(212, 175, 55, 0.45);
    background: var(--luxe-surface-hover);
}

/* Phản hồi chạm: lún xuống 1px. Nhỏ thôi, nhưng là thứ làm nút "có cảm giác bấm được". */
.luxe-booking .pick:active { transform: translateY(1px); }

.luxe-booking .pick.selected {
    border-color: var(--luxe-gold-bright);
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.04) 100%);
}

.luxe-booking .pick-name {
    font-weight: 600;
    color: var(--luxe-pearl);
}

.luxe-booking .pick.selected .pick-name { color: var(--luxe-gold-light); }
.luxe-booking .pick-meta { font-size: 0.8rem; color: var(--luxe-muted); }

.luxe-booking .pick-price {
    font-weight: 800;
    color: var(--luxe-gold-bright);
    white-space: nowrap;
}

.luxe-booking .pick-check {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    transition: all 0.2s ease;
}

.luxe-booking .pick.selected .pick-check {
    border-color: var(--luxe-gold-bright);
    background: var(--luxe-gold-bright);
    color: #0c0a10;
}

/* ============================ Dải ngày & khung giờ ============================ */

.luxe-booking .day-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    /* Cuộn dừng đúng từng thẻ ngày, không dừng lưng chừng giữa hai ngày. */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* Thanh cuộn mặc định của Windows dày và xám, cắt ngang giữa giao diện đen-vàng trông như lỗi. */
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.luxe-booking .day-strip::-webkit-scrollbar { height: 4px; }
.luxe-booking .day-strip::-webkit-scrollbar-track { background: transparent; }

.luxe-booking .day-strip::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.35);
    border-radius: 9999px;
}

.luxe-booking .day-chip {
    scroll-snap-align: start;
    flex: none;
    min-width: 58px;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0.35rem;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.85rem;
    color: var(--luxe-body);
    font: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxe-booking .day-chip:hover { border-color: rgba(212, 175, 55, 0.45); }
.luxe-booking .day-chip .dow { font-size: 0.68rem; text-transform: uppercase; color: var(--luxe-muted); letter-spacing: 0.06em; }
.luxe-booking .day-chip .dom { font-size: 1.2rem; font-weight: 700; color: var(--luxe-pearl); }

.luxe-booking .day-chip.selected {
    background: var(--luxe-gold);
    border-color: var(--luxe-gold-bright);
}

.luxe-booking .day-chip.selected .dow { color: rgba(12, 10, 16, 0.75); }
.luxe-booking .day-chip.selected .dom { color: #0c0a10; }

.luxe-booking .slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .slot {
    min-height: 48px;
    background: var(--luxe-surface-card);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    color: var(--luxe-pearl);
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* giờ giấc thẳng cột, không nhảy chữ số */
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxe-booking .slot:hover { border-color: rgba(212, 175, 55, 0.5); background: var(--luxe-surface-hover); }

.luxe-booking .slot.selected {
    background: var(--luxe-gold);
    border-color: var(--luxe-gold-bright);
    color: #0c0a10;
    font-weight: 800;
}

/* Trạng thái rỗng: nói rõ phải làm gì tiếp, không để một khoảng trắng khó hiểu. */
.luxe-booking .slot-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--luxe-muted);
    background: var(--luxe-surface);
    border: 1px dashed var(--luxe-border);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .slot-empty em { color: var(--luxe-gold-light); font-style: normal; font-weight: 600; }

/* ============================ Bảng tóm tắt ============================ */

.luxe-booking .summary-card {
    background: var(--luxe-surface-card);
    border: 1px solid var(--luxe-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.luxe-booking .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--luxe-pearl);
}

.luxe-booking .summary-row:last-child { border-bottom: 0; }
.luxe-booking .summary-row .label { color: var(--luxe-muted); font-size: 0.85rem; }

.luxe-booking .summary-total {
    background: rgba(212, 175, 55, 0.1);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    font-weight: 800;
    color: var(--luxe-gold-bright);
    font-size: 1.05rem;
}

/* ============================ Mã đặt chỗ ============================ */

.luxe-booking .code-box {
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.luxe-booking .code-box .muted { color: var(--luxe-muted); font-size: 0.85rem; }

.luxe-booking .code-box .code {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--luxe-gold-bright);
    margin-top: 0.35rem;
}

/* ============================ Ô nhập ============================ */

.luxe-booking .field { margin-bottom: 1.15rem; }

.luxe-booking .field > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--luxe-pearl);
    margin-bottom: 0.4rem;
}

.luxe-booking .input {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.1rem;
    background: rgba(10, 8, 15, 0.6);
    border: 1px solid var(--luxe-border);
    border-radius: 0.85rem;
    color: var(--luxe-pearl);
    /* 16px là mức tối thiểu: nhỏ hơn thì iOS TỰ PHÓNG TO trang khi chạm vào ô nhập. */
    font-size: 1rem;
    font-family: inherit;
}

/* Chữ gợi ý phải đủ tương phản để đọc được, nhưng vẫn nhạt hơn chữ thật để không gây nhầm. */
.luxe-booking .input::placeholder { color: rgba(158, 153, 168, 0.85); }

.luxe-booking .input:focus {
    outline: 2px solid var(--luxe-gold-bright);
    outline-offset: 1px;
    border-color: var(--luxe-gold-bright);
    background: rgba(10, 8, 15, 0.85);
}

.luxe-booking .hint { color: var(--luxe-muted); font-size: 0.8rem; margin: 0.4rem 0 0; }

/* ============================ Nút ============================ */

.luxe-booking .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.6rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxe-booking .btn:active { transform: translateY(1px); }

/* Chữ đen trên nền vàng: tương phản khoảng 9:1, vượt xa ngưỡng AA. */
.luxe-booking .btn-primary {
    background: var(--luxe-gold-gradient);
    border-color: var(--luxe-gold-bright);
    color: #0c0a10;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
}

.luxe-booking .btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 26px rgba(212, 175, 55, 0.4);
}

.luxe-booking .btn-outline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--luxe-gold-light);
}

.luxe-booking .btn-outline:hover { background: rgba(212, 175, 55, 0.14); color: var(--luxe-pearl); }

.luxe-booking .btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--luxe-muted);
}

.luxe-booking .btn-ghost:hover { color: var(--luxe-pearl); border-color: rgba(255, 255, 255, 0.3); }

.luxe-booking .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.luxe-booking .btn-block { display: flex; width: 100%; margin-bottom: 0.65rem; }

/* ============================ Thanh điều hướng bước ============================ */

.luxe-booking .wizard-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Nút "Lùi" đứng trái, nút đi tiếp đứng phải — tay phải cầm điện thoại với tới nút chính dễ nhất. */
.luxe-booking .wizard-nav .btn-back { margin-right: auto; }
.luxe-booking .wizard-nav .btn-primary { margin-left: auto; }

/* ============================ Thông báo ============================ */

.luxe-booking .alert {
    padding: 0.9rem 1.15rem;
    border-radius: 0.85rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.luxe-booking .alert-info {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--luxe-gold-light);
}

.luxe-booking .alert-info strong { color: var(--luxe-gold-bright); }

.luxe-booking .alert-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.luxe-booking .alert-error {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* ============================ Chân trang ============================ */

.booking-foot {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--luxe-muted);
}

.booking-foot a { color: var(--luxe-gold-light); text-decoration: none; }
.booking-foot a:hover { color: var(--luxe-gold-bright); text-decoration: underline; }

/* ============================ Điện thoại ============================ */

@media (max-width: 639px) {
    /*
       Thanh nút dính đáy màn hình. Bước chọn dịch vụ dài tới 17 món; không có thanh này thì khách
       phải cuộn hết xuống cuối mới thấy nút đi tiếp, và nhiều người sẽ tưởng trang bị kẹt.
    */
    .luxe-booking .wizard-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 25;
        margin: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: rgba(9, 8, 12, 0.96);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(212, 175, 55, 0.25);
    }

    .luxe-booking .wizard-nav .btn { flex: 1; padding: 0 1rem; }
    .luxe-booking .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
    .luxe-booking .slot-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1024px) {
    .luxe-booking .slot-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================ Giảm chuyển động ============================ */
/*
   Người bật "giảm chuyển động" trong hệ điều hành thường làm vậy vì chuyển động gây chóng mặt
   hoặc buồn nôn. Tắt hết, giữ lại đổi màu để phản hồi thao tác vẫn còn.
*/
@media (prefers-reduced-motion: reduce) {
    .luxe-booking * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .luxe-booking .pick:active,
    .luxe-booking .btn:active { transform: none; }

    .luxe-booking .day-strip { scroll-behavior: auto; }
}