/* Cores globais aplicacao */
:root {
    --dark-green: rgb(21, 91, 74);
    --primary-green: rgb(115, 210, 159);
    --gray: rgb(112, 112, 112);
    --light-gray: rgba(225, 225, 225, 0.5);
}

/* Fonte padrao app */
* {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

/* html e body usam 100% da tela */
html, body {
    width: 100%;
    height: 100%;
}

/* Estiliza regiao aside */
aside {
    color: white;
}

/* Estiliza elementos de aside */
aside * {
    width: fit-content;

    :not(h1) {
        font-size: 1.5rem;
    }
}

/* Backgroud verde padrao */
.bg-primary-green {
    background-color: var(--primary-green);
}

/* Altera a fonte */
.navbar-brand *, .offcanvas-title, .footer-title {
    font-family: 'Lemon', serif;
}

/* Altera a cor da fonte */
.navbar, .navbar-brand, .navbar-brand:hover, .nav-link, .offcanvas, .footer, .nav-item .dropdown-item {
    color: var(--dark-green);
}

/* Altera o tamanho da fonte */
.nav-link .fa-cart-shopping {
    font-size: 18px;
}

/* Altera a cor de fundo */
.dropdown-item:active {
    background-color: var(--primary-green);
}

/* Arredonda para criar um circulo */
.circle {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--dark-green);
    color: white;
    text-align: center;
    
    span {
        font-size: 14px;
    }
}

/* Classe para estilizar botoes */
.rounded-button {
    border-radius: 2rem;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid white;
    padding: 1rem;
    width: 40%;
}

/* Animacao ao sobrepor com cursor */
.rounded-button:hover {
    scale: 1.05;
}

/* Formata fonte */
.form-title, .region-title {
    color: var(--primary-green);
    font-weight: 800;
}

/* Altera tamanho da fonte para respeitar elemento pai */
.region-title * {
    font-size: inherit;
}

/* Formata o label */
.form-floating > label {
    left: auto;
    color: var(--gray);
}

.form-floating > label::after {
    background-color: transparent !important;
}

/* Formataca o fieldset */
.input-fieldset {
    border: 1px solid var(--light-gray);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

/* Formata fonte dos elementos da classe */
.input-container * {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--gray);
}

/* Formata campo input */
.input-field {
    background-color: var(--light-gray);
    border-radius: 0.5rem;
    color: var(--gray);
    width: 100%;
    height: 3.6rem;
    padding-left: 4rem;
}

/* Estiliza ao focar no campo */
.input-field:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(225, 225, 225, 0.65);
    border-color: var(--gray);
    color: var(--gray);
}

/* Formatacao para icone do input */
.input-icon {
    position: absolute;
    top: 50%;
    left: 2.2rem;
}

/* Formata fonte e altura */
.login-options * {
    color: var(--gray);
    font-weight: bold;
    text-decoration: none;
    height: 3.6rem;
}

/* Formatacoes na fonte de elementos */
.pedidoInfo {
    color: var(--gray);

    h4, h5 {
        color: var(--dark-green);
    }

    span {
        color: #198754;
    }
}

/* Ajustes para largura maxima de 820px */
@media (max-width: 820px) {
    .footer-info {
        display: flex;
        flex-direction: column;
        align-items: center;

        .col-4, .col-3 {
            width: 50%;
        }
    }

}

/* Ajustes para largura maxima de 480px */
@media (max-width: 480px) {
    .footer-info {

        .col-4, .col-3 {
            width: 100%;
        }
    }

}