/* Real Estate Listings - Frontend Widget */

.rel-listings-widget {
    width: 100%;
    font-family: inherit;
}

.rel-listings-title {
    text-align: center;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    color: #0D3D3B;
}

.rel-table-wrapper {
    width: 100%;
}

.rel-listings-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Header */
.rel-listings-table thead th {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0D3D3B;
    padding: 12px 20px;
    border-bottom: 2px solid #0D3D3B;
}

/* Data rows */
.rel-listings-table tbody tr {
    border-bottom: 1px solid #c8c8c8;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.rel-listings-table tbody tr:last-child {
    border-bottom: none;
}

.rel-listings-table tbody td {
    padding: 16px 20px;
    font-size: 15px;
    color: #333;
    vertical-align: middle;
}

/* Reset any theme zebra-striping on all rows */
.rel-listings-table tbody tr,
.rel-listings-table tbody tr:nth-child(odd),
.rel-listings-table tbody tr:nth-child(even) {
    background-color: #F9EFE3;
}

/* Available row hover - color controlled via Elementor */
.rel-listings-table tbody tr.rel-status-available:hover {
    background-color: #D4C5B2;
}

/* Reserved row */
.rel-listings-table tbody tr.rel-status-reserved {
    background-color: #5BBFC0;
}

.rel-listings-table tbody tr.rel-status-reserved td {
    color: #ffffff;
}

/* Sold row */
.rel-listings-table tbody tr.rel-status-sold {
    background-color: #0D3D3B;
}

.rel-listings-table tbody tr.rel-status-sold td {
    color: #ffffff;
}

/* Status cell (price/label) */
.rel-listings-table td.rel-status-cell {
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* No properties message */
.rel-no-properties td {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .rel-listings-table thead th,
    .rel-listings-table tbody td {
        padding: 12px 10px;
        font-size: 13px;
    }

    .rel-listings-title {
        font-size: 20px;
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .rel-listings-title {
        font-size: 14px;
        margin-bottom: 16px;
        letter-spacing: 0.2em;
    }

    .rel-listings-table {
        table-layout: fixed;
        width: 100%;
    }

    .rel-listings-table .rel-col-lot,
    .rel-listings-table .rel-col-area,
    .rel-listings-table .rel-col-model,
    .rel-listings-table .rel-col-price {
        display: table-cell !important;
    }

    /* 1. Column widths — area wider so number fits on one line, model wider so header fits */
    .rel-listings-table .rel-col-lot   { width: 10%; white-space: nowrap; }
    .rel-listings-table .rel-col-area  { width: 35%; }
    .rel-listings-table .rel-col-model { width: 25%; }
    .rel-listings-table .rel-col-price { width: 30%; }

    /* Headers */
    .rel-listings-table thead th {
        font-size: 9px;
        font-weight: 700;
        padding: 8px 3px;
        letter-spacing: 0.04em;
        text-align: center;
        vertical-align: top;
        line-height: normal;
    }

    /* Area header subtitle */
    .rel-header-sub {
        display: block;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.02em;
        opacity: 0.8;
        margin-top: 0;
        line-height: 1;
    }

    /* Hide "HOME" and "#" on mobile */
    .rel-model-word,
    .rel-lot-word {
        display: none;
    }

    /* Data rows */
    .rel-listings-table tbody td {
        font-size: 9px;
        padding: 10px 3px;
        text-align: center;
        vertical-align: middle;
        overflow-wrap: break-word;
    }

    /* Area primary value: no wrap */
    .rel-area-primary {
        display: block;
        white-space: nowrap;
    }

    /* Area secondary (ft²) */
    .rel-area-secondary {
        display: block;
        font-size: 10px;
        opacity: 0.75;
    }

    /* Reserved/Sold → Title case on mobile */
    .rel-label-text {
        display: inline-block;
        text-transform: lowercase;
    }
    .rel-label-text::first-letter {
        text-transform: uppercase;
    }
}