/* Extraído de app/Views/template.php (layout compartilhado) em refatoração de CSS (NDR Educação). */
        /* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */

        body.bg-yellow-100 {
            background-color: #ffffff !important;
        }


        /* =========================================================
   CABEÇALHO
========================================================= */

        header.header-style1 .navbar-default,
        header.menu_area-light .navbar-default {
            background-color: #ffffff !important;
            border-bottom: 1px solid #e8edf5 !important;
            box-shadow: 0 10px 26px rgba(23, 33, 52, 0.06) !important;
        }


        /* Links principais do menu */

        header.header-style1 .navbar-nav>li>a,
        header.menu_area-light .navbar-nav>li>a,
        header.header-style1.scrollHeader .navbar-nav>li>a,
        header.menu_area-light.scrollHeader .navbar-nav>li>a {
            color: #177865 !important;
        }


        /* Hover e item ativo */

        header.header-style1 .navbar-nav>li>a:hover,
        header.menu_area-light .navbar-nav>li>a:hover,
        header.header-style1 .navbar-nav>li.current>a,
        header.menu_area-light .navbar-nav>li.current>a,
        header.header-style1 .navbar-nav>li.active>a,
        header.menu_area-light .navbar-nav>li.active>a {
            color: #ff6f2c !important;
        }


        /* Links dos submenus */

        header.header-style1 .navbar-nav li>ul a,
        header.menu_area-light .navbar-nav li>ul a {
            color: #273044 !important;
        }

        header.header-style1 .navbar-nav li>ul a:hover,
        header.menu_area-light .navbar-nav li>ul a:hover,
        header.header-style1 .navbar-nav li>ul li.current>a,
        header.menu_area-light .navbar-nav li>ul li.current>a {
            color: #177865 !important;
        }


        /* =========================================================
   BOTÕES DO CABEÇALHO
========================================================= */

        .header-store-button {
            background-color: #ff6f2c !important;
            border-color: #ff6f2c !important;
            box-shadow: 0 10px 22px rgba(255, 111, 44, 0.26) !important;
        }

        .header-store-button:hover,
        .header-store-button:focus {
            color: #ffffff !important;
            background-color: #e95e20 !important;
            border-color: #e95e20 !important;
            box-shadow: 0 14px 28px rgba(255, 111, 44, 0.34) !important;
        }


        /* Corrige ícone e texto dos botões */

        .header-action-button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px;

            min-height: 54px;
            line-height: 1 !important;

            overflow: visible !important;
            white-space: nowrap;
        }

        .header-action-button i,
        .header-action-button .label {
            position: static !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            left: auto !important;

            display: inline-block !important;

            opacity: 1 !important;
            visibility: visible !important;

            transform: none !important;
            line-height: 1 !important;
        }


        /* Área dos botões à direita */

        .attr-nav>ul {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end;
            gap: 10px;

            margin: 0;
            padding: 0;
        }

        .attr-nav>ul>li {
            display: flex;
            align-items: center;
            margin: 0 !important;
        }


        /* =========================================================
   MENU DESKTOP — logo à esquerda / menu ao centro / botão à direita
   (padding e seta do submenu aplicados sem depender da classe
   .has-sub, que o nav-menu.js só adiciona depois que a página carrega —
   por isso o menu antes "pulava" ao abrir)
========================================================= */

        @media (min-width: 1200px) {

            header.header-style1 .navbar,
            header.menu_area-light .navbar {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 14px;
            }

            header.header-style1 .navbar-header-custom,
            header.menu_area-light .navbar-header-custom {
                order: 1;
                flex: 0 0 auto;
            }

            header.header-style1 .navbar-nav,
            header.menu_area-light .navbar-nav {
                display: flex !important;
                order: 2;
                flex: 1 1 auto;
                align-items: center;
                justify-content: center;

                min-width: 0;
                gap: 22px;

                margin-left: 18px !important;
                margin-right: 12px !important;
            }

            header.header-style1 .navbar-nav>li,
            header.menu_area-light .navbar-nav>li {
                position: relative;
                flex: 0 0 auto;

                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-right: 13px !important;

                text-align: left;
            }

            header.header-style1 .navbar-nav>li>a,
            header.menu_area-light .navbar-nav>li>a,
            header.header-style1.scrollHeader .navbar-nav>li>a,
            header.menu_area-light.scrollHeader .navbar-nav>li>a {
                display: flex;
                align-items: center;

                padding: 21px 0 !important;

                font-size: 14px !important;
                line-height: 1 !important;
                letter-spacing: 0.35px !important;

                white-space: nowrap;
            }

            header.header-style1 .navbar>ul>li:has(>ul)>a::after,
            header.menu_area-light .navbar>ul>li:has(>ul)>a::after {
                position: absolute;
                top: 25px;
                right: -13px;
                content: "";
                display: block;
                width: 6px;
                height: 6px;
                border-style: solid;
                border-width: 0 1px 1px 0;
                transform: rotate(45deg);
                transition: border 0.3s ease 0s;
                border-color: transparent #177865 #177865 transparent;
            }

            header.header-style1 .navbar>ul>li:has(>ul)>a:hover::after,
            header.menu_area-light .navbar>ul>li:has(>ul)>a:hover::after,
            header.header-style1 .navbar>ul>li.current>a::after,
            header.menu_area-light .navbar>ul>li.current>a::after {
                border-color: transparent #ff6f2c #ff6f2c transparent !important;
            }

            header.header-style1 .attr-nav,
            header.menu_area-light .attr-nav {
                order: 3;
                flex: 0 0 auto;
                margin-left: 0 !important;
            }

            .attr-nav>ul>li>a.butn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;

                min-height: 54px;
                padding: 14px 18px !important;

                line-height: 1 !important;
                white-space: nowrap;
            }
        }


        /* =========================================================
   DESKTOP COM LARGURA INTERMEDIÁRIA
========================================================= */

        @media (min-width: 1200px) and (max-width: 1399px) {

            header.header-style1 .navbar,
            header.menu_area-light .navbar {
                gap: 10px;
            }

            header.header-style1 .navbar-nav,
            header.menu_area-light .navbar-nav {
                gap: 14px;

                margin-left: 12px !important;
                margin-right: 8px !important;
            }

            header.header-style1 .navbar-nav>li>a,
            header.menu_area-light .navbar-nav>li>a,
            header.header-style1.scrollHeader .navbar-nav>li>a,
            header.menu_area-light.scrollHeader .navbar-nav>li>a {
                font-size: 12px !important;
                letter-spacing: 0.2px !important;
            }

            .attr-nav>ul {
                gap: 8px;
            }

            .attr-nav>ul>li>a.butn {
                min-height: 50px;
                padding: 12px 14px !important;
                font-size: 12px !important;
            }
        }


        /* =========================================================
   BOTÃO VOLTAR AO TOPO
========================================================= */

        .scroll-to-top {
            right: 20px !important;
            bottom: 25px !important;
            z-index: 9997 !important;
        }


        /* =========================================================
   WIDGET DE CHAT
   (widget de terceiros injetado via Google Tag Manager — a posição é
   sobrescrita aqui para empilhar no mesmo canto dos demais botões
   flutuantes e nunca sobrepor conteúdo da página; ver nota abaixo
   sobre duplicidade com o botão de WhatsApp)
========================================================= */

        #chat-widget-container {
            position: fixed !important;
            right: 20px !important;
            bottom: 165px !important;

            z-index: 99999 !important;
            pointer-events: auto !important;
        }


        /* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   (fica no MESMO canto que o botão "voltar ao topo" e o widget de
   chat, empilhado acima deles — antes ficava fixo no canto inferior
   ESQUERDO e sobrepunha texto de conteúdo, como preço, itens de
   lista e informações de contato no rodapé)
========================================================= */

        .ndr-whatsapp {
            position: fixed;
            left: auto;
            right: 20px;
            bottom: 95px;
            z-index: 9998;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            min-height: 58px;
            padding: 14px 22px;

            color: #ffffff !important;
            background-color: #25d366;

            border-radius: 50px;

            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            text-decoration: none !important;

            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                background-color 0.3s ease;
        }

        .ndr-whatsapp:hover,
        .ndr-whatsapp:focus {
            color: #ffffff !important;
            background-color: #1fbd5a;

            text-decoration: none !important;

            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }

        .ndr-whatsapp i {
            flex: 0 0 auto;
            font-size: 28px;
            line-height: 1;
        }


        /* =========================================================
   TABLET E CELULAR
========================================================= */

        @media (max-width: 1199px) {

            header.header-style1 .navbar-nav>li>a,
            header.menu_area-light .navbar-nav>li>a,
            header.header-style1.scrollHeader .navbar-nav>li>a,
            header.menu_area-light.scrollHeader .navbar-nav>li>a {
                color: #273044 !important;
            }

            header.header-style1 .navbar-nav>li>a:hover,
            header.menu_area-light .navbar-nav>li>a:hover,
            header.header-style1 .navbar-nav>li.current>a,
            header.menu_area-light .navbar-nav>li.current>a,
            header.header-style1 .navbar-nav>li.active>a,
            header.menu_area-light .navbar-nav>li.active>a {
                color: #ff6f2c !important;
            }

            .attr-nav>ul {
                flex-wrap: wrap;
            }
        }


        @media (max-width: 768px) {

            .ndr-whatsapp {
                width: 58px;
                height: 58px;
                min-height: 58px;

                right: 20px;
                bottom: 95px;

                padding: 0;
                border-radius: 50%;
            }

            .ndr-whatsapp span {
                display: none;
            }

            .ndr-whatsapp i {
                font-size: 30px;
            }

            .scroll-to-top {
                right: 20px !important;
                bottom: 25px !important;
            }

            #chat-widget-container {
                right: 16px !important;
                bottom: 165px !important;
            }
        }