/**
 * Card "chọn ngày & số khách" ở trang chi tiết khách sạn (nằm ngay trên danh sách phòng).
 *
 * ⚠️ CỐ Ý ĐỂ Ở ĐÂY, KHÔNG bỏ vào themes/{Theme}/assets/css/main.css: file main.css thật sự
 * được nạp là bản đã publish ở public/themes/{theme}/dist/assets/css/main.css, và hai bản
 * đó ĐÃ LỆCH NHAU (mỗi bên có rule riêng) nên sửa bản trong themes/ không hề có tác dụng.
 * File này nạp thẳng bằng <link> trong hotel-search-form.blade.php nên luôn khớp markup.
 *
 * ⚠️ SPECIFICITY: theme khai form này bằng chuỗi 5 class
 *      .hotel_rooms_form .form-search-rooms .form-search-row > div .form-group .form-content
 *      .hotel_rooms_form .form-search-rooms .form-search-row .g-button-submit .btn
 * nên mọi rule ở đây phải bắt đầu bằng `.hotel_rooms_form.hotel-search-card .form-search-rooms`
 * (hai class nằm trên CÙNG một thẻ) mới đủ nặng để đè. Bớt một mắt xích là chiều cao ô và
 * nút quay về số cũ (45px / padding 10px) và nút lệch hẳn so với ô nhập — đã dính đúng lỗi này.
 * Không dùng !important: chỉ cần đủ nặng là được.
 */

.hotel_rooms_form.hotel-search-card {
    padding: 18px 20px;
}

/* Module (Dhome…): danh sách phòng nằm CHUNG card với form (form trên - phòng dưới).
   Ngăn cách bằng khoảng trống + đường mảnh, không tách thành card riêng có khe xám. */
.hotel_rooms_form.hotel-search-card .hotel-room-list-inner {
    margin-top: 18px;
    padding-top: 6px;
    border-top: 1px solid #eef1f3;
}

/* Danang24h: form ĐỨNG RIÊNG (quick-search đã tách ra card khác) → là phần tử cuối, bỏ
   margin đáy 25px cho khỏi thừa khoảng trắng. Các theme khác: form + "Tìm kiếm nhanh" vẫn
   chung 1 card, form KHÔNG phải last-child → giữ nguyên 25px ngăn cách hai khối.
   Dùng :last-child để một rule chạy đúng cho cả hai kiểu. */
.hotel_rooms_form.hotel-search-card .form-search-rooms:last-child {
    margin-bottom: 0;
}

/* Một hàng: ngày | phòng & khách | nút. KHÔNG dùng col-md-5/5/2 — card rộng cả trang
   nên chia theo cột bootstrap ra hai ô dài lê thê còn nút thì lệch hẳn sang phải.
   width/max-width khai đè .row > * của Bootstrap 5 (width:100% làm mỗi ô chiếm trọn dòng). */
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
}

.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > .hs-col {
    flex: 1 1 240px;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > .hs-col-action {
    flex: 0 0 auto;
    align-self: flex-end;
}

@media (min-width: 992px) {
    /* Đủ chỗ thì ép đúng một hàng, không cho ô nào rớt xuống */
    .hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row {
        flex-wrap: nowrap;
    }
}

/* Ô nhập: nền trắng cho nổi trên nền card, viền sáng lên khi rê chuột / mở dropdown */
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .form-group {
    height: 52px;               /* chốt CHIỀU CAO NGOÀI (đã gồm viền) để bằng đúng nút */
    box-sizing: border-box;
    background: #fff;
    border-color: #dde3e9;
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}

/* Bootstrap gắn .show lên chính .form-content (phần tử data-bs-toggle), không lên .form-group */
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .form-group:hover,
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .form-group:has(.dropdown-toggle.show) {
    border-color: var(--primary-color, #155bd9);
    box-shadow: 0 0 0 3px rgba(21, 91, 217, .08);
}

.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .form-group .form-content {
    height: 100%;               /* lấp trọn form-group (đã trừ viền qua box-sizing) */
    line-height: 50px;          /* = 52 - 2 viền → chữ canh giữa đúng */
    padding-left: 44px;
    padding-right: 36px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .form-icon {
    left: 16px;
    color: var(--primary-color, #155bd9);
    font-size: 16px;
    line-height: 1;
}

/* Mũi tên xổ: bản gốc để z-index:-1 nên nó chìm dưới nền ô, coi như mất hẳn */
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > div .arrow {
    right: 16px;
    z-index: 1;
    font-size: 16px;
    color: #9aa7b1;
}

/* Nút: theme để height:100% + width:100% (dành cho ô col-md-2 cũ) → phải khai đè hết,
   nếu không nút bị kéo cao bằng cả cột (gồm cả chiều cao nhãn) và lệch lên trên. */
.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row .g-button-submit {
    display: block;
    width: auto;
    height: auto;
}

.hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row .g-button-submit .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;               /* = chiều cao NGOÀI của ô nhập → đỉnh & đáy trùng khít */
    box-sizing: border-box;
    min-width: 190px;
    padding: 0 24px;
    margin: 0;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 991px) {
    .hotel_rooms_form.hotel-search-card {
        padding: 16px;
    }

    .hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row > .hs-col {
        flex: 1 1 100%;
    }

    .hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row .g-button-submit,
    .hotel_rooms_form.hotel-search-card .form-search-rooms .form-search-row .g-button-submit .btn {
        width: 100%;
    }
}