.hero {
    background-color: var(--bdmc-primary);
    width: 100%;
    height: 356px;
}

.hero .h1{
    color: white;
}

.search-input-container {
    /* margin: 0 20%; */
    border-radius: 36px !important;
}

#searchInput {
    width: 100%;
    background-color: var(--input-background-color);
    border: none !important;
    height: 100%;
    padding: 0;
}

#search_banker_by_identity_identity{
    border: none;
    margin: 0;
}

.search-input-container .ts-wrapper {
    width: 100%;
}

.search-input-container .ts-wrapper .ts-control {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: auto;
}

#searchInput:focus{
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

#search_banker_proximity .form-select{
    border: none;
}

.btn-search {
    color: var(--bdmc-secondary);
    border: var(--bdmc-secondary) 1px solid;
    border-radius: 36px;
}

.btn-search:hover {
    color: white;
    border: var(--bdmc-secondary) 1px solid;
    background-color: var(--bdmc-secondary);
}

.btn-primary-focus{
    background-color: white;
    color: var(--bdmc-primary);
}

.btn-outline{
    border-color: white;
}


/** Card */
.card{
 border: none;
 box-shadow: 0 0 10px rgb(0, 0, 0, 0.10);
 padding: 0.4rem;
}

.banker-card {
    width: 100%;
    max-width: 216px;
    min-width: 0;
    min-height: 276px;
}

.card-header, .card-footer, .card-body {
    display: flex;
    background-color: white;
    border: none;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.card-body{
    flex-direction: column;
}

.card-body h5 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.banker-card-city {
    min-width: 0;
    max-width: 100%;
}

.banker-card-city span {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.card .avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bdmc-primary-light);
    height: 84px;
    width: 84px;
    border-radius: 100%;
}

/**
 * Icône de type d'adresse (bâtiment / maison) affichée en overlay sur l'avatar de la carte
 * banquier, selon l'adresse effectivement retenue par la recherche courante (BankerCard.html.twig,
 * prop `addressType` : 'professional' | 'personal' | null).
 */
.avatar-wrapper {
    position: relative;
    display: inline-flex;
}

.address-type-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: var(--bdmc-primary);
    color: white;
    font-size: 0.7rem;
}

/**
 * Filtre "Type d'adresse" — bouton pilule intégré à `.search-input-container`, à côté du champ
 * de recherche (identity et proximity), ouvrant un menu déroulant Bootstrap. Le <select> Symfony
 * réel reste dans le DOM (classe `.address-type-select`) mais visuellement masqué via
 * `.visually-hidden` (cf. templates/users/teacher/search/_address_type_dropdown.html.twig) :
 * il ne doit porter aucun style visuel ici.
 */
.address-type-dropdown {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

.address-type-toggle {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--bdmc-primary);
    border-color: var(--bdmc-primary);
}

.address-type-toggle:hover {
    color: white;
    border-color: var(--bdmc-primary);
    background-color: var(--bdmc-primary);
}

.address-type-dropdown .dropdown-menu {
    --bs-dropdown-min-width: 12rem;
}

.address-type-dropdown .dropdown-item {
    display: flex;
    align-items: center;
}

.address-type-dropdown .dropdown-item.active,
.address-type-dropdown .dropdown-item:active {
    background-color: var(--bdmc-primary);
    color: white;
}

.address-type-dropdown .dropdown-item:hover,
.address-type-dropdown .dropdown-item:focus {
    background-color: var(--bdmc-primary-light);
    color: var(--bdmc-primary);
}

/**
 * Espacement entre le filtre "Type d'adresse" et le bouton "Rechercher" — mode identité
 * uniquement. Le vrai frère DOM adjacent de `.btn-search` n'est pas `.address-type-dropdown`
 * (son `</div>` se ferme avant) mais le `<select>` caché `.address-type-select` rendu juste
 * après par `_address_type_dropdown.html.twig`. En mode proximity il n'y a pas de bouton
 * "Rechercher" à sa suite dans `.search-input-container`, donc ce sélecteur ne le concerne pas.
 */
.address-type-select + .btn-search {
    margin-left: 0.5rem;
}

.search-highlight {
    background: var(--bs-highlight-bg, #fff3cd);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 0.15rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/**
 * Loader overlay (recherche banquier - proximité)
 * Couvre toute la fenêtre (injecté dans document.body, pas dans .results) :
 * position fixed + z-index au-dessus des composants Bootstrap les plus hauts
 * (modal-backdrop 1050, modal 1055, popover 1070, tooltip 1080, toast 1090).
 */
.results-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1100;
}

.results-loading-overlay .spinner-border {
    border-color: var(--bdmc-primary);
    border-right-color: transparent;
}

.results-loading-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.results-loading-overlay-text {
    color: white;
}

/**
 * Icônes ajoutées pour le rendu mobile (bouton "Rechercher" et bouton "Contacter") : masquées
 * par défaut pour ne rien changer au rendu desktop actuel, révélées uniquement dans le media
 * query mobile ci-dessous.
 */
.mobile-icon {
    display: none;
}

/**
 * Mobile layout (< 576px, sous le breakpoint Bootstrap `sm`) — FBF-1248, maquette mobile.
 * N'affecte que les écrans étroits : le rendu >= 576px (grille de cartes, hero fixe, bouton
 * "Rechercher" texte) reste strictement inchangé.
 */
@media (max-width: 575.98px) {
    .mobile-icon {
        display: inline-block;
    }

    /* Hero : hauteur fixe -> min-height pour éviter que le contenu (titre 2 lignes + sous-titre
       qui se replie sur plusieurs lignes + boutons + barre de recherche) ne soit tronqué. */
    .hero {
        height: auto;
        min-height: 268px;
        padding-bottom: 1.5rem;
    }

    /* Titre du hero : la taille fluide Bootstrap (.h1) est trop petite sur mobile pour ce texte
       en majuscules ("PLUS DE X BANQUIERS VOUS ATTENDENT !"), on force une taille plus lisible
       tout en restant raisonnable pour ne pas déborder du hero (min-height 268px). */
    .hero .h1 {
        font-size: 2rem;
        padding: 0 1rem;
    }

    /* Sous-titre du hero : centré et un peu de respiration horizontale pour éviter qu'il ne
       touche les bords de l'écran sur mobile. */
    .hero-subtitle {
        display: none;
    }

    /* Boutons pilules "Tout rechercher" / "Les plus proches" : la maquette mobile les affiche
       en pilule pleinement arrondie et plus compacte qu'en desktop (radius Bootstrap par défaut
       conservé >= 576px, volontairement non modifié pour ne rien casser du rendu desktop actuel). */
    .mode-switch-btn {
        border-radius: 50rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Bouton "Rechercher" : passe d'une pilule avec texte (bordure/texte rouge --bdmc-secondary,
       cf. rendu desktop existant) à un bouton rond turquoise icône seule, conforme à la maquette. */
    .btn-search {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;
        color: var(--bdmc-secondary);
        background-color: white;
        border-color: var(--bdmc-secondary);
    }

    .btn-search:hover {
        color: var(--bdmc-secondary);
        background-color: white;
        border-color: var(--bdmc-secondary);
    }

    .btn-search-text {
        display: none;
    }

    /* Filtre "Type d'adresse" : le bouton hérite du rendu rond icône-seule de `.btn-search`
       ci-dessus (même classe), mais en --bdmc-primary (au lieu de --bdmc-secondary) pour se
       distinguer du bouton "Rechercher" voisin ; on masque aussi le chevron du dropdown pour
       garder un cercle propre. */
    .address-type-toggle {
        color: var(--bdmc-primary);
        background-color: white;
        border-color: var(--bdmc-primary);
    }

    .address-type-toggle:hover {
        color: var(--bdmc-primary);
        background-color: white;
        border-color: var(--bdmc-primary);
    }

    .address-type-toggle::after {
        display: none;
    }

    /* Carte banquier : grille -> liste verticale de lignes horizontales.
       La structure Twig (card-header = avatar / card-body = nom + ville / card-footer = bouton)
       est réutilisée telle quelle, seule sa disposition passe de verticale à horizontale. */
    .banker-card {
        flex-direction: row;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
    }

    .banker-card .card-header,
    .banker-card .card-body,
    .banker-card .card-footer {
        padding: 0;
        background-color: transparent;
    }

    .banker-card .card-header {
        flex-shrink: 0;
    }

    .banker-card .avatar {
        height: 44px;
        width: 44px;
    }

    .banker-card .avatar svg {
        width: 20px;
        height: 20px;
    }

    /* Icône de type d'adresse : réduite pour rester proportionnée au petit avatar mobile (44px). */
    .address-type-icon {
        width: 16px;
        height: 16px;
        border-width: 1px;
        bottom: -1px;
        right: -1px;
        font-size: 0.5rem;
    }

    .banker-card .card-body {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .banker-card .card-body h5 {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
    }

    .banker-card .banker-card-city {
        justify-content: flex-start !important;
        font-size: 0.8rem;
        color: #6c757d;
    }

    .banker-card .banker-card-city svg {
        width: 16px;
        height: 16px;
    }

    .banker-card .card-footer {
        flex-shrink: 0;
    }

    .banker-card .card-footer .btn {
        width: 40px !important;
        height: 40px;
        min-width: 40px;
        padding: 0;
        border-radius: 50%;
    }

    .banker-card .card-footer .btn-text {
        display: none;
    }
}