/* ==================================================
   PéKa Client Access - Écrans tactiles
   Module autonome du thème
================================================== */

.peka-tactile-wrap{
    position:relative;
}

#tactile-toggle{
    cursor:pointer;
}

#tactile-login{

    position:absolute;

    bottom:calc(100% + 12px);

    left:0;

    z-index:99999;

    width:340px;
    max-width:90vw;

    margin-bottom:12px;

    padding:16px;

    background:#fff;

    border:1px solid #dfe6ee;
    border-radius:12px;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:translateX(-50%) translateY(10px);

    transition:
        opacity .20s,
        transform .20s,
        visibility .20s;
}

#tactile-login.open{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

#tactile-login label{
    display:block;
    margin-bottom:8px;

    font-size:13px;
    font-weight:700;
    color:#182333;
}

#clientSearch{
    width:100%;
    padding:11px 12px;

    border:1px solid #ccd6df;
    border-radius:9px;

    font-size:14px;
    line-height:1.35;
    font-family:inherit;
    color:#182333;
}

#clientSearch::placeholder{
    color:#8a96a3;
}

#clientSearch:focus{
    outline:none;
    border-color:var(--blue,#093c7d);
    box-shadow:0 0 0 3px rgba(9,60,125,.12);
}

#clientSuggestions{
    display:none;
    margin-top:8px;

    max-height:220px;
    overflow:auto;

    border:1px solid #e1e7ee;
    border-radius:9px;

    background:#fff;
}

#clientSuggestions.open{
    display:block;
}

.peka-tactile-suggestion{
    display:block;
    width:100%;

    padding:10px 12px;

    background:#fff;
    border:0;
    border-bottom:1px solid #eef3f7;

    text-align:left;
    font-family:inherit;
    font-size:14px;
    line-height:1.35;
    color:#182333;

    cursor:pointer;
}

.peka-tactile-suggestion:last-child{
    border-bottom:0;
}

.peka-tactile-suggestion:hover,
.peka-tactile-suggestion.active{
    background:#f4f8fb;
    color:var(--blue,#093c7d);
}

.tactile-error{
    display:none;
    margin-top:10px;

    font-size:13px;
    line-height:1.35;
    color:#c40000;
}

.tactile-error.open{
    display:block;
}

.tactile-error.open{
    display:block;
}

.desktop-only{
    display:inline;
}

@media (max-width:768px){

    .desktop-only,
    #tactile-login{
        display:none !important;
    }

}

#tactile-login{
    transition:opacity .2s, transform .2s;
}