.password-section {
    margin-top: 20px;
    width: 100%; /* Garante que a seção ocupe toda a largura da página */
}

.password-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Ajuste dinâmico do número de colunas */
    gap: 10px;
    margin: 20px 0;
    width: 100%; /* Garante que a grid ocupe toda a largura disponível */
}

.password-btn {
    padding: 10px; /* Ajuste do padding interno */
    border: 1px solid #000; /* Borda preta fina */
    background-color: #fff !important; /* Fundo branco garantido */
    color: #333; /* Cor do texto */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Suaviza a transição da cor */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 0.875rem; /* Tamanho da fonte reduzido para garantir que caiba */
    width: 100px; /* Define uma largura fixa mais estreita */
    height: 50px; /* Define uma altura mais compacta */
    display: flex; /* Usamos flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Garante que o texto fique centralizado */
    white-space: nowrap; /* Impede que o texto quebre para outra linha */
    overflow: hidden; /* Impede que o conteúdo ultrapasse as bordas */
    text-overflow: ellipsis; /* Adiciona reticências se o texto for muito longo */
    font-weight: bold; /* Deixa o texto em negrito */
}

.password-btn:hover {
    background-color: #f0f0f0 !important; /* Efeito hover: fundo cinza claro */
}

.password-btn.selected {
    background-color: #ff8200 !important; /* Fundo laranja quando selecionado */
    color: white; /* Texto branco quando selecionado */
    border-color: #ff8200; /* Borda laranja quando selecionado */
}

.btn-confirm {
    padding: 10px 20px;
    background-color: #0d6efd; /* Cor primária do botão */
    color: white;
    border: none;
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer;
    font-weight: bold; /* Negrito no botão de confirmação também */
}

.btn-confirm:hover {
    background-color: #0056b3; /* Cor ao passar o mouse sobre o botão */
}

/* Estilos para a legenda */
.password-legend {
    margin-top: 20px;
    font-size: 1rem;
    display: block;
}

.password-legend ul {
    list-style: none;
    padding: 0;
}

.password-legend li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.password-legend .legend {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 1px solid #000;
    border-radius: 5px;
}

/* Cor da legenda para "Reservada" */
.password-legend .reserved {
    background-color: #ffc107; /* Amarelo para Reservada */
}

/* Cor da legenda para "Paga" */
.password-legend .paid {
    background-color: #28a745; /* Verde para Paga */
}

/* Cor da legenda para "Disponível" */
.password-legend .available {
    background-color: white; /* Branco para Disponível */
    border: 1px solid #000;
}


.password-btn-reserved {
    background-color: red !important; /* Reservada */
    color: #fff;
    cursor: not-allowed !important;
}

.password-btn-paid {
    background-color: green !important; /* Paga */
    color: #fff;
    cursor: not-allowed !important;
}