/* ==========================================================
   SYLFOW MARKET
   FORMS
========================================================== */

/* ==========================================================
   GROUPE DE CHAMP
========================================================== */

.sf-form-group{
    display:flex;
    flex-direction:column;
    gap:.55rem;
    margin-bottom:1.5rem;
}

/* ==========================================================
   LABEL
========================================================== */

.sf-label{
    font-size:.95rem;
    font-weight:var(--sf-fw-semibold);
    color:var(--sf-text);
}

/* ==========================================================
   INPUTS
========================================================== */

.sf-input,
.sf-select,
.sf-textarea{

    width:100%;

    padding:1rem 1.15rem;

    border:1px solid var(--sf-border);

    border-radius:var(--sf-radius-md);

    background:var(--sf-white);

    color:var(--sf-text);

    font-size:1rem;

    transition:var(--sf-transition);

}

/* ==========================================================
   FOCUS
========================================================== */

.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus{

    border-color:var(--sf-primary);

    box-shadow:0 0 0 4px rgba(22,163,74,.12);

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.sf-input::placeholder,
.sf-textarea::placeholder{

    color:var(--sf-text-muted);

}

/* ==========================================================
   TEXTAREA
========================================================== */

.sf-textarea{

    resize:vertical;

    min-height:140px;

}

/* ==========================================================
   SELECT
========================================================== */

.sf-select{

    cursor:pointer;

}

/* ==========================================================
   INPUT AVEC ICÔNE
========================================================== */

.sf-input-icon{

    position:relative;

}

.sf-input-icon i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:var(--sf-text-muted);

    pointer-events:none;

}

.sf-input-icon .sf-input{

    padding-left:48px;

}

/* ==========================================================
   MESSAGE D'AIDE
========================================================== */

.sf-help{

    font-size:.85rem;

    color:var(--sf-text-muted);

}

/* ==========================================================
   MESSAGE D'ERREUR
========================================================== */

.sf-error{

    font-size:.85rem;

    color:var(--sf-danger);

}

/* ==========================================================
   ETAT ERREUR
========================================================== */

.sf-input-error{

    border-color:var(--sf-danger);

}

.sf-input-error:focus{

    box-shadow:0 0 0 4px rgba(239,68,68,.12);

}

/* ==========================================================
   ETAT SUCCÈS
========================================================== */

.sf-input-success{

    border-color:var(--sf-success);

}

.sf-input-success:focus{

    box-shadow:0 0 0 4px rgba(34,197,94,.12);

}

/* ==========================================================
   CHECKBOX
========================================================== */

.sf-checkbox{

    display:flex;

    align-items:center;

    gap:.65rem;

}

/* ==========================================================
   SWITCH
========================================================== */

.sf-switch{

    display:flex;

    align-items:center;

    gap:.75rem;

}

/* ==========================================================
   BARRE DE RECHERCHE
========================================================== */

.sf-search{

    display:flex;

    align-items:center;

    background:var(--sf-white);

    border:1px solid var(--sf-border);

    border-radius:999px;

    overflow:hidden;

    box-shadow:var(--sf-shadow-sm);

}

.sf-search input{

    flex:1;

    border:none;

    padding:1rem 1.4rem;

}

.sf-search button{

    margin:.45rem;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .sf-search{

        flex-direction:column;

        border-radius:var(--sf-radius-lg);

    }

    .sf-search input{

        width:100%;

    }

    .sf-search button{

        width:calc(100% - 16px);

        margin:8px;

    }

}