/*

 * CRES of Southwest Florida — Discovery & Listings Styles

 * Homepage discovery, property cards, filters, map, search

 *

 * File: /var/www/native/neuraecomm.native.neuraweb.io/sites/cresswfl.nw/assets/css/cres-discovery.css

 */



/* ═══════════════════════════════════════════════════════════

 * HERO / SEARCH BAR

 * ═══════════════════════════════════════════════════════════ */

.nw-discovery-hero {

    background: linear-gradient(135deg, var(--nw-navy) 0%, var(--nw-navy-light) 100%);

    padding: 3rem 0 2rem;

    text-align: center;

}

.nw-discovery-hero h1 {

    font-family: var(--nw-font-heading);

    font-size: 2.2rem;

    color: #FFFFFF;

    margin-bottom: 0.4rem;

}

.nw-discovery-hero p {

    color: rgba(255,255,255,0.7);

    font-size: 1rem;

    margin-bottom: 1.5rem;

}

.nw-discovery-stats {

    display: flex;

    justify-content: center;

    gap: 2.5rem;

    margin-bottom: 2rem;

}

.nw-discovery-stat {

    text-align: center;

}

.nw-discovery-stat-number {

    font-family: var(--nw-font-heading);

    font-size: 2rem;

    font-weight: 700;

    color: var(--nw-gold);

    line-height: 1;

}

.nw-discovery-stat-label {

    font-size: 0.78rem;

    color: rgba(255,255,255,0.6);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-top: 4px;

}



/* Search Bar */

.nw-search-bar {

    max-width: 700px;

    margin: 0 auto;

    display: flex;

    gap: 0;

    background: var(--nw-bg-card);

    border-radius: var(--nw-radius-lg);

    overflow: hidden;

    box-shadow: var(--nw-shadow-lg);

}

.nw-search-bar input {

    flex: 1;

    border: none;

    padding: 14px 20px;

    font-family: var(--nw-font-body);

    font-size: 0.95rem;

    background: transparent;

    color: var(--nw-text);

    outline: none;

}

.nw-search-bar input::placeholder { color: var(--nw-text-muted); }

.nw-search-bar button {

    background: var(--nw-gold);

    color: var(--nw-navy);

    border: none;

    padding: 14px 28px;

    font-family: var(--nw-font-body);

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    transition: background var(--nw-transition);

    display: flex;

    align-items: center;

    gap: 8px;

}

.nw-search-bar button:hover { background: var(--nw-gold-dark); }

.nw-search-bar button .nw-gf-icon-xs { filter: none; }



/* ═══════════════════════════════════════════════════════════

 * DIVISION TABS

 * ═══════════════════════════════════════════════════════════ */

.nw-division-tabs {

    display: flex;

    justify-content: center;

    gap: 6px;

    padding: 1.2rem 1.5rem;

    background: var(--nw-bg-alt);

    border-bottom: 1px solid var(--nw-border);

    flex-wrap: wrap;

}

.nw-division-tab {

    font-family: var(--nw-font-body);

    font-size: 0.82rem;

    font-weight: 600;

    padding: 8px 18px;

    border-radius: var(--nw-radius-md);

    border: 1.5px solid var(--nw-border);

    background: var(--nw-bg-card);

    color: var(--nw-text-secondary);

    cursor: pointer;

    transition: all var(--nw-transition);

    display: flex;

    align-items: center;

    gap: 6px;

}

.nw-division-tab:hover {

    border-color: var(--nw-gold);

    color: var(--nw-gold);

}

.nw-division-tab.nw-active {

    background: var(--nw-gold);

    color: var(--nw-navy);

    border-color: var(--nw-gold);

}

.nw-division-tab .nw-count {

    font-size: 0.72rem;

    font-weight: 700;

    background: rgba(0,0,0,0.08);

    padding: 2px 7px;

    border-radius: 10px;

}

.nw-division-tab.nw-active .nw-count {

    background: rgba(0,0,0,0.15);

    color: var(--nw-navy);

}



/* ═══════════════════════════════════════════════════════════

 * DISCOVERY LAYOUT (sidebar + main + map)

 * ═══════════════════════════════════════════════════════════ */

.nw-discovery-layout {

    display: grid;

    grid-template-columns: 280px 1fr 400px;

    gap: 0;

    min-height: 70vh;

}



/* ═══════════════════════════════════════════════════════════

 * SIDEBAR FILTERS

 * ═══════════════════════════════════════════════════════════ */

.nw-filter-sidebar {

    background: var(--nw-bg-card);

    border-right: 1px solid var(--nw-border);

    padding: 1.5rem;

    overflow-y: auto;

    max-height: calc(100vh - 180px);

    position: sticky;

    top: 140px;

}

.nw-filter-group { margin-bottom: 1.5rem; }

.nw-filter-group-title {

    font-family: var(--nw-font-body);

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--nw-text-muted);

    margin-bottom: 0.8rem;

}

.nw-filter-toggle {

    display: flex;

    border-radius: var(--nw-radius-md);

    overflow: hidden;

    border: 1.5px solid var(--nw-border);

}

.nw-filter-toggle-btn {

    flex: 1;

    padding: 8px 0;

    text-align: center;

    font-family: var(--nw-font-body);

    font-size: 0.82rem;

    font-weight: 600;

    background: var(--nw-bg-input);

    color: var(--nw-text-secondary);

    border: none;

    cursor: pointer;

    transition: all var(--nw-transition);

}

.nw-filter-toggle-btn.nw-active {

    background: var(--nw-navy);

    color: #FFFFFF;

}

.nw-filter-toggle-btn:not(:last-child) { border-right: 1px solid var(--nw-border); }



/* Price Range */

.nw-price-range { display: flex; gap: 8px; align-items: center; }

.nw-price-range input {

    flex: 1;

    padding: 8px 10px;

    border: 1.5px solid var(--nw-border-input);

    border-radius: var(--nw-radius-sm);

    font-family: var(--nw-font-body);

    font-size: 0.85rem;

    background: var(--nw-bg-input);

    color: var(--nw-text);

    width: 100%;

}

.nw-price-range input:focus { border-color: var(--nw-gold); outline: none; }

.nw-price-range-divider { color: var(--nw-text-muted); font-weight: 600; }



/* Checkbox filters */

.nw-filter-checks { display: flex; flex-direction: column; gap: 6px; }

.nw-filter-check {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    color: var(--nw-text);

    cursor: pointer;

    padding: 4px 0;

}

.nw-filter-check input[type="checkbox"] {

    width: 16px; height: 16px;

    accent-color: var(--nw-gold);

    cursor: pointer;

}

.nw-filter-check .nw-count {

    margin-left: auto;

    font-size: 0.75rem;

    color: var(--nw-text-muted);

}



/* Filter actions */

.nw-filter-actions {

    display: flex;

    gap: 8px;

    padding-top: 1rem;

    border-top: 1px solid var(--nw-border);

}



/* ═══════════════════════════════════════════════════════════

 * LISTINGS GRID

 * ═══════════════════════════════════════════════════════════ */

.nw-listings-panel {

    padding: 1.5rem;

    overflow-y: auto;

    background: var(--nw-bg);

}

.nw-listings-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.2rem;

}

.nw-listings-count {

    font-size: 0.88rem;

    color: var(--nw-text-secondary);

}

.nw-listings-count strong {

    color: var(--nw-text);

    font-weight: 600;

}

.nw-listings-sort {

    display: flex;

    align-items: center;

    gap: 8px;

}

.nw-listings-sort label {

    font-size: 0.82rem;

    color: var(--nw-text-muted);

}

.nw-listings-sort select {

    padding: 6px 10px;

    border: 1.5px solid var(--nw-border);

    border-radius: var(--nw-radius-sm);

    font-family: var(--nw-font-body);

    font-size: 0.82rem;

    background: var(--nw-bg-card);

    color: var(--nw-text);

    cursor: pointer;

}



.nw-listings-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.2rem;

}



/* ═══════════════════════════════════════════════════════════

 * PROPERTY CARD

 * ═══════════════════════════════════════════════════════════ */

.nw-property-card {

    background: var(--nw-bg-card);

    border-radius: var(--nw-radius-lg);

    overflow: hidden;

    border: 1px solid var(--nw-border);

    transition: transform var(--nw-transition), box-shadow var(--nw-transition);

    cursor: pointer;

}

.nw-property-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--nw-shadow-lg);

}



.nw-property-card-image {

    position: relative;

    width: 100%;

    padding-top: 60%;

    background: var(--nw-bg-hover);

    overflow: hidden;

}

.nw-property-card-image img {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    object-fit: cover;

    transition: transform var(--nw-transition-slow);

}

.nw-property-card:hover .nw-property-card-image img { transform: scale(1.04); }



.nw-property-card-badges {

    position: absolute;

    top: 10px; left: 10px;

    display: flex;

    gap: 6px;

}

.nw-property-card-photos {

    position: absolute;

    bottom: 10px; right: 10px;

    background: rgba(0,0,0,0.65);

    color: #FFFFFF;

    font-size: 0.72rem;

    font-weight: 600;

    padding: 3px 8px;

    border-radius: var(--nw-radius-sm);

    display: flex;

    align-items: center;

    gap: 4px;

}

.nw-property-card-photos .nw-gf-icon-xs { filter: brightness(0) invert(1); width: 12px; height: 12px; }



.nw-property-card-body { padding: 1rem 1.2rem; }

.nw-property-card-price {

    font-family: var(--nw-font-heading);

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--nw-text);

    margin-bottom: 4px;

}

.nw-property-card-price-lease {

    font-size: 0.78rem;

    font-weight: 400;

    color: var(--nw-text-muted);

}

.nw-property-card-address {

    font-size: 0.88rem;

    color: var(--nw-text-secondary);

    margin-bottom: 10px;

    line-height: 1.4;

}

.nw-property-card-meta {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 10px;

}

.nw-property-card-meta-item {

    font-size: 0.8rem;

    color: var(--nw-text-secondary);

    display: flex;

    align-items: center;

    gap: 4px;

}

.nw-property-card-meta-item strong {

    color: var(--nw-text);

    font-weight: 600;

}



.nw-property-card-footer {

    padding: 0.8rem 1.2rem;

    border-top: 1px solid var(--nw-border-light);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.nw-property-card-agent {

    display: flex;

    align-items: center;

    gap: 8px;

}

.nw-property-card-agent-avatar {

    width: 28px; height: 28px;

    border-radius: 50%;

    background: var(--nw-navy);

    color: var(--nw-gold);

    font-size: 0.65rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

}

.nw-property-card-agent-name {

    font-size: 0.78rem;

    font-weight: 500;

    color: var(--nw-text);

}

.nw-property-card-id {

    font-size: 0.72rem;

    color: var(--nw-text-muted);

    font-family: var(--nw-font-body);

}



/* No photo placeholder */

.nw-property-card-nophoto {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--nw-bg-hover);

    color: var(--nw-text-muted);

    gap: 6px;

}

.nw-property-card-nophoto .nw-gf-icon-lg { opacity: 0.4; }

.nw-property-card-nophoto span { font-size: 0.78rem; opacity: 0.5; }



/* ═══════════════════════════════════════════════════════════

 * MAP PANEL

 * ═══════════════════════════════════════════════════════════ */

.nw-map-panel {

    position: sticky;

    top: 140px;

    height: calc(100vh - 180px);

    border-left: 1px solid var(--nw-border);

}

.nw-map-container {

    width: 100%;

    height: 100%;

    background: var(--nw-bg-hover);

}



/* NeuraMap branding overlay */

.nw-map-brand {

    position: absolute;

    bottom: 10px; left: 10px;

    z-index: 999;

    background: var(--nw-bg-card);

    padding: 4px 10px;

    border-radius: var(--nw-radius-sm);

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--nw-text-secondary);

    box-shadow: var(--nw-shadow-sm);

    display: flex;

    align-items: center;

    gap: 4px;

}

.nw-map-brand img { width: 14px; height: 14px; }



/* Custom map markers */

.nw-map-marker {

    background: var(--nw-gold);

    color: var(--nw-navy);

    font-family: var(--nw-font-body);

    font-size: 0.72rem;

    font-weight: 700;

    padding: 4px 8px;

    border-radius: var(--nw-radius-sm);

    white-space: nowrap;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

    text-align: center;

    line-height: 1.2;

    position: relative;

}

.nw-map-marker::after {

    content: '';

    position: absolute;

    bottom: -6px;

    left: 50%;

    transform: translateX(-50%);

    width: 0; height: 0;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-top: 6px solid var(--nw-gold);

}

.nw-map-marker.nw-active {

    background: var(--nw-navy);

    color: var(--nw-gold);

    transform: scale(1.15);

    z-index: 1000;

}

.nw-map-marker.nw-active::after {

    border-top-color: var(--nw-navy);

}



/* Map popup */

.nw-map-popup {

    font-family: var(--nw-font-body);

}

.nw-map-popup-price {

    font-family: var(--nw-font-heading);

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--nw-text);

}

.nw-map-popup-address {

    font-size: 0.82rem;

    color: var(--nw-text-secondary);

    margin-top: 2px;

}

.nw-map-popup-meta {

    font-size: 0.78rem;

    color: var(--nw-text-muted);

    margin-top: 4px;

}



/* Leaflet overrides for NeuraMap */

.nw-map-container .leaflet-control-attribution { display: none !important; }

.nw-map-container .leaflet-control-zoom {

    border: none !important;

    box-shadow: var(--nw-shadow-md) !important;

    border-radius: var(--nw-radius-md) !important;

    overflow: hidden;

}

.nw-map-container .leaflet-control-zoom a {

    background: var(--nw-bg-card) !important;

    color: var(--nw-text) !important;

    width: 34px !important;

    height: 34px !important;

    line-height: 34px !important;

    font-size: 16px !important;

    border-bottom: 1px solid var(--nw-border) !important;

}

.nw-map-container .leaflet-control-zoom a:hover {

    background: var(--nw-bg-hover) !important;

}

[data-theme="dark"] .nw-map-container .leaflet-tile {

    filter: brightness(0.75) contrast(1.1) saturate(0.8);

}



/* ═══════════════════════════════════════════════════════════

 * PAGINATION

 * ═══════════════════════════════════════════════════════════ */

.nw-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 4px;

    padding: 1.5rem 0;

}

.nw-pagination-btn {

    min-width: 36px; height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--nw-radius-sm);

    border: 1px solid var(--nw-border);

    background: var(--nw-bg-card);

    color: var(--nw-text);

    font-family: var(--nw-font-body);

    font-size: 0.85rem;

    font-weight: 500;

    cursor: pointer;

    transition: all var(--nw-transition);

    text-decoration: none;

}

.nw-pagination-btn:hover {

    border-color: var(--nw-gold);

    color: var(--nw-gold);

}

.nw-pagination-btn.nw-active {

    background: var(--nw-gold);

    color: var(--nw-navy);

    border-color: var(--nw-gold);

    font-weight: 700;

}

.nw-pagination-btn.nw-disabled {

    opacity: 0.4;

    pointer-events: none;

}



/* ═══════════════════════════════════════════════════════════

 * LOADING STATES

 * ═══════════════════════════════════════════════════════════ */

.nw-skeleton {

    background: linear-gradient(90deg, var(--nw-bg-hover) 25%, var(--nw-border-light) 50%, var(--nw-bg-hover) 75%);

    background-size: 200% 100%;

    animation: nw-shimmer 1.5s infinite;

    border-radius: var(--nw-radius-sm);

}

@keyframes nw-shimmer {

    0% { background-position: 200% 0; }

    100% { background-position: -200% 0; }

}

.nw-skeleton-card { height: 320px; border-radius: var(--nw-radius-lg); }

.nw-skeleton-text { height: 14px; margin-bottom: 8px; }

.nw-skeleton-text-short { width: 60%; }



.nw-loading-overlay {

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(var(--nw-bg), 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}

.nw-spinner {

    width: 36px; height: 36px;

    border: 3px solid var(--nw-border);

    border-top-color: var(--nw-gold);

    border-radius: 50%;

    animation: nw-spin 0.8s linear infinite;

}

@keyframes nw-spin {

    to { transform: rotate(360deg); }

}



/* ═══════════════════════════════════════════════════════════

 * EMPTY STATE

 * ═══════════════════════════════════════════════════════════ */

.nw-empty {

    text-align: center;

    padding: 4rem 2rem;

    color: var(--nw-text-muted);

}

.nw-empty-icon { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; }

.nw-empty h3 {

    font-family: var(--nw-font-heading);

    font-size: 1.3rem;

    color: var(--nw-text-secondary);

    margin-bottom: 0.5rem;

}

.nw-empty p { font-size: 0.9rem; max-width: 400px; margin: 0 auto; }



/* ═══════════════════════════════════════════════════════════

 * PRIVACY NOTICE

 * ═══════════════════════════════════════════════════════════ */

.nw-privacy-notice {

    background: var(--nw-bg-alt);

    border: 1px solid var(--nw-border);

    border-radius: var(--nw-radius-md);

    padding: 1rem 1.2rem;

    margin-top: 1.5rem;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 0.82rem;

    color: var(--nw-text-secondary);

    line-height: 1.5;

}

.nw-privacy-notice img { opacity: 0.5; margin-top: 2px; flex-shrink: 0; }



/* ═══════════════════════════════════════════════════════════

 * RESPONSIVE — DISCOVERY

 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {

    .nw-discovery-layout {

        grid-template-columns: 260px 1fr;

    }

    .nw-map-panel { display: none; }

}



@media (max-width: 768px) {

    .nw-discovery-layout {

        grid-template-columns: 1fr;

    }

    .nw-filter-sidebar {

        position: fixed;

        top: 0; left: -100%;

        width: 300px; height: 100vh;

        z-index: 2000;

        transition: left var(--nw-transition-slow);

        max-height: 100vh;

        border-right: 1px solid var(--nw-border);

        box-shadow: var(--nw-shadow-lg);

    }

    .nw-filter-sidebar.nw-open { left: 0; }



    .nw-filter-overlay {

        display: none;

        position: fixed;

        top: 0; left: 0; right: 0; bottom: 0;

        background: rgba(0,0,0,0.5);

        z-index: 1999;

    }

    .nw-filter-overlay.nw-open { display: block; }



    .nw-discovery-hero h1 { font-size: 1.6rem; }

    .nw-discovery-stats { gap: 1.5rem; }

    .nw-discovery-stat-number { font-size: 1.5rem; }



    .nw-search-bar { flex-direction: column; border-radius: var(--nw-radius-md); }

    .nw-search-bar input { border-bottom: 1px solid var(--nw-border); }

    .nw-search-bar button { justify-content: center; }



    .nw-listings-grid { grid-template-columns: 1fr; }



    .nw-division-tabs { gap: 4px; padding: 0.8rem 1rem; }

    .nw-division-tab { font-size: 0.75rem; padding: 6px 12px; }

}



/*

 * File: /var/www/native/neuraecomm.native.neuraweb.io/sites/cresswfl.nw/assets/css/cres-discovery.css

 */