/*
 * KM Property Manager - Products Template Styles
 * Design from templates-ban.html
 * Templates: archive-sale.php, archive-rent.php, archive-all.php
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --primary: #F05A22;
    --secondary: #2e438f;
    --accent: #B8860B;
    --gray-light: #F8FAFC;
    --border-light: #E2E8F0;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #aab7ca;
    --slate-500: #334155bf;
    --slate-600: #000000;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --gray-50: #F1F5F9;
    --blue-50: #eff6ff;
    --red-400: #f87171;
    --red-500: #ef4444;
    --green-100: #dcfce7;
    --green-600: #16a34a;
    --green-700: #15803d;
    --orange-500: #c2812a;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --header-height: 60px;
    /* Flatsome theme header height */
    --top-nav-height: 0px;
    --results-header-height: 0px;
    --featured-listing-height: 0px;
}

/* ==========================================================================
   Base Reset (Scoped to .km-sale-page / .km-rent-page / .km-all-page)
   ========================================================================== */
.km-sale-page,
.km-rent-page,
.km-all-page {
    background: #fff;
}

.km-sale-page *,
.km-rent-page *,
.km-all-page * {
    box-sizing: border-box;
}

.km-sale-page a,
.km-rent-page a,
.km-all-page a {
    color: rgba(51, 65, 85, .5);
    text-decoration: none;
}

.km-sale-page p,
.km-rent-page p,
.km-all-page p {
    margin: 0;
}

/* ==========================================================================
   Top Navigation (Sticky Filter Bar)
   ========================================================================== */
.top-navigation {
    background: #fff;
    position: sticky;
    top: 60px;
    z-index: 100;
}

.km-head-wrapper {
    background: #fff;
}

.top-navigation-inner {
    padding: 15px 24px 5px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    margin: 0 auto;

}

/* Filter Buttons */
.filter-button {
    border: 1px solid var(--slate-300);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    background: #fff;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
    margin: 0;
    text-transform: math-auto;
    letter-spacing: normal;
    color: #334155;
    opacity: .5;
}

/* Active filter state: when user has selected a filter */
.filter-button.km-filter-active {
    border-color: #2e438f;
    background: #ecf1ff;
    color: #334155;
    opacity: 1;
}

.filter-dropdown::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: 0.6rem;
    margin-left: 8px;
    color: var(--slate-500);
}

.filter-button.km-filter-active .filter-dropdown::after,
.filter-button.km-filter-active::after {
    color: #2e438f;
}

/* Dropdown Panels */
.km-filter-dropdown-wrap {
    position: relative;
}

.km-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.km-dropdown-panel.km-open {
    display: flex;
    flex-direction: column;
}

/* Dropdown body: scrollable */
.km-dropdown-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.km-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--slate-700) !important;
    transition: background 150ms ease;
    white-space: nowrap;
    cursor: pointer;
}

.km-dropdown-item:hover {
    background: var(--slate-100);
}

.km-dropdown-item.km-active {
    color: var(--secondary) !important;
    font-weight: 600;
    background: var(--blue-50);
}

/* Dropdown Footer: Đặt lại / Áp dụng */
.km-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--slate-200);
    background: var(--gray-50);
}

.km-btn-reset {
    border: 1px solid var(--slate-300);
    background: #fff;
    color: var(--slate-700);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    margin: 0;
    line-height: 1.5rem;
    padding: 7px 12px;
    text-transform: math-auto;
}

.km-btn-reset:hover {
    background: var(--slate-100);
}

.km-btn-apply {
    border: none;
    background: #2e438f;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    margin: 0;
    padding: 7px 12px;
    text-transform: math-auto;
    line-height: 1.5rem;

}

.km-btn-apply:hover {
    background: #1e2f6f;
}

/* ==========================================================================
   Price Dropdown (Pill buttons + custom inputs)
   ========================================================================== */
.km-dropdown-price {
    min-width: 340px;
}

.km-price-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--slate-800);
    margin: 0 0 0.75rem 0;
    padding: 10px 1rem;
}

.km-price-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem;
    margin: 0 !important;

}

.km-price-pill {
    border: 1px solid var(--slate-300);
    background: #fff;
    color: var(--slate-700);
    padding: 5px 12px;
    border-radius: 6px;
    line-height: 1.25rem;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
    white-space: nowrap;
    margin: 0 !important;
    text-transform: math-auto;
}

.km-price-pill:hover {
    border-color: #2e438f;
    color: #2e438f;
}

.km-price-pill.km-pill-active {
    border-color: #2e438f;
    background: #2e438f;
    color: #fff;
}

.km-price-sub {
    font-size: 0.8125rem;
    color: var(--slate-500);
    margin: 0 0 0.75rem 0;
    padding: 8px 1rem;
}

.km-price-inputs {
    display: flex;
    gap: 0.75rem;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
}

.km-price-input-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #aab7ca;
    border-radius: 6px;
    padding: 6px 12px;
    background: #fff;
    transition: border-color 150ms ease;
}

.km-price-input-wrap:focus-within {
    border-color: #2e438f;
}

.km-price-input-wrap label {
    font-size: 12px;
    color: #aab7ca;
    font-weight: 500;
    margin: 0;
}

.km-price-label-val {
    color: #2e438f;
    font-weight: 600;
    margin-left: 2px;
}

.km-price-input-wrap input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--slate-700) !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: auto !important;
    font-family: inherit;
    width: 100%;
    height: 24px !important;
}

.km-price-input-wrap input::placeholder {
    color: #aab7ca;
}

/* ==========================================================================
   Main Container
   ========================================================================== */
.main-container {
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   Results Header Bar (inside top-navigation)
   ========================================================================== */
.results-header-bar {
    max-width: 100%;
    margin: 0 auto;
}

.results-header-inner {
    margin: 0 auto;
    padding: 10px 24px 0;

}

.breadcrumbs {
    font-size: 14px;
    line-height: 1rem;
    font-weight: 400 !important;
    color: var(--slate-400) !important;
    margin-bottom: 0.5rem;
}

.breadcrumbs-link:hover {
    text-decoration: underline;
}

.results-row {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    border-bottom: 1px solid var(--slate-200);

}

.results-count {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--slate-600);
}

.results-count-number {
    font-weight: 700;
}

.sort-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.sort-label {
    color: var(--slate-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.km-sort-dropdown-wrap .km-dropdown-panel {
    right: 0;
    left: auto;
    /* Mở panel về bên trái để không bị tràn lề phải màn hình */
    min-width: 180px;
}

.km-sort-dropdown-wrap .filter-button {
    border: none;
    padding: 0;
    font-weight: 600;
    color: var(--secondary);
    background: transparent;
    opacity: 1;
}

.km-sort-dropdown-wrap .filter-dropdown::after {
    color: var(--secondary);
    font-size: 1rem;
    margin-left: 0.25rem;
}

.km-sort-dropdown-wrap .km-dropdown-item {
    font-weight: normal;
}

.km-sort-dropdown-wrap .km-dropdown-item.active {
    font-weight: 600;
    color: var(--secondary) !important;
    background: var(--slate-100);
}

/* ==========================================================================
   Featured Listing (Sticky)
   ========================================================================== */
.featured-listing {
    background: #fff;
    overflow: hidden;
    position: sticky;
    top: calc(60px + var(--top-nav-height, 150px));
    z-index: 40;
}

.featured-layout {
    gap: 20px;
    margin: 15px 24px 0px;
    display: flex;
    flex-direction: column;
    max-width: var(--container-width, 1080px);
    padding: 0 0 30px 0;
    border-bottom: 1px solid var(--slate-200);
}

.featured-media {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: 6px;
}

.featured-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 5;
}

.featured-media-image {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slick Gallery Styles */
.km-ft-gallery,
.km-ft-gallery .slick-list,
.km-ft-gallery .slick-track {
    height: 100%;
}

.km-ft-gallery .slick-slide {
    height: 100%;
}

.km-ft-gallery .slick-slide>div,
.km-ft-gallery .km-ft-gallery-link {
    height: 100%;
    display: block;
}

/* Hiển thị công cụ điều hướng mặc định của slick chỉ khi hover */
.km-ft-gallery .slick-arrow,
.km-ft-gallery .slick-dots {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Slick dots mặc định nằm hơi sâu bên dưới, đẩy gọn lên trên ảnh 1 chút */
.km-ft-gallery .slick-dots {
    bottom: 10px;
}

.km-ft-gallery .slick-dots li {
    margin: 0 2px;
}

.km-ft-gallery .slick-dots li button::before {
    color: #fff;
    opacity: 0.5;
    font-size: 10px;
    line-height: 20px;
}

.km-ft-gallery .slick-dots li.slick-active button::before {
    color: #fff;
    opacity: 1;
}

/* Các mũi tên mặc định của Slick có thể bị lệch margin cũ, cần reset */
.km-ft-gallery .slick-prev {
    left: 10px;
}

.km-ft-gallery .slick-next {
    right: 10px;
}

.featured-media:hover .slick-arrow,
.featured-media:hover .slick-dots {
    opacity: 1;
}

.status-badge {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: 1rem;
    background: var(--green-600);
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.featured-overlay {
    position: absolute;
    z-index: 10;
    bottom: 2rem;
    left: 1rem;
    right: 1rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
}

.featured-overlay-title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    text-align: center;
}

.featured-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}



.payment-note {
    color: var(--slate-500);
    font-size: .875rem;
    line-height: 1rem;
    margin-bottom: 0.25rem;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 10px 0
}

.price-current {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--orange-500);
}

/* Spec Grid */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spec-item-left {
    padding: 8px 1rem 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.spec-item-right {
    padding-left: 1rem;
    border-left: 1px solid var(--slate-100);
}

.spec-label {
    color: var(--slate-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.spec-value {
    color: var(--slate-800);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

/* Featured Actions */
.featured-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.consult-button {
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.consult-button:hover {
    text-decoration: underline;
}

.details-button {
    background: #fff;
    border: 1px solid var(--secondary);
    color: #2e438f !important;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    display: inline-block;
    font-size: 0.875rem;
}

.details-button:hover {
    background: #ECF1FF;
    color: #fff;
}

/* ==========================================================================
   Data Table
   ========================================================================== */
.table-wrapper {
    overflow-x: auto;
    position: sticky;
    z-index: 39;
}

@media (min-width: 1024px) {
    .table-wrapper {
        overflow: visible;
        /* Required for viewport-level sticky */
    }
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table-head-row {
    border-bottom: 0;
}

.table-header-cell {
    background: #fff;
    border-bottom: 1px solid var(--slate-200);
    text-align: left;
    font-size: .875rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: math-auto;
    padding: .75rem 1rem;
    position: sticky;
    top: calc(59px + var(--top-nav-height, 150px) + var(--featured-listing-height, 320px));
    z-index: 50;
}

.table-header-cell:not(:last-child)::before {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 1px;
    height: 1.6em;
    background-color: rgba(0, 0, 0, 0.06);
    transform: translateY(-50%);
    content: "";
    transition: background-color 0.3s;
}

/* Set specific column widths */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
    width: 30%;
    padding-left: 23px;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    width: 15%;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
    width: 12%;
}

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
    width: 15%;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
    width: 10%;
}

.data-table th:nth-child(6),
.data-table td:nth-child(6) {
    width: 10%;
}

.data-table th:nth-child(7),
.data-table td:nth-child(7) {
    width: 10%;
}

.table-header-sortable::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0dc";
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    margin-left: 0.25rem;
    color: var(--slate-300);
}

.table-body-cell {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--slate-100);
    font-size: 0.875rem;
    line-height: 20px;
    vertical-align: top;
    color: var(--slate-700);
}

.table-row {
    transition: background-color 150ms ease;
}

.table-row:hover,
.table-row.km-row-active {
    background: var(--gray-50);
}

.table-link {
    text-decoration: underline !important;
    color: #182a73 !important;
}

.table-link:hover {
    text-decoration: underline;
}

.cell-muted {
    color: var(--slate-600);
}

.cell-dark {
    color: var(--slate-800);
}

.cell-strong {
    color: var(--slate-800);
}

.cell-primary {
    display: block;
    color: var(--slate-700);
}

.cell-primary-medium {
    font-weight: 500;
}

.cell-sub {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--slate-400);
}

.unit-text {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--slate-400);
}

/* ==========================================================================
   Pagination (Override global)
   ========================================================================== */
.km-sale-page .km-pagination,
.km-rent-page .km-pagination,
.km-all-page .km-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--slate-100);
}

.km-sale-page .km-pagination .page-numbers,
.km-rent-page .km-pagination .page-numbers,
.km-all-page .km-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    color: var(--slate-700);
    text-decoration: none;
    font-size: 14px;
    transition: all 150ms ease;
}

.km-sale-page .km-pagination .page-numbers.current,
.km-rent-page .km-pagination .page-numbers.current,
.km-all-page .km-pagination .page-numbers.current {
    background: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
}

.km-sale-page .km-pagination .page-numbers:hover:not(.current),
.km-rent-page .km-pagination .page-numbers:hover:not(.current),
.km-all-page .km-pagination .page-numbers:hover:not(.current) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ==========================================================================
   Desktop breakpoint
   ========================================================================== */
@media (min-width: 1024px) {
    .featured-layout {
        flex-direction: row;
    }

    .featured-media {
        width: 34.666667%;
        height: 100%;
        aspect-ratio: 16 / 9;
    }

    .featured-details {
        width: 65.333333%;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 849px) {

    /* Fix sticky not working due to overflow-x: hidden on parent */
    html,
    body {
        overflow-x: visible !important;
    }

    .top-navigation-inner {
        gap: 0.5rem;
        padding: 15px 20px 5px 20px;
    }



    .km-dropdown-panel {
        display: none;
        position: fixed;
        top: auto;
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        min-width: unset;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        z-index: 9999;
        overflow: hidden;
    }

    .featured-layout {
        gap: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 0;
        border-bottom: none;
    }

    .top-navigation {
        background: #fff !important;
        position: sticky !important;
        top: 70px !important;
        /* Below Flatsome sticky header */
        z-index: 101 !important;
    }

    /* Show filter on mobile for /san-pham/ban */
    .action-ban .top-navigation-inner {
        padding-top: 10px;
    }

    .results-header-bar {
        position: sticky !important;
        top: 70px !important;
        /* Offset for Flatsome sticky header (approx 70px) */
        z-index: 102 !important;
        background: #fff !important;
    }

    .results-header-inner {
        margin: 0 auto;
        padding: 10px 20px 0;
    }

    .results-header-inner .breadcrumbs {
        display: block !important;
        font-size: 0.875rem !important;
        margin-bottom: 4px !important;
        color: #777 !important;
    }

    .km-is-loading .results-header-bar {
        position: static;
        /* Avoid flickering during load */
    }
}

/* =========================================================================
   11. SKELETON LOADING
   ========================================================================= */

@keyframes kmSkeletonPulse {
    0% {
        background-color: #f1f5f9;
    }

    50% {
        background-color: #cbd5e1;
    }

    100% {
        background-color: #f1f5f9;
    }
}

.km-is-loading {
    pointer-events: none;
    opacity: 0.9;
}

/* Featured Listing Skeleton (Element-wise) */
.km-is-loading .featured-media {
    background-color: #e2e8f0 !important;
    animation: kmSkeletonPulse 1.5s infinite ease-in-out;
}

.km-is-loading .featured-media * {
    opacity: 0 !important;
    visibility: hidden !important;
}

.km-is-loading .payment-note,
.km-is-loading .price-current,
.km-is-loading .spec-item,
.km-is-loading .details-button {
    background-color: #e2e8f0 !important;
    color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    animation: kmSkeletonPulse 1.5s infinite ease-in-out;
    border-radius: 4px;
}

.km-is-loading .spec-item * {
    opacity: 0 !important;
}

/* Table Row Skeleton */
.km-is-loading .table-row td {
    position: relative;
    color: transparent !important;
    border-color: transparent !important;
}

.km-is-loading .table-row td * {
    visibility: hidden;
}

.km-is-loading .table-row td::after {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
    animation: kmSkeletonPulse 1.5s infinite ease-in-out;
    border-radius: 4px;
    z-index: 100;
    visibility: visible;
}

/* Table Actions fade out */
.km-is-loading .table-actions {
    opacity: 0;
}

/* Hide pagination */
.km-is-loading .km-pagination {
    opacity: 0.3;
}

/* Product Card Grid Skeleton */
.km-is-loading .km-property-card {
    pointer-events: none;
}

.km-is-loading .km-property-card__image-wrapper {
    background-color: #e2e8f0 !important;
    animation: kmSkeletonPulse 1.5s infinite ease-in-out;
}

.km-is-loading .km-property-card__image-wrapper * {
    opacity: 0 !important;
    visibility: hidden !important;
}

.km-is-loading .km-property-card__content-link>* {
    background-color: #e2e8f0 !important;
    color: transparent !important;
    border-color: transparent !important;
    border-radius: 4px;
    animation: kmSkeletonPulse 1.5s infinite ease-in-out;
}

.km-is-loading .km-property-card__content-link>* * {
    opacity: 0 !important;
}