body {
    background-image: url('always-grey.png');
    background-color: #f8f9fa;
    color: #343a40;
}
.container {
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    border-radius: 15px;
    margin-top: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #E6AD7C;
}
.form-group label {
    font-weight: bold;
    color: #E6AD7C;
}
.btn-primary {
    background-color: #E6AD7C;
    border-color: #e83e8c;
}
.btn-primary:hover {
    background-color: #E6AD7C;
    border-color: #d63384;
}
.form-check-label {
    color: #495057;
}
.form-control {
    display: inline-block;
    width: auto;
}
.quantity-available {
    display: inline-block;
    width: auto;
    margin-left: 10px;
    color: #6c757d;
}

.form-check {
    display: flex;
    align-items: center;
}

.form-check-input {
    margin-right: 10px; /* Espaço entre o checkbox e o texto */
}

/* Estilo para o campo de quantidade */
.quantidade {
    width: 180px; /* Ajuste a largura conforme necessário */
    display: inline-block;
    margin-left: 10px; /* Espaço entre o campo de quantidade e o texto */
}

/* Centraliza verticalmente o checkbox com o texto */
.form-check {
    display: flex;
    align-items: center;
}

.form-check-input {
    margin-right: 10px; /* Espaço entre o checkbox e o texto */
}

.form-check-label {
    margin-bottom: 0; /* Remove margem inferior para alinhamento */
}

.quantity-available {
    margin-left: 10px; /* Espaço entre o campo de quantidade e a quantidade disponível */
}

/* Ajustes gerais para dispositivos móveis */
@media (max-width: 767px) {
    /* Aumenta a largura dos campos de quantidade para maior usabilidade em telas pequenas */
    .form-control-quantity {
        width: 100%; /* Ocupa toda a largura disponível */
        margin-bottom: 10px; /* Espaço abaixo do campo */
    }

    /* Ajusta o alinhamento dos itens da lista para que fiquem mais legíveis */
    .form-check {
        flex-direction: column; /* Alinha o checkbox e o texto em coluna */
        align-items: flex-start; /* Alinha o conteúdo ao início */
        margin-bottom: 15px; /* Espaço entre os itens */
    }

    .form-check-label {
        margin-bottom: 5px; /* Espaço abaixo do texto do item */
    }

    .form-check-input {
        margin-bottom: 10px; /* Espaço abaixo do checkbox */
    }

    .quantity-available {
        display: block; /* Exibe a quantidade disponível em uma nova linha */
        margin-top: 5px; /* Espaço acima da quantidade disponível */
    }

    /* Ajusta a largura do botão e do link */
    .btn {
        width: 100%; /* Ocupa toda a largura disponível */
        margin-bottom: 10px; /* Espaço abaixo do botão/link */
    }
}

/* Ajustes adicionais para melhorar a legibilidade e o layout geral */
.container {
    padding: 30px; /* Espaço interno da caixa */
}

h1 {
    font-size: 1.5rem; /* Tamanho da fonte do título */
}

.form-group {
    margin-bottom: 15px; /* Espaço abaixo dos grupos de formulário */
}

.form-control {
    font-size: 1rem; /* Tamanho da fonte dos campos de entrada */
    padding: 10px; /* Espaço interno dos campos */
}