/*
======================================================================
  STYLESHEET PRINCIPAL - PNEU BEATO (custom.css)
  VERSÃO REORGANIZADA — Genérico primeiro, depois por página
======================================================================
ÍNDICE:

PARTE 1 — CÓDIGO GENÉRICO (aplica-se a TODO o site)
  1.1. Configurações Globais e Variáveis de Cor
  1.2. Tipografia Base
  1.3. Layout Principal (Navbar, Footer)
  1.4. Componentes de UI (Botões, Cards, Alertas, Acordeão, etc.)
  1.5. Estilos de Componentes Específicos (Hero, Galeria, Contacto, Marcas)
  1.6. Estilos de Página (nomenclatura antiga, sem prefixo .page-X,
       partilhados por várias páginas: Baterias, Stilbull, TPMS, Tapetes,
       Travões, Botões de Marcas de Pneus)
  1.7. Estilos Legados (Template Antigo)
  1.8. Regras Responsivas Genéricas (Media Queries)
  1.9. Componente Partilhado: Cartão de Produto (Home + Loja de Pneus)

PARTE 2 — CÓDIGO ESPECÍFICO DE CADA PÁGINA
(todas as regras usam o prefixo .page-X correspondente; cada página
 aparece UMA ÚNICA VEZ no ficheiro, com todo o seu código consolidado)

  2.1. Página Inicial (Homepage)
  2.2. Página da Marca Pirelli
  2.3. Página da Marca Goodyear
  2.4. Página da Marca Michelin
  2.5. Página da Marca Nexen
  2.6. Página da Marca Bridgestone
  2.7. Página da Marca Hankook
  2.8. Página Kit Roda Suplente (pneu_suplente.html)
  2.9. Página Líquido de Travões
  2.10. Página Pastilhas EBC
  2.11. Página Substituição de Lâmpadas
  2.12. Página Desempeno/Reparação de Jantes
  2.13. Página Diagnóstico de Pneus
  2.14. Página Diagnóstico de Comportamento em Estrada
  2.15. Página Baterias (cartão simples)
  2.16. Página Calculadora de Pneus
  2.17. Página Loja de Pneus
  2.18. Página Powerflex
  2.19. Página Pernos de Segurança Stilbull
  2.20. Página Escovas Limpa-Vidros
  2.21. Página Carrinho / Wizard (O Meu Pedido)
  2.22. Página Pedido de Orçamento (orcamento.html)
  2.23. Página Jantes de Ferro
  2.24. Página Diagnóstico de Bateria

NOTAS DESTA REORGANIZAÇÃO:
  - Nenhuma linha de código foi removida ou alterada nesta passagem;
    apenas a ORDEM das regras foi reorganizada.
  - Foram preservadas todas as relações de ordem entre regras com o mesmo
    seletor (importante para a cascata CSS), incluindo duplicações já
    existentes no ficheiro original (ver avisos ⚠️ junto às páginas
    'pneu-suplente' e a secção genérica 1.9).
  - Blocos sem prefixo .page-X mas claramente associados a uma página
    (ex: @keyframes de animações) foram movidos para essa secção e
    marcados com ⚠️ REVISAR para validação futura.
======================================================================
*/
@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2?24e3eb8bb40359f493540243452c9a9d") format("woff2"),
       url("../fonts/bootstrap-icons.woff?24e3eb8bb40359f493540243452c9a9d") format("woff");
  font-display: swap;
}
/* ======================================================
   1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS DE COR
   ====================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Cores Globais e da Marca Principal */
  --primary: #007BFF;
  --orange: #FF7900;
  --light-gray: #f8f9fa;
  --dark-text: #343a40;
  --whatsapp: #25D366;

  /* Cores Continental */
  --continental-yellow: #FFA500;
  --continental-orange: #FF7900;
  --continental-black: #000000;
  
  /* Cores EBC Brakes */
  --ebc-red: #D32F2F;
  --ebc-blue: #1976D2;
  --ebc-green: #388E3C;
  --ebc-yellow: #FFC107;
  --ebc-gray: #455A64;
  
  /* Cores Pirelli */
  --pirelli-red: #C00A27;
  --pirelli-yellow: #FFD700;
  --pirelli-black: #121212;
  --pirelli-light: #fdf7f8;

  /* Cores Michelin */
  --michelin-blue: #005DAA;
  --michelin-yellow: #FCE000;
  --michelin-red: #D52B1E;
  --michelin-light: #f0f5ff;

  /* Cores Frogum */
  --frogum-green: #4caf50;
  
  /* Cores Nexen */
  --nexen-blue: #0047AB;
  --nexen-red: #D10000;
  --nexen-dark: #1A1A1A;
  --nexen-light: #f0f4ff;

  /* Cores Bridgestone */
  --bridgestone-red: #D71921;
  --bridgestone-dark: #1A1A1A;
  --bridgestone-light: #fdf5f5;

  /* Cores Goodyear */
  --goodyear-blue: #003087;
  --goodyear-yellow: #FFCC00;
  --goodyear-red: #C8102E;
  --goodyear-light: #f0f5ff;

  /* Cores Hankook */
  --hankook-blue: #0046AD;
  --hankook-orange: #FF6A00;
  --hankook-light: #f5f8ff;
  --hankook-dark: #1A1A1A;
}

body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  padding-top: 58px; /* Espaço para navbar fixa */
}

/* ======================================================
   2. TIPOGRAFIA BASE
   ====================================================== */
h2, h4 {
  color: var(--continental-black);
  font-weight: bold;
}

h4 i {
  color: var(--continental-yellow);
}

.display-4 { font-size: 2rem; }
.lead { font-size: 1rem; }

@media (min-width: 768px) {
  .display-md-3 { font-size: 3.5rem; }
  .lead-md { font-size: 1.25rem; }
}

/* ======================================================
   3. LAYOUT PRINCIPAL
   ====================================================== */

/* --- 3.1. Navbar --- */
.navbar-custom {
  background-color: #1A1A1A !important;
  transition: transform 0.3s ease-in-out;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-custom.scrolled-up { transform: translateY(0); }
.navbar-custom.scrolled-down { transform: translateY(-100%); }
.navbar-brand { margin-right: auto; }
.navbar-nav { margin-left: auto; }

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #CCCCCC !important;
}
.navbar-custom .nav-link:hover {
  color: var(--orange) !important;
}
.navbar-custom .navbar-toggler { border-color: rgba(204, 204, 204, 0.5); }
.navbar-custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(204, 204, 204, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-custom .navbar-nav > .nav-item > .nav-link {
    font-size: 1.03rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    padding-right: 0.9rem !important;
    color: #f0f0f0;
}

.navbar-custom .navbar-nav .marcações-link {
    color: #CCCCCC !important; 
    border: 1px solid var(--orange);
    border-radius: 6px;
    padding: 8px 15px !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}
.navbar-custom .nav-link.marcações-link i { margin-right: 10px; }
.navbar-custom .nav-link.marcações-link:hover {
    background-color: var(--orange);
    color: #ffffff !important; 
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Mega Menu (Desktop) */
.mega-menu {
  position: absolute;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 3px solid var(--orange);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 30px 0;
  display: none;
  z-index: 1000;
}
.mega-menu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.mega-menu h4 {
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eee;
}
.mega-menu .link-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.mega-menu .link-item:hover {
    background-color: var(--light-gray);
    color: var(--orange) !important;
    transform: translateX(4px);
    border-left: 3px solid var(--orange);
    padding-left: 18px;
}

.menu-title-icon { width: 40px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.submenu-icon { width: 35px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.submenu-icon-marca { width: 56px; height: auto; aspect-ratio: 56 / 18; object-fit: contain; vertical-align: middle; margin-right: 6px; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
  .navbar-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; width: 100%; }
  .navbar-nav .dropdown:hover > .mega-menu { display: block; animation: fadeIn 0.3s ease-in-out; }
  .navbar-nav .dropdown:hover > .nav-link { color: var(--orange) !important; }
}

/* Menu Mobile (Offcanvas) — estilos consolidados mais abaixo (secção do tema claro) */

/* --- 3.2. Footer --- */
.footer-links-grid { background-color: #212529; color: #adb5bd; padding: 60px 0 40px 0; font-size: 0.9rem; }
.footer-heading { color: #ffffff; font-weight: 600; margin-bottom: 20px; font-size: 1.1rem; display: flex; align-items: center; }
.footer-heading i { color: var(--continental-yellow); margin-right: 10px; font-size: 1.5rem; }
.footer-links { padding-left: 0; list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #adb5bd; text-decoration: none; transition: all 0.2s ease; }
.footer-links a:hover { color: #ffffff; padding-left: 5px; }

.footer-top { padding: 40px 0 30px 0; background: #333; text-align: left; color: #aaa; }
.footer-top h3 { padding-bottom: 15px; color: #fff; font-size: 1.5rem; }
.footer-contact p { display: flex; align-items: flex-start; margin-bottom: 1rem; }
.footer-contact i { padding-right: 15px; font-size: 18px; color: #666; margin-top: 5px; }
.footer-contact a { color: #aaa; text-decoration: none; border-bottom: 1px dashed #666; }
.footer-contact a:hover, .footer-contact a:focus { color: #fff; border-color: #aaa; }
.footer-social a { display: inline-block; margin-right: 15px; color: #777; transition: color 0.2s ease; }
.footer-social a:hover { color: #fff; }

.footer-bottom {
    padding: 15px 15px; /* Adicionado um pouco de padding nas laterais */
    background: #444;
    color: #aaa;
    font-size: 0.9rem;
    
    /* A Magia do Flexbox */
    display: flex;                  /* Transforma o contentor num flex container */
    justify-content: space-between;   /* Coloca um item no início e outro no fim */
    align-items: center;            /* ★ A SOLUÇÃO: Centra os itens verticalmente */
    flex-wrap: wrap;                /* Permite que os itens quebrem a linha em ecrãs pequenos */
    gap: 15px;                      /* Adiciona um espaço se os itens quebrarem a linha */
}

.footer-bottom .row {
    align-items: center; /* O alinhamento vertical principal */
}

.footer-bottom .col-md-9 {
    text-align: center; /* Alinha ao centro em ecrãs pequenos */
}

/* A partir de 768px (breakpoint 'md' do Bootstrap) */
@media (min-width: 768px) {
    .footer-bottom .col-md-9 {
        text-align: right; /* Alinha à direita em ecrãs maiores */
    }
}
.footer-copyright a { color: #fff; text-decoration: none; }
.footer-copyright a:hover { color: #aaa; }


/* ======================================================
   4. COMPONENTES DE UI (Interface do Utilizador)
   ====================================================== */

/* --- 4.1. Títulos e Divisores --- */
.section-title {
    font-weight: 900;
    color: var(--continental-black);
    margin-bottom: 40px;
    position: relative;
    text-align: center;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: var(--continental-yellow);
}
.divider-1 span { display: inline-block; width: 200px; border-bottom: 1px dotted #aaa; }

/* --- 4.2. Botões --- */
.btn-lg { padding: 0.5rem 1rem; font-size: 1rem; }

.btn-outline-primary {
  --bs-btn-color: var(--continental-black);
  --bs-btn-border-color: var(--continental-yellow);
  --bs-btn-hover-color: var(--continental-black);
  --bs-btn-hover-bg: var(--continental-yellow);
  --bs-btn-hover-border-color: var(--continental-yellow);
  --bs-btn-active-color: var(--continental-black);
  --bs-btn-active-bg: var(--continental-yellow);
  --bs-btn-active-border-color: var(--continental-yellow);
}

.btn-continental {
    background-color: var(--continental-orange);
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
}
.btn-continental:hover {
    background-color: #e56a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-frogum {
    background-color: var(--continental-orange);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-frogum:hover {
    background-color: #e66a00;
    color: white;
    transform: translateY(-3px);
}

.whatsapp-btn {
    background-color: var(--whatsapp);
    border-color: var(--whatsapp);
    padding: 12px 25px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
}
.whatsapp-btn:hover {
    background-color: #128C7E;
    border-color: #128C7E;
    color: white;
}

/* --- 4.3. Cards (Base e Variantes) --- */
.card {
  border: none;
  border-radius: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 25px rgba(0,0,0,0.08);
  margin-bottom: 15px;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.symptom-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.symptom-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.symptom-card i { font-size: 2.5rem; color: var(--continental-orange); margin-bottom: 1rem; }

.component-card {
  background: white; border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;
  border: 1px solid #eee; text-align: center;
}
.component-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.component-icon { height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #004A87, #007BFF); }
.component-icon i { font-size: 3rem; color: white; }
.component-content { padding: 20px; }

.step-card {
  text-align: center; padding: 25px 15px; border-radius: 12px;
  height: 100%; background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}
.step-card:hover { transform: translateY(-5px); }
.step-number {
  width: 40px; height: 40px; background: var(--continental-orange);
  color: white; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 15px auto; font-weight: bold;
}

.benefit-card {
    border-radius: 12px; transition: all 0.3s ease; height: 100%;
    background: white; padding: 30px; text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.benefit-card:hover { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.stat-card {
    background: white; border-radius: 10px; padding: 25px; text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.stat-card:hover { transform: translateY(-5px); }
.stat-number, .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }

.contact-card {
    background: linear-gradient(135deg, var(--ebc-gray), #37474F); 
    color: white; border-radius: 15px; overflow: hidden;
}

/* --- 4.4. Listas --- */
.check-list { list-style-type: none; padding-left: 0; }
.check-list li { padding-left: 2rem; position: relative; margin-bottom: 1rem; }
.check-list li:before { content: "\f00c"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: #28a745; }

.feature-list { list-style-type: none; padding: 0; margin-bottom: 20px; }
.feature-list li { padding: 8px 0; display: flex; align-items: center; }
.feature-list li i { color: var(--frogum-green); margin-right: 10px; width: 24px; text-align: center; }

.symptom-item { display: flex; align-items: center; padding: 15px; border-radius: 10px; margin-bottom: 10px; background: #f8f9fa; transition: all 0.3s ease; }
.symptom-item:hover { background: #e9ecef; transform: translateX(5px); }
.symptom-icon { font-size: 1.5rem; color: var(--continental-orange); margin-right: 15px; }

/* --- 4.5. Alertas e Badges --- */
.bg-warning-box { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 20px; margin: 20px 0; }
.bg-danger-box { background-color: #f8d7da; border-left: 5px solid #dc3545; padding: 20px; margin: 20px 0; }
.badge-promo { position: absolute; top: 15px; left: -1px; background-color: #dc3545; color: #fff; padding: 6px 12px; font-size: .8rem; font-weight: 700; text-transform: uppercase; border-radius: 0 4px 4px 0; z-index: 10; box-shadow: 1px 2px 5px rgba(0, 0, 0, .25); }
.compatibility-badge { display: inline-block; background-color: #28a745; color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.85rem; margin-right: 5px; margin-bottom: 8px; }
.model-badge { position: absolute; top: 15px; right: 15px; padding: 5px 12px; border-radius: 20px; font-weight: 600; z-index: 10; }
.product-badge { position: absolute; top: 15px; left: 15px; background: var(--primary); color: white; padding: 5px 15px; border-radius: 30px; font-weight: bold; font-size: 0.9rem; z-index: 10; }
.guarantee-badge { background: var(--frogum-green); color: white; padding: 8px 15px; border-radius: 30px; font-size: 0.9rem; display: inline-block; margin-top: 10px; font-weight: 600; }
.f1-badge { background: var(--pirelli-black); color: var(--pirelli-yellow); padding:3px 10px; border-radius:15px; font-size:.8rem; font-weight:700; display:inline-block; margin-left:10px; }

/* --- 4.6. Componentes de Navegação --- */
.breadcrumb-mobile {
    font-size: 0.8125rem; padding: 0.5rem 0.75rem; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.breadcrumb-mobile::-webkit-scrollbar { display: none; }
.breadcrumb-mobile-list { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.25rem; }
.breadcrumb-mobile-item { display: flex; align-items: center; color: #64748b; flex-shrink: 0; }
.breadcrumb-mobile-item:not(:last-child)::after {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 0.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
.breadcrumb-mobile-item a { color: #64748b; text-decoration: none; transition: color 0.2s ease; padding: 0.25rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.breadcrumb-mobile-item a:hover { color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
.breadcrumb-mobile-item[aria-current='page'] { color: #1e293b; font-weight: 500; padding: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }

.progress-circle {
  position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15); cursor: pointer; display: flex; justify-content: center;
  align-items: center; z-index: 999; transition: all 0.3s ease;
  background: conic-gradient(rgba(255,121,0,0.4) var(--progress, 0deg), rgba(241,243,245,0.2) 0deg);
  opacity: 0; transform: translateY(20px); visibility: hidden;
}
.progress-circle.visible { opacity: 1; transform: translateY(0); visibility: visible; }
.progress-circle:hover { background: conic-gradient(rgba(255,121,0,0.5) var(--progress, 0deg), rgba(233,236,239,0.25) 0deg); transform: translateY(0) scale(1.1); box-shadow: 0 5px 12px rgba(0,0,0,0.2); }
.progress-circle:active { transform: translateY(0) scale(0.95); }
.progress-circle::after { content: ''; position: absolute; width: 76%; height: 76%; border-radius: 50%; background: rgba(255, 255, 255, 0.75); z-index: 1; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); }
.arrow-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; position: relative; }
.arrow-icon svg { width: 14px; height: 14px; fill: var(--orange); margin: -2px 0; transition: transform 0.3s ease; }
.progress-circle:hover .arrow-icon svg { transform: translateY(-1px); }

/* --- 4.7. Acordeão (FAQ) --- */
.accordion-button { background-color: #fff; color: var(--dark-text); font-weight: 500; }
.accordion-button:not(.collapsed) { color: var(--continental-black); background-color: var(--light-gray); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125); }
.accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5); border-color: var(--continental-yellow); }
.accordion-button::after { transition: transform 0.3s ease; }
.accordion-button[aria-expanded="true"]::after { transform: rotate(180deg); }
.accordion-button i { margin-right: 12px; color: var(--continental-yellow); }
.accordion-button:not(.collapsed) i { color: var(--continental-black); }

.faq-header { background-color: var(--orange); color: white; padding: 15px; border-radius: 8px 8px 0 0; }
#searchInput:focus { border-color: var(--continental-yellow); box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5); }

/* --- 4.8. Barra de Ações Rápida (Mobile) --- */
.sticky-bottom-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #212529; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; transition: transform 0.4s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease; }
#sticky-bar-toggle { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 20px; background-color: #212529; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; }
#sticky-bar-toggle i { transition: transform 0.4s ease-in-out; }
.sticky-bottom-bar-container { display: flex; justify-content: space-around; padding: 2px 0 4px 0; }
.sticky-action { display: flex; flex-direction: column; align-items: center; color: #f8f9fa; text-decoration: none; font-size: 0.7rem; flex-grow: 1; }
.sticky-action i { font-size: 1.25rem; margin-bottom: 2px; }
/* Regras .minimized removidas: o toggle passou a usar a classe 'active'
   (ver bloco responsivo mais abaixo e a lógica em costum.js). */

/* --- 4.9. Alerta de Cookies --- */
.cookiealert { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0 !important; z-index: 999; opacity: 0; border-radius: 0; transform: translateY(100%); transition: all 500ms ease-out; color: #ecf0f1; background: #212327; }
.cookiealert.show { opacity: 1; transform: translateY(0%); transition-delay: 1000ms; }
.cookiealert a { text-decoration: underline; }
.cookiealert .acceptcookies { margin-left: 10px; vertical-align: baseline; }

/* --- 4.10. Tabelas e Gráficos --- */
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, .1); margin: 30px 0; }
.comparison-table thead th, .comparison-table th { background-color: var(--frogum-green); color: #fff; padding: 15px; text-align: left; vertical-align: middle; font-weight: 600; }
.comparison-table tbody td, .comparison-table td { padding: 12px 15px; vertical-align: middle; border-bottom: 1px solid #dee2e6; text-align: center; background-color: #fff; }
.comparison-table tbody tr:last-child td, .comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:nth-child(even) td { background-color: #f8f9fa; }

.comparison-chart { height: 300px; background: var(--light-gray); border-radius: 10px; padding: 20px; margin: 30px 0; }
.chart-bar { height: 40px; margin-bottom: 15px; border-radius: 5px; display: flex; align-items: center; padding: 0 15px; color: white; font-weight: bold; position: relative; }
.chart-bar:nth-child(1) { width: 95%; background: linear-gradient(90deg, var(--frogum-green), #4caf50); }
.chart-bar:nth-child(2) { width: 70%; background: linear-gradient(90deg, #2196F3, #64b5f6); }
.chart-bar:nth-child(3) { width: 60%; background: linear-gradient(90deg, #f44336, #e57373); }
.chart-label { position: absolute; right: 15px; }


/* ======================================================
   5. ESTILOS DE COMPONENTES ESPECÍFICOS
   ====================================================== */

/* --- 5.1. Hero Section --- */
.hero-subtitle:after { content:''; position:absolute; bottom:-10px; left:0; width:100%; height:3px; }
.tagline { font-size: 1.3rem; font-weight: 500; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; }
.highlight-box { background: linear-gradient(135deg, var(--orange), #ff5252); color: white; border-radius: 10px; padding: 25px; margin: 40px 0; text-align: center; }

/* --- 5.2. Galeria e Itens de Portfólio --- */
.gallery-item { transition: transform .3s ease; cursor: pointer; }
.gallery-item:hover { transform: translateY(-5px); }
.gallery-caption { background-color: rgba(0, 0, 0, .7); color: #fff; border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem; font-size: .9rem; text-align: center; }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; }

#produtos .portfolio-item { margin-bottom: 2rem; transition: transform 0.3s ease; }
#produtos .portfolio-item:hover { transform: translateY(-10px); }
#produtos .card { height: 100%; border: none; }
#produtos .card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
#produtos .card-img-top { max-width: 174px; width: auto; height: 150px; object-fit: contain; margin: 20px auto 0 auto; }
#produtos .card-body { padding: 1.5rem; background: #fff; text-align: center; }
#produtos .card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
#produtos .card-title a { color: #333; text-decoration: none; transition: color 0.3s; }
#produtos .card-title a:hover { color: var(--orange); text-decoration: underline; }
#produtos .card-text { font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: 0; }


/* --- 5.3. Secção de Contacto e Pesquisa --- */
.contact-section { background: linear-gradient(to bottom, var(--orange), var(--continental-yellow)); background-size: cover; background-position: center; padding: 80px 0; color: white; }
.seo-content { background-color: white; border-radius: 10px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin: 40px 0; }
.dynamic-text { font-size: 1.1rem; line-height: 1.8; }
.dynamic-text ul { padding-left: 20px; }
.dynamic-text li { margin-bottom: 10px; }
.cta-pneus-link { text-decoration: none; display: block; }
.cta-pneus-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--orange), #ff8c25); color: white; border-radius: 12px; padding: 20px; transition: all 0.3s ease-in-out; box-shadow: 0 4px 15px rgba(0,0,0, 0.1); }
.cta-pneus-banner:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 25px rgba(255, 121, 0, 0.3); }
.cta-pneus-text h5 { color: white; }
.cta-pneus-text p { color: rgba(255, 255, 255, 0.85); }
.cta-pneus-searchbox { background-color: rgba(0, 0, 0, 0.15); padding: 10px 15px; border-radius: 8px; display: flex; align-items: center; font-weight: 500; white-space: nowrap; }
.cta-pneus-searchbox .bi-arrow-right-short { font-size: 1.6rem; margin-left: 10px; line-height: 1; }

/* Componente de Pesquisa de Pneus Genérico */
.tire-search-box-link { text-decoration: none; }
.tire-search-box { display: flex; justify-content: space-between; align-items: center; background-color: var(--light-gray); border: 2px solid #ccc; border-radius: 50px; padding: 10px 10px 10px 25px; transition: all .3s ease; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,.05); max-width: 400px; margin-left: auto; margin-right: auto; }
.tire-search-box:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); }
.tire-search-placeholder { font-size: 1.1rem; color: #888; align-items: center; }
.tire-search-box .search-btn { border-radius: 50%; width: 50px; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; transition: all .3s; }
.tire-search-box .search-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.2); }

/* --- 5.4. Componentes de Marcas (Pirelli, Goodyear, etc.) --- */
/* Estilos GENÉRICOS para componentes partilhados entre páginas de marcas */
.tech-card {
    transition: transform .3s ease, box-shadow .3s ease; border: 1px solid #e0e0e0;
    border-radius: 10px; overflow: hidden; height: 100%; background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.05); position: relative;
}
.tech-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,.15); }
.tech-card:after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 4px; transform: scaleX(0); transition: transform .3s ease;
}
.tech-card:hover:after { transform: scaleX(1); }

.feature-icon-brand {
    color: #fff; width: 70px; height: 70px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; margin: 0 auto 20px;
    font-size: 1.8rem; box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

.performance-bar { height: 25px; border-radius: 12px; margin-bottom: 15px; position: relative; }
.performance-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 700; z-index: 2; }
.performance-title { padding-bottom: 10px; margin-bottom: 15px; display: inline-block; }

.history-section { padding: 80px 0; }
.history-timeline { position: relative; padding: 40px 0; }
.history-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; }
.timeline-item { position: relative; margin-bottom: 60px; width: 50%; padding: 20px; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; padding-right: 50px; }
.timeline-item:nth-child(even) { left: 50%; padding-left: 50px; }
.timeline-item::after { content: ''; position: absolute; top: 30px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #fff; }
.timeline-item:nth-child(odd)::after { right: -12px; }
.timeline-item:nth-child(even)::after { left: -12px; }
.timeline-year { font-weight: 700; font-size: 1.2rem; }

.tire-selector-card {
    border: 2px solid #e0e0e0; border-radius: 10px; transition: all .3s ease;
    height: 100%; background: #fff; position: relative; overflow: hidden;
}
.tire-selector-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.1); }

.tech-feature { display:flex; align-items:center; margin-bottom:15px; }
.tech-feature i { color:#fff; width:35px; height:35px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:15px; flex-shrink:0; }

.benefit-icon { font-size: 2.5rem; margin-bottom: 20px; }
.tire-icon { font-size: 2.5rem; margin-bottom: 15px; }
.tire-image { height:180px; object-fit:contain; margin-bottom:20px; }

.brands-section { padding: 60px 0; background: linear-gradient(to bottom, #ffffff, #f8f9fa); }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
.brand-card { transition: transform 0.3s, box-shadow 0.3s; border: none; border-radius: 10px; overflow: hidden; height: 100%; background: white; }
.brand-card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }
.brands-section .brand-logo { height: 100px; object-fit: contain; padding: 15px; background-color: white; border-radius: 8px; }

/* ----------------------------------------------------------------------
   1.6 — Estilos de Página (nomenclatura antiga, SEM prefixo .page-X)
   Estas classes (.card-bateria, .feature-icon-travagem, .card-sensor,
   .model-card, .tech-icon, .btn-michelin, etc.) foram escritas antes da
   convenção .page-X ser adotada. Por não terem prefixo, são globais e
   podem ser usadas em mais do que uma página — por isso permanecem aqui,
   na secção genérica, em vez de serem atribuídas a uma única página.
   ---------------------------------------------------------------------- */


/* ======================================================
   6. ESTILOS ESPECÍFICOS DE PÁGINA
   ====================================================== */

/* --- 6.1. Página Baterias --- */
.card-bateria { position: relative; overflow: hidden; }
.card-bateria .card-img-top { height: 250px; width: 100%; object-fit: contain; object-position: center; }

/* --- 6.2. Página Anti-roubo Stilbull --- */
.feature-icon-travagem {
  width: 70px;
  height: 70px;
  background-color: var(--continental-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  font-size: 1.8rem;
  flex-shrink: 0; 
}
.brand-logo {
    height: 60px; display: flex; align-items: center; justify-content: center;
    padding: 10px; background-color: #fff; border-radius: 10px; border: 1px solid #e9ecef;
}
.brand-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: all .3s ease; }
.brand-logo:hover img { filter: grayscale(0%); opacity: 1; }

/* --- 6.3. Página Válvulas TPMS --- */
.card-sensor { border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; height: 100%; }
.card-sensor:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.process-step { text-align: center; padding: 20px; position: relative; }
.process-step:not(:last-child):after { content: '→'; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--continental-orange); }
.agendamento-box { background: linear-gradient(135deg, #2c3e50, #4a6491); color: white; border-radius: 12px; padding: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.sensor-compatibility { background-color: var(--light-gray); border-radius: 12px; padding: 20px; }
.component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }

/* --- 6.4. Página Tapetes --- */
.model-card, .product-card {
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease; background: white; border: 1px solid #eee;
    height: 100%; position: relative; margin-bottom: 25px;
}
.model-card:hover, .product-card:hover { transform: translateY(-10px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.model-image-container { height: 200px; overflow: hidden; position: relative; }
.model-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.model-card:hover .model-image-container img { transform: scale(1.05); }
.product-image { width: 100%; height: 220px; object-fit: cover; border-bottom: 3px solid #e0e0e0; }
.price-tag { font-size: 1.5rem; font-weight: bold; color: var(--frogum-green); margin: 15px 0; }
.discount-price { font-size: 1.2rem; text-decoration: line-through; color: #999; margin-left: 10px; }
.application-section { background: linear-gradient(135deg, #FF7900 0%, #FF7960 100%); color: white; border-radius: 16px; padding: 40px; }
.bg-frogum { background: linear-gradient(135deg, var(--frogum-green), #4caf50); color: white; }

/* --- 6.5. Página Travões --- */
.tech-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--continental-orange); }
.ebc-logo { max-height: 80px; margin-bottom: 20px; }
.product-description { background: var(--light-gray); border-left: 4px solid var(--ebc-red); padding: 20px; border-radius: 0 8px 8px 0; margin: 20px 0; }
.faq-item { margin-bottom: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.faq-question { background: var(--ebc-gray); color: white; padding: 15px 20px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-answer { background: white; padding: 20px; border-top: 1px solid #eee; }

/* --- 6.6. Páginas de Marcas de Pneus (Overrides de Cor) --- */

/* Botões Específicos */
.btn-michelin { background-color: var(--michelin-blue); border-color: #00205B; color: #fff; font-weight: 600; }
.btn-michelin:hover { background-color: #00205B; color: #fff; }
.btn-nexen { background-color: var(--nexen-blue); border-color: #00358A; color: #fff; font-weight: 600; }
.btn-nexen:hover { background-color: #00358A; }
.btn-bridgestone { background-color: var(--bridgestone-red); border-color: #B3151B; color: #fff; font-weight: 600; }
.btn-bridgestone:hover { background-color: #B3151B; }
.btn-hankook { background-color: var(--hankook-orange); border-color: var(--hankook-orange); color: #fff; font-weight: 600; }
.btn-hankook:hover { background-color: #d95a00; }

/* ----------------------------------------------------------------------
   1.7-1.9 — Estilos Legados, Media Queries Genéricas, e Componente
   Partilhado 'Cartão de Produto' (usado tanto na Home como na Loja de
   Pneus, através dos contentores #produtosContainer / #productsContainer)
   ---------------------------------------------------------------------- */







/* ======================================================
   7. ESTILOS LEGADOS (Template Antigo)
   ====================================================== */
.inner-bg { padding: 210px 0; }
.top-content .text { color: #fff; }
.top-content .text h1 { margin-top: 25px; color: #fff; }
.top-content .description { margin: 30px 0 10px 0; }
.top-content .description p { opacity: 0.8; }

.section-1-box { padding-top: 30px; text-align: left; }
.section-1-box .section-1-box-icon {
  width: 80px; height: 80px; margin: 0 auto;
  background: linear-gradient(to bottom,  #856dc0 0%,#7762ac 100%);
  font-size: 40px; color: #fff; line-height: 80px; text-align: center;
  border-radius: 50%;
  transition: all .6s;
}
.section-1-box h3 { margin-top: 0; padding: 0 0 10px 0; }
.section-2-box { margin-top: 30px; text-align: left; }
.section-2-box h3 { margin-top: 0; }
.section-2-box-text .medium-paragraph { margin-top: 20px; margin-bottom: 20px; }
.section-3-box { margin-top: 0px; text-align: left; }
.section-3-box .section-3-box-icon {
  width: 60px; height: 60px; margin: 0 auto;
  background: linear-gradient(to bottom,  #856dc0 0%,#7762ac 100%);
  font-size: 28px; color: #fff; line-height: 60px; text-align: center;
  border-radius: 50%;
}
.section-3-box h3 { margin-top: 0; padding: 0 0 10px 0; }
.feature-icon {
  font-size: 3rem; color: var(--continental-yellow);
  background-color: var(--continental-black); width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-bottom: 20px;
  flex-shrink: 0;
}
.bg-dark-custom { background-color: #2c3e50; color: white; }


/* ======================================================
   8. REGRAS RESPONSIVAS (MEDIA QUERIES)
   ====================================================== */

@media (max-width: 991.98px) {
    .sticky-bottom-bar { display: block; }
    .progress-circle { bottom: 75px; }
}

@media (min-width: 768px) {
    .hero { padding: 100px 0; }
    .gallery-item img { height: 250px; }
}

@media (max-width: 767.98px) {
    /* Lógica de colapso do Breadcrumb */
    .breadcrumb-mobile-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; }
    .breadcrumb-mobile-item:nth-last-child(2)::before { content: '...'; margin-right: 0.25rem; color: var(--text-color); }
    .breadcrumb-mobile-item:first-child:nth-last-child(-n+3) ~ .breadcrumb-mobile-item:nth-last-child(2)::before { content: ''; margin-right: 0; }
    .breadcrumb-mobile-item a, .breadcrumb-mobile-item[aria-current='page'] { max-width: 220px; }

    /* Estilos Gerais para Mobile */
    .hero { padding: 60px 0; }
    .process-step { margin-bottom: 30px; }
    .process-step:not(:last-child):after { content: '↓'; right: 50%; top: auto; bottom: -30px; transform: translateX(50%); }
    
    /* Histórico de Marcas em Mobile */
    .history-timeline::before { left: 20px; margin-left: 0; }
    .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { width: 100%; padding-left: 50px; padding-right: 15px; text-align: left !important; left: 0; }
    .timeline-item::after, .timeline-item:nth-child(odd)::after, .timeline-item:nth-child(even)::after { left: 10px; }
    
    /* Fallbacks de Estilo */
    .card { border: 1px solid rgba(0, 0, 0, .125); border-radius: .5rem; }
    .card-header { font-size: 1.1rem; padding: .75rem 1.25rem; }
    .list-group-item { padding: .75rem 1.25rem; font-size: .9rem; border-color: rgba(0, 0, 0, .05); }
    .badge { font-size: .8rem; padding: .35em .65em; font-weight: 500; }
}


/* Cartão de Produto Pneu Beato pagina infdex*/
/* Cartão de Produto Pneu Beato - Versão Final */
/* --- 1. ESTILOS COMUNS (Cores, Bordas, Padding) --- */
.produto-card-beato {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* --- 2. NO INDEX (Carrossel) --- */
/* Aqui forçamos a largura fixa para o scroll horizontal funcionar */
#produtosContainer .produto-card-beato {
    min-width: 270px;
    max-width: 270px;
    margin: 10px;
}

/* --- 3. NA LOJA (Grelha/Grid) --- */
/* Aqui o cartão expande para ocupar a coluna do Bootstrap (col-lg-3) */
#productsContainer .produto-card-beato {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0; /* O Bootstrap já trata do espaçamento com o 'gutter' */
    height: 100%;
}

/* Garante que as colunas da loja tenham a mesma altura */
#productsContainer > div {
    display: flex;
}

/* --- 4. AJUSTE DO BOTÃO E QUANTIDADE (RESOLVE O BOTÃO GRANDE) --- */

/* Container que envolve a Qtd e o Botão */
.produto-card-beato .d-flex.align-items-center.gap-2 {
    margin-top: auto; /* Garante que os botões ficam todos alinhados no fundo */
    height: 40px;    /* Altura fixa para a linha de ação */
    width: 100%;
}

.btn-adicionar-azul {
    background-color: #0056b3 !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important; /* Letra ligeiramente menor para caber melhor */
    height: 100% !important;       /* Ocupa os 40px de altura */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
    white-space: nowrap;         /* MUITO IMPORTANTE: impede o texto de quebrar e esticar o botão */
    color: white !important;
}

/* Estilos do Seletor de Quantidade para alinhar com o botão */
.quantity-selector {
    display: flex;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    height: 100%; /* Ocupa os 40px de altura */
    background: #fff;
    overflow: hidden;
}

.quantity-btn {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f8f9fa;
    user-select: none;
    font-weight: bold;
    border: none;
    transition: background 0.2s;
}

.quantity-btn:hover { background: #e9ecef; }

.quantity-value {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    font-weight: bold;
    font-size: 0.9rem;
    background: #fff;
}

.produto-card-beato:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.marca-logo-mini {
    height: 35px;
    width: auto;
    max-width: 120px;
    aspect-ratio: 3.5 / 1; /* Proporção reservada para não dar saltos */
    object-fit: contain;
    margin-bottom: 8px;
    display: block;
}

.pneu-titulo {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    color: #333;
    text-transform: uppercase;
    line-height: 1.2;
}

.pneu-medida-destaque {
    font-size: 1.1rem; /* Medida maior */
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}

.pneu-imagem-container {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.pneu-img {
    max-height: 160px;
    width: auto;
}

/* Secção da Etiqueta Energética */
.etiqueta-ue-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.link-ficha-tecnica {
    font-size: 0.7rem;
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
    margin-top: 5px;
}

.link-ficha-tecnica:hover {
    text-decoration: underline;
}

.text-warning { color: #ffc107 !important; } /* Sol / Verão - Amarelo */
.text-info { color: #0dcaf0 !important; }    /* Neve / Inverno - Azul Claro */
.text-success { color: #198754 !important; } /* All Season - Verde */
.text-primary { color: #0d6efd !important; } /* EV / Elétrico - Azul */

.badge-tech {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    font-size: 0.9rem;
}

/* Preços */
.pneu-preco-base {
    font-size: 1.7rem;
    font-weight: 900;
    color: #000;
    line-height: 1;
}

.pneu-detalhe-imposto {
    font-size: 0.75rem;
    color: #777;
    margin-top: 5px;
}

/* ✅ .btn-adicionar-azul consolidado numa única definição mais acima
   (Fase 2 de otimização); resultado visual idêntico ao anterior. */
/* ##########################################################################
   PARTE 2 — CÓDIGO ESPECÍFICO DE CADA PÁGINA
   Cada página aparece UMA ÚNICA VEZ, com todo o seu código consolidado.
   ##########################################################################
*/


/* ======================================================
   2.1. Página Inicial (Homepage)
   ====================================================== */

/* CORREÇÃO CLS: Reservar espaço para o banner principal (ex: BMW) na página inicial */
body.page-index main img.d-block.w-100 {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 600; /* Proporção panorâmica do banner */
    object-fit: cover;
}
/* ==========================================================================
   0. VARIÁVEIS GERAIS E CORES DA MARCA (ROOT)
   ========================================================================== */
:root {
  --primary-color: #FF7900;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --orange-gradient: linear-gradient(135deg, #FF7900, #FFA04D);
}

/* ==========================================================================
   1. ESTILOS GLOBAIS PARTILHADOS (Homepage e Loja de Pneus)
   ========================================================================== */

/* --- 1.1. Cartão de Produto Base (.produto-card-beato) --- */
.produto-card-beato {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-sizing: border-box;
    position: relative;
}

.produto-card-beato:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.pneu-especialista-card {
    border: 1px solid var(--primary-color) !important;
}

/* Logos, Títulos e Medidas */
.marca-logo-mini {
    height: 35px;
    width: auto;
    max-width: 120px;
    aspect-ratio: 3.5 / 1;
    object-fit: contain;
    margin-bottom: 8px;
    display: block;
}

.pneu-titulo {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #222;
    text-transform: uppercase;
    line-height: 1.2;
}
.pneu-titulo a {
    color: #222;
    text-decoration: none;
    font-weight: 800;
}

.pneu-medida-destaque {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

/* Imagens do Pneu */
.pneu-imagem-container {
    height: 150px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.pneu-img {
    max-height: 140px !important;
    width: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* --- 1.2. Preços, Impostos e Totais --- */
.pneu-preco-base {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

.per-pneu {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

.pneu-detalhe-imposto {
    font-size: 0.7rem;
    color: #888;
    margin-top: 4px;
}

.total-estimado-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    border-top: 1px solid #eee; 
    padding-top: 10px; 
    margin-top: 10px;
}
.total-label { font-size: 0.85rem; font-weight: 700; color: #666; }
.total-valor { font-size: 1.25rem; font-weight: 800; color: #000; }

/* --- 1.3. Selo Premium (Estilo Preto e Dourado) --- */
.premium-pill-badge {
    background-color: #000000 !important;
    border: 1px solid #d4af37 !important;
    border-radius: 50px !important;
    padding: 4px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 26px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    vertical-align: middle !important;
}
.premium-pill-badge i {
    color: #ffffff !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
}
.premium-pill-badge span {
    color: #d4af37 !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

/* --- 1.4. Badges Técnicas Expansíveis e OE --- */
.badge-tech-row {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 6px;
    min-height: 30px;
    position: relative;
}

.tech-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 26px;
    min-width: 26px;
    max-width: 26px; 
    border-radius: 50px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #555555;
    font-size: 0.8rem;
    font-weight: 700;
    overflow: hidden;
    padding: 0;
    transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.tech-badge-pill i, 
.tech-badge-pill .tech-badge-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.tech-badge-text {
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    padding-left: 5px;
    padding-right: 12px;
    display: inline-block;
}

.tech-badge-pill:hover {
    max-width: 250px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    z-index: 10;
}
.tech-badge-pill:hover .tech-badge-text {
    opacity: 1;
    transition: opacity 0.3s ease 0.1s;
}

.tech-badge-pill.ev-badge { border-color: #0076e4; color: #0076e4; }
.tech-badge-pill.ev-badge:hover { background-color: #f0f7ff; }
.tech-badge-pill.summer-badge { border-color: #ff9800; color: #ff9800; }
.tech-badge-pill.summer-badge:hover { background-color: #fff9f0; }
.tech-badge-pill.allseason-badge { border-color: #17a2b8; color: #17a2b8; }
.tech-badge-pill.allseason-badge:hover { background-color: #f1fbfc; }
.tech-badge-pill.winter-badge { border-color: #00bcd4; color: #00bcd4; }
.tech-badge-pill.winter-badge:hover { background-color: #f0fdff; }
.tech-badge-pill.runflat-badge { border-color: #e57200; color: #e57200; }
.tech-badge-pill.runflat-badge:hover { background-color: #fffdfa; }
.tech-badge-pill.xl-badge { border-color: #333333; color: #333333; }
.tech-badge-pill.xl-badge:hover { background-color: #f8f9fa; }
.tech-badge-pill.oe-badge-pill { background-color: #333 !important; border-color: var(--primary-color) !important; color: #fff !important; margin-left: auto; }
.tech-badge-pill.oe-badge-pill i { color: var(--primary-color) !important; }

/* --- 1.5. Etiquetas Energéticas Retangulares e Ficha EPREL --- */
.etiqueta-ue-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.rating-item-rect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 45px;
    height: 24px;
    white-space: nowrap;
}
.rating-item-rect i { font-size: 0.75rem; }
.rating-item-rect span { line-height: 1; }

.energy-A { background-color: #008000 !important; color: #fff !important; border: 1px solid #006400 !important; }
.energy-B { background-color: #32cd32 !important; color: #fff !important; border: 1px solid #228b22 !important; }
.energy-C { background-color: #ffff00 !important; color: #000 !important; border: 1px solid #cccc00 !important; }
.energy-D { background-color: #ffa500 !important; color: #fff !important; border: 1px solid #cc8400 !important; }
.energy-E { background-color: #ff0000 !important; color: #fff !important; border: 1px solid #cc0000 !important; }
.energy-unknown { background-color: #eee !important; color: #999 !important; border: 1px solid #ddd !important; }

.link-ficha-eprel, .link-ficha-tecnica {
    display: block;
    text-align: center;
    font-size: 0.65rem;
    color: #888;
    text-decoration: none;
    margin-top: 5px;
}
.link-ficha-eprel:hover, .link-ficha-tecnica:hover { 
    text-decoration: underline; 
    color: var(--primary-color); 
}

/* --- 1.6. Caixa Laranja de Serviços (Upsell) --- */
.upsell-service-box {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    background-color: #fff4eb;
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
}
.upsell-service-box:hover {
    border-color: var(--primary-color) !important;
    background-color: #fff1e5 !important;
    transform: translateY(-1px);
}

/* --- 1.7. Seletor de Quantidade e Botões de Adicionar --- */
.produto-card-beato .d-flex.align-items-center.gap-2 {
    margin-top: auto; 
    height: 40px;    
    width: 100%;
}

.btn-adicionar-azul,
.btn-adicionar-beato {
    background-color: #0d6efd !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important; 
    height: 40px !important;       
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;         
    color: white !important;
    flex-grow: 1;
    transition: background-color 0.2s ease;
}
.btn-adicionar-azul:hover,
.btn-adicionar-beato:hover {
    background-color: #0b5ed7 !important;
}

.quantity-selector-clean {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    height: 40px;
    background: #fff;
    overflow: hidden;
}

.quantity-selector-clean .qty-btn {
    border: none;
    background: none;
    width: 30px;
    height: 100%;
    font-size: 1.2rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
}
.quantity-selector-clean .qty-btn:hover { 
    color: var(--primary-color); 
}

.quantity-selector-clean .quantity-value {
    width: 25px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 1.8. Barra de Ações Rápidas Mobile & Offcanvas Lateral --- */
@media (max-width: 991.98px) {
    .sticky-bottom-bar {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Recolhida: em vez de mover a barra toda (o que arrastaria também o
       toggle para fora do ecrã), escondemos apenas a faixa de ícones.
       A barra encolhe para a altura do toggle, que fica sempre visível
       e clicável no fundo do ecrã. */
    .sticky-bottom-bar:not(.active) .sticky-bottom-bar-container {
        display: none;
    }
    .sticky-bottom-bar:not(.active) {
        background-color: transparent;
        box-shadow: none;
    }
    .sticky-bottom-bar.active {
        transform: translateY(0) !important;
    }
}

.offcanvas-mobile {
    background-color: #ffffff !important;
    color: #1a1a1a;
    /* Layout em coluna para permitir o rodapé fixo (Orçamentos/Marcações)
       sempre visível no fundo, com o corpo do menu a fazer scroll.
       Movido do bloco <style> inline do master_template.dwt. */
    display: flex;
    flex-direction: column;
}
.offcanvas-mobile .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.offcanvas-footer-fixed {
    flex: 0 0 auto;
}
/* Aparência detalhada do rodapé fixo (cores estilo desktop) definida
   mais abaixo, junto às restantes regras do menu mobile. */
.offcanvas-mobile .offcanvas-header {
    background-color: #000;
    color: #ffffff;
    border-bottom: 1px solid #333;
}
.offcanvas-mobile .btn-close {
    filter: invert(1);
}
.offcanvas-mobile .accordion-item {
    background-color: transparent !important;
    border: none !important;
    /* Divisor um pouco mais visível entre categorias (era #eee). */
    border-bottom: 1px solid #ddd !important;
}
.offcanvas-mobile .accordion-button {
    background-color: transparent !important;
    color: #1a1a1a !important;
    font-weight: 700;
    box-shadow: none !important;
    padding: 15px 10px;
}
.offcanvas-mobile .accordion-button::after {
    filter: none;
}
.offcanvas-mobile .accordion-body {
    /* Fundo claro original (revertido a pedido). */
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px 15px;
}
.offcanvas-mobile .mobile-link {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    /* Texto mais escuro (era #555, demasiado lavado) e maior, para leitura
       mais fácil nos submenus. */
    color: #2a2a2a;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.offcanvas-mobile .mobile-link:hover {
    background-color: #ffffff;
    color: var(--orange);
    padding-left: 20px;
}
.offcanvas-mobile .submenu-icon, 
.offcanvas-mobile .submenu-icon-marca {
    /* Ícones maiores (eram 22px) para reduzir o aspeto "lavado". */
    width: 30px;
    height: auto;
    margin-right: 14px;
    border-radius: 4px;
}
.offcanvas-mobile .mobile-submenu-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    font-weight: 800;
    margin: 15px 0 5px 12px;
}

/* Categorias principais (Pneus, Marcas, Jantes...) maiores no mobile.
   Específico do offcanvas para não afetar o .menu-title-icon do desktop. */
.offcanvas-mobile .accordion-button {
    font-size: 1.25rem;
}
.offcanvas-mobile .menu-title-icon {
    width: 48px;
    margin-right: 14px;
}

/* "Dicas": link direto com aspeto de categoria principal. Como é um <a> e
   não um botão de acordeão, escondemos a seta que o Bootstrap adiciona e
   normalizamos o estado. */
.offcanvas-mobile .mobile-categoria-link {
    text-decoration: none;
    color: #1a1a1a !important;
}
.offcanvas-mobile .mobile-categoria-link::after {
    display: none !important;
}
.offcanvas-mobile .mobile-categoria-link .menu-title-icon-bi {
    font-size: 1.6rem;
    width: 48px;
    text-align: center;
    color: var(--orange);
    margin-right: 14px;
}

/* Rodapé fixo: botões Orçamentos/Marcações no estilo do desktop —
   fundo preto, borda e texto laranja, com hover laranja preenchido.
   Antes herdavam o cinzento-claro dos .mobile-link, ficando "lavados". */
.offcanvas-footer-fixed {
    display: flex;
    gap: 10px;
    background-color: #000;
    border-top: none;
    padding: 14px 16px;
}
.offcanvas-footer-fixed .mobile-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 6px;
    padding: 12px 10px;
    font-size: 1rem;
    font-weight: 700;
}
.offcanvas-footer-fixed .mobile-link:hover {
    background-color: var(--orange);
    color: #ffffff;
    padding-left: 10px;
}
.offcanvas-footer-fixed .mobile-link i {
    font-size: 1.15rem;
}


/* ==========================================================================
   2. EXCLUSIVO DA PÁGINA DA LOJA DE PNEUS (.page-loja-pneus)
   ========================================================================== */

/* --- 2.1. Alinhamento da Grelha/Grid de Produtos --- */
#productsContainer .produto-card-beato {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    height: 100%;
}

/* Revertido a pedido: máximo de 4 colunas sempre (row-cols-lg-4 do
   Bootstrap), a 5ª coluna ficava com um visual estranho mesmo em ecrãs
   grandes. */

/* --- 2.1.1. Cartão de Campanha (intercalado na grelha de produtos) ---
   Inserido periodicamente por inserir_campanhas_na_pagina() (cache-handler.php)
   sempre que há uma campanha ativa (loja/campanhas.json) para uma marca
   presente nos resultados da pesquisa atual. */
.card-campanha {
    position: relative;
    /* #productsContainer > div { display:flex } (mais acima) torna o .col
       um contentor flex de direção "row" — sem width:100% explícito, este
       cartão encolhia ao tamanho do próprio conteúdo em vez de ocupar a
       coluna toda (era por isso que ficava mais estreito que os cartões de
       produto normais, que já tinham este width:100% próprio). */
    width: 100%;
    height: 100%;
    padding: 0; /* sem padding: a imagem vai de borda a borda no topo */
    border-radius: 12px;
    background: #fff4eb;
    border: 1px solid #ffe0b2;
    text-align: center;
    overflow: hidden; /* recorta a imagem pelos cantos arredondados do cartão */
}

/* A imagem preenche o cartão INTEIRO, de topo a fundo (position:absolute,
   inset:0 dentro do .card-campanha, que é position:relative) — o texto
   (.card-campanha-corpo) deixa de "empurrar" a imagem para cima, fica
   sobreposto por cima dela, ancorado ao fundo, com fundo semi-transparente
   próprio para continuar legível sobre o cartaz. */
.card-campanha-imagem-link {
    display: block;
    position: absolute;
    inset: 0;
}

.card-campanha-imagem-container {
    position: absolute;
    inset: 0;
}

.card-campanha-imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.card-campanha-corpo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 16px 18px;
    background: linear-gradient(to top, #fff4eb 65%, rgba(255, 244, 235, 0));
}

.card-campanha-desconto {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color, #FF7900);
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

.card-campanha-desconto span {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.card-campanha-descricao {
    font-size: 0.85rem;
    color: #333;
    margin: 6px 0 10px;
    font-weight: 600;
}

.card-campanha-logo {
    max-height: 24px;
    width: auto;
    margin-bottom: 10px;
}

.card-campanha-validade {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.card-campanha-condicoes {
    font-size: 0.65rem;
    color: #999;
    margin-top: 2px;
}

/* --- 2.2. Autocomplete e Pílulas de Pesquisa --- */
.page-loja-pneus #autocomplete-results {
    position: absolute;
    top: 100%; 
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 12px 12px;
    z-index: 1100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-height: 350px;
    overflow-y: auto;
    display: none; 
    padding: 15px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.page-loja-pneus #autocomplete-results[style*="display: flex"], 
.page-loja-pneus #autocomplete-results[style*="display: block"] {
    display: flex !important;
}

.page-loja-pneus .suggestion-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    cursor: pointer;
    background: #ffffff;
    color: var(--primary-color);            
    border: 1px solid var(--primary-color); 
    border-radius: 50px;       
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.page-loja-pneus .suggestion-item:hover {
    background-color: #333333; 
    color: #ffffff;            
    border-color: #333333;     
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.page-loja-pneus #autocomplete-results::-webkit-scrollbar {
    width: 6px;
}
.page-loja-pneus #autocomplete-results::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* --- 2.3. Painel de Comando e Filtros Técnicos de Oficina --- */
.page-loja-pneus .input-group { position: relative; }

.page-loja-pneus .filtro-oficina-container {
	max-width: 1320px;
	width: 95%;
	margin: -40px auto 40px auto; 
	position: relative;
	z-index: 100;
}

/* ============================================================
   TEMA PREMIUM (Preto + Laranja Continental)
   Painel "Pesquisa Especializada" e painel de Filtros.
   Padrão premium: cabeçalho preto com acento laranja luminoso,
   corpo claro para legibilidade.
   ============================================================ */
.page-loja-pneus .painel-comando {
	background: #ffffff;
	border: 1px solid #1a1a1a;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0,0,0,0.22);
	overflow: hidden;
}

.page-loja-pneus .painel-header {
	padding: 22px 30px;
	background: linear-gradient(135deg, #0a0a0a 0%, #232323 100%);
	border-bottom: none;
	position: relative;
}

.page-loja-pneus .marca-laranja {
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--continental-yellow) 100%);
	box-shadow: 0 0 14px rgba(255,121,0,0.65);
}

.page-loja-pneus .painel-header h5 {
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 2px;
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.page-loja-pneus .painel-header h5 i {
	color: var(--primary-color);
}
.page-loja-pneus .painel-header small {
	color: #9a9a9a;
	font-weight: 500;
}

.page-loja-pneus .painel-body {
	padding: 30px;
}

.page-loja-pneus .input-grupo-custom {
	display: flex;
	background: #fff;
	border: 2px solid #333;
	border-radius: 8px;
	overflow: hidden;
	height: 54px;
	transition: all 0.3s ease;
}
.page-loja-pneus .input-grupo-custom:focus-within {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.1);
}
.page-loja-pneus .input-grupo-custom input#searchInput {
	border: none !important;
	padding: 0 20px;
	font-weight: 600;
	flex-grow: 1;
	height: 100%;
	outline: none !important;
	box-shadow: none !important;
}

.page-loja-pneus .btn-pesquisar-principal {
	background: #333;
	color: #fff;
	border: none;
	padding: 0 25px;
	height: 100%;
	display: flex;
	align-items: center;
	transition: 0.2s;
	font-size: 1.2rem;
}
.page-loja-pneus .btn-pesquisar-principal:hover {
	background: var(--primary-color);
	color: #fff;
}

.page-loja-pneus .select-oficina {
	border: 2px solid #e0e0e0;
	padding: 10px 15px;
	font-weight: 700;
	border-radius: 8px;
	height: 54px;
	cursor: pointer;
	transition: border-color 0.2s;
	background-color: #fff;
}
.page-loja-pneus .select-oficina:focus {
	border-color: var(--primary-color);
	box-shadow: none;
}
.page-loja-pneus .select-oficina-sm {
	border: 1px solid #ddd;
	background: #fff;
	font-weight: 800;
	color: #333;
	border-radius: 6px;
	padding: 5px 10px;
}

.page-loja-pneus .check-tecnico {
	position: relative;
}
.page-loja-pneus .check-tecnico input[type="checkbox"] {
	display: none; 
}
.page-loja-pneus .check-tecnico label {
	cursor: pointer;
	padding: 8px 20px;
	border-radius: 50px;
	background: #f4f4f4;
	color: #555;
	font-size: 0.85rem;
	font-weight: 700;
	transition: 0.2s;
	border: 2px solid transparent;
	display: flex;
	align-items: center;
	gap: 8px;
}
.page-loja-pneus .check-tecnico input:checked + label {
	background: #fff;
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.page-loja-pneus .btn-todos-filtros {
	height: 40px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0 18px;
	border: 2px solid #1a1a1a;
	background: #1a1a1a;
	color: #fff;
	white-space: nowrap;
	transition: all 0.2s ease;
}
.page-loja-pneus .btn-todos-filtros i {
	color: var(--primary-color);
	transition: color 0.2s ease;
}
.page-loja-pneus .btn-todos-filtros:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.page-loja-pneus .btn-todos-filtros:hover i {
	color: #fff;
}

.page-loja-pneus .contador-vivos {
	margin-top: 20px;
	font-size: 0.9rem;
	color: #777;
}
.page-loja-pneus .contador-vivos span.fw-bold {
	color: var(--primary-color);
}

/* ============================================================
   Painel "Pesquisa Especializada" — variante da página Stilbull
   (mesmo padrão visual do painel de pesquisa da loja de pneus,
   reaproveitado aqui para o seletor marca/modelo/ano)
   ============================================================ */
.page-stilbull .painel-comando {
	background: #ffffff;
	border: 1px solid #1a1a1a;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0,0,0,0.22);
	overflow: hidden;
	max-width: 900px;
	margin: 0 auto;
}
.page-stilbull .painel-header {
	padding: 22px 30px;
	background: linear-gradient(135deg, #0a0a0a 0%, #232323 100%);
	border-bottom: none;
	position: relative;
}
.page-stilbull .marca-laranja {
	position: absolute;
	top: 0;
	left: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--primary-color) 0%, var(--continental-yellow) 100%);
	box-shadow: 0 0 14px rgba(255,121,0,0.65);
}
.page-stilbull .painel-header h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 6px;
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.page-stilbull .painel-header h2 i {
	color: var(--primary-color);
}
.page-stilbull .painel-header small {
	color: #9a9a9a;
	font-weight: 500;
	display: block;
}
.page-stilbull .painel-body {
	padding: 30px;
}
.page-stilbull .select-oficina {
	border: 2px solid #e0e0e0;
	padding: 10px 15px;
	font-weight: 700;
	border-radius: 8px;
	height: 54px;
	cursor: pointer;
	transition: border-color 0.2s;
	background-color: #fff;
}
.page-stilbull .select-oficina:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.1);
}
.page-stilbull .select-oficina:disabled {
	background-color: #f4f4f4;
	cursor: not-allowed;
}
@media (max-width: 768px) {
	.page-stilbull .painel-header {
		padding: 18px 20px;
		text-align: center;
	}
	.page-stilbull .painel-header h5 {
		justify-content: center;
	}
	.page-stilbull .painel-body {
		padding: 22px 16px;
	}
	.page-stilbull .select-oficina {
		height: 48px;
		font-size: 0.85rem;
	}
}

/* --- Sidebar de Filtros (Acordeão) --- */
.page-loja-pneus .sidebar-filtros {
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fff;
	padding: 0;
	align-self: flex-start;
}
.page-loja-pneus .sidebar-filtros .accordion-item {
	border-left: none;
	border-right: none;
}
.page-loja-pneus .sidebar-filtros .accordion-item:first-of-type {
	border-top: none;
}
.page-loja-pneus .sidebar-filtros .accordion-button {
	font-size: 0.9rem;
	font-weight: 700;
	padding: 14px 18px;
	color: #1a1a1a;
	border-left: 3px solid transparent;
}
.page-loja-pneus .sidebar-filtros .accordion-button:not(.collapsed) {
	color: var(--primary-color);
	background-color: #fff7f0;
	border-left: 3px solid var(--primary-color);
}
.page-loja-pneus .sidebar-filtros .accordion-button:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 121, 0, 0.25);
}
.page-loja-pneus .filtro-grupo-body {
	/* Sem max-height/overflow próprio: com vários grupos abertos ao mesmo
	   tempo, um scroll por grupo dentro de um scroll do painel inteiro
	   (scroll aninhado) confundia o utilizador. Agora só existe UM scroll,
	   no .offcanvas-body (ver mais abaixo). */
	padding-top: 4px;
	padding-bottom: 4px;
}
.page-loja-pneus .filtro-checkbox-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	font-size: 0.85rem;
}
.page-loja-pneus .filtro-checkbox-item input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--primary-color);
	cursor: pointer;
	flex-shrink: 0;
}
.page-loja-pneus .filtro-checkbox-item label {
	cursor: pointer;
	color: #444;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}
.page-loja-pneus .energy-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 6px;
	flex-shrink: 0;
}

/* Painel flutuante (componente offcanvas padrão do Bootstrap, igual em
   qualquer largura de ecrã — desliza da esquerda, por cima do conteúdo, com
   fundo escurecido). Largura um pouco maior que o padrão (400px) já que há
   bastante espaço livre dos dois lados em ecrãs grandes. */
.page-loja-pneus .sidebar-filtros {
	--bs-offcanvas-width: 440px;
}
@media (max-width: 575.98px) {
	.page-loja-pneus .sidebar-filtros {
		--bs-offcanvas-width: 100%;
	}
}
.page-loja-pneus .sidebar-filtros .offcanvas-header {
	background: linear-gradient(135deg, #0a0a0a 0%, #232323 100%);
	border-bottom: 3px solid var(--primary-color);
	padding: 18px 20px;
}
.page-loja-pneus .sidebar-filtros .offcanvas-title {
	color: #ffffff;
}
.page-loja-pneus .sidebar-filtros .offcanvas-title i {
	color: var(--primary-color);
}
/* Botão de fechar (X) branco sobre o cabeçalho escuro */
.page-loja-pneus .sidebar-filtros .offcanvas-header .btn-close {
	filter: brightness(0) invert(1);
	opacity: 0.8;
}
.page-loja-pneus .sidebar-filtros .offcanvas-header .btn-close:hover {
	opacity: 1;
}
/* Garante que só o corpo do painel (entre o cabeçalho e o rodapé fixo) faz
   scroll, e que esse scroll funciona mesmo com muitos grupos abertos ao
   mesmo tempo. min-height:0 é necessário aqui: por padrão um item flex não
   encolhe abaixo do tamanho do seu conteúdo, o que impedia o overflow/scroll
   de ter efeito quando o conteúdo era mais alto que o ecrã. */
/* Garante scroll no corpo do painel. Embora o Bootstrap defina
   overflow-y:auto no .offcanvas-body, a altura do conteúdo (múltiplos
   grupos acordeão abertos) pode exceder o viewport sem que o flex layout
   consiga impor o limite de altura automaticamente em todos os contextos.
   max-height explícito resolve: o corpo nunca cresce para além do viewport
   menos o cabeçalho (~65 px), e o overflow força o scroll CSS. */
.page-loja-pneus .sidebar-filtros .offcanvas-body {
	max-height: calc(100dvh - 72px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.page-loja-pneus .sidebar-filtros .offcanvas-title {
	font-size: 1.05rem;
	font-weight: 700;
}
.page-loja-pneus .sidebar-filtros-footer {
	position: sticky;
	bottom: 0;
	padding: 14px 18px;
	border-top: 1px solid #eee;
	background: #fff;
	z-index: 1;
}
.page-loja-pneus .sidebar-filtros-footer-buttons {
	display: flex;
	gap: 10px;
}
.page-loja-pneus .filtros-no-results-hint {
	font-size: 0.8rem;
	color: #d9534f;
	background: #fdf1f0;
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 10px;
}
.page-loja-pneus .btn-limpar-filtros,
.page-loja-pneus .btn-aplicar-filtros {
	flex: 1;
	border-radius: 8px;
	padding: 12px;
	font-weight: 700;
	font-size: 0.9rem;
	border: 2px solid var(--primary-color);
}
.page-loja-pneus .btn-limpar-filtros {
	background: #fff;
	color: var(--primary-color);
}
.page-loja-pneus .btn-aplicar-filtros {
	background: var(--primary-color);
	color: #fff;
	box-shadow: 0 4px 12px rgba(255,121,0,0.35);
	transition: opacity 0.15s ease, box-shadow 0.2s ease;
}
.page-loja-pneus .btn-aplicar-filtros:hover:not(:disabled) {
	box-shadow: 0 6px 16px rgba(255,121,0,0.5);
}
.page-loja-pneus .btn-aplicar-filtros:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

/* --- Barra Fixa de Medida (Mobile) --- */
.page-loja-pneus .loja-pneus-mobile-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
	padding: 10px 14px;
	z-index: 1001;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.page-loja-pneus .loja-pneus-mobile-bar.visible {
	transform: translateY(0);
}
.page-loja-pneus .loja-pneus-mobile-bar-medida {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex-shrink: 1;
}
.page-loja-pneus .loja-pneus-mobile-bar-medida .label {
	font-size: 0.65rem;
	color: #888;
}
.page-loja-pneus .loja-pneus-mobile-bar-medida .valor {
	font-size: 0.95rem;
	font-weight: 800;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.page-loja-pneus .loja-pneus-mobile-bar-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.page-loja-pneus .btn-mobile-bar {
	border: 2px solid var(--primary-color);
	background: #fff;
	color: var(--primary-color);
	font-weight: 700;
	font-size: 0.8rem;
	border-radius: 8px;
	padding: 8px 12px;
	white-space: nowrap;
}
.page-loja-pneus .btn-mobile-bar-select {
	-webkit-appearance: none;
	appearance: none;
}
@media (max-width: 991.98px) {
	body.page-loja-pneus .sticky-bottom-bar { display: none !important; }
	.page-loja-pneus .loja-pneus-mobile-bar { display: flex; }
}

/* --- 2.4. Paginação, Banners e Links de SEO --- */
.page-loja-pneus .pagination-container-center {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 50px;
}

/* Barra de paginação: Produtos por página (esquerda) + páginas (direita) */
.page-loja-pneus .loja-pagination-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	margin-top: 50px;
}
.page-loja-pneus .produtos-por-pagina {
	display: flex;
	align-items: center;
	gap: 6px;
}
.page-loja-pneus .ppp-label {
	color: #888;
	font-size: 0.9rem;
	margin-right: 6px;
}
.page-loja-pneus .ppp-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: none;
	background: transparent;
	color: #555;
	font-weight: 700;
	border-radius: 8px;
	transition: all 0.2s ease;
}
.page-loja-pneus .ppp-btn:hover {
	background: #f0f0f0;
	color: #1a1a1a;
}
.page-loja-pneus .ppp-btn.active {
	background: var(--primary-color);
	color: #fff;
}
/* Quando há só 1 página, a nav de páginas é escondida via JS; mantém o
   seletor de produtos-por-página alinhado à esquerda na mesma. */
@media (max-width: 575.98px) {
	.page-loja-pneus .loja-pagination-bar {
		justify-content: center;
	}
}
.page-loja-pneus .pagination .page-link {
	color: #333;
	border: none;
	margin: 0 4px;
	border-radius: 6px;
	font-weight: 700;
	padding: 10px 18px;
}
.page-loja-pneus .pagination .page-item.active .page-link {
	background-color: var(--primary-color);
	color: #fff;
}

.page-loja-pneus .hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/fotos/baner/baner_continental.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-loja-pneus .badge-oe-premium {
    background: #343a40;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 700;
}
.page-loja-pneus .badge-recomendado-beato {
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.page-loja-pneus .empty-state-container {
    border-top: 4px solid var(--primary-color) !important;
    animation: fadeIn 0.5s ease;
}
.page-loja-pneus .empty-state-container .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}
.page-loja-pneus .empty-state-container .btn-primary:hover {
    background-color: #e66d00;
    border-color: #e66d00;
}

.page-loja-pneus .seo-quick-links .btn-seo-pill {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #555;
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
}
.page-loja-pneus .seo-quick-links .btn-seo-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #fffdfb;
    transform: translateY(-2px);
}
.page-loja-pneus .seo-quick-links h6 {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #333;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.page-loja-pneus .seo-title {
    font-weight: 800;
    color: #222;
    margin-bottom: 30px;
}
.page-loja-pneus .seo-title i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* Bloco de texto SEO enriquecido no fundo da loja */
.page-loja-pneus .seo-texto-loja {
    border: 1px solid #eee;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.75;
}
.page-loja-pneus .seo-texto-loja h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-top: 28px;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 4px solid var(--primary-color);
}
.page-loja-pneus .seo-texto-loja h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin-top: 24px;
    margin-bottom: 10px;
}
.page-loja-pneus .seo-texto-loja ul {
    padding-left: 20px;
}
.page-loja-pneus .seo-texto-loja li {
    margin-bottom: 6px;
}
.page-loja-pneus .seo-texto-loja a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}
.page-loja-pneus .seo-texto-loja a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 2.5. Ajustes Mobile Específicos para a Pesquisa da Loja --- */
@media (max-width: 767.98px) {
    .page-loja-pneus .filtro-oficina-container {
        margin: -20px auto 30px auto !important; 
        width: 100%;
        padding: 0 10px;
    }
    .page-loja-pneus .painel-header {
        padding: 15px 20px !important;
        text-align: center;
    }
    .page-loja-pneus .painel-header h5 {
        justify-content: center;
    }
    .page-loja-pneus .painel-body {
        padding: 20px 15px !important;
    }
    .page-loja-pneus .select-oficina {
        height: 48px !important;
        font-size: 0.85rem !important;
        padding: 5px 10px !important;
    }
    .page-loja-pneus .col-md-7.d-flex.gap-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    .page-loja-pneus .check-tecnico label {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
    .page-loja-pneus .ordenar-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }
    .page-loja-pneus .ordenar-container label {
        align-self: flex-start !important;
        margin-bottom: 5px !important;
    }
    .page-loja-pneus #sortFilter {
        width: 100% !important;
        height: 48px !important;
    }
}


/* ==========================================================================
   3. EXCLUSIVO DA PÁGINA INICIAL (.page-index)
   ========================================================================== */

/* Resolução CLS: Espaço reservado para o banner principal */
body.page-index main img.d-block.w-100 {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 600;
    object-fit: cover;
}

/* Banner Principal (Hero Carousel) */
.page-index #hero-carousel {
    height: 50vh; 
    overflow: hidden;
    position: relative;
}
.page-index #hero-carousel .carousel-inner,
.page-index #hero-carousel .carousel-item {
    height: 100%;
}
.page-index #hero-carousel img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.page-index .pneu-detalhe-imposto {
    color: #4b4b4b !important;
    font-size: 0.85rem;
}

/* Estrutura do Carrossel de Produtos da Homepage */
.page-index .produtos-momento-fullwidth {
    font-family: 'Arial', sans-serif;
    margin: 40px 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

.page-index .produtos-momento-fullwidth h2 {
    text-align: center;
    color: #000;
    margin-bottom: 30px;
    font-size: 28px;
    position: relative;
    font-weight: 700;
}
.page-index .produtos-momento-fullwidth h2:after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background: #FFCC00;
    margin: 15px auto 0;
}

.page-index .produtos-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 45px;
}

.page-index .produtos-container {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 15px 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scroll-snap-type: x mandatory;
}
.page-index .produtos-container::-webkit-scrollbar {
    display: none;
}
.page-index .produtos-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Largura estrita do Cartão dentro do Carrossel do Index */
.page-index #produtosContainer .produto-card-beato {
    min-width: 270px;
    max-width: 270px;
    margin: 10px 5px;
}

/* Setas de Navegação do Carrossel */
.page-index .nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #FFCC00;
    background: white;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.page-index .nav-btn:hover {
    background: #FFCC00;
    color: #000;
}
.page-index #prevBtn { left: 5px; }
.page-index #nextBtn { right: 5px; }

/* Testemunhos */
.page-index .testimonials { padding: 50px 0; }
.page-index .testimonials h3 { margin-bottom: 20px; }
.page-index .testimonials .card {
    border-bottom: 3px #ffa500 solid !important;
    transition: .5s;
    margin-top: 60px;
}
.page-index .testimonials .card i {
    background-color: #ffa500;
    color: #fff;
    width: 75px;
    height: 75px;
    line-height: 75px;
    margin: -40px auto 0;
}

/* Categorias e Cards de Promoção */
.page-index .promo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    border: none;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-index .promo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}
.page-index .promo-card.card-yellow:hover { color: #1a1a1a; }
.page-index .promo-card.card-blue:hover,
.page-index .promo-card.card-dark:hover,
.page-index .promo-card.card-gray:hover { color: #ffffff; }

.page-index .promo-card-img-container {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #ffffff;
}
.page-index .promo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.page-index .promo-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.page-index .promo-card-body p {
    flex-grow: 1;
    margin-bottom: 1rem;
}
.page-index .promo-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.page-index .promo-card-footer .price-tag {
    font-weight: bold;
    font-size: 1.1rem;
}
.page-index .promo-card-footer .cta-link { font-weight: bold; }
.page-index .promo-card-footer .cta-link i { transition: transform 0.2s ease; }
.page-index .promo-card:hover .cta-link i { transform: translateX(4px); }

.page-index .card-yellow { background-color: #FFCC00; color: #1a1a1a; }
.page-index .card-yellow .promo-card-footer { border-top-color: rgba(0, 0, 0, 0.1); }
.page-index .card-blue { background-color: #0d6efd; color: #ffffff; }
.page-index .card-blue .badge { background-color: rgba(255,255,255,0.2); color: #fff; }
.page-index .card-dark { background-color: #212529; color: #ffffff; }
.page-index .card-dark .badge { background-color: rgba(255,255,255,0.2); color: #fff; }
.page-index .card-gray { background-color: #6c757d; color: #ffffff; }

/* Accordion Custom */
.page-index #accordion .accordion-item {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: -5px;
}
.page-index #accordion .accordion-header {
    padding: 0;
    border: none;
    border-radius: 0;
}
.page-index #accordion .accordion-button {
    display: block;
    padding: 15px 70px 15px 20px;
    background: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e6720d;
    border-bottom: 1px solid #1d2e3b;
    position: relative;
    box-shadow: none;
}
.page-index #accordion .accordion-button:not(.collapsed) {
    color: #e6720d;
    background-color: #fff;
}
.page-index #accordion .accordion-button.collapsed { color: #1d2e3b; }
.page-index #accordion .accordion-button.collapsed:hover { color: #e6720d; }

.page-index #accordion .accordion-button:after,
.page-index #accordion .accordion-button:before {
    content: "";
    width: 3px;
    height: 10px;
    background: #e6720d;
    position: absolute;
    top: 20px;
    right: 35px;
    transform: rotate(45deg);
    transition: all .3s ease-in-out 0s;
}
.page-index #accordion .accordion-button:after {
    right: 29px;
    transform: rotate(-45deg);
}
.page-index #accordion .accordion-button:not(.collapsed)::after,
.page-index #accordion .accordion-button::after {
    background-image: none;
}
.page-index #accordion .accordion-button.collapsed:before {
    transform: rotate(-45deg);
    background: #1d2e3b;
}
.page-index #accordion .accordion-button.collapsed:after {
    transform: rotate(45deg);
    background: #1d2e3b;
}
.page-index #accordion .accordion-button.collapsed:hover:after,
.page-index #accordion .accordion-button.collapsed:hover:before {
    background: #e6720d;
}
.page-index #accordion .accordion-body {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* --- 3.1. Secção FAQ Global --- */
.page-index .faq-section { background-color: #f8f9fa; }
.page-index .faq-accordion .accordion-item {
    background-color: #ffffff;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    margin-bottom: 1rem;
    overflow: hidden; 
}
.page-index .faq-accordion .accordion-button {
    font-weight: 700;
    color: #212529;
    background-color: #ffffff;
    padding: 1.5rem;
    font-size: 1.1rem;
    text-align: left;
}
.page-index .faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 204, 0, 0.5);
}
.page-index .faq-accordion .accordion-button:not(.collapsed) {
    color: #212529;
    background-color: #FFCC00;
    box-shadow: none;
}
.page-index .faq-accordion .accordion-button::after {
    filter: grayscale(1) brightness(1.5);
}
.page-index .faq-accordion .accordion-button:not(.collapsed)::after {
    filter: none;
}
.page-index .faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem;
    color: #495057;
}
.page-index .faq-accordion .accordion-body h4, 
.page-index .faq-accordion .accordion-body h5 {
    margin-top: 1rem;
    color: #212529;
}


/* --- Formulário de pesquisa rápida no slide 1 do carrossel (index.html) ---
   Largura limitada para não ocupar o slide inteiro em ecrãs grandes. */
.hero-search-form {
    max-width: 620px;
}

/* --- Faixa de confiança "4.6/5 no Google" (index.html) ---
   Antes: estrelas fs-1 + texto fs-4 + <br> a separar a 2ª linha + py-4 no
   contentor — ocupava várias linhas e ficava com muito espaço vazio, tanto
   em mobile (quebrava em 3-4 linhas) como em desktop (faixa alta e "gorda"). */
.trust-badge-stars {
    font-size: 1.4rem;
    line-height: 1;
}

.trust-badge-text {
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
}

.trust-badge-text strong {
    font-size: 1rem;
}

.trust-badge-text .text-muted {
    font-size: 0.8rem;
}

.trust-badge-btn {
    font-size: 0.75rem;
    padding: 4px 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .trust-badge-stars {
        font-size: 1.1rem;
    }
    .trust-badge-text {
        font-size: 0.8rem;
    }
    .trust-badge-text strong {
        font-size: 0.85rem;
    }
    .trust-badge-text .text-muted {
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   4. ESTILOS RESPONSIVOS E ADAPTAÇÃO MOBILE (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 768px) {
    /* --- 4.1. Homepage Hero Banner Mobile --- */
    /* O contentor (normalmente 50vh, ver regra ".page-index #hero-carousel"
       acima) tem de acompanhar esta altura maior em mobile — sem isto, a
       imagem a 80vh transbordava o contentor a 50vh e ficava cortada pelo
       overflow:hidden do contentor. */
    .page-index #hero-carousel {
        height: 80vh;
        min-height: 500px;
    }
    #hero-carousel .carousel-item img {
        height: 80vh;
        min-height: 500px;
        object-fit: cover;
        object-position: center;
    }
    #hero-carousel .carousel-caption h1 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    #hero-carousel .carousel-caption p.lead {
        font-size: 1rem;
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    #hero-carousel .carousel-caption {
        bottom: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4); 
        left: 0;
        right: 0;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }
    #hero-carousel .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%; 
        margin-bottom: 10px;
    }
    #hero-carousel .ms-md-3 {
        margin-left: 0 !important;
    }

    /* Formulário de pesquisa rápida do slide 1 — em mobile os 3 selects já
       cabem numa fila (col-4), só o botão desce para a fila seguinte
       (col-12), evitando selects espremidos demais. */
    #hero-carousel .hero-search-form .form-select {
        font-size: 0.85rem;
        padding: 8px 6px;
    }
    #hero-carousel .hero-search-form .btn {
        width: 100%;
        margin-bottom: 0;
    }

    /* As setas prev/next do Bootstrap cobrem por defeito uma faixa de 15%
       de cada lado, em toda a altura do slide — em mobile isso ficava
       mesmo por cima dos campos de pesquisa do slide 1, interceptando os
       cliques. A navegação por swipe e os indicadores (bolinhas) já
       chegam em mobile, por isso as setas ficam escondidas aqui. */
    #hero-carousel .carousel-control-prev,
    #hero-carousel .carousel-control-next {
        display: none;
    }

    /* --- 4.2. Carrossel de Produtos da Homepage (Mobile) --- */
    .page-index .produtos-wrapper {
        padding: 0 35px;
    }
    #prevBtn { left: 2px !important; }
    #nextBtn { right: 2px !important; }

    #produtosContainer .produto-card-beato {
        min-width: 255px; 
        max-width: 255px;
        padding: 14px;
    }
    .page-index .nav-btn {
        display: none !important;
    }
}

/* Ecrãs maiores (Desktop) - a partir de 768px */
@media (min-width: 768px) {
    .page-index .produtos-container {
        padding-left: 30px;
        padding-right: 30px;
    }
    .page-index .nav-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .page-index #prevBtn {
        left: -20px;
    }
    .page-index #nextBtn {
        right: -20px;
    }
    .page-index .produtos-momento-fullwidth #prevBtn {
        left: 30px;
    }
    .page-index .produtos-momento-fullwidth #nextBtn {
        right: 30px;
    }
}

/* ======================================================
   2.2. Página da Marca Pirelli
   ====================================================== */


/* Overrides para Página PIRELLI */
.page-pirelli .tech-card:after { background: var(--pirelli-red); }
.page-pirelli .nav-pills .nav-link.active { background-color: var(--pirelli-red); }
.page-pirelli .pirelli-red { color: var(--pirelli-red); }
.page-pirelli .feature-icon-brand { background-color: var(--pirelli-red); }
.page-pirelli .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--pirelli-light) 50%); }
.page-pirelli .history-timeline::before, .page-pirelli .timeline-item::after { background: var(--pirelli-red); }
.page-pirelli .timeline-year { color: var(--pirelli-red); }
.page-pirelli .accordion-button:not(.collapsed) { background-color: var(--pirelli-light); color: var(--pirelli-red); font-weight: 600; }
.page-pirelli .stat-value { color: var(--pirelli-red); }
.page-pirelli .performance-title { border-bottom: 2px solid var(--pirelli-red); }
.page-pirelli .tech-feature i { background: var(--pirelli-red); }
.page-pirelli .benefit-card { border-top: 4px solid var(--pirelli-red); }
.page-pirelli .benefit-card:hover { border-top-color: var(--pirelli-yellow); }
.page-pirelli .benefit-icon { color: var(--pirelli-red); }
.page-pirelli .hero-subtitle:after { background: var(--pirelli-yellow); }
.page-pirelli .tire-selector-card:hover { border-color: var(--pirelli-red); }

/* ======================================================
   2.3. Página da Marca Goodyear
   ====================================================== */


/* Overrides para Página GOODYEAR */
.page-goodyear .nav-pills .nav-link.active { background-color: var(--goodyear-blue); }
.page-goodyear .goodyear-blue { color: var(--goodyear-blue); }
.page-goodyear .feature-icon-brand { background-color: var(--goodyear-blue); }
.page-goodyear .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--goodyear-light) 50%); }
.page-goodyear .history-timeline::before, .page-goodyear .timeline-item::after { background: var(--goodyear-blue); }
.page-goodyear .timeline-year { color: var(--goodyear-blue); }
.page-goodyear .faq-header { background-color: var(--goodyear-blue); color: #fff; border-radius: 0 0 30px 30px; padding: 30px 0; margin-bottom: 40px; }
.page-goodyear .accordion-button:not(.collapsed) { background-color: var(--goodyear-light); color: var(--goodyear-blue); font-weight: 600; }
.page-goodyear .tire-icon { color: var(--goodyear-blue); }
.page-goodyear .tire-search-box:hover { border-color: var(--goodyear-yellow); }
.page-goodyear .tire-search-box .search-btn { background-color: var(--goodyear-blue); color: var(--goodyear-yellow); }
.page-goodyear .tire-search-box .search-btn:hover { background-color: var(--goodyear-yellow); color: var(--goodyear-blue); }

/* ======================================================
   2.4. Página da Marca Michelin
   ====================================================== */


/* Overrides para Página MICHELIN */
.page-michelin .nav-pills .nav-link.active { background-color: var(--michelin-blue); }
.page-michelin .michelin-blue { color: var(--michelin-blue); }
.page-michelin .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--michelin-light) 50%); }
.page-michelin .history-timeline::before, .page-michelin .timeline-item::after { background: var(--michelin-blue); }
.page-michelin .timeline-year { color: var(--michelin-blue); }
.page-michelin .faq-header { background-color: var(--michelin-blue); color: #fff; border-radius: 0 0 30px 30px; padding: 30px 0; margin-bottom: 40px; }
.page-michelin .accordion-button:not(.collapsed) { background-color: var(--michelin-light); color: var(--michelin-blue); font-weight: 600; }
.page-michelin .tire-icon { color: var(--michelin-blue); }
.page-michelin .tire-selector-card:hover, .page-michelin .tire-selector-card.active { border-color: var(--michelin-blue); }
.page-michelin .offer-badge { background: var(--michelin-yellow); color: var(--michelin-blue); position: absolute; top: 15px; right: 15px; z-index: 10; padding: 5px 15px; border-radius: 20px; font-weight: 700; transform: rotate(5deg); }

/* ======================================================
   2.5. Página da Marca Nexen
   ====================================================== */


/* Overrides para Página NEXEN */
.page-nexen .nav-pills .nav-link.active { background-color: var(--nexen-blue); }
.page-nexen .nexen-blue { color: var(--nexen-blue); }
.page-nexen .nexen-red { color: var(--nexen-red); }
.page-nexen .feature-icon-brand { background-color: var(--nexen-blue); }
.page-nexen .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--nexen-light) 50%); }
.page-nexen .history-timeline::before, .page-nexen .timeline-item::after { background: var(--nexen-blue); }
.page-nexen .timeline-year { color: var(--nexen-blue); }
.page-nexen .faq-header { background-color: var(--nexen-blue); color: #fff; border-radius: 0 0 30px 30px; padding: 30px 0; margin-bottom: 40px; }
.page-nexen .accordion-button:not(.collapsed) { background-color: var(--nexen-light); color: var(--nexen-blue); font-weight: 600; }
.page-nexen .tire-icon { color: var(--nexen-blue); }
.page-nexen .stat-value { color: var(--nexen-blue); }
.page-nexen .performance-title { border-bottom: 2px solid var(--nexen-blue); }
.page-nexen .tire-selector-card:hover { border-color: var(--nexen-blue); transform: scale(1.03); }
.page-nexen .offer-badge { background: var(--nexen-dark); color: #fff; position: absolute; top: 15px; right: 15px; z-index: 10; padding: 5px 15px; border-radius: 20px; font-weight: 700; transform: rotate(5deg); }
.page-nexen .tire-search-box { background-color: var(--nexen-blue); }
.page-nexen .tire-search-box:hover { border-color: var(--nexen-red); }
.page-nexen .tire-search-placeholder { color: #fff; }

/* ======================================================
   2.6. Página da Marca Bridgestone
   ====================================================== */


/* Overrides para Página BRIDGESTONE */
.page-bridgestone .nav-pills .nav-link.active { background-color: var(--bridgestone-red); }
.page-bridgestone .bridgestone-red { color: var(--bridgestone-red); }
.page-bridgestone .tech-card:hover { border-color: var(--bridgestone-red); }
.page-bridgestone .feature-icon-brand { background-color: var(--bridgestone-red); }
.page-bridgestone .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--bridgestone-light) 50%); }
.page-bridgestone .history-timeline::before, .page-bridgestone .timeline-item::after { background: var(--bridgestone-red); }
.page-bridgestone .timeline-year { color: var(--bridgestone-red); }
.page-bridgestone .section-title::after { background: var(--bridgestone-red); }
.page-bridgestone .faq-header { background-color: var(--bridgestone-red); color: #fff; border-radius: 0 0 30px 30px; padding: 30px 0; margin-bottom: 40px; }
.page-bridgestone .accordion-button:not(.collapsed) { background-color: var(--bridgestone-light); color: var(--bridgestone-red); font-weight: 600; }
.page-bridgestone .tire-icon { color: var(--bridgestone-red); }
.page-bridgestone .stat-value { color: var(--bridgestone-red); }
.page-bridgestone .performance-title { border-bottom: 2px solid var(--bridgestone-red); }
.page-bridgestone .tire-selector-card:hover { border-color: var(--bridgestone-red); transform: scale(1.03); }
.page-bridgestone .offer-badge { background: var(--bridgestone-dark); color: #fff; position: absolute; top: 15px; right: 15px; z-index: 10; padding: 5px 15px; border-radius: 20px; font-weight: 700; transform: rotate(5deg); }
.page-bridgestone .tire-search-box .search-btn { background-color: var(--bridgestone-red); color: #fff; }

/* ======================================================
   2.7. Página da Marca Hankook
   ====================================================== */


/* Overrides para Página HANKOOK */
.page-hankook .nav-pills .nav-link.active { background-color: var(--hankook-blue); }
.page-hankook .hankook-blue { color: var(--hankook-blue); }
.page-hankook .hankook-orange { color: var(--hankook-orange); }
.page-hankook .tech-card:hover { border-color: var(--hankook-blue); }
.page-hankook .history-section { background: linear-gradient(to right, #f8f9fa 50%, var(--hankook-light) 50%); }
.page-hankook .history-timeline::before, .page-hankook .timeline-item::after { background: var(--hankook-blue); }
.page-hankook .timeline-year { color: var(--hankook-blue); }
.page-hankook .faq-header { background: linear-gradient(135deg, var(--hankook-blue), #002e7a); color: #fff; border-radius: 0 0 30px 30px; padding: 50px 0; margin-bottom: 40px; }
.page-hankook .accordion-button:not(.collapsed) { background-color: var(--hankook-light); color: var(--hankook-blue); font-weight: 600; }
.page-hankook .tire-icon { color: var(--hankook-blue); background:#e6eeff; width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.page-hankook .stat-value { color: var(--hankook-blue); }
.page-hankook .performance-title { border-bottom: 2px solid var(--hankook-blue); }
.page-hankook .tech-feature i { background: var(--hankook-blue); }
.page-hankook .benefit-card { border-top: 4px solid var(--hankook-blue); }
.page-hankook .benefit-card:hover { border-top-color: var(--hankook-orange); }
.page-hankook .benefit-icon { color: var(--hankook-blue); }
.page-hankook .tire-selector-card:hover { border-color: var(--hankook-blue); }
.page-hankook .tire-search-box:hover { border-color: var(--hankook-orange); }
.page-hankook .tire-search-box .search-btn { background-color: var(--hankook-orange); color: #fff; }

/* ======================================================
   2.8. Página Kit Roda Suplente (pneu_suplente.html)
   ====================================================== */

.page-pneu-suplente {
    --beato-orange: #FF7900;
    --beato-blue: #0056b3;
    --beato-dark: #1a1a1a;
}

/* --- Hero Section Específica --- */
.page-pneu-suplente .hero {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../fotos/baner/baner-npk.jpg") no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

/* --- Layout Geral e Secções --- */
.page-pneu-suplente .search-section {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    padding: 30px;
    margin-top: -50px;
    position: relative;
    z-index: 10;
}

.page-pneu-suplente .benefits-section {
    padding: 80px 0;
    background-color: #fff;
}

.page-pneu-suplente .benefit-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.page-pneu-suplente .benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 121, 0, 0.15);
    border-color: var(--beato-orange);
}

.page-pneu-suplente .benefit-icon {
    font-size: 2.5rem;
    color: var(--beato-orange);
    margin-bottom: 20px;
}

/* --- Estrutura do Cartão de Produto --- */
.page-pneu-suplente .product-card {
    background: #ffffff;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-pneu-suplente .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 121, 0, 0.15) !important;
    border-bottom: 4px solid var(--beato-orange) !important;
}

.page-pneu-suplente .product-card .bg-dark {
    background-color: var(--beato-dark) !important;
}

.page-pneu-suplente .card-content-flex {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Badge Verde "Compatível" */
.page-pneu-suplente .badge-compativel {
    font-size: 0.95rem !important;
    padding: 8px 14px !important;
    font-weight: 600;
    background-color: #28a745 !important;
}

/* --- Container de Imagem Dupla (Jante + Pneu) --- */
.page-pneu-suplente .img-container-double {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa !important;
    padding: 20px;
}

.page-pneu-suplente .img-container-double img {
    max-height: 240px;
    width: auto;
    object-fit: contain;
}

/* --- Tabela Técnica dentro do Card --- */
.page-pneu-suplente .technical-table {
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.page-pneu-suplente .tech-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
}

.page-pneu-suplente .tech-row .text-muted {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 600;
}

.page-pneu-suplente .tech-row .fw-bold {
    font-size: 0.85rem;
    color: #000000 !important;
}

.page-pneu-suplente .bg-warning-light {
    background-color: #fffdf0;
}

/* --- Preços e Botões --- */
.page-pneu-suplente .mt-auto {
    margin-top: auto !important;
}

.page-pneu-suplente .price-pill {
    background-color: var(--beato-orange);
    color: #000000 !important;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    display: inline-block;
    text-align: center;
    min-width: 100px;
}

.page-pneu-suplente .price-pill.is-budget {
    font-size: 0.75rem !important;
    padding: 12px 10px;
    max-width: 110px;
    text-transform: uppercase;
    line-height: 1.1;
}

.page-pneu-suplente .btn-blue-custom {
    background-color: var(--beato-blue) !important;
    color: #ffffff !important;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-pneu-suplente .btn-blue-custom:hover {
    background-color: #004494 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}

.page-pneu-suplente .btn-quote-custom {
    background-color: #ffc107 !important;
    color: #000000 !important;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-pneu-suplente .btn-primary-custom {
    background-color: var(--beato-orange);
    border-color: var(--beato-orange);
    padding: 10px 20px;
    color: white;
    font-weight: 700;
    transition: all .3s ease;
}

.page-pneu-suplente .btn-primary-custom:hover {
    background-color: #d16600;
    border-color: #d16600;
    transform: translateY(-2px);
}

.page-pneu-suplente .d-none {
    display: none !important;
}

/* --- CTA e Listas --- */
.page-pneu-suplente .cta-section {
    background: linear-gradient(rgba(229, 114, 0, .9), rgba(229, 114, 0, .9)), url("https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80") no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.page-pneu-suplente .results-section {
    padding: 80px 0;
}

.page-pneu-suplente .comparison-table th,
.page-pneu-suplente .comparison-table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #dee2e6;
}

.page-pneu-suplente .comparison-table th {
    background-color: #f8f9fa;
    font-weight: 700;
}

.page-pneu-suplente .comparison-table .check { color: #28a745; font-size: 1.2rem; }
.page-pneu-suplente .comparison-table .cross { color: #dc3545; font-size: 1.2rem; }

/* --- Modal e Opções de Entrega --- */
.page-pneu-suplente .delivery-option {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.page-pneu-suplente .delivery-option:hover {
    border-color: #adb5bd;
}

.page-pneu-suplente .delivery-option.selected {
    border-color: #0d6efd;
    background-color: #f8f9fa;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.page-pneu-suplente .delivery-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: #6c757d;
}

.page-pneu-suplente .delivery-option.selected .delivery-icon {
    color: #0d6efd;
}

/* --- Secção de Atalhos Rápidos (os 3 cartões) --- */
.page-pneu-suplente .bg-light-gradient {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef !important;
}

/* Botão Branco tipo comprimido */
.page-pneu-suplente .btn-white {
    background-color: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem; /* Tamanho do comprimido */
    font-weight: 500;
}

/* Hover Laranja nos botões de atalho */
.page-pneu-suplente .btn-white:hover {
    background-color: var(--beato-orange) !important;
    border-color: var(--beato-orange) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 121, 0, 0.25);
}

.page-pneu-suplente .card-title i {
    opacity: 0.7;
}

/* Responsivo Específico */
@media (max-width: 768px) {
    .page-pneu-suplente .img-container-double {
        height: 220px;
    }
    .page-pneu-suplente .price-pill {
        font-size: 1.15rem;
        padding: 5px 14px;
    }
    .page-pneu-suplente .btn-blue-custom {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* ✅ NOTA: este bloco foi consolidado numa única versão (Fase 2 de otimização).
   Anteriormente existiam duas definições históricas para os mesmos seletores
   (uma usando var(--orange) hardcoded, outra usando var(--beato-orange)) que
   eram visualmente idênticas — confirmado que --beato-orange == --orange ==
   #FF7900, --beato-dark == #1a1a1a, --beato-blue == #0056b3. Mantida apenas
   a versão com nomes semânticos. Os seletores que só existiam numa das duas
   versões (ex: .benefit-card, .cta-section, .comparison-table, .btn-white,
   .bg-light-gradient) foram todos preservados sem alterações. */



/* ======================================================
   2.9. Página Líquido de Travões
   ====================================================== */

/* --- 6.7. Página Líquido de Travões --- */
.page-liquido-travoes .diagnostic-box {
    background: linear-gradient(135deg, #004A87, #007BFF);
    border-radius: 12px;
    padding: 30px;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.page-liquido-travoes .lamp-type-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
    background: #fff;
}

.page-liquido-travoes .lamp-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.page-liquido-travoes .lamp-type-header {
    padding: 20px;
    color: white;
    text-align: center;
}

.page-liquido-travoes .lamp-type-content {
    padding: 20px;
    background: white;
}

.page-liquido-travoes .lamp-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

/* O .price-badge foi adicionado aqui para manter todos os estilos da página juntos */
.page-liquido-travoes .price-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary); /* Azul -> #007BFF */
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 10;
}

/* ======================================================
   2.10. Página Pastilhas EBC
   ====================================================== */

/* 1. Estilos Base (Aplicam-se apenas dentro de .page-ebc-pastilhas)
----------------------------------------------------------------------*/
.page-ebc-pastilhas .info-box {
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-ebc-pastilhas .info-box a {
    color: #e0e0e0;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

.page-ebc-pastilhas .info-box a:hover {
    color: #ffffff;
}

.page-ebc-pastilhas .info-box-list {
    list-style: none;
    padding-left: 0;
}

.page-ebc-pastilhas .info-box-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.page-ebc-pastilhas .info-box-list .bi-check-lg {
    margin-right: 0.75rem;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.page-ebc-pastilhas .nav-pills-container {
    background-color: #f8f9fa; /* Fundo cinza claro */
    padding: 1rem;
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra subtil */
    margin-bottom: 2rem; /* Mais espaço abaixo */
    margin-top: 3rem;
}

/* 2. Estilo base dos links/botões */
.page-ebc-pastilhas .nav-pills .nav-link {
    background-color: #ffffff; /* Fundo branco */
    color: #495057; /* Texto cinza escuro */
    font-weight: 600; /* Texto mais forte */
    border-radius: 8px;
    padding: 0.75rem 1.5rem; /* Mais espaço interno */
    border: 1px solid #dee2e6; /* Borda leve */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* A magia da transição suave */
    transition: all 0.3s ease-in-out;
}

/* 3. Efeito ao passar o rato (hover) */
.page-ebc-pastilhas .nav-pills .nav-link:hover {
    color: #000;
    /* Efeito de elevação */
    transform: translateY(-4px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--bs-warning);
}

/* 4. Estilo do link ATIVO */
.page-ebc-pastilhas .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--bs-warning); /* Cor de destaque amarela do seu site */
    color: #212529; /* Texto escuro para bom contraste */
    /* Sombra com a cor de destaque para dar um efeito de "brilho" */
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4); 
    transform: translateY(-4px);
    border-color: var(--bs-warning);
}

/* 2. Classes Modificadoras de Cor (Também específicas da página)
------------------------------------------------------------------*/

.page-ebc-pastilhas .info-box-green {
    background: linear-gradient(135deg, #2a8a2a, #3abf3a);
}

.page-ebc-pastilhas .info-box-red {
    background: linear-gradient(135deg, #c62828, #e53935);
}

.page-ebc-pastilhas .info-box-yellow {
    background: linear-gradient(135deg, #ff8f00, #ffb300);
}

.page-ebc-pastilhas .info-box-blue {
    background: linear-gradient(135deg, #1565c0, #1976d2);
}

.page-ebc-pastilhas .info-box-black {
    background: linear-gradient(135deg, #343a40, #495057);
}
.page-ebc-pastilhas .info-box-orange {
    background: linear-gradient(135deg, #FF7900, #FFA04D);
}
.page-ebc-pastilhas .info-box-gold {
    background: linear-gradient(135deg, #b5830e, #fcc201);
}

/* ======================================================
   2.11. Página Substituição de Lâmpadas
   ====================================================== */




/* --- 6.8. Página Substituição de Lâmpadas --- */

.page-substituicao-lampadas .lamp-type-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
    background: #fff;
}

.page-substituicao-lampadas .lamp-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.page-substituicao-lampadas .lamp-type-header {
    padding: 20px;
    color: white;
    text-align: center;
}

.page-substituicao-lampadas .lamp-type-content {
    padding: 20px;
    background: white;
}

.page-substituicao-lampadas .lamp-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

.page-substituicao-lampadas .price-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 10;
}

.page-substituicao-lampadas .diagnostic-box {
    background: linear-gradient(135deg, #004A87, #007BFF);
    border-radius: 12px;
    padding: 30px;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* ======================================================
   2.12. Página Desempeno/Reparação de Jantes
   ====================================================== */


/* ====================================================== */
/*      ESTILOS PARA O BANNER DE REPARAÇÃO DE JANTES      */
/*      Página: desempeno-jantes.html                     */
/* ====================================================== */

/* Estilos para o container principal do banner */
.page-desempeno .banner-reparacao {
    background-color: #FFD100; /* Amarelo principal */
    color: #1a1a1a;            /* Texto escuro para bom contraste */
    padding: 1rem;
    display: flex;
    flex-direction: column;    /* Abordagem Mobile First: elementos empilhados */
    align-items: center;
    text-align: center;
    gap: 0.75rem;              /* Espaçamento entre os elementos (texto e botão) */
}

/* Estilos para o conteúdo de texto */
.page-desempeno .banner-reparacao__content {
    display: flex;
    flex-direction: column;    /* Empilhado no mobile para melhor leitura */
    align-items: center;
    gap: 0.5rem;
}

/* Título principal do banner */
.page-desempeno .banner-reparacao__title {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Texto de apoio */
.page-desempeno .banner-reparacao__text {
    font-weight: 450;
    font-size: 0.95rem;
}

/* Botão de Call-to-Action (CTA) */
.page-desempeno .banner-reparacao__cta .btn {
    background-color: #1a1a1a;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;       /* Botão com cantos arredondados (pílula) */
    border: none;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Efeito hover para o botão */
.page-desempeno .banner-reparacao__cta .btn:hover {
    background-color: #000;
    transform: scale(1.05); /* Ligeiro aumento ao passar o rato */
}

/* Cabeçalho do Modal */
.page-desempeno .modal-header.bg-orange {
    background-color: #FFD100; /* Laranja Continental */
    color: #1a1a1a;            /* Texto escuro para contraste */
    border-bottom: none;       /* Remove a linha separadora */
}

/* Ajusta a cor do botão 'X' para ser visível no fundo laranja */
.page-desempeno .modal-header.bg-orange .btn-close {
    filter: invert(1) grayscale(100%) brightness(50%);
}

/* Imagem dentro do Modal */
.page-desempeno .modal-damage-image {
    width: 100%;
    max-height: 250px; /* Limita a altura da imagem */
    object-fit: cover; /* Garante que a imagem preenche o espaço sem distorcer */
    border-radius: 8px;
    margin-bottom: 1rem; /* Espaço entre a imagem e o texto */
}
/* Botão principal do Modal */
.page-desempeno .btn-orange-whatsapp {
    background-color: #FFD100;
    color: #1a1a1a;
    font-weight: 700;
    border: 2px solid #FFD100;
    transition: all 0.3s ease;
}

.page-desempeno .btn-orange-whatsapp:hover {
    background-color: #e6b800; /* Laranja um pouco mais escuro */
    border-color: #e6b800;
    color: #1a1a1a;
    transform: scale(1.05);
}
/* ---------------------------------- */
/*      ESTILOS PARA DESKTOP          */
/* ---------------------------------- */
/* Aplica-se a ecrãs com 768px ou mais de largura */
@media (min-width: 768px) {
    /* Alinha os elementos lado a lado no desktop */
    .page-desempeno .banner-reparacao {
        flex-direction: row;
        justify-content: center;
    }

    /* Alinha o conteúdo de texto lado a lado */
    .page-desempeno .banner-reparacao__content {
        flex-direction: row;
    }
    
    .page-desempeno .banner-reparacao__title {
        margin-right: 0.5rem;
    }
}
/* ⚠️ REVISAR: @keyframes pulsate-orange (sem prefixo .page-X; usada apenas por .page-desempeno .damage-spot) */


@media (min-width: 992px) {
  #wheelImage {
    max-width: 450px;
  }
}

/* Container principal que envolve a imagem e os pontos */
.page-desempeno .interactive-wheel-container {
    position: relative;
    display: inline-block; /* Garante que o container se ajuste exatamente à imagem */
}

/* Estilo base para os pontos clicáveis (hotspots) */
.page-desempeno .damage-spot {
    position: absolute;
    width: 25px;
    height: 25px;
    /* ALTERAÇÃO AQUI: De branco para Laranja Continental semi-transparente */
    background-color: rgba(255, 209, 0, 0.7); /* Cor base do ponto */
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: pulsate-orange 2s infinite ease-in-out; /* Usar a nova animação */
}

/* Efeito ao passar o rato por cima do ponto (mantém o vermelho para destaque) */
.page-desempeno .damage-spot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: rgba(227, 6, 19, 0.9); /* Vermelho Pneu Beato, um pouco mais opaco */
    animation-play-state: paused;
}
/* ⚠️ REVISAR: @keyframes pulsate-orange (continuação; sem prefixo .page-X) */


/* Animação de pulsação ATUALIZADA para a cor laranja */
@keyframes pulsate-orange {
    0% {
        /* O brilho agora também é laranja */
        box-shadow: 0 0 0 0 rgba(255, 209, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 209, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 209, 0, 0);
    }
}

/* ======================================================
   2.13. Página Diagnóstico de Pneus
   ====================================================== */


/* ======================================================
   6.9. Página Diagnóstico de Pneus
   ====================================================== */
.page-diagnostico-pneus .feature-icon-diagnostico {
  width: 70px;
  height: 70px;
  background-color: #FF7900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 1.8rem;
}

.page-diagnostico-pneus .bg-safety {
  background-color: #f8f9fa;
  border-left: 5px solid #dc3545;
  padding: 20px;
  margin: 20px 0;
}

/* ======================================================
   2.14. Página Diagnóstico de Comportamento em Estrada
   ====================================================== */


/* ======================================================
   6.10. Página Diagnóstico de Comportamento em Estrada
   ====================================================== */

/* Ícone de destaque específico para esta página */
.page-comportamento-estrada .feature-icon-diagnostico {
  width: 70px;
  height: 70px;
  background-color: #FF7900; /* Laranja Continental */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 1.8rem;
}

/* Caixa de alerta de segurança específica para esta página */
.page-comportamento-estrada .bg-safety {
  background-color: #f8f9fa;
  border-left: 5px solid #dc3545; /* Vermelho perigo */
  padding: 20px;
  margin: 20px 0;
}

/* Estilo dos passos do diagnóstico específico para esta página */
.page-comportamento-estrada .diagnostico-step {
  border-left: 3px solid #FF7900; /* Laranja Continental */
  padding-left: 15px;
  margin-bottom: 30px;
}

/* ======================================================
   2.15. Página Baterias (cartão simples)
   ====================================================== */



.page-bateria .marca-logo {
        max-height: 150px; /* Define a altura máxima do logótipo */
        max-width: 280px;  /* Define a largura máxima do logótipo */
        width: auto;       /* Mantém a proporção da imagem */
        height: auto;      /* Mantém a proporção da imagem */
        margin-bottom: 0rem; /* Adiciona espaço abaixo do logótipo */
    }

/* ======================================================
   2.16. Página Calculadora de Pneus
   ====================================================== */


/* ======================================================
   6.11. PÁGINA CALCULADORA DE PNEUS
   ====================================================== */

.page-calculadora .main-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.page-calculadora .card {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.page-calculadora .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.page-calculadora .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.page-calculadora label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.page-calculadora select,
.page-calculadora input[type="number"] {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--white);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.page-calculadora select:focus,
.page-calculadora input:focus {
    outline: none;
    border-color: var(--new-color-stroke);
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.2);
}

.page-calculadora details {
    margin-top: 1rem;
    border: none;
}

.page-calculadora details > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-calculadora details > summary:hover {
    background-color: #e9ecef;
}

.page-calculadora details > summary::after {
    content: '▼';
    font-size: 0.8em;
    color: #6c757d;
    transition: transform 0.2s;
}

.page-calculadora details[open] > summary::after {
    transform: rotate(180deg);
}

.page-calculadora .advanced-options-content {
    padding: 1rem 0 0 0;
}

.page-calculadora #resultado {
    grid-column: 1 / -1;
}

.page-calculadora .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.page-calculadora .result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 123, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
}

.page-calculadora .result-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 10px;
}

.page-calculadora .result-values {
    font-size: 0.9rem;
}

.page-calculadora .result-values span {
    display: block;
    margin-bottom: 2px;
}

.page-calculadora .result-values strong {
    font-size: 1.1rem;
}

.page-calculadora .info-icon {
    position: relative;
    cursor: pointer;
}

.page-calculadora .info-icon .tooltip {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    font-weight: normal;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -110px;
    opacity: 0;
    transition: opacity 0.3s;
}

.page-calculadora .info-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.page-calculadora .error { color: var(--error-color); }
.page-calculadora .warning { color: var(--warning-color); }
.page-calculadora .ok { color: var(--success-color); }

.page-calculadora .visualization-container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 20px;
}

.page-calculadora .visualization {
    text-align: center;
}

.page-calculadora .canvas-container {
    position: relative;
    width: 100%;
    height: 350px;
    margin-top: 10px;
}

.page-calculadora canvas {
    max-width: 100%;
    max-height: 100%;
}

.page-calculadora .legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    font-size: 0.9rem;
}

.page-calculadora .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-calculadora .legend-color {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.page-calculadora .current-color {
    background-color: var(--current-color-fill);
    border: 2px solid var(--current-color-stroke);
}

.page-calculadora .new-color {
    background-color: var(--new-color-fill);
    border: 2px solid var(--new-color-stroke);
}

.page-calculadora #comparisonTableContainer {
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
}

.page-calculadora .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.page-calculadora .comparison-table th,
.page-calculadora .comparison-table td {
    border: 1px solid var(--border-color);
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.page-calculadora .comparison-table th {
    background-color: var(--ideal-color);
    color: white;
    font-weight: 600;
    border-color: var(--ideal-color);
}

.page-calculadora .comparison-table td:first-child {
    font-weight: 600;
    background-color: #f8f9fa;
}

.page-calculadora .comparison-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    margin: -4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.85rem;
    justify-content: center;
}

.page-calculadora .comparison-option:hover {
    background-color: #e9ecef;
}

.page-calculadora .comparison-option .badge {
    margin-left: auto;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    color: white;
}

.page-calculadora .ideal-match { background-color: var(--ideal-color); }
.page-calculadora .acceptable-match { background-color: var(--success-color); }
.page-calculadora .current-match { background-color: var(--current-color-stroke); }
.page-calculadora .warning-match { background-color: var(--warning-color); }

.page-calculadora .verdict-box {
    padding: 1.25rem;
    margin-top: 1.5rem;
    border-radius: 8px;
    border-left: 5px solid;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.page-calculadora .verdict-box h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.page-calculadora .verdict-success {
    background-color: #e8f8f5;
    border-color: #2ecc71;
    color: #1d6a43;
}

.page-calculadora .verdict-warning {
    background-color: #fffbe6;
    border-color: #f39c12;
    color: #8c5d07;
}

.page-calculadora .verdict-danger {
    background-color: #feefea;
    border-color: #e74c3c;
    color: #9e2a1b;
}

@media (min-width: 768px) {
    .page-calculadora .main-container,
    .page-calculadora .visualization-container {
        grid-template-columns: 1fr 1fr;
    }
    .page-calculadora .form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.page-calculadora .advanced-options-content.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: end;
}

@media (max-width: 991.98px) {
    .page-calculadora .advanced-options-content.form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .page-calculadora .advanced-options-content.form-grid .form-group:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* ======================================================
   2.17. Página Loja de Pneus
   ====================================================== */


/* ====================================================== */
/*      ESTILOS ESPECÍFICOS PARA A PÁGINA LOJA DE PNEUS   */
/* ====================================================== */

.page-loja-pneus .pagination {
  margin-top: 2rem;
}

.page-loja-pneus .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.page-loja-pneus .page-link {
  color: var(--primary-color);
  min-width: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.page-loja-pneus .page-link:hover {
  color: #c45a00;
  background-color: #f8f9fa;
}

.page-loja-pneus .product-card {
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
  height: 100%;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.page-loja-pneus .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.page-loja-pneus .sale-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 10;
}

.page-loja-pneus .original-price {
  text-decoration: line-through;
  color: #6c757d;
  font-size: 0.8rem;
}

.page-loja-pneus .promo-price {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
}

.page-loja-pneus .search-filter-container {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.page-loja-pneus .product-img {
  height: 120px;
  object-fit: contain;
  margin-bottom: 15px;
  transition: transform 0.3s;
}

.page-loja-pneus .product-img:hover {
  transform: scale(1.05);
}

.page-loja-pneus .quantity-selector {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.page-loja-pneus .quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.page-loja-pneus .quantity-btn:hover {
  background: #e9ecef;
}

.page-loja-pneus .quantity-value {
  width: 40px;
  height: 30px;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loja-pneus .products-counter {
  background-color: #f8f9fa;
  padding: 10px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 1rem;
  border-left: 4px solid var(--primary-color);
}

.page-loja-pneus #visibleProductsCount {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.1rem;
}

.page-loja-pneus #noProductsMessage .card {
  background-color: #f8f9fa;
  border: 2px dashed #dee2e6;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.page-loja-pneus #noProductsMessage .card:hover {
  border-color: var(--primary-color);
  background-color: #f0f7ff;
}

.page-loja-pneus .custom-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--success-color);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

.page-loja-pneus .custom-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.page-loja-pneus .floating-cart {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 999;
  background: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-loja-pneus .floating-cart:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  background-color: var(--primary-color);
}

.page-loja-pneus .floating-cart:hover .floating-cart-icon {
  color: white;
}

.page-loja-pneus .floating-cart-icon {
  font-size: 1.2rem;
  color: var(--primary-color);
  transition: color 0.3s;
}

.page-loja-pneus .floating-cart-badge {
  position: absolute;

  top: -5px;
  right: -5px;
  background: var(--danger-color);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loja-pneus .simple-ratings {
  font-size: 12px !important;
  display: flex;
  justify-content: space-around;
  background: #f8f9fa;
  border-radius: 5px;
  padding: 7px;
  margin: 10px 0;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.page-loja-pneus .rating-item {
  text-align: center;
  flex: 1;
}

.page-loja-pneus .rating-label {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 5px;
}

.page-loja-pneus .rating-value {
  font-weight: bold;
  font-size: 1.1rem;
}
/* ⚠️ REVISAR: Etiquetas .energy-A a .energy-E (sem prefixo .page-X; classes de etiqueta energética UE) */

/* Cores das Etiquetas Energéticas UE */
.energy-A { background-color: #008444 !important; color: white !important; border-color: #008444 !important; }
.energy-B { background-color: #89b72d !important; color: white !important; border-color: #89b72d !important; }
.energy-C { background-color: #f6dc00 !important; color: black !important; border-color: #f6dc00 !important; }
.energy-D { background-color: #eb7c00 !important; color: white !important; border-color: #eb7c00 !important; }
.energy-E { background-color: #e30613 !important; color: white !important; border-color: #e30613 !important; }

/* Ajuste para quando não há letra ou a letra é inválida */
.energy-unknown { background-color: #f8f9fa !important; color: #6c757d !important; border-color: #dee2e6 !important; }

/* Garantir que o ícone acompanhe a cor do texto */
.energy-A i, .energy-B i, .energy-D i, .energy-E i { color: white !important; }
.energy-C i { color: black !important; }

.page-loja-pneus .feature-checkbox {
  margin-right: 15px;
}

.page-loja-pneus .feature-checkbox label {
  margin-left: 5px;
  cursor: pointer;
}

.page-loja-pneus .filter-row {
  margin-bottom: 15px;
}
   
.page-loja-pneus .loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.page-loja-pneus .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(13, 110, 253, 0.2);
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.page-loja-pneus @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.page-loja-pneus .pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-loja-pneus .page-info {
  font-size: 0.9rem;
  color: #6c757d;
}

/* ESTILOS DE AUTOCOMPLETE E SUGESTÕES */
.page-loja-pneus #autocomplete-results {
    display: none;
    flex-wrap: wrap; 
    gap: 8px;
    padding: 0;
    margin-top: 0; /* <<< REMOVIDO o espaço de cima */
    margin-bottom: 1rem; /* <<< ADICIONADO espaço em baixo */
    position: static;
    box-shadow: none;
    border: none;
}

.page-loja-pneus .suggestion-pill {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 20px;
    padding: 6px 16px;
    color: #0d6efd; 
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.page-loja-pneus .suggestion-pill:hover {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.page-loja-pneus .suggestion-box {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: .25rem;
    padding: 1.5rem;
    text-align: center;
}

.page-loja-pneus .suggestion-box a {
    font-weight: bold;
    cursor: pointer;
}

/* MEDIA QUERIES (SEMPRE NO FINAL) */
@media (max-width: 768px) {
  .page-loja-pneus .search-filter-container .row {
    flex-direction: column;
  }
  .page-loja-pneus .search-filter-container .col-md-6, 
  .page-loja-pneus .search-filter-container .col-md-3 {
    width: 100%;
    margin-bottom: 10px;
  }
  .page-loja-pneus .feature-checkbox {
    margin-bottom: 10px;
  }
  .page-loja-pneus .floating-cart {
    width: 40px;
    height: 40px;
  }
  .page-loja-pneus .pagination-controls {
    flex-direction: column;
    gap: 10px;
  } 
/* Ajuste Exclusivo para Mobile - Classificação Energética numa linha */
    
    /* 1. Forçar o contentor a ficar numa linha */
    .page-loja-pneus .simple-ratings {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Impede a quebra de linha */
        justify-content: center !important; /* Centra os itens */
        align-items: center !important;
        gap: 4px !important; /* Espaço reduzido entre os itens */
        width: 100% !important;
    }

    /* 2. Ajustar os itens individuais */
    .page-loja-pneus .simple-ratings .rating-item {
        margin: 0 !important;
        padding: 0 2px !important;
        flex: 0 1 auto !important; /* Ocupa apenas o espaço necessário */
        border: none !important; /* Remove bordas se existirem */
    }

    /* 3. Reduzir o tamanho da letra e o "padding" da caixa */
    .page-loja-pneus .simple-ratings .rating-value {
        font-size: 15px !important; /* Letra mais pequena (ajuste se necessário) */
        font-weight: bold !important;
        padding: 2px 4px !important; /* Caixa mais compacta */
        line-height: 1.2 !important;
        white-space: nowrap !important; /* Garante que "70 dB" não quebra */
        min-width: unset !important; /* Remove largura mínima se existir */
    }
    
    /* 4. Garantir que as legendas (Eficiência/Travagem) estão ocultas no mobile */
    .page-loja-pneus .rating-label {
        display: none !important;
    }
}



/* CSS FINAL E CORRETO PARA O PRICE SLIDER */
.page-loja-pneus .price-filter-row {
    display: flex;
    align-items: center;
    padding: 25px 5px 15px 5px;
    gap: 15px;
}
.page-loja-pneus .price-label {
    font-weight: bold;
    flex-shrink: 0;
}
.page-loja-pneus .price-value {
    font-weight: bold;
    width: 55px;
    text-align: center;
    flex-shrink: 0;
}
.page-loja-pneus .price-slider-element {
    flex-grow: 1;
}

.page-loja-pneus .noUi-target {
    background: #e9ecef;
    border-radius: 99px;
    border: 1px solid #dee2e6;
    height: 8px;
    position: relative;
}
.page-loja-pneus .noUi-connect {
    background: var(--primary-color);
}

.page-loja-pneus .noUi-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: grab;
    right: -10px;
    top: -6px;
}

.page-loja-pneus .noUi-handle::before, 
.page-loja-pneus .noUi-handle::after {
    display: none;
}

.page-loja-pneus .noUi-handle:focus, 
.page-loja-pneus .noUi-handle:active {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.2);
    cursor: grabbing;
}

/* ======================================================
   2.18. Página Powerflex
   ====================================================== */

/* ====================================================== */
/*      ESTILOS ESPECÍFICOS PARA A PÁGINA POWERFLEX       */
/* ====================================================== */

/* Variáveis de cor para a página Powerflex */
.page-powerflex {
    --powerflex-black: #1a1a1a;
    --powerflex-yellow: #FFD700;
    --powerflex-purple: #800080;
    --powerflex-gray: #333333;
}

/* Estilos gerais do corpo da página Powerflex */

/* Título de secção */
.page-powerflex .section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-align: center;
}

.page-powerflex .section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--powerflex-black), var(--powerflex-yellow));
}

/* Cartões de Produto */
.page-powerflex .product-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-powerflex .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* --- SOLUÇÃO PARA ALINHAR IMAGENS --- */
.page-powerflex .product-card .img-fluid {
    height: 300px; /* Altura fixa para a imagem */
    width: 100%;   /* Ocupa a largura total do contentor */
    object-fit: cover; /* Cobre a área sem distorcer */
    object-position: center; /* Centraliza a imagem */
}
/* --- FIM DA SOLUÇÃO --- */


.page-powerflex .product-header {
    padding: 25px 20px 15px;
    text-align: center;
    color: white;
}

.page-powerflex .black-series .product-header {
    background: linear-gradient(135deg, var(--powerflex-black), #333);
}

.page-powerflex .road-series .product-header {
    background: linear-gradient(135deg, var(--powerflex-purple), #a64ca6);
}

.page-powerflex .handling-series .product-header {
    background: linear-gradient(135deg, #e52d27, #b31217);
}

.page-powerflex .heritage-series .product-header {
    background: linear-gradient(135deg, var(--powerflex-gray), #555);
}

.page-powerflex .product-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-powerflex .product-footer {
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.page-powerflex .feature-list {
    list-style: none;
    padding: 0;
}

.page-powerflex .feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
}

.page-powerflex .feature-list li:last-child {
    border-bottom: none;
}

.page-powerflex .feature-list li i {
    margin-right: 10px;
    color: #FF7900;
}

.page-powerflex .tech-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.page-powerflex .btn-powerflex {
    background: linear-gradient(135deg, var(--powerflex-black), #333);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-powerflex .btn-powerflex:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.page-powerflex .benefit-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.page-powerflex .benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Tabela de Comparação */
.page-powerflex .comparison-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.page-powerflex .comparison-table thead tr th {
    background: #4CAF50; 
    color: white;
    font-weight: 600;
    padding: 15px;
    text-align: center; 
    vertical-align: middle; 
}

.page-powerflex .comparison-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.page-powerflex .comparison-table tr:last-child td {
    border-bottom: none;
}

.page-powerflex .comparison-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Badges e outros elementos */
.page-powerflex .badge-series {
    position: absolute;
    top: 15px;
    right: 15px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    z-index: 10;
}

.page-powerflex .black-badge {
    background: var(--powerflex-yellow);
    color: var(--powerflex-black);
}

.page-powerflex .road-badge {
    background: var(--powerflex-purple);
    color: white;
}

.page-powerflex .handling-badge {
    background: #e52d27;
    color: white;
}

.page-powerflex .heritage-badge {
    background: #888;
    color: white;
}

.page-powerflex .contact-card {
    background: linear-gradient(135deg, #1a1a1a, #333);
    color: white;
    border-radius: 15px;
    overflow: hidden;
}

.page-powerflex .powerflex-logo {
    max-height: 80px;
    margin-bottom: 20px;
}

.page-powerflex .product-description {
    background: #f8f9fa;
    border-left: 4px solid #FF7900;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
}

/* Secção FAQ */
.page-powerflex .faq-item {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.page-powerflex .faq-question {
    background: #1a1a1a;
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-powerflex .faq-answer {
    background: white;
    padding: 20px;
    border-top: 1px solid #eee;
}

.page-powerflex .product-card .img-fluid {
    height: 300px; /* Defina uma altura fixa para a imagem */
    width: 100%; /* Garante que a imagem ocupe toda a largura */
    object-fit: cover; /* Faz com que a imagem cubra a área sem distorcer, cortando o excesso se necessário */
    object-position: center; /* Centraliza a imagem dentro do espaço */
}

/* ======================================================
   2.19. Página Pernos de Segurança Stilbull
   ====================================================== */


/* ======================================================
   6.X. PÁGINA PERNOS DE SEGURANÇA (STILBULL)
   ====================================================== */

/*
   Todos os seletores abaixo estão prefixados com .page-stilbull 
   para garantir que apenas afetam a página anti-roubo-stilbull.html.
*/

/* Estilo base para os cards dos kits */
.page-stilbull .card-kit-stilbull {
    position: relative; /* Necessário para posicionar o badge de "Recomendado" */
    border: 1px solid #e9ecef;
    transition: all .3s ease;
}

/* Efeito hover para destacar o card */
.page-stilbull .card-kit-stilbull:hover {
    border-color: var(--orange); /* Usa a variável de cor laranja da marca */
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Badge de "Mais Popular" */
.page-stilbull .badge-recomendado {
    position: absolute;
    top: 15px;
    right: -1px; /* Ligeiramente para fora para um efeito visual mais interessante */
    background-color: var(--orange);
    color: white;
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Estilo para a nova lista de características com ícones */
.page-stilbull .kit-feature-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem; /* Tamanho de letra ligeiramente maior para legibilidade */
}

.page-stilbull .kit-feature-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #495057; /* Cor de texto secundária para bom contraste */
}

/* Ícones dentro da lista de características */
.page-stilbull .kit-feature-list i {
    color: var(--whatsapp); /* Cor verde para consistência com o botão de ação */
    font-size: 1.2rem;
    margin-right: 12px;
    width: 20px; /* Garante alinhamento vertical perfeito entre as listas */
    text-align: center;
}

/* ======================================================
   2.20. Página Escovas Limpa-Vidros
   ====================================================== */




/* ======================================================
   6.12. PÁGINA ESCOVAS LIMPA-VIDROS
   ====================================================== */

/*
   Todos os seletores abaixo estão prefixados com .page-escovas 
   para garantir que apenas afetam a página escovas-limpa-vidros.html.
*/

/* Estilos para a secção "O Compromisso Pneu Beato" */
.page-escovas .feature-icon-escovas {
  width: 70px;
  height: 70px;
  background-color: #FF7900; /* Laranja da sua marca */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white; /* Define a cor do ícone para branco */
  font-size: 1.8rem;
}

/* Estilos para a secção "Benefícios" */
.page-escovas .benefit-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #ff7900;
}

/* Estilos para os Cards de Produto */
.page-escovas .product-card {
  transition: all 0.3s ease;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  overflow: hidden;
  display: flex; /* Adicionado para melhor alinhamento interno */
  flex-direction: column; /* Adicionado para melhor alinhamento interno */
}

.page-escovas .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Adiciona o espaçamento interno que faltava aos cards de produto */
.page-escovas .product-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Garante que todos os cards têm a mesma altura */
}

.page-escovas .price-tag {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e53935;
}

.page-escovas .old-price {
  text-decoration: line-through;
  color: #6c757d;
}

.page-escovas .shipping-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  padding: 5px 10px; /* Adicionado para melhor visual */
  font-size: 0.8rem; /* Adicionado para melhor visual */
  font-weight: bold; /* Adicionado para melhor visual */
}

/* Estilos para a lista de compatibilidade nos cards de produto */
.page-escovas .compatibility-toggle {
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  color: #0d6efd;
  cursor: pointer;
}
.page-escovas .compatibility-toggle:hover {
  color: #0a58ca;
}
.page-escovas .compatibility-list {
  font-size: 0.75rem;
  padding-left: 1.2rem;
  margin-bottom: 0;
  background-color: #f8f9fa;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.page-escovas .compatibility-list li {
  margin-bottom: 2px;
}

/* ======================================================
   2.21. Página Carrinho / Wizard (O Meu Pedido)
   ====================================================== */



/* ======================================================
   6.14. PÁGINA CARRINHO DE COMPRAS / WIZARD (O MEU PEDIDO)
   ====================================================== */

/*
   Todos os seletores abaixo estão prefixados com .page-carrinho
   para garantir que apenas afetam a página do carrinho de compras.
*/

/* Variáveis de cor e estilos base da página */
.page-carrinho {
    --primary: #FF7900;
    --secondary: #2c2c2c;
    --success: #28a745;
    --light: #f8f9fa;
    --dark: #343a40;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --danger: #dc3545;
    padding-top: 80px;
    background-color: #f5f7fa;
}

.page-carrinho .progress-wizard { display: flex; align-items: flex-start; justify-content: space-between; }
.page-carrinho .progress-step {
    text-align: center;
    flex-basis: 100px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-carrinho .progress-step.active { opacity: 1; font-weight: bold; }
.page-carrinho .progress-step.completed { cursor: pointer; }
.page-carrinho .progress-step-icon { width: 50px; height: 50px; border-radius: 50%; background-color: var(--light-gray); color: var(--secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px auto; font-size: 1.5rem; border: 3px solid var(--light-gray); transition: all 0.3s ease; }
.page-carrinho .progress-step.active .progress-step-icon { background-color: var(--primary); color: white; border-color: var(--primary); }
.page-carrinho .progress-line { flex-grow: 1; height: 4px; background-color: var(--light-gray); margin: 23px 0; }
.page-carrinho .wizard-step-content { display: none; }
.page-carrinho .wizard-step-content.active { display: block; animation: fadeIn 0.5s; }
/* ⚠️ REVISAR: @keyframes fadeIn (sem prefixo .page-X; usada por .page-carrinho .wizard-step-content.active) */


@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.page-carrinho .page-header { background: linear-gradient(135deg, #FF7900, #FFA04D); color: white; border-radius: 15px; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.page-carrinho .page-header .logo-circle { width: 70px; height: 70px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: bold; font-size: 1.8rem; margin-right: 20px; flex-shrink: 0;}
.page-carrinho .card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: none; }
.page-carrinho .carrinho-img-mobile { width: 80px; height: 80px; max-width: 100%; object-fit: contain; object-position: center; flex-shrink: 0; }
.page-carrinho .resumo-pedido { background-color: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-left: 4px solid var(--success); }
.page-carrinho .empty-cart-container { text-align: center; padding: 50px 20px; background-color: white; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin: 30px 0; }
.page-carrinho .empty-cart-icon { font-size: 5rem; color: #dee2e6; margin-bottom: 20px; }
.page-carrinho .entrega-option { border: 2px solid var(--light-gray); cursor: pointer; transition: all 0.2s; }
.page-carrinho .entrega-option.selected { border-color: var(--primary); background-color: rgba(255, 121, 0, 0.1); }
.page-carrinho .calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.page-carrinho .calendario-dia-semana, .page-carrinho .calendario-dia { text-align: center; padding: 8px 5px; border-radius: 5px; }
.page-carrinho .calendario-dia.available { cursor: pointer; background-color: #e9f7ef; }
.page-carrinho .calendario-dia.available:hover { background-color: #d1e7dd; }
.page-carrinho .calendario-dia.selected { background-color: var(--primary); color: white; }
.page-carrinho .calendario-dia.unavailable { color: var(--gray); background-color: var(--light-gray); cursor: not-allowed; }
.page-carrinho .time-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.page-carrinho .time-slot { padding: 8px 15px; border: 1px solid var(--light-gray); border-radius: 20px; cursor: pointer; }
.page-carrinho .time-slot:hover { border-color: var(--primary); }
.page-carrinho .time-slot.selected { background-color: var(--primary); color: white; }
.page-carrinho .resumo-item .form-control { max-width: 60px; text-align: center; }

/* ======================================================
   2.22. Página Pedido de Orçamento (orcamento.html)
   ====================================================== */



/* ======================================================
   ESTILOS ESPECÍFICOS PARA A PÁGINA DE ORÇAMENTO
   Tema: "Oficina Premium" — fundo escuro, acentos laranja
   ====================================================== */

.page-orcamento {
    --primary-color: #FF7900;
    --primary-color-light: #FFA04D;
    --primary-color-dark: #CC6100;
    --secondary-color: #14161A;
    --surface: #1E2127;
    --surface-elevated: #262931;
    --surface-hover: #2D3038;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 121, 0, 0.45);
    --text-primary: #F5F6F8;
    --text-secondary: #A8ADB7;
    --text-muted: #6E7480;
    --success: #2FB872;
    --danger: #E5484D;
    --border-radius: 14px;
    --border-radius-sm: 10px;
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.3);

    /* Diz ao browser para usar paleta escura nos elementos nativos
       (scrollbars, inputs de data/hora, etc.), evitando texto/ícones
       escuros por defeito sobre o fundo escuro da página. */
    color-scheme: dark;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--secondary-color);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(255, 121, 0, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(255, 121, 0, 0.06) 0%, transparent 40%);
    color: var(--text-primary);
    padding-top: 20px;
    min-height: 100vh;
}

/* --- Cores base de títulos e texto (garantir contraste no fundo escuro) ---
   Restrito a ".container" (o conteúdo próprio da página) — sem isto, estas
   regras "contaminavam" elementos com os mesmos nomes de classe na navbar/
   rodapé partilhados (ex: o "h4" dos títulos de coluna do mega-menu ficava
   branco quase invisível em vez de laranja, mesmo a navbar sendo igual em
   todas as páginas). --- */
.page-orcamento .container h1,
.page-orcamento .container h2,
.page-orcamento .container h3,
.page-orcamento .container h4,
.page-orcamento .container h5,
.page-orcamento .container h6 {
    color: var(--text-primary);
}

.page-orcamento .container .text-muted {
    color: var(--text-secondary) !important;
}

.page-orcamento .lead {
    color: var(--text-secondary);
}

/* --- Cabeçalho --- */
.page-orcamento .header {
    background: linear-gradient(135deg, #1A1C21 0%, #232730 55%, #2A1A0F 100%);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--border-radius);
    padding: 44px 24px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.page-orcamento .header::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 121, 0, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.page-orcamento .header h1 {
    letter-spacing: -0.02em;
}

.page-orcamento .header .lead {
    color: var(--text-secondary);
}

.page-orcamento .header .text-accent {
    color: var(--primary-color-light);
}

/* --- Indicador de progresso (steps) --- */
.page-orcamento .step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative;
}

.page-orcamento .step-indicator::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--border-subtle);
    z-index: 1;
}

.page-orcamento .step-indicator::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
    z-index: 1;
    width: var(--steps-progress, 0%);
    transition: width 0.4s ease;
}

.page-orcamento .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 2;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.page-orcamento .step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 700;
    transition: all 0.3s;
}

.page-orcamento .step.active .step-number {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.18);
}

.page-orcamento .step.completed .step-number {
    background-color: var(--success);
    color: white;
    border-color: var(--success);
}

.page-orcamento .step-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 110px;
    line-height: 1.25;
    font-weight: 500;
    transition: color 0.3s;
}

.page-orcamento .step.active .step-label {
    color: var(--text-primary);
    font-weight: 600;
}

.page-orcamento .step.completed .step-label {
    color: var(--text-secondary);
}

/* --- Barra de progresso --- */
.page-orcamento .progress-bar {
    height: 6px;
    background-color: var(--surface);
    border-radius: 4px;
    overflow: hidden;
    margin: 18px 0 36px;
    border: 1px solid var(--border-subtle);
}

.page-orcamento .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color-dark), var(--primary-color), var(--primary-color-light));
    width: 25%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

/* --- Secções de formulário --- */
.page-orcamento .form-section {
    display: none;
    animation: orcamentoFadeIn 0.45s ease-out;
}

.page-orcamento .form-section.active {
    display: block;
}

.page-orcamento .form-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    padding: 30px;
    margin-bottom: 25px;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.page-orcamento .form-card:hover {
    border-color: rgba(255, 121, 0, 0.25);
    box-shadow: var(--shadow-elevated);
}

.page-orcamento .form-header {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
    text-align: center;
}

.page-orcamento .form-header h2 {
    color: var(--text-primary);
}

/* --- Cards de seleção de categoria (Passo 1) --- */
.page-orcamento .card-orcamento {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    text-align: center;
    padding: 32px 20px;
    position: relative;
}

.page-orcamento .card-orcamento::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(255, 121, 0, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.page-orcamento .card-orcamento:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--border-strong);
}

.page-orcamento .card-orcamento:hover::after {
    opacity: 1;
}

.page-orcamento .card-orcamento.selected {
    border: 2px solid var(--primary-color);
    background-color: rgba(255, 121, 0, 0.08);
}

.page-orcamento .card-orcamento .card-title {
    color: var(--text-primary);
}

.page-orcamento .card-orcamento .card-text {
    color: var(--text-secondary) !important;
}

.page-orcamento .category-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 121, 0, 0.12);
    border: 1px solid rgba(255, 121, 0, 0.25);
    border-radius: 50%;
    color: var(--primary-color-light);
    font-size: 26px;
    transition: transform 0.3s, background 0.3s;
}

.page-orcamento .card-orcamento:hover .category-icon {
    transform: scale(1.08);
    background: rgba(255, 121, 0, 0.18);
}

/* --- Botões --- */
.page-orcamento .btn-orcamento {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    font-weight: 700;
    padding: 13px 32px;
    border-radius: 8px;
    transition: all 0.25s;
    border: none;
    letter-spacing: 0.01em;
}

.page-orcamento .btn-orcamento:hover {

    background: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 121, 0, 0.3);
    color: white;
}

.page-orcamento .btn-orcamento:disabled {
    opacity: 0.7;
    transform: none;
}

.page-orcamento .container .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background: transparent;
    font-weight: 600;
}

.page-orcamento .container .btn-outline-secondary:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* --- Resumo de serviço (Passo 3) --- */
.page-orcamento .service-summary {
    background-color: var(--surface-elevated);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 16px 18px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.page-orcamento .service-summary h3 {
    color: var(--text-primary);
}

/* --- Navegação entre passos --- */
.page-orcamento .form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    gap: 10px;
}

/* --- Blocos de detalhes do veículo / itens --- */
.page-orcamento .vehicle-details {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    padding: 18px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.page-orcamento .vehicle-details h4 {
    color: var(--text-primary) !important;
}

.page-orcamento .item-section {
    margin-bottom: 15px;
    padding: 16px 18px;
    border-radius: var(--border-radius);
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.25s;
}

.page-orcamento .item-section:has(.item-content.show) {
    border-color: var(--border-strong);
}

.page-orcamento .item-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
}

.page-orcamento .item-header .bi {
    color: var(--primary-color-light);
    transition: transform 0.25s;
}

.page-orcamento .item-content {
    margin-top: 15px;
    display: none;
}

.page-orcamento .item-content.show {
    display: block;
    animation: orcamentoFadeIn 0.3s ease-out;
}

/* --- Ícone de confirmação (Passo 4) --- */
.page-orcamento .confirmation-icon {
    width: 88px;
    height: 88px;
    background: rgba(47, 184, 114, 0.12);
    border: 1px solid rgba(47, 184, 114, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-size: 2.6rem;
    color: var(--success);
}

/* --- Submenu de Peças Auto (Passo 2) --- */
.page-orcamento .submenu-container {
    margin-top: 20px;
}

.page-orcamento .submenu-item {
    padding: 24px 18px;
    border-radius: var(--border-radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid var(--border-subtle);
}

.page-orcamento .submenu-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--border-strong);
}

.page-orcamento .submenu-item.selected {
    border-color: var(--primary-color);
    background-color: rgba(255, 121, 0, 0.08);
}

.page-orcamento .submenu-item h3 {
    color: var(--text-primary);
}

.page-orcamento .submenu-item .text-muted {
    color: var(--text-secondary) !important;
}

.page-orcamento .form-icon {
    width: 54px;
    height: 54px;
    background: rgba(255, 121, 0, 0.12);
    border: 1px solid rgba(255, 121, 0, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary-color-light);
    margin: 0 auto;
    transition: transform 0.3s;
}

.page-orcamento .submenu-item:hover .form-icon {
    transform: scale(1.08);
}

.page-orcamento .pecas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.page-orcamento .required {
    color: var(--danger);
}

.page-orcamento .section-title {
    color: var(--text-primary);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

/* --- Tabelas de formulário --- */
.page-orcamento .pecas-form {
    display: none;
}

.page-orcamento .pecas-form.active {
    display: block;
    animation: orcamentoFadeIn 0.45s ease-out;
}

.page-orcamento .form-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.page-orcamento .form-table td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border-subtle);
}

.page-orcamento .form-table tr:last-child td {
    border-bottom: none;
}

.page-orcamento .form-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.page-orcamento .form-table .label-cell {
    font-weight: 600;
    width: 40%;
    vertical-align: top;
    color: var(--text-secondary);
}

.page-orcamento .form-table .input-cell {
    width: 60%;
}

/* --- Pares de campos relacionados na mesma linha (ex: Pastilhas + Aplicação) --- */
.page-orcamento .paired-fields {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.page-orcamento .paired-field {
    flex: 1;
    min-width: 0;
}

.page-orcamento .paired-field-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}

@media (max-width: 576px) {
    .page-orcamento .paired-fields {
        flex-direction: column;
    }
}

.page-orcamento .form-card h3 {
    color: var(--primary-color-light);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.page-orcamento .form-card h4 {
    color: var(--text-primary);
}

.page-orcamento .form-group {
    margin-bottom: 15px;
}

.page-orcamento .form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: var(--text-secondary);
}

/* --- Inputs (sobrepõem o tema claro do Bootstrap) --- */
.page-orcamento .form-control,
.page-orcamento .form-select {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    /* Corrige inputs nativos do browser (ex: <input type="date">), que por
       defeito desenham o texto/ícone do calendário com cores do tema claro
       do sistema mesmo com fundo escuro definido — ficava texto preto
       sobre fundo escuro, ilegível. */
    color-scheme: dark;
}

/* Etiquetas <label class="form-label"> (Bootstrap), usadas fora do padrão
   .form-group do orcamento.html original — sem esta regra ficavam com a
   cor por defeito do Bootstrap em vez do texto claro do tema. */
.page-orcamento .form-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.page-orcamento .form-control::placeholder {
    color: var(--text-muted);
}

.page-orcamento .form-control:focus,
.page-orcamento .form-select:focus {
    background-color: var(--surface-hover);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.18);
    color: var(--text-primary);
}

.page-orcamento .form-select option {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}

.page-orcamento .form-check-label {
    color: var(--text-secondary);
}

.page-orcamento .form-check-input {
    background-color: var(--surface-elevated);
    border-color: var(--border-subtle);
}

.page-orcamento .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-orcamento .is-invalid {
    border-color: var(--danger) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23E5484D' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E5484D' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.page-orcamento .invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.3rem;
    font-size: 0.875em;
    color: #FF8087;
}

.page-orcamento .is-invalid ~ .invalid-feedback {
    display: block;
}

/* --- Toast de erro customizado (fallback sem depender só do Bootstrap) --- */
.page-orcamento .orcamento-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--surface-elevated);
    border: 1px solid rgba(229, 72, 77, 0.5);
    color: var(--text-primary);
    padding: 14px 18px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-elevated);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 340px;
    animation: orcamentoSlideIn 0.3s ease-out;
}

.page-orcamento .orcamento-toast i {
    color: var(--danger);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.page-orcamento .orcamento-toast.toast-fade-out {
    animation: orcamentoFadeOut 0.3s ease-in forwards;
}
/* ⚠️ REVISAR: @keyframes orcamentoSlideIn / orcamentoFadeOut (sem prefixo .page-X) */


@keyframes orcamentoSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes orcamentoFadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateX(20px); }
}

/* --- Rodapé local da página (se usado) --- */
.page-orcamento .footer {
    background: var(--secondary-color);
    color: white;
    padding: 40px 0 20px;
    margin-top: 60px;
}

.page-orcamento .footer a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
}

.page-orcamento .footer a:hover {
    color: var(--primary-color);
}

.page-orcamento #pecasSubmenu .form-container {
    display: block !important;
}

.page-orcamento #pecasSubmenu .d-none {
    display: none !important;
}

.page-orcamento #pecasSubmenu .d-block {
    display: block !important;
}
/* ⚠️ REVISAR: @keyframes orcamentoFadeIn (sem prefixo .page-X) */


@keyframes orcamentoFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Destaque temporário ao chegar via âncora (deep-link) --- */
.page-orcamento .anchor-highlight {
    animation: orcamentoHighlight 1.4s ease-out;
}
/* ⚠️ REVISAR: @keyframes orcamentoHighlight (sem prefixo .page-X) */


@keyframes orcamentoHighlight {
    0% { box-shadow: 0 0 0 0 rgba(255, 121, 0, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(255, 121, 0, 0); }
}

/* --- Banner de chamada para a loja online --- */
.page-orcamento .online-store-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255, 121, 0, 0.14), rgba(255, 121, 0, 0.04));
    border: 1px solid rgba(255, 121, 0, 0.35);
    border-radius: var(--border-radius);
    padding: 18px 20px;
    margin: 10px 0 25px;
    text-decoration: none;
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
}

.page-orcamento .online-store-banner:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 121, 0, 0.2), rgba(255, 121, 0, 0.06));
}

.page-orcamento .online-store-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 121, 0, 0.18);
    border: 1px solid rgba(255, 121, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary-color-light);
}

.page-orcamento .online-store-banner-text {
    flex: 1;
    min-width: 0;
}

.page-orcamento .online-store-banner-text h4 {
    margin: 0 0 3px;
    font-size: 1rem;
    color: var(--text-primary);
}

.page-orcamento .online-store-banner-text p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.page-orcamento .online-store-banner-arrow {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--primary-color-light);
}

@media (max-width: 576px) {
    .page-orcamento .online-store-banner {
        flex-wrap: wrap;
    }
    .page-orcamento .online-store-banner-arrow {
        display: none;
    }
}


@media (max-width: 992px) {
    .page-orcamento .pecas-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .page-orcamento .header {
        padding: 32px 18px;
    }
    .page-orcamento .step-label {
        font-size: 0.7rem;
        max-width: 70px;
    }
    .page-orcamento .step-number {
        width: 36px;
        height: 36px;
    }
    .page-orcamento .form-table .label-cell,
    .page-orcamento .form-table .input-cell {
        width: 100%;
        display: block;
    }
    .page-orcamento .form-table .label-cell {
        padding-bottom: 4px;
    }
    .page-orcamento .pecas-grid {
        grid-template-columns: 1fr;
    }
    .page-orcamento .form-card {
        padding: 22px 18px;
    }
}

/* ======================================================
   2.22.1 Marcação Online (marcacao_online.html)
   Usa a classe "page-orcamento" no <body> — mesmo esquema
   "Oficina Premium" do orcamento.html. As regras abaixo
   mapeiam as classes próprias desta página (.card, .card-header,
   .service-card, .tire-details, .time-slot-badge, etc.) para o
   mesmo tratamento visual, já que os nomes de classe diferem do
   orcamento.html e o JS depende deles (não foram renomeados).
   ====================================================== */

/* --- Cartão principal do wizard (substitui o .form-card aqui) --- */
.page-orcamento .card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-elevated);
}

.page-orcamento .card-header {
    background: linear-gradient(135deg, #1A1C21 0%, #232730 55%, #2A1A0F 100%);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.page-orcamento .card-header p {
    color: var(--text-secondary);
}

/* --- Pista da barra de progresso (o enchimento já vem do .progress-fill
       partilhado com o orcamento.html) --- */
.page-orcamento .progress-container {
    height: 6px;
    background-color: var(--surface);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-subtle);
}

/* --- Cartões de serviço (Passo 1) — mesmo tratamento do .card-orcamento --- */
.page-orcamento .service-card {
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
    margin-bottom: 0.75rem;
    background-color: var(--surface);
}

.page-orcamento .service-card:hover,
.page-orcamento .service-card.selected {
    border-color: var(--border-strong);
    background-color: rgba(255, 121, 0, 0.08);
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

.page-orcamento .service-card .title {
    color: var(--text-primary);
    font-weight: 600;
}

.page-orcamento .service-card .description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.page-orcamento .service-card .icon {
    font-size: 1.75rem;
    color: var(--primary-color-light);
    margin-right: 0.75rem;
}

/* --- Os 4 cartões principais (Passo 1) — layout vertical centrado igual
       ao .card-orcamento do orcamento.html, em grelha de 4 (2x2 em mobile).
       Substitui o layout horizontal (ícone + texto lado a lado) anterior. --- */
.page-orcamento .main-category-card {
    text-align: center;
    padding: 22px 12px;
    margin-bottom: 0;
}

.page-orcamento .main-category-card .title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.page-orcamento .main-category-card .description {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Ícones em imagem real (vindos do mega-menu), em vez de glifos bi-.
   Mantém a cor original de cada imagem; só o círculo de fundo segue o
   tema laranja, para consistência com o resto do esquema. */
.page-orcamento .category-icon-img {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 121, 0, 0.12);
    border: 1px solid rgba(255, 121, 0, 0.25);
    border-radius: 50%;
    transition: transform 0.3s;
}

.page-orcamento .category-icon-img img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.page-orcamento .main-category-card:hover .category-icon-img {
    transform: scale(1.08);
}

@media (max-width: 767.98px) {
    .page-orcamento .main-category-card {
        padding: 16px 8px;
    }
    .page-orcamento .category-icon-img {
        width: 50px;
        height: 50px;
    }
    .page-orcamento .category-icon-img img {
        width: 24px;
        height: 24px;
    }
}

/* --- Compensa a navbar fixa no scroll automático ao escolher um serviço,
       para o scroll não tapar o início do submenu por trás da navbar. --- */
.page-orcamento .subservices-section,
.page-orcamento .tire-details {
    scroll-margin-top: 90px;
}

/* --- Blocos de detalhe (medida do pneu / dimensão da jante) — mesmo
       tratamento do .vehicle-details / .item-section --- */
.page-orcamento .tire-details {
    background-color: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-top: 1rem;
    border-left: 4px solid var(--primary-color);
}

.page-orcamento .tire-details h5 {
    color: var(--text-primary);
}

/* --- Horários disponíveis --- */
.page-orcamento .time-slot-badge {
    background-color: var(--surface-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    font-weight: 500;
}

.page-orcamento .time-slot-badge:hover,
.page-orcamento .time-slot-badge.selected {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* --- Botões: "Próximo" usa o mesmo gradiente do .btn-orcamento;
       "Confirmar Agendamento" mantém-se verde (ação final), mas
       adaptado ao tema escuro --- */
.page-orcamento .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
    color: white;
    font-weight: 700;
    border: none;
}

.page-orcamento .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-color-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 121, 0, 0.3);
    color: white;
}

.page-orcamento .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    font-weight: 700;
}

.page-orcamento .btn-success:hover {
    background-color: #27a366;
    border-color: #27a366;
}

/* --- Aviso "marcações com 2 dias de antecedência" — o alert-info por
       defeito do Bootstrap é claro e destoa do tema escuro --- */
.page-orcamento .alert-info {
    background-color: var(--surface-elevated);
    border: 1px solid rgba(13, 202, 240, 0.35);
    color: var(--text-secondary);
}

/* --- Passo 4: confirmação --- */
.page-orcamento #step4 .card {
    background-color: var(--surface-elevated);
    border-color: rgba(47, 184, 114, 0.35) !important;
}

.page-orcamento #step4 .list-group-item {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}

.page-orcamento #step4 .list-group-item strong {
    color: var(--text-primary);
}

/* --- Banner "Comprar na Loja Online", injetado por JS — reaproveita o
       estilo do .online-store-banner do orcamento.html --- */
.page-orcamento #store-suggestion-banner {
    background: linear-gradient(135deg, rgba(255, 121, 0, 0.14), rgba(255, 121, 0, 0.04)) !important;
    border: 1px solid rgba(255, 121, 0, 0.35) !important;
    border-left: 5px solid var(--primary-color) !important;
    color: var(--text-secondary) !important;
}

.page-orcamento #store-suggestion-banner h5 {
    color: var(--text-primary) !important;
}

/* ======================================================
   2.23. Página Jantes de Ferro
   ====================================================== */



/* ====================================================== */
/*      ESTILOS PÁGINA JANTES DE FERRO                    */
/* ====================================================== */





.page-jantes-ferro .jante-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  background-color: white;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.page-jantes-ferro .jante-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border-color: var(--amarelo-continental);
}

.page-jantes-ferro .jante-img {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

.page-jantes-ferro .jante-img img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.3s;
}

.page-jantes-ferro .jante-card:hover .jante-img img {
  transform: scale(1.08);
}

.page-jantes-ferro .jante-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: black;
  margin: 10px 0;
}

.page-jantes-ferro .jante-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #FFA500;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 10;
}

.page-jantes-ferro .btn-whatsapp {
  background-color: #25D366;
  color: white;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px 15px;
  transition: all 0.3s;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  text-decoration: none;
  margin-top: 10px;
}

.page-jantes-ferro .btn-whatsapp:hover {
  background-color: #1ebe5d;
  transform: translateY(-2px);
  color: white;
}

.page-jantes-ferro .filter-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 30px;
}

.page-jantes-ferro .filter-header {
  text-align: center;
  margin-bottom: 25px;
}

.page-jantes-ferro .filter-header h2 {
  color: #333;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.page-jantes-ferro .filter-header h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--amarelo-continental);
}

/* ✅ .filter-label consolidado mais abaixo (versão mais completa,
   Fase 2 de otimização); resultado visual idêntico ao anterior. */

.page-jantes-ferro .jante-content {
  position: relative;
}

.page-jantes-ferro .catalog-section {
  padding: 50px 0;
  background: #f8f9fa;
}

.page-jantes-ferro .sort-container {
  background: white;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.page-jantes-ferro .sort-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-jantes-ferro .sort-header h4 {
  margin: 0;
  font-weight: 600;
  color: #333;
}

.page-jantes-ferro .sort-select {
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid #e57200;
  background-color: white;
  font-size: 0.95rem;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(229, 114, 0, 0.1);
}

.page-jantes-ferro .sort-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 114, 0, 0.3);
  border-color: #d16600;
}

.page-jantes-ferro .filter-group {
  margin-bottom: 15px;
  transition: transform 0.3s;
}

.page-jantes-ferro .filter-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-jantes-ferro .filter-label i {
  color: #e57200;
}

.page-jantes-ferro .form-select {
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

.page-jantes-ferro .form-select:focus {
  border-color: #e57200;
  box-shadow: 0 0 0 3px rgba(229, 114, 0, 0.2);
}

.page-jantes-ferro .filter-row {
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.page-jantes-ferro .pagination {
  justify-content: center;
  margin-top: 30px;
}

.page-jantes-ferro .page-item.active .page-link {
  background-color: #e57200;
  border-color: #e57200;
}

.page-jantes-ferro .page-link {
  color: #e57200;
  border-radius: 8px;
  margin: 0 3px;
  border: 1px solid #e0e0e0;
  min-width: 40px;
  text-align: center;
}

.page-jantes-ferro .page-link:hover {
  color: #d16600;
  background-color: #f8f9fa;
}

.page-jantes-ferro .products-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
  gap: 15px;
}

.page-jantes-ferro .products-header h3 {
  margin: 0;
  font-weight: 700;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

.page-jantes-ferro .products-header h3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #e57200;
}

.page-jantes-ferro .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.page-jantes-ferro .benefit-card {
  background: white;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  border: 1px solid rgba(229, 114, 0, 0.1);
}

.page-jantes-ferro .benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.page-jantes-ferro .benefit-icon {
  font-size: 2.5rem;
  color: #e57200;
  margin-bottom: 15px;
}

.page-jantes-ferro .stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
}

.page-jantes-ferro .stat-box {
  background: white;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(229, 114, 0, 0.1);
  flex: 1;
  max-width: 220px;
}

.page-jantes-ferro .stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #e57200;
  margin-bottom: 5px;
}

.page-jantes-ferro .stat-label {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
}

.page-jantes-ferro .filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.page-jantes-ferro .filter-tag {
  background-color: #e57200;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-jantes-ferro .filter-tag i {
  cursor: pointer;
  transition: transform 0.2s;
}

.page-jantes-ferro .filter-tag i:hover {
  transform: scale(1.2);
}

.page-jantes-ferro .loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.page-jantes-ferro .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(229, 114, 0, 0.2);
  border-top-color: #e57200;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.page-jantes-ferro .no-results {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.page-jantes-ferro .no-results i {
  font-size: 4rem;
  color: #ddd;
  margin-bottom: 20px;
}
/* ⚠️ REVISAR: @keyframes spin (sem prefixo .page-X; usada na página Jantes de Ferro) */


@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Media Queries com a classe de página */
@media (min-width: 992px) {
  .page-jantes-ferro .col-lg-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (max-width: 768px) {
  .page-jantes-ferro .filter-row > div {
    margin-bottom: 15px;
  }
  
  .page-jantes-ferro .hero {
    padding: 50px 0;
  }
  
  .page-jantes-ferro .hero h1 {
    font-size: 1.8rem;
  }
}

/* ======================================================
   2.24. Página Diagnóstico de Bateria
   ====================================================== */


/* custom.css */

/* ======================================================
   ESTILOS PARA A PÁGINA DE DIAGNÓSTICO DE BATERIA
   ====================================================== */

.page-diagnostico-bateria .battery-life-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.page-diagnostico-bateria .battery-percentage {
    position: relative; /* Essencial para posicionar o indicador */
    width: 100%;
    height: 8px;
    background-color: var(--light-gray); /* Fundo cinza claro da barra */
    border-radius: 10px; /* Cantos arredondados para a barra */
}

.page-diagnostico-bateria .battery-percentage-indicator {
    position: absolute; /* Posicionamento absoluto dentro da barra cinza */
    top: 50%;
    /* O 'transform' centra o indicador vertical e horizontalmente no ponto definido pelo 'left' */
    transform: translate(-50%, -50%); 
    background-color: var(--primary); /* Cor de destaque azul, como no exemplo */
    color: white; /* Texto branco para bom contraste */
    padding: 4px 12px; /* Espaçamento interno para criar a "pílula" */
    border-radius: 20px; /* Deixa o indicador com formato de pílula */
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap; /* Garante que o texto "30%" não quebra a linha */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Sombra subtil para dar profundidade */
}

.page-diagnostico-bateria .battery-types-img {
    max-height: 400px;
    object-fit: contain; /* Garante que a imagem cabe sem distorcer */
}