/* ======================================================================
   STYLE.CSS - MASTER STYLESHEET
   PROJETO: CLASSIFICADOS ZVOLTS
   REVISÃO: DIAMANTE 2026 (SINGLE-LINE FORMAT)
====================================================================== */

/* ================= 0. VARIÁVEIS GLOBAIS ================= */
:root {
  --primary-color:     #FFED00;
  --primary-hover:     #ffe600;
  --primary-active:    #ffd000;
  --success-green:     #25D366;
  --error-red:         #ff5555;
  --google-red:        #DB4437;
  --gray-900:          #1a1a1a;
  --gray-800:          #333333;
  --gray-700:          #555555;
  --gray-600:          #888888;
  --gray-500:          #cccccc;
  --gray-400:          #e0e0e0;
  --gray-300:          #f4f4f4;
  --bg-body:           #e9e9e9;
  --bg-card:           #f4f4f4;
  --bg-card-hover:     #ffffff;
  --bg-input:          #ffffff;
  --bg-overlay:        rgba(0, 0, 0, 0.85);
  --text-main:         #333333;
  --text-muted:        #666666;
  --border-color:      #dddddd;
  --border-hover:      #cccccc;
  --space-xs:          5px;
  --space-sm:          10px;
  --space-md:          20px;
  --space-lg:          30px;
  --space-xl:          40px;
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;
  --font-heading:      'Montserrat', sans-serif;
  --font-body:         'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ================= 1. BASE, RESET E ANIMAÇÕES ================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body                                                     { height: 100%; scroll-behavior: smooth; }
html                                                           { scrollbar-gutter: stable; }
body                                                           { background: var(--bg-body); color: var(--text-main); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.6; }
a, button, .tag, .btn-auth-submit                              { color: inherit; text-decoration: none; transition: var(--transition-normal); outline: none !important; }
a:active, button:active, .tag:active, .btn-auth-submit:active  { transform: scale(0.97); transition: transform var(--transition-fast); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
body::before                                                   { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 0%, rgba(255, 237, 0, 0.04) 0%, transparent 75%), linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.05) 100%); }
body::after                                                    { content: ""; position: fixed; inset: 0; z-index: -1; opacity: 0.03; background-image: linear-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.sr-announcer-hidden                                           { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.body-no-scroll                                                { overflow: hidden !important; }

@keyframes bolt-glow                                           { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 237, 0, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(255, 237, 0, 0.9)); } }
@keyframes pulse-glow                                          { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 237, 0, 0.3); } 50% { transform: scale(1.03); box-shadow: 0 4px 25px rgba(255, 237, 0, 0.6); } }
@keyframes shimmer-effect                                      { 0% { transform: translateX(-300%) rotate(25deg); } 20%, 100% { transform: translateX(800%) rotate(25deg); } }
@keyframes card-reveal                                         { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* ================= 2. UTILITÁRIOS ================= */
.text-highlight       { color: #dcb300; } 
.text-success         { color: var(--success-green); margin-left: 5px; font-weight: bold; }
.text-truncate        { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; min-width: 0; max-width: 100%; }
.text-muted           { color: var(--text-muted); }
.text-sm              { font-size: 12px; }
.text-md              { font-size: 14px; }

.mb-lg                { margin-bottom: var(--space-lg); }
.mb-md                { margin-bottom: var(--space-md); }
.mb-sm                { margin-bottom: var(--space-sm); }
.mb-xs                { margin-bottom: var(--space-xs); }
.mt-0                 { margin-top: 0 !important; }
.mt-sm                { margin-top: var(--space-sm); }
.mt-xs                { margin-top: var(--space-xs); }

.flex-wrap            { flex-wrap: wrap !important; }
.flex-1               { flex: 1; }
.w-100                { width: 100% !important; }
.h-auto               { height: auto !important; }
.h-38                 { height: 38px !important; }
.align-end            { align-items: flex-end; }

.hide-element         { display: none !important; }
.show-flex            { display: flex !important; }
.fa-spin              { animation: fa-spin 2s infinite linear !important; }
.alert-fade           { transition: opacity 0.5s ease; }
.icon-bolt-yellow, .icon-bolt-vital { color: var(--primary-color); margin-right: 5px; }
.icon-loc-yellow      { color: var(--primary-color); margin-right: 4px; }
.qr-icon-margin       { margin-right: 8px; }

.btn-sm               { padding: 6px 12px !important; font-size: 11px !important; height: auto !important; }
.divider-diamante     { width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%); opacity: 0.8; margin: 0; }

/* --- Banner Triagem (Anunciar) --- */
.alert-triagem-box { text-align: left; display: flex; align-items: center; gap: 15px; margin-bottom: 30px; font-weight: 600; font-size: 13px; line-height: 1.5; }
.alert-triagem-icon { color: var(--error-red); flex-shrink: 0; }
.alert-triagem-title { font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
.text-danger-red { color: var(--error-red); }

/* Helpers & Inputs Bloqueados (Painel) */
.hint-text-sm { display: block; margin-top: 5px; font-size: 13px; color: var(--text-muted); }
.icon-warning-orange { color: #f39c12; margin-right: 4px; }
.input-locked-wrapper { position: relative; }
.input-locked { background: #f8f9fa !important; color: #999 !important; cursor: not-allowed; border-color: #e0e0e0 !important; }
.icon-input-locked { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #ccc; }

/* Wrapper URL Exclusivo (Painel) */
.custom-url-wrapper.locked { background: #f8f9fa; border-color: #e0e0e0; }
.custom-url-wrapper.locked .url-prefix { color: #999; }
.custom-url-wrapper.locked .url-input { color: #666; pointer-events: none; }
.btn-external-link { color: #333; font-size: 16px; padding: 0 15px; transition: var(--transition-fast); }
.btn-external-link:hover { color: var(--primary-color); }

/* Preview de Imagens (Painel e Detalhes) */
.cover-preview-box { width: 100%; max-width: 400px; height: 120px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; }
.img-cover-fit { width: 100%; height: 100%; object-fit: cover; }

/* Box do Vendedor e Fraudes (Detalhes) */
.seller-avatar-circle.avatar-lg { width: 60px; height: 60px; background: #eee; border: 1px solid var(--border-color); }
.avatar-lg i { font-size: 24px; color: #999; }
.seller-store-action { margin-top: 15px; border-top: 1px solid var(--border-color); padding-top: 15px; }
.btn-store-dark { background-color: var(--gray-800); color: #fff; display: block; text-align: center; padding: 10px; border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; transition: var(--transition-fast); }
.btn-store-dark:hover { background-color: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.safety-list-col { padding-left: 20px; margin-top: 10px; list-style-type: disc; display: flex; flex-direction: column; gap: 8px; }

/* ================= 3. ESTRUTURA PRINCIPAL E HEADER ================= */
.main-wrapper         { max-width: 1300px; margin: 0 auto; background: var(--bg-card); min-height: 100vh; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); box-shadow: 0 0 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.content              { padding: var(--space-lg); min-width: 0; flex-grow: 1; }
header                { background: #f4f4f4; padding: var(--space-lg) var(--space-md) var(--space-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); position: relative; z-index: 100; border-bottom: 2px solid var(--border-color); }
.logo-box             { display: flex; flex-direction: column; align-items: center; }
.logo                 { display: flex; align-items: center; font-size: 50px; font-weight: 900; text-transform: uppercase; font-family: var(--font-heading); color: #333; letter-spacing: -1.5px; }
.logo i               { color: var(--primary-color); margin-right: var(--space-sm); filter: drop-shadow(0 0 5px rgba(255, 237, 0, 0.5)); animation: bolt-glow 2s ease-in-out infinite; }
.user-actions         { display: flex; align-items: center; gap: var(--space-sm); }
.btn-login-quadrado   { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 var(--space-md); height: 42px; background: #f4f4f4; color: #333; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.btn-login-quadrado:hover { background: #e9e9e9; border-color: var(--primary-color); }
.btn-anunciar         { height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-lg); color: #000 !important; font-size: 13px; font-weight: 900; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--primary-color) 0%, #FFF566 100%); box-shadow: 0 4px 15px rgba(255, 237, 0, 0.3); text-transform: uppercase; letter-spacing: 0.5px; position: relative; overflow: hidden; animation: pulse-glow 2s infinite ease-in-out; }
.btn-anunciar::after  { content: ""; position: absolute; top: -50%; left: 0; width: 60px; height: 200%; background: rgba(255, 255, 255, 0.4); animation: shimmer-effect 3s infinite; }
.btn-header-painel    { display: flex; align-items: center; height: 42px; padding: 0 var(--space-md); background: #f4f4f4; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; font-weight: 800; color: #333 !important; }
.btn-header-sair      { display: flex; align-items: center; height: 42px; padding: 0 var(--space-md); background: rgba(255, 85, 85, 0.1); border: 1px solid rgba(255, 85, 85, 0.2); border-radius: var(--radius-sm); font-size: 12px; font-weight: 800; color: var(--error-red) !important; gap: var(--space-xs); }

/* TOP TICKER (INFINITE LOOP ANIMATION) */
.top-ticker-container { width: 100%; background-color: #000; color: #fff; overflow: hidden; position: relative; padding: 8px 0; white-space: nowrap; display: flex; z-index: 100; }
.ticker-track         { display: flex; animation: tickerLoop 25s linear infinite; }
.ticker-track:hover   { animation-play-state: paused; }
.ticker-content       { display: flex; flex-shrink: 0; align-items: center; }
.ticker-item          { display: flex; align-items: center; font-family: var(--font-heading), sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 0 30px; }
.ticker-z             { height: 40px; margin-right: 10px; } 
@keyframes tickerLoop { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }

/* ================= 4. FILTROS E BARRA DE LOCALIZAÇÃO ================= */
.filters              { padding: var(--space-sm); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.filter-group         { margin-bottom: 12px; }
.filter-label         { color: #dcb300; font-weight: 800; margin-bottom: 6px; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.tags-container       { display: flex; gap: 5px; flex-wrap: wrap; }
.tag                  { background: #f4f4f4; color: var(--text-muted); padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; border: 1px solid var(--border-color); transition: var(--transition-fast); }
.tag:hover, .tag.active { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.sort-select          { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; outline: none; transition: all 0.2s ease; }
.sort-select:hover    { border-color: var(--primary-color); }
.sort-select:focus    { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2); }
#catalogo-container   { transition: opacity 0.4s ease-in-out; position: relative; min-height: 50vh; }
#catalogo-container.ajax-loading-state { opacity: 0.3; pointer-events: none; }

/* BANNER DE CAPTAÇÃO LATERAL */
.sidebar-promo-banner { background: rgba(255, 237, 0, 0.1); border: 1px solid rgba(255, 237, 0, 0.5); border-radius: var(--radius-md); padding: 20px 15px; margin-top: 25px; text-align: center; position: relative; overflow: hidden; }
.promo-badge          { background: var(--success-green); color: #fff; font-size: 9px; font-weight: 900; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; display: inline-block; margin-bottom: 12px; letter-spacing: 0.5px; }
.promo-title          { font-family: var(--font-heading); color: var(--text-main); font-size: 16px; font-weight: 900; margin-bottom: 8px; line-height: 1.2; letter-spacing: -0.5px; }
.promo-text           { font-size: 12px; color: var(--text-muted); margin-bottom: 15px; line-height: 1.4; }
.btn-promo-action     { display: block; background: var(--primary-color); color: #000; font-weight: 900; font-size: 12px; text-transform: uppercase; padding: 12px; border-radius: var(--radius-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); position: relative; overflow: hidden; }
.btn-promo-action::after { content: ""; position: absolute; top: -50%; left: 0; width: 40px; height: 200%; background: rgba(255, 255, 255, 0.6); animation: shimmer-effect 3s infinite; }
.btn-promo-action:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 237, 0, 0.4); filter: brightness(1.05); }

/* ================= 5. CARROSSEL DE MARCAS ================= */
.main-brands-carousel-wrapper { margin-bottom: var(--space-lg); width: 100%; position: relative; }
.brands-carousel-track        { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-sm); padding: var(--space-md) var(--space-xs) var(--space-md); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.brands-carousel-track::-webkit-scrollbar { height: 6px; }
.brands-carousel-track::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 10px; }
.brands-carousel-track::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 10px; }
.brands-carousel-track::-webkit-scrollbar-thumb:hover { background: #aaaaaa; }
.brand-scroll-btn             { position: absolute; top: calc(40px + var(--space-md)); transform: translateY(-50%); z-index: 10; background: #ffffff; color: var(--text-main); border: 1px solid var(--border-color); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: var(--transition-fast); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.brand-scroll-btn:hover       { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.brand-scroll-btn.left        { left: -10px; } 
.brand-scroll-btn.right       { right: -10px; }
.brand-item-card              { flex: 0 0 80px; min-width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border-color); text-decoration: none; transition: var(--transition-fast); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.brand-item-card:hover        { transform: translateY(-4px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); border-color: var(--primary-color); }
.brand-item-card.active       { border: 2px solid var(--primary-color); box-shadow: 0 0 15px rgba(255, 237, 0, 0.3); }
.brand-logo-img               { width: 68px; height: 68px; object-fit: contain; transition: transform var(--transition-normal); }
.brand-item-card:hover .brand-logo-img { transform: scale(1.08); }
.brand-name-text              { font-size: 10px; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-main); }

/* ================= 6. GRID DE ANÚNCIOS (CARDS) ================= */
.grid                 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); min-height: 50vh; }
.card                 { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; position: relative; display: flex; flex-direction: column; height: 100%; animation: card-reveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) backwards; transition: all var(--transition-normal); will-change: transform, opacity; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.card:hover           { border-color: var(--primary-color); background: var(--bg-card-hover); box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-5px); }
.card-img-box         { position: relative; height: 170px; width: 100%; overflow: hidden; background: #e9e9e9; }
.card-img             { height: 100%; width: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover .card-img { transform: scale(1.06); filter: brightness(1.05); }
.card-body            { padding: var(--space-md); display: flex; flex-direction: column; flex-grow: 1; }
.card-title           { font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 3px; line-height: 1.2; height: 2.4em; overflow: hidden; font-family: var(--font-heading); }
.card-info            { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; font-weight: 600; }
.card-price           { font-size: 21px; font-weight: 900; color: #111; margin-bottom: 8px; display: block; letter-spacing: -0.5px; }
.card-loc             { margin-top: auto; font-size: 11px; color: var(--text-muted); font-weight: 700; display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border-color); padding-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Trava de Estabilidade do Grid */
.grid article         { min-width: 0; height: 100%; }
.grid article a       { display: block; min-width: 0; height: 100%; }
.card, .card-body     { min-width: 0; } 

.badge-destaque       { position: absolute; top: 12px; left: 12px; background: var(--primary-color); color: #000; font-size: 10px; font-weight: 900; padding: 4px 10px; border-radius: 4px; z-index: 2; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.badge-autonomia      { position: absolute; bottom: 12px; left: 12px; background: rgba(255, 255, 255, 0.9); color: var(--text-main); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border-color); z-index: 2; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px); }
.badge-autonomia i    { color: #dcb300; }
.card-paused          { opacity: 0.6; filter: grayscale(0.8); }
.card-paused::after   { content: "PAUSADO"; position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: #fff; font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 4px; }
.content-header-flex  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; gap: 15px; flex-wrap: wrap; }
.page-title           { color: var(--text-main); font-family: var(--font-heading); font-size: 18px; font-weight: 700; }
.results-count        { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }

/* ================= 7. PAGINAÇÃO E LOADER INFINITO ================= */
nav.pagination        { display: none !important; }
.page-link            { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #ffffff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-main); font-weight: 800; font-size: 13px; transition: var(--transition-fast); text-decoration: none; }
.page-link:hover, .page-link.active { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.pagination-dots      { color: var(--text-muted); font-weight: 900; display: inline-flex; align-items: flex-end; padding: 0 5px; font-size: 16px; }
#infinite-loading     { display: none; text-align: center; padding: 30px 0 40px; width: 100%; clear: both; transition: opacity 0.3s ease; }
#infinite-loading i   { color: var(--primary-color); font-size: 28px; filter: drop-shadow(0 0 8px rgba(255, 237, 0, 0.4)); }

/* ================= 8. DETALHES DO VEÍCULO ================= */
.detail-page-body     { background: var(--bg-body); color: var(--text-main); }
.nav-back-wrapper     { display: flex; align-items: center; gap: 15px; margin-bottom: var(--space-md); }
.logo-back-link       { display: flex; align-items: center; flex-shrink: 0; }
.logo-back-img        { height: 56px; width: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1)); }
.btn-floating-back    { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: var(--text-main); padding: 10px 18px; border-radius: 50px; font-family: var(--font-heading); font-weight: 900; font-size: 11px; text-transform: uppercase; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: var(--transition-normal); width: max-content; }
.btn-floating-back:hover { background: var(--primary-color); color: #000; border-color: var(--primary-color); transform: translateY(-2px); }
.detail-grid          { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-md); align-items: start; }
.detail-info          { background: var(--bg-card); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-color); grid-column: 2; grid-row: 1 / span 2; height: fit-content; position: sticky; top: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); }
.gallery-container    { width: 100%; grid-column: 1; }
.main-img-box         { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); cursor: zoom-in; background: #e9e9e9; width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.view-img             { width: 100%; height: auto; display: block; transition: opacity var(--transition-fast); max-width: 100%; max-height: 100%; object-fit: contain !important; }
.zoom-hint            { position: absolute; bottom: 15px; right: 15px; background: rgba(255, 255, 255, 0.9); color: var(--text-main); padding: 8px 16px; border-radius: 50px; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.thumbs-container     { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; margin-top: 15px; }
.thumb-item           { height: 85px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: var(--transition-fast); }
.thumb-item.active, .thumb-item:hover { border-color: var(--primary-color); opacity: 1; box-shadow: 0 0 10px rgba(255, 237, 0, 0.3); }
.thumb-img            { width: 100%; height: 100%; object-fit: cover; }
.vehicle-title-lg     { font-family: var(--font-heading); font-weight: 900; font-size: 2.2rem; color: #111; margin-bottom: 8px; line-height: 1.1; letter-spacing: -1px; }
.location-text-lg     { font-size: 13px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; display: flex; align-items: center; }
.price-display-lg     { font-size: 3rem; font-weight: 900; color: #111; margin: 20px 0; letter-spacing: -1.5px; display: block; }
.btn-whatsapp-lg      { background: var(--success-green); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; border-radius: var(--radius-md); font-weight: 900; font-size: 16px; text-transform: uppercase; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2); transition: var(--transition-normal); }
.btn-whatsapp-lg:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 12px 25px rgba(37, 211, 102, 0.3); }
.spec-grid-box        { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 25px 0; }
.spec-item            { background: #f9f9f9; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.spec-label           { display: block; font-size: 9px; text-transform: uppercase; font-weight: 900; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 4px; }
.spec-value           { color: var(--text-main); font-weight: 800; font-size: 14px; }
.desc-box             { grid-column: 1; padding-top: var(--space-lg); margin-top: var(--space-lg); border-top: 1px solid var(--border-color); }
.desc-title-yellow    { color: #dcb300; font-family: var(--font-heading); font-size: 20px; text-transform: uppercase; font-weight: 900; margin-bottom: 15px; }
.desc-content         { color: var(--text-muted); line-height: 1.8; font-size: 16px; white-space: pre-line; }
.badges-row           { display: flex; gap: 8px; margin-bottom: var(--space-md); }
.badge-id             { background: #f4f4f4; color: var(--text-muted); font-size: 10px; padding: 4px 10px; border-radius: 4px; font-weight: 800; border: 1px solid var(--border-color); }
.badge-type           { background: rgba(255, 237, 0, 0.15); color: #b89500; font-size: 10px; padding: 4px 10px; border-radius: 4px; font-weight: 900; border: 1px solid rgba(255, 237, 0, 0.4); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.seller-box-detail    { background: #f9f9f9; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 15px; margin: 20px 0; }
.seller-header-flex   { display: flex; align-items: center; gap: 15px; }
.seller-avatar-circle { width: 48px; height: 48px; background: #ffffff; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #dcb300; flex-shrink: 0; }
.seller-meta          { display: flex; flex-direction: column; justify-content: center; }
.seller-name-lg       { color: var(--text-main); font-weight: 800; font-size: 16px; line-height: 1.2; font-family: var(--font-heading); }
.seller-since-sm      { color: var(--text-muted); font-size: 11px; text-transform: uppercase; font-weight: 700; margin-top: 3px; letter-spacing: 0.5px; }
.seller-cnpj          { color: #b89500; font-size: 10px; margin-top: 5px; font-weight: 700; opacity: 0.9; }
.fipe-reference-box   { background: rgba(255, 237, 0, 0.05); border: 1px solid rgba(255, 237, 0, 0.4); border-radius: 8px; padding: 12px; margin-bottom: 20px; border-left: 4px solid var(--primary-color); }
.fipe-header-flex     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.fipe-label           { font: bold 11px var(--font-body); color: #b89500; text-transform: uppercase; letter-spacing: .5px; }
.fipe-date            { font-size: 10px; color: var(--text-muted); font-weight: 700; }
#fipe-loader-box      { color: var(--text-main); font: 800 1.1rem var(--font-body); }
.fipe-value-display   { font-size: 18px; font-weight: 900; color: var(--text-main); margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.safety-tips-box      { background: rgba(255, 237, 0, .1); border: 1px solid rgba(255, 237, 0, .4); border-radius: 8px; padding: 15px; margin-top: 20px; }
.safety-tips-title    { color: #b89500; font: 0.9rem var(--font-heading); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: bold; }
.safety-tips-alert    { font-size: .75rem; color: var(--text-main); margin-bottom: 12px; line-height: 1.4; border-bottom: 1px dashed rgba(0, 0, 0, .1); padding-bottom: 10px; }
.safety-tips-list     { font-size: .8rem; color: var(--text-muted); padding-left: 18px; margin: 0; line-height: 1.6; list-style: disc; }
.safety-tips-list li  { margin-bottom: 6px; }

/* ================= BARRA DE SOH (DETALHES - VERDE SLIM ANIMADA) ================= */
.soh-highlight-box-green      { border-color: var(--success-green); background: rgba(37, 211, 102, 0.03); padding-bottom: 14px; }
.soh-header-flex              { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.soh-header-flex .spec-label  { margin-bottom: 0; font-size: 11px; letter-spacing: 0.5px; font-weight: 900; text-transform: uppercase; }
.soh-header-flex .spec-value  { font-size: 18px; font-weight: 900; }
.soh-progress-bg              { width: 100%; height: 8px; background: rgba(0, 0, 0, 0.08); border-radius: 50px; overflow: hidden; }
.soh-progress-fill-green      { height: 100%; background: linear-gradient(90deg, #1da851 0%, var(--success-green) 50%, #1da851 100%); background-size: 200% 100%; border-radius: 50px; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; box-shadow: 0 0 8px rgba(37, 211, 102, 0.4); max-width: 0; animation: grow-bar 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards, charge-pulse 2s infinite linear; }
.soh-bolt                     { color: #fff; font-size: 8px; animation: bolt-flash 0.8s infinite alternate; }

/* Mantemos os Keyframes de animação (grow-bar, charge-pulse e bolt-flash) que já adicionamos antes */

/* Animações Keyframes para a Barra e o Raio */
@keyframes grow-bar           { 0% { max-width: 0; } 100% { max-width: 100%; } }
@keyframes charge-pulse       { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes bolt-flash         { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

/* ================= 9. FORMULÁRIOS E CADASTROS ================= */
.ad-form-box          { max-width: 850px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.form-section-gold    { background: rgba(255, 237, 0, 0.05); border: 1px solid var(--border-color); padding: var(--space-lg); border-radius: var(--radius-md); margin-bottom: var(--space-lg); border-left: 4px solid var(--primary-color); }
.section-title-sm     { color: #dcb300; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: var(--space-md); display: flex; align-items: center; gap: 10px; }
.user-data-header     { background: #f9f9f9; padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: var(--space-lg); }
.user-data-flex       { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.user-data-title      { color: var(--text-main); font-size: 14px; font-weight: 800; font-family: var(--font-heading); margin: 0; display: flex; align-items: center; gap: 8px; }
.user-email-badge     { background: #ffffff; padding: 5px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-color); }
.user-email-badge-flex{ display: inline-flex; align-items: center; gap: 6px; }
.form-grid            { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-grid-3          { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-sm); }
.full-width-group     { grid-column: 1 / -1; }
.auth-input           { width: 100%; padding: 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); border-radius: var(--radius-sm); font-size: 15px; transition: var(--transition-normal); }
.auth-input:focus     { border-color: var(--primary-color); outline: none; box-shadow: 0 0 10px rgba(255, 237, 0, 0.2); }
.input-locked         { background: #f0f0f0 !important; color: #888 !important; cursor: not-allowed; font-weight: 700; }
.text-area-gold       { min-height: 140px; resize: vertical; line-height: 1.6; }
.upload-grid          { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.upload-slot          { position: relative; background: #f9f9f9; border: 2px dashed #ccc; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #888; transition: var(--transition-fast); }
.upload-slot:hover    { border-color: var(--primary-color); color: #dcb300; background: #fff; transform: translateY(-2px); }
.upload-slot.main-photo { grid-column: span 5; aspect-ratio: 16/7; border-style: solid; border-color: var(--border-color); }
.preview-img          { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 2; display: none; }
.preview-img.show     { display: block !important; }
.badge-cover          { position: absolute; bottom: 15px; left: 15px; z-index: 3; background: var(--primary-color); color: #000; font-size: 10px; padding: 4px 12px; border-radius: 4px; font-weight: 900; text-transform: uppercase; }
.badge-mini-count     { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,0.9); color: var(--text-main); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; z-index: 2; border: 1px solid var(--border-color); }
.btn-clear-slot       { position: absolute; top: 8px; right: 8px; background: var(--error-red); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 10px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.upload-icon          { transition: var(--transition-fast); }
.btn-submit-ad        { position: relative; overflow: hidden; background: var(--success-green); color: #fff; width: 100%; padding: 22px; border: none; border-radius: var(--radius-md); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--transition-normal); margin-top: var(--space-lg); box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3); }
.btn-submit-ad:hover  { filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); }

/* --- Rodapé do Editar --- */
.action-footer-edit { display: flex; gap: 15px; margin-top: 30px; }
.btn-cancel-edit { flex: 0 0 auto; background: var(--gray-700); display: flex; align-items: center; justify-content: center; padding: 0 30px; border-radius: var(--radius-sm); font-weight: 800; color: #fff !important; height: 55px; font-size: 13px; text-transform: uppercase; transition: var(--transition-fast); }
.btn-cancel-edit:hover { background: var(--gray-800); }
.action-footer-edit .btn-submit-ad { margin-top: 0; flex: 1; height: 55px; padding: 0; display: flex; align-items: center; justify-content: center; }

/* [EFEITO BRILHO DIAMANTE] Aplica o Shimmer Infinito ao Botão de Cadastro */
.btn-submit-ad::after { content: ""; position: absolute; top: -50%; left: 0; width: 60px; height: 200%; background: rgba(255, 255, 255, 0.4); animation: shimmer-effect 3s infinite; pointer-events: none; }


.btn-progress-bar     { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: rgba(0,0,0,0.1); z-index: 1; transition: width 0.1s linear; }
.btn-text-content     { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.profile-warning-text { font-size: 11px; color: var(--error-red); margin-top: 5px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.3; }
.phone-input-group    { display: flex; gap: 10px; }
.select-prefix        { width: 100px; margin: 0; padding: 8px; }
.input-phone-flex     { margin: 0; flex: 1; }
.mb-sm-custom         { margin-bottom: 5px; }
.mt-md-custom         { margin-top: 15px; }
.desc-hint            { font-size: 11px; color: #b89500; margin-bottom: 7px; font-weight: 700; letter-spacing: 0.5px; }
.photo-instructions   { font-size: 13px; color: var(--text-muted); margin-bottom: 15px; }

/* ================= 10. PAINEL DE CONTROLE E ADMIN ================= */
.tabs-nav-container   { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; flex-wrap: wrap; }
.tabs-main-links      { display: flex; gap: var(--space-xs); }
.tabs-user-actions    { display: flex; gap: var(--space-sm); align-items: center; }
.tab-btn              { background: transparent; color: var(--text-muted); border: 1px solid transparent; padding: 10px 25px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 800; font-size: 12px; text-transform: uppercase; transition: var(--transition-fast); }
.tab-btn:hover, .tab-btn.active { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.tab-btn-locked       { opacity: 0.5; cursor: not-allowed; }
.painel-header        { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-color); }
.painel-title         { color: var(--text-main); font-weight: 900; font-family: var(--font-heading); letter-spacing: -0.5px; }
.painel-grid          { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); }
.switch-label         { font-size: 10px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.switch               { position: relative; display: inline-block; width: 44px; height: 22px; }
.switch input         { opacity: 0; width: 0; height: 0; }
.slider               { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: var(--transition-normal); border-radius: 34px; }
.slider:before        { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: #fff; transition: var(--transition-normal); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: var(--success-green); }
input:checked + .slider:before { transform: translateX(22px); }
.ad-card-painel       { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition-normal); }
.ad-card-painel:hover { border-color: var(--primary-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.painel-thumb-box     { position: relative; width: 100%; height: 160px; background: #e9e9e9; overflow: hidden; }
.painel-thumb         { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.ad-card-painel:hover .painel-thumb { transform: scale(1.05); }
.status-badge         { position: absolute; top: 12px; left: 12px; font-size: 9px; font-weight: 900; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.status-badge.st-online { background: var(--success-green); color: #fff; }
.status-badge.st-pausado { background: #888; color: #fff; }
.status-badge.st-pendente { background: var(--primary-color); color: #000; }
.ad-body-painel       { padding: var(--space-md); flex-grow: 1; display: flex; flex-direction: column; }
.ad-title             { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; line-height: 1.4; height: 2.8em; overflow: hidden; }
.ad-price             { color: #111; font-weight: 900; font-size: 20px; }
.ad-price-row         { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.expire-alert         { font-size: 10px; color: #b89500; display: flex; align-items: center; gap: 5px; margin-bottom: 15px; font-weight: bold; }
.action-buttons-inline{ display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; margin-top: 15px; }
.form-remove-inline   { margin: 0; padding: 0; flex: 1; display: flex; }
.btn-action-inline    { flex: 1; text-align: center; padding: 0 4px; height: 38px; font-size: 11px; font-weight: 800; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); border: none; display: flex; align-items: center; justify-content: center; gap: 4px; text-transform: uppercase; white-space: nowrap; }
.btn-edit             { background: var(--gray-400); color: var(--text-main); }
.btn-edit:hover       { background: var(--border-color); }
.btn-view-ad          { background: var(--primary-color); color: #000; }
.btn-view-ad:hover    { background: var(--primary-hover); }
.btn-remove           { background: rgba(255, 85, 85, 0.1); color: var(--error-red); }
.btn-remove:hover     { background: rgba(255, 85, 85, 0.2); }
.section-profile      { max-width: 600px; margin: 0 auto; }
.profile-title        { color: #dcb300; margin-bottom: var(--space-md); font-weight: 900; }
.admin-box            { background: var(--bg-card); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: var(--space-md); }
.danger-zone          { border: 1px solid rgba(255, 85, 85, 0.3); margin-top: var(--space-xl); background: rgba(255, 85, 85, 0.05); padding: var(--space-md); border-radius: var(--radius-md); }
.danger-title         { color: var(--error-red); margin-bottom: 8px; font-weight: 900; text-transform: uppercase; font-size: 14px; }
.danger-desc          { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.admin-input          { width: 100%; padding: 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 6px; font-size: 14px; margin-bottom: 20px; transition: 0.3s; }
.admin-input:focus    { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(255, 237, 0, 0.2); outline: none; }
.linked-account-box   { display: flex; align-items: center; gap: 10px; background: #f9f9f9; padding: 12px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin-bottom: var(--space-md); color: var(--text-main); font-weight: 600; font-size: 14px; }
.icon-whatsapp-linked { color: var(--success-green); font-size: 20px; }
.icon-verified        { color: #009688; margin-left: auto; font-size: 16px; }
.custom-url-wrapper   { display: flex; align-items: center; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding-left: 15px; margin-bottom: 5px; overflow: hidden; height: 48px; transition: var(--transition-fast); }
.custom-url-wrapper:focus-within { border-color: var(--primary-color); }
.url-prefix           { color: #b89500; font-size: 14px; font-weight: 700; }
.url-input            { border: none; background: transparent; padding-left: 2px; width: 100%; color: var(--text-main); height: 100%; outline: none; font-size: 14px; font-family: inherit; }
.url-hint             { font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-md); }
.current-logo-box     { margin-bottom: 10px; background: #f4f4f4; display: inline-block; padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.current-logo-img     { max-height: 50px; display: block; }
.input-file-custom    { padding: 10px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.admin-empty-full     { grid-column: 1 / -1; text-align: center; padding: var(--space-xl) var(--space-md); color: var(--text-muted); font-weight: 800; font-size: 16px; background: var(--bg-card); border-radius: var(--radius-md); border: 1px dashed var(--border-color); }
.edit-wrapper         { max-width: 850px; margin: var(--space-xl) auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.form-row-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.photos-separator     { margin-top: var(--space-xl); border-top: 1px solid var(--border-color); padding-top: var(--space-lg); }
.photo-slot-edit      { position: relative; background: #f9f9f9; border: 2px dashed #ccc; border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); }
.photo-slot-edit:hover { border-color: var(--primary-color); background: #fff; }
.main-slot-lg         { height: 260px; margin-bottom: var(--space-sm); border-style: solid; }
.gallery-grid-edit    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.gallery-slot-sm      { height: 120px; }
.img-preview-fill     { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.photo-slot-edit:hover .img-preview-fill { filter: brightness(1.05); }
.btn-remove-photo     { position: absolute; top: 8px; right: 8px; background: var(--error-red); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 10; border: 1px solid #fff; transition: var(--transition-fast); }
.btn-remove-photo:hover { transform: scale(1.15); background: #cc0000; }
.desc-area-edit       { height: 160px; resize: vertical; line-height: 1.6; }
.btn-save-edit        { width: 100%; height: 65px; background: var(--success-green); color: #fff; border: none; border-radius: var(--radius-md); font-weight: 900; font-size: 16px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; transition: var(--transition-normal); box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3); }
.btn-save-edit:hover  { filter: brightness(1.05); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); }
.photo-badge-edit     { position: absolute; bottom: 12px; left: 12px; z-index: 3; background: var(--primary-color); color: #000; font-weight: 900; font-size: 9px; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; }
.locked-info-card     { background: #f9f9f9; padding: 25px; border-radius: var(--radius-md); border-left: 4px solid var(--primary-color); margin-bottom: 30px; position: relative; border: 1px solid var(--border-color); }
.locked-info-card i.fa-lock { position: absolute; right: 20px; top: 20px; color: #ccc; font-size: 24px; }
.vehicle-identity     { font-size: 24px; font-weight: 900; color: var(--text-main); text-transform: uppercase; margin-bottom: 5px; font-family: var(--font-heading); }
.vehicle-tags         { display: flex; gap: 10px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.input-gold-focus     { border-color: var(--primary-color) !important; font-size: 20px !important; font-weight: 900 !important; color: #b89500 !important; }
.icon-size-lg         { font-size: 40px; }
.edit-section-spacing { margin-top: var(--space-lg); }
.top-ticker-wrapper   { background: var(--primary-color); color: #000; width: 100%; height: 34px; overflow: hidden; position: relative; display: flex; align-items: center; z-index: 200; transform: translateY(-100%); opacity: 0; animation: slide-down-ticker 0.5s forwards; }
.ticker-track         { display: flex; width: max-content; white-space: nowrap; animation: ticker-scroll 30s linear infinite; }
.ticker-item          { font-size: 11px; font-weight: 800; text-transform: uppercase; padding-right: 60px; display: flex; align-items: center; }
.ticker-item i        { font-size: 13px; margin-right: 8px; }
@keyframes slide-down-ticker { to { transform: translateY(0); opacity: 1; } }
@keyframes ticker-scroll { 100% { transform: translateX(-50%); } }

/* ================= 11. LOGIN E AUTENTICAÇÃO ================= */
body.login-page       { background: var(--bg-body); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-md); }
.auth-wrapper         { width: 100%; max-width: 500px; z-index: 10; transition: max-width var(--transition-normal); }
.auth-box             { background: var(--bg-card); width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 60px 50px; text-align: center; transition: all var(--transition-normal); }
.logo-container       { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: var(--space-md); }
.auth-logo            { width: 80px; height: auto; display: inline-block; filter: drop-shadow(0 0 5px rgba(255, 237, 0, 0.5)); animation: bolt-glow 2s ease-in-out infinite; }
.auth-title           { color: var(--text-main); font-size: 30px; font-weight: 900; margin-bottom: 12px; font-family: var(--font-heading); letter-spacing: -1px; }
.auth-desc            { color: var(--text-muted); font-size: 15px; margin-bottom: var(--space-xl); line-height: 1.6; }
.g-btn-wrapper        { display: flex; justify-content: center; align-items: center; width: 100%; margin: var(--space-lg) 0; min-height: 50px; }
.auth-box.loading-state { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
.text-error           { color: var(--error-red); font-weight: 800; font-size: 14px; }
.btn-retry-login      { max-width: 300px; margin: var(--space-md) auto 0; }
.auth-footer          { margin-top: var(--space-xl); font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6; border-top: 1px solid var(--border-color); padding-top: var(--space-lg); }

/* ================= 12. MODAIS (Zoom e Legal/Localização) ================= */
.modal-overlay        { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(5px); }
.modal-overlay.open   { display: flex; }
.modal-img            { max-width: 90vw; max-height: 80vh; object-fit: contain; }
.modal-close-btn      { position: fixed; top: 15px; right: 25px; color: #fff; font-size: 45px; font-weight: 300; line-height: 1; cursor: pointer; z-index: 10000; transition: transform var(--transition-fast), color var(--transition-fast); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.modal-close-btn:hover{ color: var(--primary-color); transform: scale(1.1); }
.modal-nav-btn        { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.5); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: var(--transition-fast); backdrop-filter: blur(4px); }
.modal-nav-btn:hover  { background: var(--primary-color); color: #000; border-color: var(--primary-color); }
.prev-btn             { left: 20px; } 
.next-btn             { right: 20px; }
.legal-modal-box      { background: var(--bg-card); border: 1px solid var(--primary-color); border-radius: var(--radius-lg); width: 90%; max-width: 800px; max-height: 85vh; padding: 40px; position: relative; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: card-reveal 0.3s ease-out; }
#legal-modal-content  { overflow-y: auto; padding-right: 15px; }
#legal-modal-content::-webkit-scrollbar { width: 6px; }
#legal-modal-content::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 10px; }
#legal-modal-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
#legal-modal-content::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* -- Classes Específicas do Modal (Padrão Zero CSS Inline) -- */
.modal-box-sm         { max-width: 450px; }
.modal-header-center  { text-align: center; margin-bottom: 25px; }
.modal-icon-xl        { font-size: 40px; color: var(--primary-color); margin-bottom: 15px; }
.modal-title-bold     { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; }
.modal-subtitle       { font-size: 14px; color: var(--text-muted); }
.form-col-gap         { display: flex; flex-direction: column; gap: 15px; }
.input-w100           { width: 100%; }
.grid-2-cols          { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-w100             { width: 100%; border: none; cursor: pointer; }
.btn-outline-w100     { width: 100%; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* -- Loaders Universais de Modais -- */
.modal-loader-box,
.modal-loader-container{ text-align: center; padding: 50px; }
.modal-loader-icon    { color: var(--primary-color); }
.modal-loader-text    { margin-top: 15px; font-weight: bold; color: var(--text-main); }

/* ================= 13. MAPA FULLSCREEN (Leaflet) E DARK MODE ================= */
.map-fullscreen-page { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; background-color: #111; }
.map-fullscreen-page #mapa-zvolts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* Navegação Flutuante (Substitui o painel antigo) */
.map-floating-nav { position: absolute; top: 20px; left: 20px; z-index: 1000; margin: 0; }
.map-fullscreen-page .logo-back-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.8)); }

/* Popups Dark Mode & Clusters */
.map-fullscreen-page .leaflet-popup-content-wrapper { background: #222 !important; color: #fff !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.map-fullscreen-page .leaflet-popup-tip { background: #222 !important; }
.map-fullscreen-page .leaflet-popup-content { font-family: var(--font-heading); font-weight: 700; margin: 12px !important; font-size: 13px;}
.map-fullscreen-page .leaflet-container a.leaflet-popup-close-button { color: #aaa !important; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(255, 237, 0, 0.3) !important; }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: var(--primary-color) !important; color: #000 !important; font-family: var(--font-heading); font-weight: 900; font-size: 13px; border: 2px solid #fff; }

/* ================= 14. FAB GROUP (Botões Flutuantes) ================= */
.fab-container        { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; align-items: center; z-index: 999; }
.fab-btn              { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; cursor: pointer; transition: var(--transition-fast); overflow: hidden; }
.fab-btn:hover        { transform: translateY(-3px) scale(1.05); }
.fab-logo, .fab-login-primary, .fab-anuncio-primary, .fab-loc-primary { background: var(--primary-color) !important; width: 56px; height: 56px; border: 2px solid #ffffff !important; box-shadow: 0 5px 15px rgba(255, 237, 0, 0.4); text-decoration: none; color: #000 !important; }
.fab-logo img         { width: 55px; height: auto; display: block; transition: transform 0.3s ease; }
.fab-logo:hover img   { transform: scale(1.1); }
.fab-login-primary:hover, .fab-anuncio-primary:hover, .fab-loc-primary:hover, .fab-logo:hover { box-shadow: 0 8px 25px rgba(255, 237, 0, 0.6); background: var(--primary-hover) !important; }
.fab-menu-wrapper     { position: relative; display: flex; align-items: center; }
.fab-info-secondary   { background: #fff; color: var(--text-main); width: 44px; height: 44px; font-size: 16px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: visible !important; }
.fab-info-secondary:hover, .fab-info-secondary.active { background: #f4f4f4; color: #dcb300; border-color: var(--primary-color); }
.fab-notification-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; background-color: var(--error-red); border: 2px solid #fff; border-radius: 50%; z-index: 10; }
.fab-notification-dot::after { content: ''; position: absolute; inset: 0; background-color: var(--error-red); border-radius: 50%; animation: pulse-live 1.5s infinite ease-in-out; }
.fab-dropdown-menu    { position: absolute; bottom: 0; right: 55px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 0; width: max-content; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(15px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.fab-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateX(0); }
.fab-dropdown-menu a  { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--text-main); font-size: 11px; font-weight: 800; text-transform: uppercase; transition: var(--transition-fast); text-decoration: none; letter-spacing: 0.5px; }
.fab-dropdown-menu a i{ color: #dcb300; font-size: 14px; width: 16px; text-align: center; opacity: 0.7; }
.fab-dropdown-menu a:hover { background: #f9f9f9; color: #dcb300; padding-left: 25px; padding-right: 15px; }

/* ================= 15. PÁGINAS DE ERRO E 404 ================= */
.error-page-body      { background-color: var(--bg-body) !important; }
.error-wrapper        { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 20px; }
.error-card           { background: var(--bg-card); padding: 80px 40px; border-radius: 24px; border: 1px solid var(--border-color); max-width: 700px; width: 100%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); position: relative; overflow: hidden; }
.error-code-bg        { font-family: var(--font-heading); font-size: 180px; font-weight: 900; color: rgba(0,0,0, 0.02); line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; user-select: none; }
.error-icon           { font-size: 85px; color: var(--primary-color); margin-bottom: 30px; position: relative; z-index: 2; filter: drop-shadow(0 0 5px rgba(255, 237, 0, 0.2)); }
.error-title          { font-family: var(--font-heading); font-weight: 900; color: var(--text-main); font-size: 36px; margin-bottom: 20px; text-transform: uppercase; position: relative; z-index: 2; letter-spacing: -1px; }
.error-text           { color: var(--text-muted); font-size: 18px; line-height: 1.6; margin-bottom: 45px; position: relative; z-index: 2; max-width: 500px; margin-left: auto; margin-right: auto; }
.error-footer         { border-top: 1px solid var(--border-color); padding-top: 45px; position: relative; z-index: 2; }
.link-secondary-box   { margin-top: 30px; }
.link-secondary-gold  { color: var(--gray-600); text-decoration: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; }
.link-secondary-gold:hover { color: #dcb300; }
.not-found-box        { text-align: center; padding: 60px 20px; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); max-width: 600px; margin: 40px auto; }
.not-found-icon       { font-size: 50px; color: var(--gray-400); margin-bottom: 20px; }
.not-found-title      { font-size: 24px; color: var(--text-main); font-weight: 900; font-family: var(--font-heading); margin-bottom: 10px; }
.not-found-text       { color: var(--text-muted); font-size: 15px; margin-bottom: 30px; }
.alert-box-success    { padding: 15px; background: rgba(37, 211, 102, 0.05); border: 1px solid var(--success-green); color: var(--success-green); border-radius: var(--radius-sm); margin-bottom: var(--space-md); text-align: center; font-weight: 800; }
.alert-box-error      { padding: 15px; background: rgba(255, 85, 85, 0.05); border: 1px solid var(--error-red); color: var(--error-red); border-radius: var(--radius-sm); margin-bottom: var(--space-md); text-align: center; font-weight: 800; }
.no-results-container { grid-column: 1/-1; text-align: center; padding: 60px 20px; background: var(--bg-card); border: 2px dashed var(--border-color); border-radius: 12px; }
.no-results-icon      { font-size: 40px; color: var(--gray-400); margin-bottom: 20px; }
.no-results-title     { color: var(--text-main); font-family: var(--font-heading); margin-bottom: 15px; }

/* ================= 16. BLOG E NOTÍCIAS ================= */
.blog-header-clean    { border: none; margin-bottom: 10px; }
.blog-title-main      { font-size: 24px; }
.blog-card-link-clean { border-top: none; padding-top: 0; }
nav.pagination.pagination-centered { display: flex !important; justify-content: center; margin-top: 40px; gap: 5px; }
.blog-card-title-clamp{ height: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; margin-bottom: 15px; overflow: hidden; }
.blog-article-img-wrapper { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); }
.blog-article-img     { width: 100%; height: auto; display: block; }
.blog-content-img     { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 15px 0; display: block; border: 1px solid var(--border-color); }
.blog-whatsapp-box    { text-align: center; border-color: var(--success-green); background: rgba(37, 211, 102, 0.05); color: var(--text-main); }
.blog-promo-text      { display: block; margin-bottom: 15px; font-weight: 800; text-transform: uppercase; }
.blog-whatsapp-btn    { display: inline-flex; max-width: 400px; margin-top: 0; align-items: center; justify-content: center; }
.blog-whatsapp-icon   { font-size: 20px; margin-right: 8px; }
.blog-back-container  { text-align: center; }
.blog-btn-back        { display: inline-flex; width: auto; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--text-main); }
.blog-icon-right      { margin-left: 5px; }
.blog-sell-promo      { text-align: center; border-color: var(--border-color); background: #f9f9f9; }
.blog-btn-sell        { display: inline-flex; max-width: 300px; margin: 0 auto; align-items: center; justify-content: center; }
.alert-error-modal    { margin-top: 20px; }

/* ================= 16. LANDING SEO / VENDER ================= */
.lp-seo-content,
.lp-faq-section {
  padding: 0 var(--space-md) var(--space-xl);
}

.lp-seo-content .ad-form-box,
.lp-faq-section .ad-form-box {
  max-width: 980px;
}

.lp-seo-content .vehicle-title-lg,
.lp-faq-section .vehicle-title-lg {
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 18px;
}

.lp-seo-content .desc-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
}

.lp-seo-content .desc-content p {
  margin-bottom: 14px;
}

.lp-seo-content .desc-content ul {
  margin: 12px 0 24px;
  padding-left: 22px;
}

.lp-seo-content .desc-content li {
  margin-bottom: 8px;
}

.lp-seo-content .desc-title-yellow {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 18px;
}

.lp-faq-section .admin-box {
  margin-bottom: 14px;
}

.lp-faq-section .admin-box:last-child {
  margin-bottom: 0;
}

.cta-center {
  margin: 28px 0 10px;
  text-align: center;
}

.cta-center .btn-submit-ad {
  max-width: 520px;
  margin: 0 auto;
  display: flex !important;
}

.bev-exclusive-banner {
  margin-top: 25px;
}

/* Responsivo */
@media (max-width: 768px) {
  .lp-seo-content,
  .lp-faq-section {
    padding: 0 var(--space-sm) var(--space-lg);
  }

  .lp-seo-content .vehicle-title-lg,
  .lp-faq-section .vehicle-title-lg {
    font-size: 1.6rem;
  }

  .lp-seo-content .desc-content {
    font-size: 15px;
    line-height: 1.7;
  }

  .cta-center .btn-submit-ad {
    max-width: 100%;
  }
}

.icon-arrow-sm { font-size: 12px; margin-left: 5px; }
.footer-copy-text { margin: 0; font-weight: 600; }

/* ================= 17. LANDING PAGE (VENDER.PHP) E REDES SOCIAIS ================= */
.lp-main              { padding-top: 80px; background: var(--bg-body); }
.lp-hero              { text-align: center; padding: 60px 20px; max-width: 900px; margin: 0 auto; }
.lp-title             { font-family: var(--font-heading); font-weight: 900; font-size: 3.5rem; color: var(--gray-900); line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 20px; }
.lp-subtitle          { font-size: 1.2rem; color: var(--gray-700); line-height: 1.6; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }
.lp-cta-wrapper       { max-width: 400px; margin: 0 auto; }
.lp-trust-badges      { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.lp-trust-item        { display: flex; align-items: center; gap: 8px; color: var(--gray-600); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.lp-trust-item i      { color: var(--success-green); font-size: 16px; }
.badge-type-inline    { display: inline-flex; }
.badge-type-lg        { font-size: 13px; padding: 8px 16px; border-radius: 6px; letter-spacing: 0.5px; }
.social-btn-container { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.btn-social           { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 25px; border-radius: var(--radius-md); font-weight: 900; font-size: 14px; text-transform: uppercase; color: #fff !important; transition: var(--transition-normal); min-width: 200px; }
.btn-social:hover     { transform: translateY(-3px); filter: brightness(1.1); }
.btn-instagram        { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 5px 15px rgba(220, 39, 67, 0.2); }
.btn-instagram:hover  { box-shadow: 0 10px 25px rgba(220, 39, 67, 0.3); }
.btn-facebook         { background: #1877F2; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.2); }
.btn-facebook:hover   { box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3); }
/* --- BANNER BEV EXCLUSIVO --- */
.bev-exclusive-banner { background: rgba(26, 26, 26, 0.95); border: 1px solid var(--primary-color); border-radius: var(--radius-md); padding: 15px 20px; margin: 30px auto 0; max-width: 500px; display: flex; align-items: center; gap: 15px; text-align: left; box-shadow: 0 10px 25px rgba(255, 237, 0, 0.1); }
.bev-badge            { background: var(--primary-color); color: #000; font-weight: 900; font-size: 10px; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
.bev-exclusive-banner p { color: #fff; font-size: 12px; line-height: 1.5; margin: 0; }
.bev-exclusive-banner strong { color: var(--primary-color); }

/* --- COMPONENTES EXTRAS: LOGO ANIMADO E CRO --- */
.lp-logo-link         { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--transition-fast); text-decoration: none; font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--text-main); letter-spacing: -1px; margin-bottom: var(--space-xl); }
.lp-logo-link:hover   { transform: scale(1.05); }
.lp-logo              { max-width: 55px; height: auto; filter: drop-shadow(0 0 5px rgba(255, 237, 0, 0.5)); animation: bolt-glow 2s ease-in-out infinite; }
.lp-features-grid     { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 3rem; text-align: left; }
.lp-feature-card      { background: rgba(255, 255, 255, 0.05); padding: 1.5rem; border-radius: var(--radius-md); border-left: 4px solid var(--primary-color); }
.lp-feature-card i    { font-size: 2rem; color: var(--primary-color); margin-bottom: 1rem; }
.lp-feature-card h3   { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text-main); font-family: var(--font-heading); font-weight: 800; }
.lp-feature-card p    { font-size: 0.95rem; color: var(--text-muted); line-height: 1.4; }
.lp-cta-wrapper .btn-submit-ad { font-size: 1.1rem; padding: 1.2rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }

/* ==========================================
   INDICADOR LIVE (LUZINHA PISCANDO DESKTOP)
   ========================================== */
.live-dot                     { width: 8px; height: 8px; background-color: #ff5555; border-radius: 50%; display: inline-block; margin-right: 6px; position: relative; vertical-align: middle; }
.live-dot::after              { content: ''; width: 100%; height: 100%; background-color: #ff5555; border-radius: 50%; position: absolute; top: 0; left: 0; animation: pulse-live 1.5s infinite ease-in-out; }
@keyframes pulse-live         { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }
.news-badge-home              { display: inline-flex !important; align-items: center; }

/* ================= CTA BLOG (CONVERSÃO) ================= */
.cta-center {
  margin: var(--space-lg) 0;
  text-align: center;
}

.cta-center .btn-submit-ad {
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

/* ================= 19. MINI-SITE B2B (LOJA.PHP) ================= */
.loja-header          { background: var(--bg-card); border-radius: 12px; padding: 30px; margin-top: 20px; margin-bottom: 30px; display: flex; gap: 30px; align-items: center; border: 1px solid var(--gray-400); box-shadow: 0 4px 15px rgba(0,0,0,0.03); flex-wrap: wrap; position: relative; overflow: hidden; }
.loja-header::before  { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--primary-color); z-index: 1; }
.loja-logo-box        { width: 130px; height: 130px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--primary-color), 0 5px 15px rgba(0,0,0,0.08); flex-shrink: 0; background: #fff; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 5px; }
.loja-logo-box img    { width: 100%; height: 100%; object-fit: contain; }
.loja-info            { flex: 1; min-width: 280px; z-index: 2; }
.loja-title           { font-size: 26px; font-weight: 900; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; color: var(--gray-900); }
.loja-badge           { background: rgba(37, 211, 102, 0.1); color: var(--success-green); font-size: 11px; padding: 5px 10px; border-radius: 6px; font-weight: 900; border: 1px solid rgba(37, 211, 102, 0.3); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 5px; }
.loja-desc            { color: var(--gray-700); font-size: 14px; margin-bottom: 15px; line-height: 1.6; font-weight: 600; }
.loja-meta            { display: flex; gap: 20px; font-size: 13px; color: var(--gray-800); font-weight: 700; flex-wrap: wrap; }
.loja-meta span       { display: flex; align-items: center; gap: 6px; }
.loja-meta i          { color: var(--primary-color); font-size: 16px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); }
.loja-action          { text-align: right; min-width: 220px; z-index: 2; }
.btn-whats-loja       { background: var(--success-green); color: #fff; padding: 15px 20px; border-radius: 8px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: 0.2s ease; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; width: 100%; border: none; }
.btn-whats-loja:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); filter: brightness(1.05); color: #fff; }
.loja-stats           { font-size: 18px; font-weight: 900; margin: 30px 0 20px; border-bottom: 2px solid var(--gray-400); padding-bottom: 15px; display: flex; justify-content: space-between; align-items: flex-end; color: var(--gray-900); }
.loja-stats-count     { font-size: 12px; color: var(--gray-600); font-weight: 700; text-transform: uppercase; }
.loja-header-vertical { padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; position: relative; }
.loja-cover-box { width: 100%; height: 200px; position: relative; }
.loja-cover-img { width: 100%; height: 100%; object-fit: cover; }
.loja-cover-empty { width: 100%; height: 80px; background: linear-gradient(to right, #f8f9fa, #e9ecef); }
.loja-logo-overlap { margin-top: -50px; z-index: 2; border: 4px solid #fff; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.loja-logo-overlap img { width: 100%; height: 100%; object-fit: cover; }
.loja-info-vertical { padding: 15px 20px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.loja-title-center { margin-bottom: 10px; text-align: center; width: 100%; display: block; font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: var(--gray-900); }
.loja-desc-center { color: var(--gray-700); margin-bottom: 15px; font-size: 14px; line-height: 1.6; text-align: center; max-width: 800px; font-weight: 600; }
.loja-meta-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; font-size: 13px; color: var(--gray-800); width: 100%; text-align: center; font-weight: 700; }
.loja-meta-center span { display: flex; align-items: center; gap: 6px; }
.loja-meta-center i { color: var(--primary-color); font-size: 16px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); }
.loja-action-box { padding: 10px 20px 25px 20px; }
.btn-whats-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--success-green); color: #fff; padding: 12px 24px; border-radius: 50px; font-weight: 900; text-decoration: none; transition: var(--transition-fast); text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; }
.btn-whats-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); filter: brightness(1.05); color: #fff; }
.mt-lg-custom { margin-top: 30px; }

/* ================= 20. MEDIA QUERIES (REVISÃO ESTABILIDADE DIAMANTE) ================= */

/* --- DESKTOP --- */
@media (min-width: 1024px) { 
  .brand-scroll-btn             { display: flex; } 
  .brands-carousel-track        { padding: 0 45px 15px 45px; } 
  .main-wrapper                 { max-width: 1300px; } 
  #catalogo-container           { display: grid; grid-template-columns: 280px 1fr; gap: 30px; padding: 30px; align-items: start; } 
  .filters                      { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border: 1px solid var(--border-color); border-radius: 10px; align-self: start; box-shadow: 0 2px 10px rgba(0,0,0,0.02); } 
  .grid                         { min-height: 60vh; align-content: start; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); contain: layout; width: 100%; }

  /* BANNER ÚLTIMA NOTÍCIA (HOME - DESKTOP) */
  .news-strip-desktop           { display: block; margin-top: 15px; background: #111827; border-left: 4px solid #ffcc00; padding: 15px 20px; border-radius: 0 8px 8px 0; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  .news-strip-desktop:hover     { transform: translateX(5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
  .news-link-home               { text-decoration: none; display: flex; flex-direction: column; gap: 8px; color: #fff; }
  .news-badge-home              { background: #ffcc00; color: #000; font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-start; }
  .news-title-home              { font-size: 14px; font-weight: 700; line-height: 1.4; color: #f3f4f6; }
  .news-icon-wrapper            { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
  .news-read-more               { font-size: 11px; color: #9ca3af; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
  .news-icon-wrapper i          { color: #ffcc00; font-size: 12px; transition: transform 0.2s ease; }
  .news-strip-desktop:hover .news-icon-wrapper i { transform: translateX(3px); }
}


/* ================= 21. SEO MAPA E LANDING PAGES (CLUSTER CARREGADORES) ================= */
.seo-header-basic     { background: #111; padding: 15px 20px; text-align: center; }
.seo-header-logo      { color: #fff; font-family: var(--font-heading); font-weight: 900; font-size: 24px; text-decoration: none; }
.seo-header-logo i    { color: var(--primary-color); }
.wrapper-seo-map      { box-shadow: none; border: none; background: transparent; }
.seo-map-header       { background: #fff; padding: 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.breadcrumb           { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 15px; text-transform: uppercase; }
.breadcrumb a         { color: var(--primary-color); text-decoration: none; }
.breadcrumb a:hover   { text-decoration: underline; }
.seo-h1               { font-family: var(--font-heading); font-size: 28px; font-weight: 900; color: var(--text-main); line-height: 1.2; margin-bottom: 10px; }
.seo-h2-title         { font-size: 18px !important; }
.seo-intro            { font-size: 15px; color: var(--text-muted); max-width: 800px; line-height: 1.6; }
.map-container-box    { width: 100%; height: 500px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 30px; position: relative; z-index: 1; }
#mapa-zvolts          { width: 100%; height: 100%; }
.station-grid         { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; margin-bottom: 40px; }
.station-card         { background: #f9f9f9; border: 1px solid var(--border-color); padding: 15px; border-radius: var(--radius-sm); transition: 0.3s; }
.station-card:hover   { border-color: var(--primary-color); box-shadow: 0 5px 10px rgba(0,0,0,0.03); transform: translateY(-2px); }
.station-title        { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.station-title i      { color: var(--primary-color); }
.station-meta         { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.seo-cta-box          { background: rgba(255, 237, 0, 0.1); border-left: 4px solid var(--primary-color); padding: 25px; border-radius: var(--radius-md); margin-top: 30px; }
.seo-cta-title        { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--text-main); margin-bottom: 10px; }
.seo-cta-buttons      { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-auto-width       { width: auto !important; }
.btn-outline-auto     { width: auto !important; background: #fff !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; }
.btn-outline-auto:hover { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #000 !important; }
.max-w-150            { max-width: 150px; }

/* ================= 22. MODAL CALCULADORA ROI E FAB ================= */

/* 2. Container do Modal e Botão Fechar (Escopo Forte pelo ID do modal) */
#modal-calculadora .modal-box-calc { overflow-y: auto; display: block; max-height: 85vh; position: relative; }

/* 3. Estilos internos do Card da Calculadora */
#modal-calculadora .calc-card { padding: 15px 0 0 0; }
#modal-calculadora .calc-main-title { font-family: var(--font-heading); font-size: 24px; font-weight: 900; color: var(--text-main); line-height: 1.2; margin-bottom: 8px; text-align: center; }
#modal-calculadora .calc-sub-title { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 25px; }
#modal-calculadora .input-grid { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
#modal-calculadora .input-group { display: flex; flex-direction: column; gap: 5px; width: 100%; }
#modal-calculadora .dual-input-row { display: flex; gap: 15px; }
#modal-calculadora .dual-input-row .input-group { flex: 1; }
#modal-calculadora .label-heavy, #modal-calculadora .label-sm-heavy { font-size: 11px; font-weight: 800; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.5px; }
#modal-calculadora .input-km-hero { width: 100%; padding: 15px; font-size: 24px; font-weight: 900; text-align: center; border: 2px solid var(--primary-color); border-radius: var(--radius-md); background: rgba(255, 237, 0, 0.05); color: #b89500; outline: none; transition: 0.3s; }
#modal-calculadora .input-km-hero:focus { box-shadow: 0 0 15px rgba(255, 237, 0, 0.2); background: #fff; }
#modal-calculadora .input-hint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 4px; }
#modal-calculadora .input-field-dark { width: 100%; padding: 12px; font-size: 16px; font-weight: 800; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-main); text-align: center; outline: none; transition: 0.3s; }
#modal-calculadora .input-field-dark:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(255, 237, 0, 0.2); }
#modal-calculadora .result-box-gold { background: linear-gradient(135deg, #111 0%, #222 100%); border-radius: var(--radius-md); padding: 25px; text-align: center; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.2); position: relative; overflow: hidden; margin-bottom: 20px; }
#modal-calculadora .result-box-gold::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--primary-color); }
#modal-calculadora .res-inner { margin-bottom: 15px; }
#modal-calculadora .res-label-main { display: block; font-size: 11px; font-weight: 800; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
#modal-calculadora .res-value-hero { display: block; font-size: 42px; font-weight: 900; color: var(--primary-color); line-height: 1; text-shadow: 0 2px 10px rgba(255, 237, 0, 0.2); }
#modal-calculadora .benefit-tag-dynamic { display: inline-block; background: rgba(37, 211, 102, 0.15); color: var(--success-green); padding: 6px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; border: 1px solid rgba(37, 211, 102, 0.3); margin-bottom: 20px; transition: 0.3s; }
#modal-calculadora .res-footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; }
#modal-calculadora .res-col { display: flex; flex-direction: column; }
#modal-calculadora .res-label-sm { font-size: 10px; color: #888; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
#modal-calculadora .val-secondary-hero { font-size: 18px; font-weight: 900; color: #fff; }
#modal-calculadora .cta-box-calc { text-align: center; background: rgba(255, 237, 0, 0.05); padding: 20px; border-radius: var(--radius-md); border: 1px dashed var(--primary-color); }
#modal-calculadora .cta-text { font-size: 12px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
#modal-calculadora .btn-anunciar-calc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary-color); color: #000; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 900; text-transform: uppercase; text-decoration: none; transition: 0.3s; width: 100%; }
#modal-calculadora .btn-anunciar-calc:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 237, 0, 0.4); filter: brightness(1.05); }

/* =====================================================================
   ZVOLTS - LANDING PAGE VENDER (UPGRADE VISUAL DIAMANTE)
   ===================================================================== */

/* 1. Rotas de Fuga (Escape Links) */
.lp-escape-link-wrap { text-align: center; margin: 15px 0 30px; }
.lp-escape-link { color: inherit; opacity: 0.8; font-size: 17px; text-decoration: underline; font-weight: 600; transition: opacity 0.3s; }
.lp-escape-link:hover { opacity: 1; }

/* 2. Grid de Vantagens (Features) */
.lp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 40px; }
.lp-feature-card { background: var(--bg-secondary, #f8f9fa); padding: 35px 25px; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lp-feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--primary-color); }
.lp-feature-card i { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; display: inline-block; background: rgba(243, 182, 38, 0.1); width: 80px; height: 80px; line-height: 80px; border-radius: 50%; }
.lp-feature-card h3 { font-size: 1.2rem; margin-bottom: 12px; font-weight: 800; color: var(--text-color); }
.lp-feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* 3. Bloco de Conteúdo SEO Premium */
.seo-premium-box { background: var(--bg-color, #ffffff); padding: 40px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-bottom: 40px; }
.seo-premium-box p { color: var(--text-muted); line-height: 1.7; margin-bottom: 15px; font-size: 15px; }
.seo-premium-box ul { list-style: none; padding-left: 0; margin: 20px 0; }
.seo-premium-box ul li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 15px; color: var(--text-muted); font-weight: 500; }
.seo-premium-box ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0; color: #28a745; font-size: 16px; }

/* 4. Cartões de FAQ Modernos */
.faq-card { background: var(--bg-color, #ffffff); border-left: 4px solid var(--primary-color); padding: 25px 30px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); transition: background 0.3s; }
.faq-card:hover { background: var(--bg-secondary, #fefefe); }
.faq-question { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; color: var(--text-color); margin-top: 0; }
.faq-answer { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* 5. Footer Clean (Sem inline-css) */
.lp-footer { border-top: 1px solid var(--border-color); padding: 50px 20px 30px; margin-top: 60px; text-align: center; background: var(--bg-secondary, #f8f9fa); }
.lp-footer-container { max-width: 900px; margin: 0 auto; }
.lp-footer-links { margin-top: 25px; display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }
.lp-footer-links a { color: var(--text-color); font-size: 14px; font-weight: 700; transition: color 0.3s; text-decoration: none; }
.lp-footer-links a:hover { color: var(--primary-color); }
.lp-footer-disclaimer { margin-top: 35px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); opacity: 0.8; letter-spacing: 0.5px; line-height: 1.6; }

/* =====================================================================
   ZVOLTS - ALINHAMENTO DESKTOP DA LANDING PAGE (VENDER)
   ===================================================================== */

/* 1. Trava o crescimento infinito no Desktop e centraliza o bloco */
.lp-hero,
.lp-seo-content,
.lp-faq-section {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Garante que o texto da caixa SEO fique alinhado à esquerda dentro do bloco central */
.seo-premium-box {
    text-align: left;
}

/* 2. Otimização VIP exclusiva para Telas Grandes (Desktop/Tablets) */
@media (min-width: 768px) {
    .lp-hero {
        text-align: center; /* Centraliza todo o texto principal no PC */
        padding-top: 40px;
    }

    .lp-title {
        font-size: 2.8rem;
        line-height: 1.2;
    }

    .lp-subtitle {
        max-width: 700px;
        margin: 0 auto 30px auto; /* Centraliza o parágrafo */
        font-size: 1.1rem;
    }

    .lp-cta-wrapper {
        max-width: 450px;
        margin: 0 auto; /* Centraliza os botões de ação */
    }

    .bev-exclusive-banner {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Os cartões continuam alinhados à esquerda por dentro para melhor leitura */
    .lp-feature-card {
        text-align: left; 
    }
}



/* --- FAB MENU - POSIÇÃO ELITE (APENAS DESKTOP) --- */
@media (min-width: 992px) {
  .fab-container                { bottom: auto; top: 50%; transform: translateY(-50%); right: calc(50% - 730px + 20px); }
  .fab-menu-wrapper .fab-dropdown-menu { bottom: 100%; margin-bottom: 15px; right: 0; }
}
@media (min-width: 1460px) { 
  .fab-container                { right: calc(50% - 730px + 20px); } 
}

/* --- TABLET --- */
@media (max-width: 900px) { 
  .main-wrapper                 { width: 100% !important; max-width: 100% !important; border: none !important; box-shadow: none; } 
  .content                      { padding: 15px !important; } 
  .detail-grid                  { display: flex !important; flex-direction: column; } 
  .detail-info                  { grid-column: auto; margin-top: 20px; padding: 0 !important; width: 100% !important; background: transparent; border: none; position: static !important; top: auto !important; height: auto !important; box-shadow: none !important; } 
  .desc-box                     { margin-top: 30px; padding-top: 20px; } 
  .gallery-container            { grid-column: auto; } 
  .main-img-box                 { width: 100% !important; height: 280px !important; border-radius: 12px !important; border: 1px solid var(--border-color) !important; background: #e9e9e9 !important; } 
  .main-img-box img             { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.03); } 
  .spec-grid-box                { grid-template-columns: 1fr 1fr; gap: 10px; } 
  .vehicle-title-lg             { font-size: 24px; } 
  .price-display-lg             { font-size: 32px; } 
  .news-strip-desktop           { display: none; } /* Esconde no Tablet/Mobile */
}

/* --- MOBILE --- */
@media (max-width: 768px) { 
  .form-grid, .form-grid-3      { grid-template-columns: 1fr; gap: var(--space-sm); } 
  .upload-grid                  { grid-template-columns: repeat(3, 1fr); } 
  .upload-slot.main-photo       { grid-column: span 3; aspect-ratio: 16/9; } 
  .ad-form-box                  { padding: var(--space-md); border-radius: 0; box-shadow: none; border: none; } 
  .logo-z-desktop               { display: none !important; }
  .logo-z-mobile                { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 5px; }
  .logo-z-mobile img            { width: 35px; height: auto; }
}

/* --- MOBILE PEQUENO (600px) --- */
@media (max-width: 600px) { 
  html, body                    { width: 100%; overflow-x: hidden; }
  .logo                         { font-size: 50px !important; text-align: center; }
  .btn-header-painel            { height: 36px; padding: 0 12px; font-size: 11px; }
  .btn-header-sair              { height: 36px; padding: 0 12px; font-size: 11px; }
  .brands-carousel-track        { padding: 5px 5px 10px 5px !important; }
  .main-brands-carousel-wrapper { margin-bottom: 10px !important; }
  .content-header-flex          { flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 10px; }
  .content-header-flex > div:first-child { flex: 1; min-width: 0; }
  .page-title, .results-count   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sort-select                  { flex-shrink: 0; max-width: 140px; padding: 8px 10px; font-size: 13px; }
  #modal-localizacao .sort-select { max-width: 100%; }
  .grid                         { grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; contain: layout; align-content: start; }
  .grid article, .grid article a, .card, .card-body { min-width: 0; }
  .card-body                    { padding: 10px; } 
  .card-img-box                 { height: 145px; } 
  .card-title                   { font-size: 13px; } 
  .card-price                   { font-size: 16px; }
  .fab-container                { bottom: 20px; right: 20px; gap: 10px; width: auto; pointer-events: none; }
  .fab-btn, .fab-menu-wrapper   { pointer-events: auto; }
  .fab-login-primary, .fab-anuncio-primary, .fab-loc-primary { width: 50px !important; height: 50px !important; font-size: 20px !important; }
  .fab-info-secondary           { width: 38px; height: 38px; font-size: 14px; }
  .fab-dropdown-menu            { right: 50px; bottom: 0; }
  .dual-input-row               { flex-direction: column; gap: 10px; }
  .res-value-hero               { font-size: 36px; }
  .modal-box-calc               { padding: 20px !important; }
}