/*
 * filterSentence.css : habillage propre au tiroir « Filtres des croisements » — la phrase à trous
 * « Genre / Qui recherche », et le pied fixe qui porte le bouton « Filtrer ».
 *
 * La phrase remplace la grille de deux champs étiquetés :
 *
 *   Je recherche [des hommes ▾] intéressé(e)s par [des femmes ▾]
 *
 * Les deux <select> gardent leurs id (`#filter-gender`, `#filter-interested-in`) et leurs
 * `value` : seule la présentation change.
 *
 * Documentation : Documentations/UX/filtres_genre_et_interesse_par.md
 */

#filter-drawer .filter-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    font-size: 0.875rem; /* text-sm, comme les libellés du tiroir */
    line-height: 1.9;
    color: rgb(var(--sy-neutral-700-ink-rgb)); /* gris en dur fusionné (2026-10-17) */
}

/*
 * Chaque segment « texte + liste » reste solidaire : sans lui le retour à la ligne laissait
 * « intéressé(e)s par » orphelin en fin de ligne, séparé de sa liste.
 */
#filter-drawer .filter-sentence-part {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

#filter-drawer .filter-sentence-text {
    font-weight: 500;
    white-space: nowrap;
}

/*
 * Même habillage que les autres listes du tiroir (`.filter-drawer-select` dans style.css) :
 * texte neutre sur fond blanc, bordure `neutral-300`, pilule arrondie, flèche SVG. Seule la
 * largeur diffère : `auto` au lieu de `w-full`, pour que la liste se dimensionne sur son
 * option et reste dans le fil de la phrase. `max-width: 100%` évite le débordement sur un
 * écran étroit.
 */
#filter-drawer select.filter-sentence-select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    max-width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 1rem;
    border: 1px solid rgb(212 212 212); /* neutral-300 */
    border-radius: 9999px;
    background-color: var(--sy-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    color: rgb(var(--sy-neutral-900-ink-rgb)); /* gris en dur fusionné (2026-10-17) */
    font-size: inherit;
    font-weight: 400;
    line-height: 1.25rem;
    cursor: pointer;
}

#filter-drawer select.filter-sentence-select:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px rgb(var(--sy-accent-600-rgb) / 0.55);
}

/*
 * Pied fixe du tiroir : frère de `#filter-drawer-scroll`, donc toujours visible quel que soit
 * le défilement. Être à l'intérieur du conteneur scrollable obligeait à dérouler toute la liste
 * pour atteindre le bouton.
 */
#filter-drawer .filter-drawer-footer {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--sy-surface);
    border-top: 1px solid var(--sy-neutral-100); /* comme l’en-tête ; gris en dur fusionné (2026-10-17) */
}

/* Fond uni à la couleur principale du thème, là où `bg-gradient-scan` posait un dégradé. */
#filter-drawer .filter-drawer-apply-btn {
    width: 80vw;
    max-width: 20rem;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: 9999px;
    background: var(--sy-primary);
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(var(--sy-brand-600-rgb) / 0.35);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#filter-drawer .filter-drawer-apply-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgb(var(--sy-brand-600-rgb) / 0.35);
    transform: scale(1.02);
}

#filter-drawer .filter-drawer-apply-btn:active {
    transform: scale(0.99);
}


/*
 * Filtres « Langues parlées » → « Signe astrologique » : un par ligne, libellé à gauche et
 * champ à droite. Ils étaient en grille de deux colonnes, chacun sur deux lignes (libellé
 * au-dessus du champ) : sept filtres occupaient huit lignes visuelles.
 */
#filter-drawer .filter-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#filter-drawer .filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#filter-drawer .filter-row > label {
    flex: 0 1 auto;
    margin-bottom: 0;
    min-width: 0;
}

/* Le champ (liste ou pastille des langues) prend la moitié droite, sans jamais l'écraser. */
#filter-drawer .filter-row > select,
#filter-drawer .filter-row > #selected-language-filter-display {
    flex: 0 0 auto;
    width: 55%;
    max-width: 55%;
    min-width: 0;
}

/* Sous 340 px, le libellé et le champ se superposent plutôt que de se comprimer. */
@media (max-width: 340px) {
    #filter-drawer .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    #filter-drawer .filter-row > select,
    #filter-drawer .filter-row > #selected-language-filter-display {
        width: 100%;
        max-width: 100%;
    }
}