/* ==========================================================
   Clockhood Universal Sticky Toolbar
========================================================== */

.sticky-toolbar{
    position:sticky;
    top:100px;                 /* adjust to your header height */
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    padding:10px 20px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);

    border-bottom:1px solid #e5e7eb;
    box-shadow:0 3px 12px rgba(0,0,0,.06);
}

.toolbar-left,
.toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.toolbar-left{
    flex:1;
}

#globalSearch{
    flex:1;
    min-width:220px;
    max-width:420px;

    height:42px;

    padding:0 16px;

    border:1px solid #d1d5db;
    border-radius:24px;

    font-size:15px;
    outline:none;

    transition:.25s;
}

#globalSearch:focus{
    border-color:#D4AF37;
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
}

.toolbar-left select{
    height:42px;

    padding:0 12px;

    border:1px solid #d1d5db;
    border-radius:10px;

    background:#fff;

    cursor:pointer;
}

.toolbar-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:42px;

    padding:0 16px;

    border:none;
    border-radius:10px;

    background:#f3f4f6;

    color:#222;

    text-decoration:none;

    cursor:pointer;

    transition:.2s;
}

.toolbar-btn:hover{

    background:#D4AF37;

    color:#fff;

}

.toolbar-btn.whatsapp{

    background:#25D366;

    color:#fff;

}

.toolbar-btn.favorite{

    background:#b91c1c;

    color:#fff;

}

.toolbar-btn.secondary{

    background:#6b7280;

    color:#fff;

}

@media(max-width:992px){

    .sticky-toolbar{

        flex-wrap:wrap;

        top:70px;

    }

    .toolbar-left{

        width:100%;

        flex-wrap:wrap;

    }

    #globalSearch{

        max-width:none;

        width:100%;

    }

}

@media(max-width:640px){

    .toolbar-btn{

        padding:0 12px;

        font-size:13px;

    }

    .toolbar-left select{

        flex:1;

        min-width:120px;

    }

}

.search-group{
    display:flex;
    align-items:center;
    gap:8px;
    flex:.5;
}

.search-group input{
    flex:1;
}

.search-btn{
    white-space:nowrap;
}