/* =====================================================================
   theme.css - TEMA DEL SITO (colori personalizzati)
   Caricato da header.php solo se "Tema personalizzato" è attivo in
   Impostazioni → Tema. I colori sono le variabili --t-* definite in
   header.php con i valori scelti nel pannello: qui non ci sono colori fissi.

   1) Regole generate dai fogli di stile del sito (index.css, cars.css,
      single-car.css e gli <style> delle pagine): stessi selettori, con
      sfondi chiari / testi scuri / bordi chiari sostituiti dalle variabili.
      Il prefisso "html" e !important le fanno vincere sugli originali.
   ===================================================================== */

/* --- index.css --- */
html .banner-text { border: 1px solid var(--t-border) !important; }
html .banner-button { background: var(--t-surface) !important; color: var(--t-text) !important; }
html .dot.active { background: var(--t-surface) !important; }
html .filter-section { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; border-bottom: 1px solid var(--t-border) !important; }
html .filter-group label { color: var(--t-text) !important; }
html .select-wrapper select { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .select-arrow { background: var(--t-surface) !important; }
html .filter-group select, html .filter-group input { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html #price-slider::-webkit-slider-thumb { border: 3px solid var(--t-border) !important; }
html #price-slider::-moz-range-thumb { border: 3px solid var(--t-border) !important; }
html .price-value-display { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .custom-select__trigger { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .custom-options { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .custom-option:hover { background: var(--t-surface) !important; }
html .custom-option.selected { background: var(--t-surface-2) !important; }
html .car-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .car-title-small { color: var(--t-text) !important; }
html .car-price { color: var(--t-text) !important; }
html .car-specs { color: var(--t-muted) !important; border-top: 1px solid var(--t-border) !important; }
html .no-results { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .no-results p { color: var(--t-muted) !important; }
html .view-all-button { color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .view-all-button:hover { background: var(--t-surface) !important; }
html .brands-section { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; border-bottom: 1px solid var(--t-border) !important; }
html .section-title { color: var(--t-text) !important; }
html .brand-item { color: var(--t-text) !important; }
html .brand-logo-container { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .brand-name { color: var(--t-muted) !important; }
html .brands-prev, html .brands-next { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .info-section { background: var(--t-surface) !important; }
html .reviews-section { background: var(--t-surface) !important; }
html .reviews-placeholder { color: var(--t-muted) !important; }
html .grs-rating { color: var(--t-text) !important; }
html .grs-count { color: var(--t-muted) !important; }
html .google-review-card { background: var(--t-surface) !important; }
html .reviews-prev, html .reviews-next { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .grc-author { color: var(--t-text) !important; }
html .grc-text { color: var(--t-text) !important; }
html .grc-time { color: var(--t-muted) !important; }
html .info-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .info-card:hover { background: var(--t-surface) !important; }
html .info-card h3 { color: var(--t-text) !important; }
html .info-card p { color: var(--t-muted) !important; }
@media (max-width: 768px) {
  html .banner-text { border: 1px solid var(--t-border) !important; }
}
html .home-intro { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
html .home-intro-title { color: var(--t-text) !important; }
html .home-intro-text { color: var(--t-muted) !important; }
html .home-intro-tags li { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .home-intro-btn-outline { color: var(--t-text) !important; }

/* --- cars.css --- */
html .page-title { color: var(--t-text) !important; }
html .filters-section { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .filter-group label { color: var(--t-text) !important; }
html .select-wrapper select { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .select-arrow { background: var(--t-surface) !important; }
html .filter-group input { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .btn-secondary { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .btn-secondary:hover { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; }
html .car-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .car-title { color: var(--t-text) !important; }
html .car-price { color: var(--t-text) !important; }
html .car-specs { color: var(--t-muted) !important; border-top: 1px solid var(--t-border) !important; }
html .pagination { border-top: 1px solid var(--t-border) !important; }
html .pagination-link { background-color: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .pagination-link:hover { background-color: var(--t-surface-2) !important; border-color: var(--t-border) !important; }
html .no-results { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .no-results p { color: var(--t-muted) !important; }

/* --- single-car.css --- */
html body { background-color: var(--t-surface) !important; color: var(--t-text) !important; }
html .car-meta-info { background: var(--t-surface) !important; color: var(--t-muted) !important; }
html .left-column { background: var(--t-surface) !important; }
html .car-header { border-bottom: 1px solid var(--t-border) !important; }
html .brand-logo-inline { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .car-title { color: var(--t-text) !important; }
html .car-subtitle { color: var(--t-muted) !important; }
html .car-subtitle .separator { color: var(--t-muted) !important; }
html .car-subtitle span:not(.separator) { background: var(--t-surface) !important; }
html .price-section-mobile { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
html .specifications-section-mobile { border-bottom: 1px solid var(--t-border) !important; }
html .features-section-mobile { border-bottom: 1px solid var(--t-border) !important; }
html .thumbnails-vertical::-webkit-scrollbar-track { background: var(--t-surface-2) !important; }
html .thumbnails-vertical::-webkit-scrollbar-thumb { background: var(--t-surface-2) !important; }
html .thumbnail { background: var(--t-surface) !important; }
html .main-image-container { background: var(--t-surface) !important; }
html .description-section { border-top: 1px solid var(--t-border) !important; }
html .section-title { color: var(--t-text) !important; border-bottom: 1px solid var(--t-border) !important; }
html .description-content { color: var(--t-text) !important; }
html .price-section-desktop { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .specifications-section-desktop { background: var(--t-surface) !important; }
html .features-section-desktop { background: var(--t-surface) !important; }
html .contact-form-section-desktop { background: var(--t-surface) !important; }
html .spec-item { border-bottom: 1px solid var(--t-border) !important; }
html .spec-label { color: var(--t-muted) !important; }
html .spec-value { color: var(--t-text) !important; }
html .price-label { color: var(--t-muted) !important; }
html .feature-item-left { background: var(--t-surface) !important; color: var(--t-text) !important; }
html .feature-item-left:hover { background: var(--t-surface-2) !important; }
html .btn-secondary { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .btn-secondary:hover { background: var(--t-surface) !important; }
html .form-group input, html .form-group textarea { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .form-group input:focus, html .form-group textarea:focus { background: var(--t-surface) !important; }
html .similar-cars-section { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; }
html .similar-title { color: var(--t-text) !important; }
html .similar-car { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .similar-image { background: var(--t-surface) !important; }
html .similar-car-title { color: var(--t-text) !important; }
html .similar-details { border-top: 1px solid var(--t-border) !important; }
html .similar-year { color: var(--t-muted) !important; }
html .popup-content { background: var(--t-surface) !important; }
html .popup-header { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
html .popup-header h3 { color: var(--t-text) !important; }
html .close-popup { color: var(--t-muted) !important; }
html .close-popup:hover { color: var(--t-text) !important; }
html .popup-body { color: var(--t-muted) !important; }
html .popup-body strong { color: var(--t-text) !important; }
html .popup-progress { background: var(--t-surface-2) !important; }
@media (max-width: 1024px) {
  html .price-section-mobile { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
  html .specifications-section-mobile { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
  html .features-section-mobile { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
  html .contact-buttons-mobile { background: var(--t-surface) !important; border-bottom: 1px solid var(--t-border) !important; }
  html .contact-form-section-mobile { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; }
  html .action-buttons-mobile { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; }
  html .description-section { border-top: 1px solid var(--t-border) !important; }
}

/* --- single-car.php --- */
html img[loading="lazy"] { background-color: var(--t-surface-2) !important; }

/* --- contact.php --- */
html .contact-page { background: var(--t-surface) !important; }
html .map-section { background: var(--t-surface) !important; }
html .map-wrapper { background: var(--t-surface) !important; border-top: 1px solid var(--t-border) !important; border-bottom: 1px solid var(--t-border) !important; }
html .map-address { background: var(--t-surface) !important; color: var(--t-text) !important; border: 1px solid var(--t-border) !important; }
html .map-address a { color: var(--t-text) !important; }
html .section-title h2 { color: var(--t-text) !important; }
html .contact-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .card-icon { background: var(--t-surface) !important; }
html .contact-card h3 { color: var(--t-text) !important; }
html .card-content { color: var(--t-muted) !important; }
html .card-content a { color: var(--t-text) !important; border-bottom: 1px solid var(--t-border) !important; }
html .card-content p { color: var(--t-muted) !important; }
html .info-column h3 { color: var(--t-text) !important; }
html .hours-list { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .hours-list li { border-bottom: 1px solid var(--t-border) !important; }
html .hours-list .day { color: var(--t-text) !important; }
html .hours-list .time { color: var(--t-muted) !important; }
html .social-section h4 { color: var(--t-text) !important; }
html .social-link { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .form-column { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .form-column h3 { color: var(--t-text) !important; }
html .form-group input, html .form-group textarea { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .form-group input:focus, html .form-group textarea:focus { background: var(--t-surface) !important; }
html .alert-success { background: var(--t-surface) !important; color: var(--t-text) !important; }
html .alert-error { background: var(--t-surface) !important; }

/* --- sell-car.php --- */
html .sell-page { background: var(--t-surface) !important; }
html .sell-hero h1 { color: var(--t-text) !important; }
html .sell-hero p { color: var(--t-muted) !important; }
html .sell-form-box { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .sell-fieldset legend { color: var(--t-text) !important; }
html .form-group label { color: var(--t-text) !important; }
html .form-group input[type="text"], html .form-group input[type="email"], html .form-group input[type="tel"], html .form-group input[type="number"], html .form-group select, html .form-group textarea { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .form-group input:focus, html .form-group select:focus, html .form-group textarea:focus { background: var(--t-surface) !important; }
html .photo-upload-box { background: var(--t-surface) !important; border: 2px dashed var(--t-border) !important; }
html .photo-upload-box p { color: var(--t-muted) !important; }
html .photo-upload-hint { color: var(--t-muted) !important; }
html .photo-preview-item { background: var(--t-surface-2) !important; border: 1px solid var(--t-border) !important; }
html .consent-group { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .consent-group label { color: var(--t-text) !important; }
html .alert-success { background: var(--t-surface) !important; color: var(--t-text) !important; }
html .alert-error { background: var(--t-surface) !important; }
html .sell-loading-box { background: var(--t-surface) !important; }
html .sell-loading-spinner { border: 4px solid var(--t-border) !important; }
html .sell-loading-box h3 { color: var(--t-text) !important; }
html .sell-loading-box p { color: var(--t-muted) !important; }

/* --- 404.php --- */
html .error-page { background: var(--t-surface) !important; }
html .error-title { color: var(--t-text) !important; }
html .error-message { color: var(--t-muted) !important; }
html .error-detail { background: var(--t-surface) !important; color: var(--t-muted) !important; border: 1px solid var(--t-border) !important; }
html .error-detail code { background: var(--t-surface) !important; }
html .btn-error-secondary { background: var(--t-surface) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; }
html .btn-error-secondary:hover { background: var(--t-surface) !important; }
html .suggestions-title { color: var(--t-text) !important; }
html .suggestion-card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .suggestion-image { background: var(--t-surface) !important; }
html .suggestion-title { color: var(--t-text) !important; }
html .suggestion-details { border-top: 1px solid var(--t-border) !important; }
html .suggestion-year { color: var(--t-muted) !important; }

/* --- privacy.php --- */
html .legal-page { color: var(--t-text) !important; }
html .legal-page .legal-updated { color: var(--t-muted) !important; }
html .legal-page nav.legal-toc { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; }
html .legal-page h2 { border-top: 2px solid var(--t-border) !important; }
html .legal-page th, html .legal-page td { border: 1px solid var(--t-border) !important; }
html .legal-page th { background: var(--t-surface) !important; }
html .legal-page .legal-box { background: var(--t-surface) !important; }

/* =====================================================================
   2) REGOLE SCRITTE A MANO - accento, pulsanti, dettagli
   (dopo le regole automatiche: a parità di selettore vincono queste)
   ===================================================================== */

/* --- Base --- */
html body { background: var(--t-bg) !important; background-color: var(--t-bg) !important; color: var(--t-text) !important; }
html ::selection { background: var(--t-accent); color: var(--t-accent-text); }
html footer { background-color: var(--t-footer-bg) !important; border-top: 1px solid var(--t-border); }
html footer a:hover { color: var(--t-accent) !important; }

/* Sezioni a tutta larghezza: alternanza fondo / riquadro */
html .cars-section, html .similar-cars-section { background: var(--t-bg) !important; }
html .filter-section, html .brands-section, html .info-section, html .home-intro { background: var(--t-surface) !important; }

/* --- Titoli di sezione: filetto in accento --- */
html .section-title, html .page-title, html .similar-title { color: var(--t-text) !important; letter-spacing: 0.02em; }
html .cars-section .section-title::after, html .brands-section .section-title::after, html .page-title::after {
    content: ""; display: block; width: 56px; height: 3px; margin: 12px auto 0; background: var(--t-accent); border-radius: 2px;
}
html .page-title::after { margin-left: 0; }

/* --- Pulsanti principali in accento --- */
html .search-button, html .banner-button, html .btn-primary, html .submit-btn, html .btn-submit,
html button[type="submit"].search-button, html .home-intro-btn-primary, html .legal-prefs {
    background: var(--t-accent) !important; background-color: var(--t-accent) !important;
    color: var(--t-accent-text) !important; border-color: var(--t-accent) !important;
}
html .search-button:hover, html .banner-button:hover, html .btn-primary:hover, html .submit-btn:hover, html .btn-submit:hover {
    filter: brightness(1.1);
}
html .view-all-button, html .home-intro-btn-outline, html .btn-secondary {
    background: transparent !important; color: var(--t-accent) !important; border-color: var(--t-accent) !important;
}
html .view-all-button:hover, html .home-intro-btn-outline:hover, html .btn-secondary:hover {
    background: var(--t-accent) !important; color: var(--t-accent-text) !important;
}

/* --- Prezzi, link e icone in accento --- */
html .car-price, html .similar-price, html .price-value, html .price-amount, html .current-price { color: var(--t-accent) !important; }
html .car-specs i, html .spec-icon, html .info-icon, html .info-icon i, html .home-intro-kicker, html .home-intro-tags li i { color: var(--t-accent) !important; }
html .info-icon { background: transparent !important; border: 1px solid var(--t-accent) !important; }
html .legal-page a, html .legal-page nav.legal-toc a, html .map-address a, html .contact-page a:not(.social-link):not(.btn) { color: var(--t-accent) !important; }
html .legal-page .legal-box { border-left-color: var(--t-accent) !important; }

/* --- Schede auto --- */
html .car-card, html .similar-car { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
html .car-card:hover, html .similar-car:hover { border-color: var(--t-accent) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important; }
html .car-image-container, html .similar-image, html .main-image-container, html .thumbnail { background: #000 !important; }

/* --- Moduli --- */
html input[type="text"], html input[type="email"], html input[type="tel"], html input[type="number"], html input[type="search"],
html select, html textarea {
    background-color: var(--t-surface-2) !important; color: var(--t-text) !important; border-color: var(--t-border) !important;
}
html input::placeholder, html textarea::placeholder { color: var(--t-muted) !important; opacity: 0.8; }
html input:focus, html select:focus, html textarea:focus { border-color: var(--t-accent) !important; outline: none; box-shadow: 0 0 0 2px rgba(201, 151, 63, 0.25) !important; }
html label { color: var(--t-text); }
html .custom-select__trigger, html .custom-options, html .select-arrow, html .price-value-display { background: var(--t-surface-2) !important; color: var(--t-text) !important; }
html .custom-option { color: var(--t-text) !important; }
html .custom-option:hover, html .custom-option.selected { background: var(--t-border) !important; }
html #price-slider { accent-color: var(--t-accent); }
html #price-slider::-webkit-slider-thumb { background: var(--t-accent) !important; border-color: var(--t-bg) !important; }
html #price-slider::-moz-range-thumb { background: var(--t-accent) !important; border-color: var(--t-bg) !important; }

/* --- Loghi delle marche: restano su fondo chiaro, altrimenti i loghi scuri spariscono --- */
html .brand-logo-container, html .brand-logo-inline, html .option-logo-placeholder, html .custom-option img, html .custom-select__trigger img {
    background: #ffffff !important; border-color: var(--t-border) !important;
}
html .brand-item:hover .brand-logo-container { border-color: var(--t-accent) !important; }
html .brand-name { color: var(--t-muted) !important; }

/* --- Frecce caroselli / slider --- */
html .brands-prev, html .brands-next, html .slider-prev, html .slider-next {
    background: var(--t-surface-2) !important; color: var(--t-text) !important; border-color: var(--t-border) !important;
}
html .brands-prev:hover, html .brands-next:hover { background: var(--t-accent) !important; color: var(--t-accent-text) !important; }
html .dot.active { background: var(--t-accent) !important; }

/* --- Paginazione --- */
html .pagination-link.active, html .pagination-link.current { background: var(--t-accent) !important; color: var(--t-accent-text) !important; border-color: var(--t-accent) !important; }

/* --- Pagina legale e tabelle --- */
html .legal-page, html .legal-page h1, html .legal-page h2, html .legal-page h3 { color: var(--t-text) !important; }
html .legal-page h2 { border-top-color: var(--t-border) !important; }
html .legal-page th, html .legal-page td { border-color: var(--t-border) !important; }

/* --- Segnaposto della mappa (pagina contatti) --- */
html .consent-placeholder { color: var(--t-muted) !important; }
html .consent-placeholder button { background: var(--t-accent) !important; color: var(--t-accent-text) !important; }
html .map-wrapper { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; }

/* --- Presentazione in homepage --- */
html .home-intro { border-top: 1px solid var(--t-border); }
html .home-intro-tags li { background: var(--t-surface-2) !important; }

/* --- Barre di scorrimento --- */
html { scrollbar-color: var(--t-border) var(--t-bg); }

/* --- Etichette sulle auto e pulsante "Chiama" in accento (WhatsApp e "Venduta" tengono i loro colori) --- */
html .custom-badge { background: var(--t-accent) !important; color: var(--t-accent-text) !important; }
html .btn-call { background: var(--t-accent) !important; color: var(--t-accent-text) !important; border-color: var(--t-accent) !important; }
html .btn-call:hover { filter: brightness(1.1); }
html .feature-item-left { border-left-color: var(--t-accent) !important; }
html .thumbnail.active { border-color: var(--t-accent) !important; }