/* ===============================
   navigation.css - Thanh điều hướng & bố cục sản phẩm
   =============================== */

/* === THANH ĐIỀU HƯỚNG === */
.wpr-rental-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* ✅ đổi wrap → nowrap để nằm 1 hàng */
    background: #f8fafc;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}


.wpr-nav-left,
.wpr-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* ✅ đổi wrap → nowrap để không bị xuống hàng */
}

.wpr-nav-right {
    margin-left: auto; /* ✅ đẩy toàn bộ cụm bên phải sang phải */
}

.wpr-nav-right .wpr-view-btn {
    margin-left: 6px;
}


.wpr-nav-right label {
    margin-right: 4px;
}

.wpr-sort-select {
    min-width: 140px; /* ✅ dropdown nhỏ gọn hơn */
}


.wpr-nav-left button,
.wpr-nav-right button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
	padding: 6px 26px 6px 12px; /* top, right, bottom, left */
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
	height: 36px; /* ✅ Giúp khung nút cao vừa, bao trọn chữ và icon */

}

.wpr-nav-left button:hover,
.wpr-nav-right button:hover {
    background: #f1f5ff;
    border-color: #0a7fff;
}

.wpr-nav-left .active,
.wpr-view-btn.active {
    background: #0a7fff;
    color: #fff;
    border-color: #0a7fff;
}

/* Dropdown sắp xếp */
.wpr-nav-right label {
    font-size: 14px;
    color: #333;
}

.wpr-sort-select {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    height: 32px;
    min-width: 120px;
    cursor: pointer;
}

/* Nút chế độ hiển thị */
.wpr-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
    padding: 6px 16px 6px 14px; /* top, right, bottom, left */
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    height: 36px;
    transition: all 0.2s ease;
}

.wpr-view-btn + .wpr-view-btn {
    margin-left: 6px;
}

.wpr-view-btn:hover {
    background: #f1f5ff;
    border-color: #0a7fff;
}

.wpr-view-btn.active {
    background: #0a7fff;
    color: #fff;
    border-color: #0a7fff;
}



.wpr-view-btn span {
    display: inline-block;
    vertical-align: middle;
}

/* Responsive - Thanh điều hướng */
@media (max-width: 768px) {
    .wpr-rental-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .wpr-nav-left,
    .wpr-nav-right {
        width: 100%;
        justify-content: flex-start;
    }

    .wpr-sort-select {
        min-width: 100px;
    }
}

/* ===============================
   HIỂN THỊ SẢN PHẨM (GRID / LIST)
   =============================== */
.wpr-filter-results {
    width: 100%;
    transition: all 0.3s ease;
}

/* === DẠNG LƯỚI === */
.wpr-filter-results.view-grid .wpr-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1024px) {
    .wpr-filter-results.view-grid .wpr-list-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .wpr-filter-results.view-grid .wpr-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .wpr-filter-results.view-grid .wpr-list-grid {
        grid-template-columns: 1fr;
    }
}

.wpr-filter-results.view-grid .wpr-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.wpr-filter-results.view-grid .wpr-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ✅ Đúng class: .wpr-card-thumb (không phải .wpr-thumb) */
.wpr-filter-results.view-grid .wpr-card-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.wpr-filter-results.view-grid .wpr-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wpr-filter-results.view-grid .wpr-card-body {
    padding: 10px;
    text-align: left;
}

/* === DẠNG DANH SÁCH === */
.wpr-filter-results.view-list .wpr-list-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wpr-filter-results.view-list .wpr-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    transition: box-shadow 0.2s ease;
}

.wpr-filter-results.view-list .wpr-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* ✅ Đúng class .wpr-card-thumb */
.wpr-filter-results.view-list .wpr-card-thumb {
    width: 200px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.wpr-filter-results.view-list .wpr-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: left;
}

.wpr-filter-results.view-list .wpr-card-body h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    color: #111827;
}

.wpr-filter-results.view-list .wpr-card-body .wpr-card-meta {
    color: #555;
    font-size: 14px;
}

@media (max-width: 600px) {
    .wpr-filter-results.view-list .wpr-card {
        flex-direction: column;
    }

    .wpr-filter-results.view-list .wpr-card-thumb {
        width: 100%;
        height: 180px;
    }
}

/* ======================================================
   FIX QUAN TRỌNG: ĐẢM BẢO HÌNH ẢNH VÀ NỘI DUNG HIỂN THỊ ĐÚNG
   ====================================================== */

/* Cho thẻ <a> bao ngoài chiếm toàn bộ khối card */
.wpr-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* === GRID VIEW === */
.wpr-filter-results.view-grid .wpr-card > a {
    flex-direction: column;
}

.wpr-filter-results.view-grid .wpr-card-thumb {
    width: 100%;
    height: 180px; /* cố định chiều cao đẹp */
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;
}

.wpr-filter-results.view-grid .wpr-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === LIST VIEW === */
.wpr-filter-results.view-list .wpr-card > a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.wpr-filter-results.view-list .wpr-card-thumb {
    width: 220px;
    height: 150px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.wpr-filter-results.view-list .wpr-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpr-filter-results.view-list .wpr-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: left;
}

@media (max-width: 600px) {
    .wpr-filter-results.view-list .wpr-card > a {
        flex-direction: column;
    }

    .wpr-filter-results.view-list .wpr-card-thumb {
        width: 100%;
        height: 200px;
    }
}

/* ======================================================
   FIX CUỐI CÙNG CHO GRID + LIST
   ====================================================== */

/* === LIST VIEW === */
.wpr-filter-results.view-list .wpr-card {
    width: 100%; /* chiếm toàn hàng */
}

.wpr-filter-results.view-list .wpr-card > a {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.wpr-filter-results.view-list .wpr-card-body {
    flex: 1;
    min-width: 0; /* giúp text không bó hẹp */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: left;
    overflow: hidden;
}

.wpr-filter-results.view-list .wpr-card-body h3,
.wpr-filter-results.view-list .wpr-card-body p,
.wpr-filter-results.view-list .wpr-card-body small {
    white-space: normal;
    text-overflow: ellipsis;
}

/* === GRID VIEW === */
.wpr-filter-results.view-grid .wpr-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.wpr-filter-results.view-grid .wpr-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* === GRID VIEW - ẢNH VUÔNG === */
.wpr-filter-results.view-grid .wpr-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1; /* ✅ ép hình vuông */
    overflow: hidden;
    position: relative;
    background: #f9f9f9;
}

.wpr-filter-results.view-grid .wpr-card-thumb img {
    width: 100%;
    height: 100% !important; /* ✅ đảm bảo luôn lấp đầy khung */
    object-fit: cover;
    display: block;
}


.wpr-filter-results.view-grid .wpr-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wpr-filter-results.view-grid .wpr-card-body {
    padding: 10px 12px;
    text-align: left;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .wpr-filter-results.view-grid .wpr-card-thumb {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .wpr-filter-results.view-grid .wpr-card-thumb {
        height: 140px;
    }
}

@media (max-width: 768px) {
    .wpr-filter-results.view-grid .wpr-card-thumb {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 480px) {
    .wpr-filter-results.view-grid .wpr-card-thumb {
        aspect-ratio: 1 / 1;
    }
}

/* ===============================
   FIX LIST VIEW - ẢNH ĐỀU CHIỀU CAO
   =============================== */
.wpr-filter-results.view-list .wpr-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    min-height: 160px; /* chiều cao tối thiểu đồng đều */
}

.wpr-filter-results.view-list .wpr-card .wpr-thumb,
.wpr-filter-results.view-list .wpr-card .wpr-card-thumb {
    width: 220px;      /* chiều ngang cố định */
    height: 160px;     /* chiều cao cố định */
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f8f8;
}

.wpr-filter-results.view-list .wpr-card .wpr-thumb img,
.wpr-filter-results.view-list .wpr-card .wpr-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* giữ tỉ lệ và crop đều */
    object-position: center;
    display: block;
}