.button {
    text-align: center;
    background-color: var(--light-magenta);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 10px 15px;
    cursor: pointer;
    font-weight: normal;
    transition: background-color 0.3s;
    box-shadow: var(--button-shadow);
}
.button:hover {
    background-color: var(--dark-magenta);
}
.button:active {
    transform: translateY(2px);
}

.button-inverted {
    background-color: white;
    color: var(--dark-magenta);
    border: 1px solid var(--dark-magenta);
    border-radius: var(--border-radius);
    padding: 8px 15px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.3s;
    box-shadow: var(--button-shadow);
}
.button-inverted:hover {
    background-color: var(--dark-magenta);
    color: white;
}
.button-inverted:active {
    transform: translateY(2px);
}

.button-invisible-border {
    background-color: white;
    color: var(--dark-magenta);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: normal;
    transition: color 0.3s;
}
.button-invisible-border:hover {
    color: var(--light-magenta);
}

.script-button {
    background-color: transparent;
    color: var(--dark-magenta);
    border: none;
    padding: 0.4em 0;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0.5em;
    transition: color 0.3s;
}
.script-button:hover {
    color: var(--light-magenta);
}

/* 
    Botões e barra de navegação de datas 
*/
#date-navigation-buttons {
    position: fixed;
    top: 4.9rem;
    left: 0;
    
    display: flex;
    justify-content: space-between; /* Distribui os elementos */
    align-items: first baseline ; /* Alinha verticalmente */
    width: 100%; /* Garante que ocupe toda a largura disponível */
    height: 3.3rem;
    
    background-color: rgba(239, 239, 239, 0.95);
    
    padding: 0;
    margin: 0;
    box-shadow: var(--box-shadow);
    z-index: 999;
}
.side-arrow-button{
    background-color: inherit;
    cursor: pointer;
    color: var(--dark-magenta);
    text-align: center;
    font-weight: normal;
    font-size: x-large;
    padding: .5rem;
    border-style: none;
    margin: 0;
}
#previous-day {
    flex: 0; /* Mantém o tamanho do botão */
}
#selected-full-date {
    flex: 1; /* Ocupa o espaço disponível no meio */
    text-align: center;
    
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    
}
#weekday {
    color: var(--darker-magenta);
    font-size: 16px;
    font-weight: bold;
}
#date-picker {
    color: var(--light-magenta);
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    background-color: white;
    padding: 5px;
    border: none;
}
#next-day {
    flex: 0; /* Mantém o tamanho do botão */
    margin-left: auto; /* Empurra para a direita */
}

share-button {
    position: fixed;
    top: 5rem;
    left: 1rem;
}