/**
 * POC (2026-09-03) — extended filter panel, merged 2026-11-12 into the wide « Caractéristiques » pill.
 * Isolated on purpose: delete this file alongside the other POC pieces
 * listed in core/ExtendedFiltersPocConfig.php if the experiment doesn't
 * pan out. Reuses the existing .dropdown-panel/.dropdown-item/.dropdown-header
 * base rules from style.css — only the checkbox visual is added here.
 */

.dropdown-panel-checklist {
    min-width: 260px;
}

.dropdown-item-checkbox {
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.dropdown-item-checkbox .checkbox-box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--white);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.dropdown-item-checkbox.active .checkbox-box {
    background: var(--blue);
    border-color: var(--blue);
}

.dropdown-item-checkbox.active .checkbox-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dropdown-item-checkbox .checkbox-label {
    flex: 1 1 auto;
    min-width: 0;
}

.dropdown-item-checkbox .count {
    flex: 0 0 auto;
}

/* Loading affordance while the AJAX swap is in flight (extended-filters-poc.js) */
#listingResultsPoc.loading,
#dropdown-extended.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ------------------------------------------------------------------------
   Merged « Caractéristiques » panel (2026-11-12) — mobile first.
   The panel anchors to the whole filter row (not to its own pill), so it
   spans the row on phones and can open wide on desktop without running
   off the right edge.
   ------------------------------------------------------------------------ */
.filter-row {
    position: relative;
}

.filter-dropdown-wide {
    position: static;
}

.filter-dropdown-wide .dropdown-panel {
    left: 0;
    right: 0;
    max-height: 70vh;
}

.filter-dropdown-wide .filter-group {
    break-inside: avoid;
    padding-bottom: 6px;
}

.filter-dropdown-wide .dropdown-item {
    padding: 6px 16px;
    white-space: normal;
}

/* Stage is single-choice: round box, dot instead of a tick. */
.dropdown-item-checkbox.is-radio .checkbox-box {
    border-radius: 50%;
}

.dropdown-item-checkbox.is-radio.active .checkbox-box::after {
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    transform: none;
}

/* « Voir N projets » — closes the panel. Mobile: pinned to the bottom of the
   scrolling panel; desktop: a full-width row under the 3 columns. */
.filter-panel-footer {
    position: sticky;
    bottom: -6px;
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    margin-bottom: -6px;
    text-align: center;
}

.filter-panel-footer .filter-see-results {
    display: block;
    padding: 10px 24px;
    font-size: 15px;
}

@media (min-width: 769px) {
    .filter-dropdown-wide .dropdown-panel {
        max-height: calc(100vh - 180px);
        columns: 3;
        column-gap: 8px;
        padding: 10px 0;
    }

    .filter-panel-footer {
        column-span: all;
        position: static;
        margin: 6px 0 -10px;
        text-align: right;
    }

    .filter-panel-footer .filter-see-results {
        display: inline-block;
    }
}