@charset "utf-8";

/* ===============================
 *  FORMULAIRE DE RECHERCHE
 *  Design Figma — actifimmo2
 * =============================== */

.searchBox {
    position: relative;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 1rem;
    width: 100%;
}

/* --- Labels --- */
.searchBox label {
    display: block;
    color: var(--neutral-2x-dark);
    font-size: 0.8rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

/* Labels dynamiques normal/avancé : par défaut, on affiche "normal" */
.searchBox .label-advanced { display: none; }
.searchBox .label-normal { display: inline; }

/* --- Inputs texte/number --- */
.searchBox input[type="number"],
.searchBox input[type="text"] {
    background: var(--neutral-x-light);
    border: 1px solid var(--neutral-light);
    padding: 0 0.75rem;
    font-family: var(--ff-body);
    font-size: 0.875rem;
    border-radius: var(--radius-xs);
    width: 100%;
    height: 39px;
    color: var(--neutral-x-dark);
}

.searchBox input[type="number"]::placeholder,
.searchBox input[type="text"]::placeholder {
    color: var(--neutral-dark);
}

.searchBox input[type="number"]:focus,
.searchBox input[type="text"]:focus {
    outline: 2px solid var(--primary-main);
    outline-offset: -1px;
    background: #fff;
}

/* Supprimer spinners number */
.searchBox input[type="number"]::-webkit-outer-spin-button,
.searchBox input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.searchBox input[type="number"] {
    -moz-appearance: textfield;
}

/* --- Tom Select --- */
.searchBox .ts-wrapper.multi .ts-control,
.searchBox .ts-wrapper.single .ts-control {
    background: var(--neutral-x-light);
    border: 1px solid var(--neutral-light);
    padding: 0 0.75rem;
    font-family: var(--ff-body);
    font-size: 0.875rem;
    border-radius: var(--radius-xs);
    min-height: 39px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.searchBox .ts-wrapper.multi .ts-control:focus-within,
.searchBox .ts-wrapper.single .ts-control:focus-within {
    outline: 2px solid var(--primary-main);
    outline-offset: -1px;
    background: #fff;
}

.searchBox .ts-wrapper .ts-control input {
    font-size: 0.875rem;
}

/* Tags multi-select */
.searchBox .ts-wrapper.multi .ts-control .item {
    background: var(--primary-x-light);
    color: var(--primary-x-dark);
    border: 0;
    border-radius: var(--radius-xs);
    padding: 2px 8px;
    font-size: 0.813rem;
    margin: 2px 3px 2px 0;
}

.searchBox .ts-wrapper.multi .ts-control .item .remove {
    border: 0;
    color: var(--primary-dark);
    font-size: 1rem;
}

/* Placeholder */
.searchBox .ts-wrapper .ts-control .ts-placeholder {
    color: var(--neutral-dark);
}

/* --- Tom Select Dropdown --- */
.searchBox > .field {
    position: relative;
    z-index: 1;
}

.searchBox > .field:has(.dropdown-active) {
    z-index: 10;
}

.searchBox .ts-dropdown {
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: var(--ff-body);
}

.searchBox .ts-dropdown-content {
    max-height: 250px;
    overflow-y: auto;
}

.searchBox .ts-dropdown .optgroup-header {
    font-weight: var(--fw-bold);
    font-size: 0.8rem;
    color: var(--neutral-dark);
    text-transform: uppercase;
    padding: 8px 12px 4px;
}

.searchBox .ts-dropdown .option {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.searchBox .ts-dropdown .option .count {
    float: right;
    color: var(--neutral-main);
    font-size: 0.8rem;
}

.searchBox .ts-dropdown .option.active {
    background: var(--primary-x-light);
    color: var(--primary-x-dark);
}

/* ===============================
 *  DOUBLE INPUT (Prix min/max, Surface min/max)
 * =============================== */

.double-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius-xs);
    overflow: hidden;
    height: 39px;
}

.double-input .input-min,
.double-input .input-max {
    border: 0;
    border-radius: 0;
    flex: 1;
}

.double-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-x-light);
    color: var(--neutral-main);
    font-size: 0.75rem;
    padding: 0 4px;
    flex-shrink: 0;
    user-select: none;
}

/* ===============================
 *  BOUTON CHERCHER
 * =============================== */

.btn-search-wrapper,
.btn-search-trigger-wrapper {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
}

.btn-search-wrapper {
    border-radius: var(--radius-xs);
}

.searchBox .btn-search {
    background: var(--focus-main);
    color: var(--neutral-2x-dark);
    font-weight: var(--fw-bold);
    border: 0;
    border-radius: 0;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    transition: background 0.2s;
}

.searchBox .btn-search:hover {
    background: var(--focus-dark);
}

.searchBox .btn-search .live-count {
    font-weight: var(--fw-normal);
    opacity: 0.7;
}

/* ===============================
 *  BOUTON TOGGLE AVANCÉ
 * =============================== */

.searchBox .btn-toggle-advanced {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--focus-light);
    border: 0;
    border-radius: var(--radius-xs);
    padding: 0.6rem;
    cursor: pointer;
    transition: background 0.2s;
    align-self: stretch;
}

.searchBox .btn-toggle-advanced:hover {
    background: var(--focus-dark);
}

.searchBox .btn-toggle-advanced img {
    width: 16px;
    height: 16px;
    display: block;
}

.searchBox .btn-toggle-advanced #lottie-filter {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
 *  TOGGLE PIÈCES
 * =============================== */

.pieces-toggle {
    display: flex;
    border-radius: var(--radius-xs);
    overflow: hidden;
    border: 1px solid var(--neutral-light);
}

.pieces-toggle button {
    flex: 1;
    padding: 0.5rem 0;
    border: 0;
    background: var(--neutral-light);
    color: var(--neutral-x-dark);
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: all 0.15s;
    min-width: 2.5rem;
}

.pieces-toggle button:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

.pieces-toggle button.active {
    background: var(--primary-main);
    color: #FFF;
}

.pieces-toggle button:hover:not(.active) {
    background: var(--primary-x-light);
}

/* ===============================
 *  BARRE DE TRI
 * =============================== */

.sort-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sort-bar .sort-label {
    font-size: 0.8rem;
    color: var(--neutral-dark);
    font-weight: var(--fw-bold);
}

.sort-bar .btn-sort {
    border: 0;
    background: var(--neutral-light);
    color: var(--neutral-dark);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sort-bar .btn-sort:hover {
    background: var(--primary-x-light);
    color: var(--primary-dark);
}

.sort-bar .btn-sort.active {
    background: var(--primary-main);
    color: #FFF;
}

/* ===============================
 *  BOUTON TRIGGER MOBILE
 * =============================== */

.btn-search-trigger-wrapper {
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.btn-search-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1;
    background: var(--focus-main);
    color: var(--neutral-2x-dark);
    font-weight: var(--fw-bold);
    font-size: 1rem;
    border: 0;
    border-radius: 0;
    padding: 0.85rem 1rem 0.85rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-search-trigger:hover {
    background: var(--focus-dark);
}

.btn-search-trigger img {
    width: 18px;
    height: 18px;
}

.btn-search-trigger .lottie-search {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-search-trigger .live-count {
    font-weight: var(--fw-normal);
    opacity: 0.7;
}

.btn-search-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--focus-main);
    border: 0;
    border-left: 1px solid var(--focus-light);
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-search-reset:hover {
    background: var(--focus-dark);
}

.btn-search-reset img {
    width: 18px;
    height: 18px;
}

.btn-search-reset .lottie-refresh {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
 *  MOBILE (< 992px)
 *  Offcanvas + formulaire pleine largeur
 * =============================== */

@media screen and (max-width: 991.98px) {

    /* Offcanvas : formulaire dans un panneau latéral */
    #searchOffcanvas .offcanvas-header {
        border-bottom: 1px solid var(--neutral-light);
        padding: 1rem 1.25rem;
    }

    #searchOffcanvas .offcanvas-title {
        font-weight: var(--fw-bold);
        font-size: 1.1rem;
    }

    #searchOffcanvas .offcanvas-body {
        padding: 1rem 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .searchBox {
        gap: 12px;
        flex: 0 0 auto;
    }

    /* Tous les champs en pleine largeur par défaut */
    .searchBox .field {
        width: 100%;
    }

    /* CP masqué en mobile */
    .searchBox .field-cp {
        display: none;
    }

    /* Bouton toggle masqué en mobile */
    .searchBox .btn-toggle-advanced {
        display: none;
    }

    /* Toujours afficher les labels "avancé" en mobile */
    .searchBox .label-normal { display: none; }
    .searchBox .label-advanced { display: inline; }

    /* Double inputs toujours visibles en mobile */
    .searchBox .double-input .input-min {
        display: flex;
        flex: 1;
    }

    .searchBox .double-input .double-sep {
        display: flex;
    }

    .searchBox .double-input .input-max {
        flex: 1;
    }

    /* Surface et Prix côte à côte */
    .searchBox .field-surface,
    .searchBox .field-prix {
        width: calc(50% - 6px);
    }

    /* Surface à gauche, Prix à droite (design Figma mobile) */
    .searchBox .field-surface { order: 1; }
    .searchBox .field-prix { order: 2; }
    .searchBox .field-pieces { order: 3; }
    .searchBox .field-reference { order: 4; }
    .searchBox .field-buttons { order: 5; }

    /* Bouton Chercher pleine largeur, sticky en bas */
    .searchBox .field-buttons {
        display: flex;
        position: sticky;
        bottom: 0;
        padding: 0.75rem 0;
        background: #fff;
    }

    .searchBox .btn-search {
        width: 100%;
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }
}

/* ===============================
 *  DESKTOP (>= 992px)
 *  Mode NORMAL : une seule ligne
 * =============================== */

@media screen and (min-width: 992px) {

    /* Tom Select : hauteur fixe, tags sur une ligne, badge +N */
    .searchBox .ts-wrapper.multi {
        position: relative;
    }

    .searchBox .ts-wrapper.multi .ts-control {
        height: 39px;
        flex-wrap: nowrap;
        overflow: hidden;
        padding-right: 2.5rem;
    }

    .searchBox .ts-wrapper.multi .ts-control .item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ts-overflow-badge {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--primary-main);
        color: #fff;
        font-size: 0.7rem;
        font-weight: var(--fw-bold);
        padding: 1px 6px;
        border-radius: 10px;
        pointer-events: none;
        z-index: 5;
    }

    /* --- Largeurs mode normal --- */
    .searchBox .field-ville     { flex: 3 1 0; min-width: 160px; }
    .searchBox .field-cp        { flex: 1 1 0; min-width: 90px; }
    .searchBox .field-type-bien { flex: 1.5 1 0; min-width: 130px; }
    .searchBox .field-prix      { flex: 1.5 1 0; min-width: 120px; }
    .searchBox .field-surface   { flex: 1.2 1 0; min-width: 80px; }
    .searchBox .field-buttons   { flex: 0 0 auto; }

    /* Mode normal : masquer les champs avancés */
    .searchBox .field-pieces,
    .searchBox .field-reference {
        display: none;
    }

    /* Mode normal : masquer les parties "min" et le séparateur */
    .searchBox:not(.ON) .double-input .input-min,
    .searchBox:not(.ON) .double-input .double-sep {
        display: none;
    }

    /* Mode normal : le champ max prend toute la largeur */
    .searchBox:not(.ON) .double-input .input-max {
        width: 100%;
    }

    /* Mode normal : labels */
    .searchBox:not(.ON) .label-normal { display: inline; }
    .searchBox:not(.ON) .label-advanced { display: none; }

    /* Boutons côte à côte */
    .searchBox .field-buttons {
        display: flex;
        gap: 6px;
        align-items: flex-end;
    }

    .btn-search-wrapper {
        width: auto;
        height: 39px;
    }

    .searchBox .btn-search {
        width: auto;
        min-width: 135px;
    }

    .searchBox .btn-toggle-advanced {
        display: flex;
        width: auto;
        height: 39px;
    }

    /* ===================================
     *  DESKTOP — Mode AVANCÉ (.ON)
     *  Ligne 1 : Ville, Type, Budget, Surface
     *  Ligne 2 : Pièces, Réf, Boutons (à droite)
     * =================================== */

    .searchBox.ON .field-cp {
        display: none;
    }

    .searchBox.ON .label-normal { display: none; }
    .searchBox.ON .label-advanced { display: inline; }

    /* Ligne 1 */
    .searchBox.ON .field-ville     { flex: 3 1 0; min-width: 300px; }
    .searchBox.ON .field-type-bien { flex: 1.2 1 0; min-width: 150px; }
    .searchBox.ON .field-prix      { flex: 1.6 1 0; min-width: 200px; }
    .searchBox.ON .field-surface   { flex: 1.3 1 0; min-width: 170px; }

    /* Ligne 2 : pièces force le retour à la ligne, puis réf + boutons à droite */
    .searchBox.ON .field-pieces {
        display: block;
        flex: 1 1 calc(100% - 400px);
        min-width: 300px;
    }

    .searchBox.ON .field-reference {
        display: block;
        flex: 0 0 110px;
    }

    .searchBox.ON .field-buttons {
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* Double inputs visibles en mode avancé */
    .searchBox.ON .double-input .input-min {
        display: block;
        flex: 1;
    }

    .searchBox.ON .double-input .double-sep {
        display: flex;
    }

    .searchBox.ON .double-input .input-max {
        flex: 1;
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    }
}