/* ==========================================
   BOTÕES
========================================== */

.button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 20px;

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

    background:var(--surface);
    color:var(--text);

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.button:hover{

    transform:translateY(-2px);
    box-shadow:var(--shadow-md);

}

/* ==========================================
   BOTÃO PRIMÁRIO
========================================== */

.button-primary{

    background:var(--primary);
    color:#FFF;

}

.button-primary:hover{

    background:#862935;

}

/* ==========================================
   BOTÃO SECUNDÁRIO
========================================== */

.button-secondary{

    background:var(--secondary);
    color:#000;

}

/* ==========================================
   BOTÕES DAS DATAS
========================================== */

.tab-button{

    flex-shrink:0;

    padding:10px 18px;

    border:none;
    border-radius:999px;

    background:#ECECEC;

    color:var(--text);

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

.tab-button:hover{

    background:#DDDDDD;

}

.tab-button.active{

    background:var(--primary);
    color:#FFF;

}

/* ==========================================
   BOTÃO FAVORITO
========================================== */

.favorite-button{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF;

    color:#111;

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

    transition:var(--transition);

}

.favorite-button:hover{

    transform:scale(1.08);

}

.favorite-button.favorited {

    background: var(--primary);

    color: #FFF;

    box-shadow: var(--shadow-md);

}
.favorite-button.favorited .material-symbols-rounded {

    font-variation-settings: "FILL" 1;

}

/* ==========================================
   BADGES
========================================== */

.badge{

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

    padding:6px 12px;

    border-radius:999px;

    background:#F3F3F3;

    color:var(--text);

    font-size:12px;
    font-weight:600;

}

/* Badge Local */

.badge-location{

    background:rgba(156,49,60,.12);
    color:var(--primary);

}

/* Badge Hoje */

.badge-today{

    background:#FFF5D6;
    color:#9A6A00;

}

/* ==========================================
   CHIP
========================================== */

.chip{

    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:8px 14px;

    border-radius:999px;

    background:#EFEFEF;

    font-size:13px;
    font-weight:500;

}

/* ==========================================
   ÍCONES
========================================== */

.material-symbols-rounded{

    font-size:22px;
    line-height:1;
    vertical-align:middle;

}

/* ==========================================
   DIVISOR
========================================== */

.divider{

    width:100%;
    height:1px;

    background:var(--border);

}

/* ==========================================
   LOADER
========================================== */

.loader{

    width:36px;
    height:36px;

    margin:auto;

    border-radius:50%;

    border:4px solid #DDD;
    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   FAVORITOS
========================================== */

.bottom-label{

    position:relative;

    display:inline-flex;

    align-items:center;

}

.favorite-badge{

    position:absolute;

    top:-8px;

    right:-18px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:999px;

    background:var(--primary);

    color:#FFF;

    font-size:11px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.favorite-badge:empty{

    display:none;

}