/* ============================================================
   RESPONSIVE OPTIMIZATION - QUAN TEA BOOKING SYSTEM
   ============================================================ */

/* --- 1. Reset Container & Global Mobile Fix --- */
.restaurant-booking-wrapper {
    padding: 15px; 
    background-attachment: scroll; /* Tránh giật lag trên iOS */
}

.booking-step-container {
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Fix iOS Auto-zoom khi click vào input */
.restaurant-booking-wrapper input, 
.restaurant-booking-wrapper select, 
.restaurant-booking-wrapper textarea {
    font-size: 12px !important; 
}

/* --- 2. Bước 1: Chọn trải nghiệm (Tối ưu 1 cột - 2 hàng) --- */
@media (max-width: 991px) {
    .experience-grid {
        display: flex!important;
        flex-direction: column; /* Ép thành 1 cột */
        align-items: center;
        gap: 25px; 
    }
    
    .experience-grid::after {
        display: none !important; /* Bỏ đường kẻ dọc giữa */
    }

    .experience-card-item {
        width: 100% !important;
        max-width: 480px; /* Đảm bảo không quá bè trên Tablet */
        height: 380px !important; /* Chiều cao tối ưu để thấy cả 2 thẻ trên 1 màn hình */
        border-radius: 15px;
    }

    .card-content-overlay {
        padding: 30px 20px !important;
        justify-content: flex-end; /* Đưa chữ xuống dưới để lộ ảnh */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    }

    .exp-title {
        font-size: 26px !important; /* Giảm size để tránh vỡ dòng như ảnh screenshot */
        margin-bottom: 10px !important;
        line-height: 1.2 !important;
    }

    .exp-desc {
        font-size: 15px !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        /* display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
        overflow: hidden; */
    }
}

/* --- 3. Layout chính (Bước 2, 3, 4) --- */
@media (max-width: 991px) {
    .experience-card-item::before{
        background: none!important;
    }
    .split-layout {
        flex-direction: column; /* Chồng dọc Panel trái và phải */
        gap: 0;
        box-shadow: none;
        background: transparent;
    }

    .glass-effect-form {
        width: 100% !important;
        border-radius: 20px 20px 0 0;
        padding: 30px 20px;
        order: 2; /* Đẩy form xuống dưới */
    }

   .preview-panel {
        width: 100% !important;
        height: auto !important; /* Để chiều cao tự giãn theo nội dung chữ */
        min-height: 200px;
        position: relative !important;
        display: block !important;
        order: 1; /* Luôn nằm trên cùng */
        border-radius: 20px 20px 0 0;
        overflow: hidden;
    }

    /* 2. Reset Overlay: Chuyển sang relative để đẩy nội dung bên dưới xuống */
    .preview-text-overlay {
        position: relative !important; /* Chìa khóa để đẩy Form xuống */
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
        background: rgba(0, 0, 0, 0.6) !important; /* Nền tối để rõ chữ trên ảnh nền */
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center !important;
    }

    /* 3. Chỉnh lại tiêu đề và mô tả cho gọn */
    #wf-preview-title {
        font-size: 24px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        line-height: 1.2;
    }

    #wf-preview-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        max-width: 100% !important;
        display: block !important; /* Hiện đầy đủ chữ hoặc dùng clamp nếu muốn */
    }

    /* 4. Đảm bảo Form nằm ngay sát dưới Panel ảnh */
    .glass-effect-form {
        order: 2; 
        width: 100% !important;
        border-radius: 0 0 20px 20px !important; /* Bo góc dưới cho liền mạch */
        margin-top: -1px; /* Khớp khít với phần trên */
        position: relative;
        z-index: 10;
    }
    .info-scroll-container {
        padding: 20px;
        height: 350px; /* Giới hạn vùng cuộn cho Điều khoản */
        border-radius: 0 0 20px 20px;
    }
}

/* --- 4. Tối ưu Form & Stepper cho Mobile nhỏ --- */
@media (max-width: 600px) {
    .form-grid-custom {
        grid-template-columns: 1fr; /* Form 1 cột hoàn toàn */
        gap: 5px;
    }

    .progress-stepper {
        margin: 15px auto;
        width: 140px;
    }

    .workflow-welcome-msg {
        font-size: 26px !important;
        line-height: 1.3;
        margin-bottom: 25px;
    }

    .btn-submit-gold {
        width: 100%; /* Nút to full màn hình dễ bấm */
        height: 48px;
        font-size: 16px;
        border-radius: 12px;
    }
    
    .f-group {
        margin-bottom: 10px;
    }
}

/* --- 5. Bước 4: Thanh toán & QR Code --- */
@media (max-width: 480px) {
    .payment-bank-container {
        flex-direction: column; /* QR và Thông tin ngân hàng chồng dọc */
        align-items: center;
        gap: 20px;
    }

    .qr-code-box {
        width: 160px;
        height: 160px;
        padding: 10px;
        background: #fff;
    }

    .bank-details-box {
        width: 100%;
        text-align: center;
        padding: 15px;
    }

    .transfer-note {
        font-size: 15px;
        padding: 12px;
        background: rgba(118, 76, 41, 0.2);
        border: 1px dashed #764C29;
        color: #fff;
    }
    
    .payment-final-total strong {
        font-size: 20px;
    }
}

/* --- 6. Hiệu ứng chuyển cảnh --- */
.workflow-content-box {
    animation: fadeInSlide 0.5s ease forwards;
}

@keyframes fadeInSlide {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}