/**
 * SOS Pare-Brise+ — Barre de recherche hero (design desktop).
 * Bloc blanc inline : [ pin geo | input sans bordure | bouton bleu marine ] — pas de wrap.
 * Radius asymétrique 12/4/12/4 (TL/TR/BR/BL) sur le bloc ET le bouton.
 * Lien "Utiliser ma position GPS" (picto ⊕ + texte) sous le bloc, sans effet bouton.
 *
 * Tokens design (surchargeables via --sos-sb-* dans le CSS additionnel Elementor).
 * Polices attendues : Inter (input) et Outfit (bouton + GPS) — doivent être chargées
 * par le thème / Elementor ; fallback sans-serif sinon.
 */
.sos-sb {
    --sos-sb-navy:        #21326A;
    --sos-sb-yellow:      #FFCC2B;
    --sos-sb-card-bg:     #FFFFFF;
    --sos-sb-radius:      12px 4px 12px 4px;
    --sos-sb-placeholder: #333333;
    --sos-sb-gps-color:   #FFFFFF;
    --sos-sb-max-width:   100%;

    width: 100%;
    max-width: var(--sos-sb-max-width);
    margin: 0;            /* ferré à gauche (desktop) */
    text-align: left;
    box-sizing: border-box;
}

.sos-sb *,
.sos-sb *::before,
.sos-sb *::after {
    box-sizing: border-box;
}

/* Bloc intro optionnel (rendu seulement si attribut title/teaser fourni) */
.sos-sb__title {
    margin: 0 0 6px;
    color: var(--sos-sb-gps-color);
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sos-sb__teaser {
    margin: 0 0 14px;
    color: var(--sos-sb-gps-color);
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.92;
}

/* Bloc blanc inline (radius asymétrique imposé contre les styles thème) */
.sos-sb .sos-sb__card {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 24px;
    background: var(--sos-sb-card-bg);
    border: none;
    border-radius: var(--sos-sb-radius) !important;
}

/* Zone champ (pin + input) — reste inline ; en mobile elle passe pleine largeur au-dessus du bouton */
.sos-sb__field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sos-sb__pin {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sos-sb-navy);
}

/* Input SANS bordure visible — on neutralise les styles form du thème/Elementor */
.sos-sb .sos-sb__input,
.sos-sb .sos-sb__input:hover,
.sos-sb .sos-sb__input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 13.8px;
    font-weight: 400;
    color: var(--sos-sb-placeholder);
    line-height: 1.4;
}

.sos-sb .sos-sb__input::placeholder {
    color: var(--sos-sb-placeholder);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    opacity: 1;
}

/* Bouton "Trouver mon centre" — bleu marine, AUCUN hover, radius 12/4/12/4 */
.sos-sb .sos-sb__cta,
.sos-sb .sos-sb__cta:hover,
.sos-sb .sos-sb__cta:focus,
.sos-sb .sos-sb__cta:active {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    margin: 0;
    padding: 16px 30px;
    -webkit-appearance: none;
    appearance: none;
    border: none !important;
    cursor: pointer;
    background: var(--sos-sb-navy) !important;
    background-image: none !important;
    border-radius: var(--sos-sb-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF !important;
    white-space: nowrap;
}

/* Pastille triangle : desktop = absente (seule la flèche → du texte) */
.sos-sb__cta-picto {
    display: none;
}

/* Lien GPS : picto ⊕ + texte. AUCUN style bouton : pas de fond, pas de bordure, pas de radius. */
.sos-sb .sos-sb__gps,
.sos-sb .sos-sb__gps:hover,
.sos-sb .sos-sb__gps:focus,
.sos-sb .sos-sb__gps:active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 12px 0 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--sos-sb-gps-color);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.sos-sb__gps-icon {
    display: inline-flex;
    align-items: center;
}

.sos-sb__gps.is-loading {
    opacity: 0.6;
    cursor: progress;
}

/* ============================================================
   MOBILE (<= 1090px) : carte en colonne, bouton JAUNE pleine largeur + pastille triangle.
   Inchangé vs desktop : polices, placeholder, pin, radius carte, lien GPS.
   ============================================================ */
@media (max-width: 1090px) {
    .sos-sb .sos-sb__card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        /* padding-bottom 0 : le bouton dépasse volontairement sous la carte (cf. margin négatif). */
        padding: 12px 12px 0;
        border-radius: 10px !important; /* mobile : radius uniforme partout */
    }

    /* Champ pleine largeur (plus de bouton à sa droite) */
    .sos-sb__field {
        width: 100%;
        padding: 6px 12px;
    }

    /* Bouton : pleine largeur, JAUNE, texte navy, pastille triangle visible à droite.
       margin-bottom négatif = le bouton SORT de 10px sous le bord bas du bloc blanc (design). */
    .sos-sb .sos-sb__cta,
    .sos-sb .sos-sb__cta:hover,
    .sos-sb .sos-sb__cta:focus,
    .sos-sb .sos-sb__cta:active {
        width: 100%;
        flex-shrink: 1;
        margin: 0 0 -10px;
        padding: 18px 56px 18px 30px;
        background: var(--sos-sb-yellow) !important;
        color: var(--sos-sb-navy) !important;
        border-radius: 14px 4px 14px 4px !important; /* mobile : bouton 14/4/14/4 */
    }

    /* Lien GPS : on garde de l'air sous le bouton qui dépasse de 10px */
    .sos-sb .sos-sb__gps {
        margin-top: 24px;
    }

    .sos-sb__cta-picto {
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
    }

    .sos-sb__cta-picto img {
        display: block;
        width: auto;
        height: 38px;
    }
}