/* Importação de fontes */
@import url('https://fonts.googleapis.com/css2?family=OpenSans:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200..700&display=swap');

/* Estilo Base */
.bg-body-tertiary {
    --bs-bg-opacity: 0;
}

header {
    font-family: 'Poppins' !important;
    font-weight: light;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#helpModal {
    font-family: 'Montserrat' !important;
    padding-right: 0 !important;
}

#navbar-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#navbar-modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    background-color: #F97316;
    color: white;
    border-bottom: none;
    padding: 1.5rem;
}

#navbar-modal-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    flex: 1 1 auto;
    gap: 10px;
    color: black;
}

#navbar-modal-footer {
    padding: 1rem 1.5rem;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
}

/* Navbar e elementos relacionados */
.navbar-large {
    display: flex;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 0px;
}

.deslogar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-family: 'Montserrat' !important;
    margin-left: 350px;
    font-size: 2rem;
    color: white;
    padding: 10px 40px;
}

.deslogar:hover {
    background-color: rgb(253, 165, 50);
    border-radius: 2rem;
    width: 33%;
}

.nav-item .nav-link, .nav-link-large {
    color: white !important;
    text-decoration: none;
}

.nav-item .nav-link {
    border-bottom: 1px solid white;
    padding: 1.1rem 0;
}

.nav-item-large .nav-link-large {
    font-family: 'Montserrat' !important;
    font-size: 33px;
    white-space: nowrap;
    margin-top: 60px;
    padding: 5px 80px; /* Ajuste esses valores conforme necessário */
}

.nav-item-large:hover {
    background-color: rgb(253, 165, 50);
    border-radius: 2rem;
    width: 27.5rem;
}

.nav-link-large {
    text-wrap: nowrap;
}

.nav-logout .nav-login {
    padding-left: 10px;
    padding-bottom: 10px;
}

.nav-item::marker {
    content: "";
}

.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
}

/* Offcanvas */
.offcanvas {
    background-color: #fa781b !important;
    font-size: 25px;
    max-width: 97%; /* Alterado de 90% para 100% */
    width: 100%; /* Adicionado para garantir largura total */
}

.offcanvas-title {
    font-family: 'Montserrat' !important;
    font-size: 2.25rem;
    font-weight: 300;
    color: white;
}

.offcanvas-body {
    font-family: 'Poppins' !important;
}

#offcanvasNavbar .fas, .fab {
    margin-right: 10px;
}

/* Media queries combinadas para melhor organização */
@media (min-width: 992px) {
    /* Navbar para telas grandes */
    .navbar-telas-grandes {
        background: linear-gradient(to right, #ff6a00 50%, #f97316 100%) !important; /* Gradiente de laranja horizontal começando após 60% */
        padding-bottom: 0px;
        padding-top: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);    
    }
}

    .navbar-large i {
        font-size: 1.9rem;
        margin-right: 14px;
    }

    .navbar-large .fas.fa-user-circle {
        font-size: 2.25rem;
    }

    .navbar-large .minhaconta a {
        font-family: 'Roboto';
        font-size: 2.25rem;
    }

    .navbar-brand {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2rem;
    }

    .navbar-brand img {
        width: 150px; /* Adjust as needed */
        height: 150px; /* Keeps the aspect ratio */
    }

    #cart-icon-large {
        display: none;
    }
    
    #cart-icon-small {
        display: inline;
    }

    /* Styles for the Secondary Navbar */
    .navbar-secondary {
        background-color: white;
        padding: 10px 0px;
        width: 100%; /* Ensure the navbar takes full width */
    }

    .navbar-nav-secondary {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap; /* Allow items to wrap when necessary */
    }

    .nav-item-secondary {
        padding: 8px 15px;
        flex: 1; /* Make navbar items flexible */
        min-width: 120px; /* Minimum width for navbar items */
        text-align: center; /* Align text to center for aesthetics */
        font-size: 24px;
        font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    }

    .nav-item-secondary:hover {
        background-color: rgb(219, 219, 219);
        border-radius: 2rem;
    }

    .nav-item {
        font-family: 'Poppins' !important;
    }

    .nav-link-secondary {
        color: #fa781b; /* Black color for menu items */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .nav-link-secondary:hover {
        color: #ff6a00; /* Highlight color on hover */
    }
    .nav-item-secondary i {
        margin-right: 8px;
    }

    /* Estilo do video do youtube */
    #movie_player > div.ytp-chrome-top.ytp-show-cards-title > div.ytp-title > div > a {
        font-size: 0.8rem;
    }

    #navbar-modal-body > div > iframe {
        max-width: 98%;
        max-height: 15rem;
    }
    
/* Navbar Mobile */
@media (max-width: 992px) {
    .account-logout-links .nav-link {
        display: inline-block;
    }

    .account-logout-links .nav-link:first-child {
        border-right: 1px solid white;
        margin-right: 10px;
        padding-right: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 23px;
    }

    .navbar, .navbar.scrolled {
        background-color: #ff6a00 !important;
        max-height: 5.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
    }

    .nav-link-large {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .nav-login, .nav-logout {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 23px;
        margin-bottom: 20px;
    }

    .navbar-brand {
        display: flex;
        justify-content: center;
    }

    .navbar-brand img {
        height: 4.5rem;
        margin-right: 20%;
    }

    .offcanvas-body {
        font-family: 'Poppins' !important;
        font-size: 1.25rem;
    }

    /* Navbar tela pequena */
    .navbar-nav {
        font-family: 'Roboto' !important;
        gap: 1rem;
    }

    /*Navbar tela grande */
    .navbar-nav-secondary{
        display: block;
    }

    .fa-shopping-cart {
        font-size: 20px;
        color: white;
        margin-right: 20px;
        display: inline-block;
    }

    .navbar .fas.fa-user {
        font-size: 22px; /* Adjust this value as needed */
        margin-right: 4px;
    }

    #cart-icon-large {
        display: inline-block;
    }

    /* Estilo do video do youtube */
    #movie_player > div.ytp-chrome-top.ytp-show-cards-title > div.ytp-title > div > a {
        font-size: 0.8rem;
    }

    #navbar-modal-body > div > iframe {
        max-width: 98%;
        max-height: 12rem;
    }
}

/* Ajustes para o offcanvas */
.offcanvas .nav-link {
    display: flex;
    align-items: center;
}

/* Exceção para nav-minha-conta e nav-logout */
.offcanvas .nav-minha-conta,
.offcanvas .nav-logout {
    display: inline-block !important; /* !important para garantir que sobrescreva outras regras */
}

.offcanvas .fas,
.offcanvas .fab {
    width: 25px;
    text-align: center;
    margin-right: 15px !important;
}