/* ===== WRAPPER ===== */
.summit-projects-widget {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px;
}

/* ===== FILTER ===== */
.summit-project-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.summit-project-filters .filter-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #d5dde5;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s ease;
}

.summit-project-filters .filter-btn.active,
.summit-project-filters .filter-btn:hover {
    background: #2c3f52;
    color: #fff;
    border-color: #2c3f52;
}

/* ===== GRID ===== */
.summit-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 1024px) {
    .summit-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .summit-projects-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== CARD ===== */
.summit-project-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.summit-project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

/* LINK */
.summit-project-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* IMAGE */
.card-image img {
    width: 100%;
    height: 200px;
    /* ↓ thấp lại cho cân */
    object-fit: cover;
    display: block;
}

/* TITLE */
.card-title {
    background: #2c3f52;
    color: #fff;
    text-align: center;
    padding: 12px 14px;
    font-size: 15px;
    /* ↓ nhỏ lại */
    font-weight: 600;
    line-height: 1.4;
}

.summit-projects-grid.is-loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* .leaflet-container img {
  max-width: none !important;
} */
/* MAP WRAPPER */
.summit-leaflet-map {
    position: relative;
    /* 🔴 CỰC KỲ QUAN TRỌNG */
}

/* BIG MAP CARD */
.summit-map-card {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 420px;
    max-height: calc(100% - 40px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    overflow-y: auto;
}

/* HIDDEN */
.summit-map-card.hidden {
    display: none;
}

/* CLOSE BTN */
.summit-map-card .close-map-card {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

/* === MAIN LAYOUT === */
.summit-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0px;
    align-items: start;
    /* Enable sticky behavior */
}

/* === FILTER COLUMN === */
/* Filter styles were updated via append, leaving this placeholder or skipping overlapping lines logic. 
   Actually, I will only replace the Layout and Map Column parts that usually appear BEFORE the filter col in logical CSS structure or just target specific blocks.
   The previous view showed lines 141-147 and 161-165. I'll target those specifically.
*/

/* === MAP COLUMN === */
.summit-map-col {
    position: sticky;
    top: 100px;
    /* Offset for header */
    height: fit-content;
    min-height: 500px;
}

.summit-leaflet-map-main {
    width: 100%;
    height: calc(100vh - 140px);
    min-height: 600px;
    border-radius: 14px;
    overflow: hidden;
}

.summit-leaflet-map {
    width: 100%;
    height: 100%;
}

/* ===============================
   FORCE FIX FILTER BUTTON TEXT
   =============================== */

.summit-tax-filter .filter-btn {
    all: unset;
    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px;
    min-width: 120px;
    width: 100%;
    /* Ensure full width in sidebar */

    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #cfd6df;
    background: #fff;

    cursor: pointer;
}

.summit-tax-filter .filter-btn span {
    display: inline-block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.summit-tax-filter .filter-btn.active {

    border-color: #0f766e;
}

.summit-tax-filter .filter-btn.active span {
    color: #fff !important;
}

/* === REFINED FILTER COLUMN === */
.summit-filter-col {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 320px;
    font-family: inherit;
    border: 1px solid #edf2f7;
    height: fit-content;
}

.filter-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a202c;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 12px;
}

.filter-group {
    margin-bottom: 20px;
    border-bottom: 1px solid #f7fafc;
    padding-bottom: 16px;
}

.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Headings within groups */
.filter-group-head {
    margin-bottom: 12px;
}

.filter-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Accordion Toggle (Clean Style) */
.filter-accordion-toggle {
    background: none !important;
    border: none;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.filter-accordion-toggle .filter-heading {
    margin: 0;
    cursor: pointer;
    font-size: 13px !important;
    text-transform: uppercase;
    color: #2d3748;
}

.filter-accordion-icon {
    font-size: 14px;
    color: #718096;
    transition: transform 0.2s ease;
    line-height: 1;
}

.filter-group.open .filter-accordion-icon {
    transform: rotate(180deg);
}

.filter-accordion-body {
    margin-top: 12px;
    /* Display is toggled via JS */
}

/* Pills (Location / City) */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0;
    background: #f7fafc !important;
    color: #4a5568 !important;
    /* Force color to override any specificity */
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.filter-pill:hover {
    background: #edf2f7 !important;
    border-color: #cbd5e0;
}

.filter-pill.active {
    background: #1f3d7a !important;
    /* Summit Navy */
    color: #fff !important;
    border-color: #1f3d7a;
    font-weight: 600;
}

.filter-pill[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f7fafc !important;
    color: #a0aec0 !important;
}

/* Checkboxes */
.filter-checkbox {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-checkbox li {
    margin-bottom: 8px;
}

.filter-checkbox li:last-child {
    margin-bottom: 0;
}

.filter-checkbox label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
    transition: color 0.2s;
}

.filter-checkbox label:hover {
    color: #1f3d7a;
}

.filter-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #1f3d7a;
    border-radius: 4px;
    border: 1px solid #cbd5e0;
    cursor: pointer;
}

/* Select Box */
.filter-select select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e0;
    background: #fff;
    font-size: 14px;
    color: #4a5568;
    outline: none;
}

.filter-select select:focus {
    border-color: #1f3d7a;
}

/* Action Buttons */
.filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf2f7;
}

.filter-reset {
    flex: 1;
    background: #fff !important;
    border: 1px solid #cbd5e0 !important;
    color: #718096 !important;
    padding: 10px !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.filter-reset:hover {
    background: #f7fafc !important;
    color: #4a5568 !important;
    border-color: #a0aec0 !important;
}

.filter-apply {
    flex: 1;
    background: #1f3d7a !important;
    /* Summit Navy */
    color: #fff !important;
    border: none !important;
    padding: 10px !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.filter-apply:hover {
    background: #162c5b !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(31, 61, 122, 0.2);
}

/* ===============================
   MOBILE FILTER TOGGLE
   =============================== */

/* Mobile Filter Toggle Button - Hidden by default (desktop) */
.summit-mobile-filter-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #264579;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(31, 61, 122, 0.25);
    transition: all 0.2s ease;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
}

.summit-mobile-filter-toggle:hover {
    background: #162c5b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 61, 122, 0.35);
}

.summit-mobile-filter-toggle svg {
    flex-shrink: 0;
}

/* Mobile Filter Close Button - Hidden by default */
.summit-filter-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    background: #C70000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px;
    color: #fff;
    transition: all 0.2s ease;
    z-index: 1001;
}

.summit-filter-close:hover {
    color: #1a202c;
}

/* Responsive Styles */
@media (max-width: 1024px) {

    /* Show the mobile toggle button */
    .summit-mobile-filter-toggle {
        display: flex;
    }

    /* Change layout to single column */
    .summit-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Filter column transforms into mobile drawer */
    .summit-filter-col {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: none;
        margin: 0;
        border-radius: 0;
    }

    /* When filter is open */
    .summit-filter-col.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    }

    /* Show close button on mobile */
    .summit-filter-col .summit-filter-close {
        display: block;
    }

    /* Map takes full width on mobile */
    .summit-map-col {
        position: relative;
        top: 0;
        width: 100%;
    }

    /* Add overlay when filter is open */
    .summit-filter-col.is-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Adjust filter title padding for mobile when close button is present */
@media (max-width: 1024px) {
    .summit-filter-col .filter-title {
        padding-right: 48px;
        /* Space for close button */
    }

    /* Hide map zoom controls when filter is open to prevent overlap */
    body.filter-sidebar-open .leaflet-control-zoom {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Ensure map controls don't overlap with filter toggle button */
    .leaflet-top.leaflet-left {
        top: 70px !important;
        /* Space for filter toggle button */
    }
}

/* Leaflet map controls z-index fix */
.leaflet-control-zoom {
    z-index: 500 !important;
    /* Lower than filter sidebar (1000) but higher than map */
}