/* =====================================================================
   AC SERVICE — DARK MATTE GLASS THEME
   Overlay stylesheet. Loaded LAST on every page, after all original
   CSS files. Only visual re-skin: colors, backgrounds, shadows, blur,
   radii, typography. No layout, structure, class names, JS or markup
   is touched — the site's behaviour and content stay 100% identical.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* base surfaces — medium-dark slate, not near-black */
  --bg-0:#171d29;
  --bg-1:#1c2333;
  --bg-2:#212a3d;
  --bg-3:#283251;

  /* glass — higher opacity than before so panels read as solid, not see-through */
  --glass:rgba(255,255,255,.07);
  --glass-strong:rgba(255,255,255,.11);
  --glass-hover:rgba(255,255,255,.13);
  --glass-border:rgba(255,255,255,.13);
  --glass-border-strong:rgba(255,255,255,.22);
  --glass-blur:14px;

  /* text */
  --text-1:#f0f3f8;
  --text-2:#c3cad9;
  --text-3:#93a0b5;
  --text-4:#717f97;

  /* accents */
  --accent:#38bdf8;
  --accent-2:#6366f1;
  --accent-cyan:#22d3ee;
  --accent-grad:linear-gradient(135deg,#38bdf8 0%,#6366f1 100%);
  --accent-grad-rev:linear-gradient(135deg,#6366f1 0%,#38bdf8 100%);
  --success:#34d399;
  --success-bg:rgba(52,211,153,.14);
  --danger:#f87171;
  --danger-bg:rgba(248,113,113,.14);
  --warning:#fbbf24;
  --gold:#ffd54a;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --shadow-glass:0 10px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-glass-hover:0 16px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.09);
  --shadow-glow:0 8px 26px rgba(56,189,248,.28);
}

/* ---------------------------------------------------------------------
   0. Base / typography
   --------------------------------------------------------------------- */
*{
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

html{
  background:var(--bg-0);
}

body{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(99,102,241,.13), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(56,189,248,.11), transparent 55%),
    radial-gradient(1200px 800px at 50% 115%, rgba(34,211,238,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-2) 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-2) !important;
  font-family: 'Inter','Manrope','Roboto',sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Manrope','Inter','Roboto',sans-serif !important;
  color: var(--text-1) !important;
  letter-spacing:-.01em;
}

a{ color: var(--accent); }

::selection{ background: rgba(56,189,248,.32); color:#fff; }

/* fine matte grain overlay for the "matte glass" feel */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }

/* ---------------------------------------------------------------------
   1. Header / Hero
   --------------------------------------------------------------------- */
.main-header{
  background:
    linear-gradient(180deg, rgba(23,29,41,.5) 0%, rgba(23,29,41,.8) 65%, var(--bg-1) 100%),
    linear-gradient(rgba(28,35,51,.7), rgba(28,35,51,.7)),
    var(--header-bg, none) !important;
}
.main-header, header.main-header{
  background-image:
    linear-gradient(180deg, rgba(28,35,51,.8) 0%, rgba(28,35,51,.92) 65%, var(--bg-1) 100%),
    url('../images/header-bg-desktop.webp') !important;
  background-size: cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-blend-mode: normal, luminosity !important;
}
@media (max-width: 1024px) and (min-width: 769px){
  .main-header{ background-image:
    linear-gradient(180deg, rgba(28,35,51,.8) 0%, rgba(28,35,51,.92) 65%, var(--bg-1) 100%),
    url('../images/header-bg-tablet.webp') !important;
    background-size:cover !important; background-position:center !important;
    background-blend-mode: normal, luminosity !important; }
}
@media (max-width: 768px){
  .main-header{ background-image:
    linear-gradient(180deg, rgba(28,35,51,.8) 0%, rgba(28,35,51,.92) 65%, var(--bg-1) 100%),
    url('../images/header-bg-mobile.webp') !important;
    background-size:cover !important; background-position:center !important;
    background-blend-mode: normal, luminosity !important; }
}

.logo-text, .header-subtitle{ color:#fff !important; text-shadow:0 2px 18px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------------
   2. Navigation
   --------------------------------------------------------------------- */
.main-nav{
  background:rgba(23,29,41,.9) !important;
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  isolation:isolate; /* keeps the ::before blur layer contained without touching stacking of children */
}
/* Blur is applied via a pseudo-element instead of directly on .main-nav.
   Reason: backdrop-filter/filter on an element creates a new "containing block"
   for any position:fixed descendants. .nav-links (the mobile burger menu panel)
   is position:fixed and a descendant of .main-nav — putting backdrop-filter
   directly on .main-nav broke it, anchoring the fullscreen mobile menu to the
   ~60px-tall nav bar instead of the viewport, so it rendered squashed/cut off
   on mobile. Moving the blur to ::before avoids that while keeping the same look. */
.main-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
}
.nav-links a{ color: var(--text-2) !important; }
.nav-links a i{ color: var(--accent) !important; }
.nav-links a:hover, .nav-links a.active{
  background: var(--glass-hover) !important;
  color: #fff !important;
}
.nav-brand, .nav-brand .logo-text-mini{ color:#fff !important; }
.burger-menu{ color:#fff !important; }
@media (max-width:768px){
  .nav-links{
    background:rgba(23,29,41,.96) !important;
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    border-top:1px solid var(--glass-border);
  }
  .nav-links a{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,.08) !important; }
  .nav-links a.active{ background:rgba(56,189,248,.18) !important; }
}
.mobile-call-btn, .mobile-telegram-btn{ box-shadow:var(--shadow-glass) !important; }

/* ---------------------------------------------------------------------
   2b. Accordions (<details>/<summary>) — price list, FAQ, gallery FAQ.
   The original CSS lights the row up with a light-gray/white background
   on hover/tap (.price-summary:hover, .faq-question:hover) and mobile
   browsers additionally flash their own default tap-highlight overlay
   on <summary>. Neither was overridden for the dark theme, so opening
   a row flashed white. Fix: kill every highlight state so the row's
   background never changes — it just expands/collapses in place.
   --------------------------------------------------------------------- */
.price-summary, .faq-question,
summary{
  -webkit-tap-highlight-color: transparent;
}
.price-summary:hover, .price-summary:focus, .price-summary:focus-visible, .price-summary:active,
.faq-question:hover, .faq-question:focus, .faq-question:focus-visible, .faq-question:active,
.price-details[open] .price-summary, .faq-item[open] .faq-question{
  background: transparent !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------
   3. Generic glass-card treatment
   Every element that originally had a white / light "card" background
   or a soft shadow becomes a frosted dark-glass panel.
   --------------------------------------------------------------------- */
.service-card,
.service-card.highlighted,
.shop-preview-card,
.price-details,
.blog-post,
.review-card,
.avito-link,
.contact-info,
.appointment-form,
.shop-card,
.advantages-card,
.review-card-scroll,
.review-form-card,
.contact-form-wrapper,
.contact-info-wrapper,
.seo-icon,
.filter-btn,
.blog-post-card,
.add-comment,
.external-badge,
.related-article,
.decision-option,
.gallery-controls,
.view-btn,
.filter-select,
.project-card,
.close-details,
.details-content,
.faq-item,
.privacy-policy .container,
.main-image,
.specifications,
.product-description-detailed,
.installation-section,
.install-card,
.seo-content,
.related-products,
.related-item,
.price-table,
.problem-card, .solution-card,
.step-card,
.price-card,
.blog-link,
.cta-button.secondary,
.comparison-table table,
.shop-title,
.discount-text,
.search-box,
.search-input,
.search-input:focus,
.hint-tag,
.search-tip,
.products-section,
.product-card,
.product-order-btn::before,
.warranty-card,
.delivery-info-card,
.modal-container,
.modal-close:hover,
.autocomplete-suggestions{
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-glass) !important;
  color: var(--text-2) !important;
}
.service-card:hover,
.shop-preview-card:hover,
.blog-post-card:hover,
.related-article:hover,
.project-card:hover,
.related-item:hover,
.install-card:hover,
.step-card:hover,
.price-card:hover,
.product-card:hover,
.benefit:hover,
.drive2-reference:hover,
.thumbnail:hover, .thumbnail.active,
.gallery-item:hover,
.shop-card:hover,
.advantages-card:hover,
.review-card-scroll:hover,
.contact-form-wrapper:hover,
.contact-info-wrapper:hover{
  background: var(--glass-hover) !important;
  border-color: var(--glass-border-strong) !important;
  box-shadow: var(--shadow-glass-hover) !important;
  transform: translateY(-4px);
}

/* light-tinted panels (originally pale hex backgrounds) -> subtler glass */
.contact-banner-content,
.post-category,
.info-box,
.warning-box,
.call-to-action,
.post-tags span,
.comment,
.related-articles,
.gallery-3d-main,
.analysis-badge,
.details-images,
.project-analysis,
.project-recommendation,
.lixiang-benefits,
.warning-note,
.porsche-details .project-recommendation,
.privacy-policy,
.product-page,
.breadcrumbs,
.product-code,
.price-block,
.discount,
.feature,
.notice,
.warning,
.faq-item h4,
.price-table tr:last-child td,
.used-badge,
.service-page-content,
.price-tag,
.blog-reference,
.comparison-table tr:nth-child(even),
.brands-table tr:nth-child(even),
.search-section,
.search-hint,
.results-info,
.product-badge,
.product-image,
.product-content,
.product-description,
.product-specs,
.product-price,
.no-results,
.warranty-section,
.benefit,
.benefit-icon,
.warranty-cta,
.delivery-section,
.delivery-notice,
.modal-product-image,
.modal-product-description,
.modal-spec-item,
.modal-product-price,
.modal-footer,
.search-highlight,
.autocomplete-suggestion:hover,
.map-container,
.route-btn,
.service-more-info,
.shop-oem-examples,
.seo-text.seo-gradient,
.seo-gradient-overlay,
.seo-footer{
  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
  color: var(--text-2) !important;
}

/* ---------------------------------------------------------------------
   4. Headings / meta text that used dark navy or gray tones
   --------------------------------------------------------------------- */
.contact-banner-title,
.blog-header h1, .post-card-content h2 a,
.post-header h1, .related-posts h2, .comment-author, .add-comment h3, .decision-option h3,
.project-title, .details-info h3,
.project-description h4, .work-steps h4, .project-results h4, .faq-question,
.no-results h3,
.privacy-policy h1, .privacy-policy h2, .privacy-policy strong,
.product-header h1, .specifications h3, .product-description-detailed h2,
.description-content h3, .description-content h4, .installation-section h2,
.install-card h4, .seo-content h2, .seo-content h3, .related-products h2, .related-item h5,
.service-title, .blog-reference h3, .service-cta h2,
.search-header h3, .hint-title, .section-header h2, .product-title,
.warranty-content h3, .benefit-text h4, .cta-text h4, .delivery-info-card h3,
.method-content h4, .modal-product-title, .modal-spec-value, .autocomplete-name,
.section-title, .price-summary, .post-content h3, .form-group label,
.review-card-scroll .user-name, .review-form-title,
.contact-info-item strong{
  color: var(--text-1) !important;
}

.blog-header p, .post-card-meta,
.post-meta, .post-tags span, .post-share span, .comment-date, .small-text,
.project-meta, .no-results h3, .no-results p,
.privacy-policy > .container > p:first-of-type, .privacy-policy p, .privacy-policy ul,
.service-subtitle, .price-note, .service-cta p,
.search-header p, .results-info, .clear-btn,
.copyright, .footer-link,
.section-subtitle, .review-date, .privacy-notice, .privacy-note,
.reviews-loader, .reviews-empty, .reviews-error, .review-form-note,
.review-card-scroll .review-date{
  color: var(--text-3) !important;
}
.no-results i{ color: var(--text-4) !important; }

/* ---- extended luminance-based sweep (auto-generated) ---- */
/* ---- text-1 (69) ---- */
.contact-banner-close:hover,
.contact-banner-title,
.contact-banner-btn-secondary,
.blog-header h1,
.post-card-content h2 a,
.blog-post-container,
.post-header h1,
.related-posts h2,
.comment-author,
.add-comment h3,
.related-articles h3,
.decision-option h3,
.project-title,
.details-info h3,
.project-description h4, .work-steps h4, .project-results h4,
.faq-question,
.privacy-policy h1,
.privacy-policy h2,
.privacy-policy strong,
.product-header h1,
.specifications h3,
.specifications td:last-child,
.product-description-detailed h2,
.description-content h3,
.description-content h4,
.installation-section h2,
.install-card h4,
.seo-content h2,
.seo-content h3,
.faq-item h4,
.related-products h2,
.related-item h5,
.service-title,
.blog-reference h3,
.service-cta h2,
.seo-safe-content h2, .seo-safe-content h3,
.discount-btn,
.search-header h3,
.hint-title,
.section-header h2,
.product-title,
.spec-value,
.no-results h3,
.warranty-content h3,
.benefit-text h4,
.cta-text h4,
.delivery-info-card h3,
.method-content h4,
.modal-product-title,
.modal-spec-value,
.search-highlight,
.autocomplete-name,
.section-title,
.shop-preview-content h3,
.price-summary,
.post-content h3,
.route-btn,
.form-group label,
.shop-card-title,
.shop-card-list li,
.shop-card-list li i,
.advantages-title,
.advantages-list li,
.review-card-scroll .user-name,
.review-form-title,
.contact-info-item strong,
.seo-header h2,
.seo-content-inner h3,
.seo-content-inner p, .seo-content-inner li {
  color: var(--text-1) !important;
}

/* ---- text-2 (15) ---- */
.contact-banner-text,
.drive2-content p,
.privacy-policy p,
.privacy-policy ul,
.description-content p,
.description-content li,
.seo-content li,
.seo-safe-content p,
.seo-safe-content li,
.product-description,
.method-content > p,
.modal-product-description,
.shop-card-description,
.review-card-scroll .review-text,
.contact-info-item div {
  color: var(--text-2) !important;
}

/* ---- text-3 (22) ---- */
.post-card-content p,
.related-link p,
.project-description,
.faq-answer,
.section-description,
.breadcrumbs span,
.rating-text,
.specifications td:first-child,
.install-card p,
.related-item p,
.small-text,
.search-header p,
.results-info,
.spec-label,
.price-label,
.no-results p,
.benefit-text p,
.cta-text p,
.method-details,
.modal-spec-label,
.autocomplete-brand,
.service-more-info {
  color: var(--text-3) !important;
}

/* ---- accent (20) ---- */
.post-category,
.post-content-full h2,
.social-share,
.related-post h3,
.drive2-content h3,
.related-link h4,
.read-more-btn:hover,
.project-recommendation h4,
.lixiang-benefits h4,
.gm-details .project-recommendation h4,
.privacy-policy a:hover,
.notice h4,
.delivery-notice a:hover,
.service-title,
.service-keywords span,
.avito-link,
.privacy-notice a:hover,
.social-link:hover,
.avito-badge-wide .avito-link,
.contact-link:hover {
  color: var(--accent-cyan) !important;
}

/* ---- success (5) ---- */
.info-box h3,
.availability,
.condition-badge,
.message.success,
.review-form-message.success {
  color: #6ee7b7 !important;
}

/* ---- danger (4) ---- */
.porsche-details .project-analysis h4,
.porsche-details .project-recommendation h4,
.message.error,
.review-form-message.error {
  color: #ffb0b0 !important;
}

/* ---- warning (1) ---- */
.search-tip {
  color: #fcd34d !important;
}

/* ---------------------------------------------------------------------
   5. Buttons / CTAs — keep the same gradients spirit but tuned for dark bg
   --------------------------------------------------------------------- */
.cta-button.primary,
.submit-btn,
.price-btn,
.shop-preview-btn.primary,
.install-cta-btn,
.product-order-btn,
.discount-btn,
.search-btn,
.phone-help-btn,
.whatsapp-help-btn,
.warranty-phone,
.warranty-whatsapp,
.modal-whatsapp-btn,
.modal-phone-btn,
.floating-call-btn,
.floating-whatsapp-btn,
.cta-btn,
.whatsapp-order-btn,
.phone-order-btn,
.shop-card-btn,
.submit-review-btn,
.map-open-btn{
  background: var(--accent-grad) !important;
  box-shadow: var(--shadow-glow) !important;
  border:none !important;
  color:#fff !important;
}
.cta-button.primary:hover,
.submit-btn:hover,
.price-btn:hover,
.shop-preview-btn.primary:hover,
.install-cta-btn:hover,
.product-order-btn:hover,
.discount-btn:hover,
.search-btn:hover,
.phone-help-btn:hover,
.whatsapp-help-btn:hover,
.cta-btn:hover,
.shop-card-btn:hover,
.submit-review-btn:hover{
  background: var(--accent-grad-rev) !important;
  box-shadow: 0 14px 36px rgba(56,189,248,.4) !important;
  transform: translateY(-2px);
}

.cta-button.secondary,
.shop-preview-btn.secondary,
.cta-btn.secondary,
.view-btn,
.discount-btn.secondary{
  background: var(--glass) !important;
  border:1px solid var(--glass-border-strong) !important;
  color: var(--text-1) !important;
}

/* ---------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------- */
.form-input, .comment-form input, .comment-form textarea, .search-input, textarea, select{
  background: rgba(255,255,255,.06) !important;
  border:1px solid var(--glass-border) !important;
  color: var(--text-1) !important;
  border-radius: var(--radius-sm) !important;
}
.form-input::placeholder, textarea::placeholder, .search-input::placeholder{ color: var(--text-4) !important; }
.form-input:focus, .comment-form input:focus, .comment-form textarea:focus, .search-input:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18) !important;
  background: rgba(255,255,255,.09) !important;
}
.consent-checkbox{
  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
}
.consent-checkbox label{ color: var(--text-2) !important; }

.message.success{ background: var(--success-bg) !important; color:#8ff0c8 !important; border:1px solid rgba(52,211,153,.35) !important; }
.message.error, .review-form-message.error{ background: var(--danger-bg) !important; color:#ffb3b3 !important; border:1px solid rgba(248,113,113,.35) !important; }

/* ---------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------- */
.main-footer{
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)), rgba(23,29,41,.82) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top:1px solid var(--glass-border);
  color: var(--text-3) !important;
}
.footer-link:hover, .social-link:hover{
  background: var(--glass-hover) !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   8. Tables
   --------------------------------------------------------------------- */
.brands-table, .comparison-table, .price-table, .comparison-table table{
  background: var(--glass) !important;
  color: var(--text-2) !important;
}
.brands-table th, .comparison-table th{
  background: rgba(255,255,255,.08) !important;
  color: var(--text-1) !important;
}
.brands-table td, .comparison-table td, .price-table td{
  border-color: var(--glass-border) !important;
  color: var(--text-2) !important;
}

/* ---------------------------------------------------------------------
   9. Misc accents
   --------------------------------------------------------------------- */
.badge-new{ box-shadow:0 4px 14px rgba(52,211,153,.35) !important; }
.badge-used{ background: rgba(255,255,255,.09) !important; border:1px solid var(--glass-border) !important; color:var(--text-2) !important; }
.scroll-to-top, .express-badge, .porsche-badge, .gm-badge{
  box-shadow: var(--shadow-glass) !important;
}
img{ border-radius: var(--radius-sm); }
.service-keywords span, .shop-oem-examples span{
  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
  color: var(--text-2) !important;
}

/* product-page price / highlight blocks stay legible */
.price-block, .discount{ color: var(--text-1) !important; }
.price-block strong, .discount strong{ color: var(--accent-cyan) !important; }

/* keep colored star ratings golden and visible */
.review-card i.fa-star, .stars i, i.fa-star{ color: var(--gold) !important; }

/* ---------------------------------------------------------------------
   10. Page-specific inline <style> widgets (popups, 404, SEO blocks)
   These are declared inline in individual pages, after our stylesheet
   in DOM order, but our !important keeps them in theme.
   --------------------------------------------------------------------- */

/* shop.html messenger warning popup */
.warning-modal-container{
  background: rgba(28,35,51,.92) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
  border:1px solid var(--glass-border-strong) !important;
  box-shadow: var(--shadow-glass) !important;
}
.warning-modal-title{ color: var(--text-1) !important; }
.warning-modal-content, .warning-modal-content p{ color: var(--text-2) !important; }
.warning-modal-note{ color: var(--text-3) !important; }
.warning-modal-close{ color: var(--text-3) !important; }
.warning-modal-close:hover{ color: var(--text-1) !important; }
.warning-modal-call-btn{
  background: var(--accent-grad) !important;
  box-shadow: var(--shadow-glow) !important;
  color:#fff !important;
}
.warning-modal-later-btn{
  background: var(--glass) !important;
  border:1px solid var(--glass-border-strong) !important;
  color: var(--text-1) !important;
}
.warning-modal-icon i{ color: var(--warning) !important; }

/* #simpleBanner urgency popup (blog.html, service pages, index, gallery, etc.) */
#simpleBanner .modal{
  background: rgba(28,35,51,.95) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  border:1px solid var(--glass-border-strong) !important;
  box-shadow: var(--shadow-glass) !important;
}
#simpleBanner .modal h4{ color: var(--text-1) !important; }
#simpleBanner .modal p{ color: var(--text-2) !important; }
#simpleBanner .small-note{ color: var(--text-4) !important; }
#simpleBanner .btn-gray{ background: var(--glass) !important; color: var(--text-1) !important; border:1px solid var(--glass-border) !important; }
#simpleBanner .btn-orange{ background: var(--accent-grad) !important; box-shadow: var(--shadow-glow) !important; }
#simpleBanner .close-btn{ color: var(--text-3) !important; }

/* cookie banner + consent checkbox (index.html inline block) */
.cookie-banner{
  background: rgba(23,29,41,.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border:1px solid var(--glass-border-strong) !important;
}
.cookie-accept{ background: var(--accent-grad) !important; }

/* privacy.html standalone cookie-consent banner (inline-styled) */
#cookie-consent{
  background: rgba(23,29,41,.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border-top:1px solid var(--glass-border-strong) !important;
  color: var(--text-2) !important;
}
#cookie-consent button{
  background: var(--accent-grad) !important;
  color:#fff !important;
}
#cookie-consent a{ color: var(--accent-cyan) !important; }

/* ---------------------------------------------------------------------
   11. Bare inline-styled callout boxes inside blog article bodies
   (no shared class - matched via their inline style attribute)
   --------------------------------------------------------------------- */
div[style*="#e3f2fd" i],
div[style*="#e8f4fd" i],
div[style*="#e8f5e9" i],
div[style*="#f0f7f0" i],
div[style*="#f5f5f5" i],
div[style*="#f9f9f9" i],
div[style*="#fef3c7" i],
div[style*="#fff3e0" i],
div[style*="#fff8e1" i],
div[style*="#ffcdd2" i],
div[style*="#ffebee" i],
tr[style*="#f9f9f9" i],
tr[style*="#f5f5f5" i],
tr[style*="#e8f5e9" i],
tr[style*="#fff3e0" i]{
  background: var(--glass) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
}
table[style*="border-collapse" i]{ color: var(--text-2) !important; }
table[style*="border-collapse" i] th{ background: rgba(255,255,255,.08) !important; color: var(--text-1) !important; }
table[style*="border-collapse" i] td, table[style*="border-collapse" i] th{ border-color: var(--glass-border) !important; }
td[style*="#ddd" i], th[style*="#ddd" i]{ border-color: var(--glass-border) !important; }
div[style*="#e3f2fd" i] h3, div[style*="#e3f2fd" i] h4,
div[style*="#e8f4fd" i] h3, div[style*="#e8f4fd" i] h4,
div[style*="#e8f5e9" i] h3, div[style*="#e8f5e9" i] h4,
div[style*="#f0f7f0" i] h3, div[style*="#f0f7f0" i] h4,
div[style*="#f5f5f5" i] h3, div[style*="#f5f5f5" i] h4,
div[style*="#f9f9f9" i] h3, div[style*="#f9f9f9" i] h4,
div[style*="#fef3c7" i] h3, div[style*="#fef3c7" i] h4,
div[style*="#fff3e0" i] h3, div[style*="#fff3e0" i] h4,
div[style*="#fff8e1" i] h3, div[style*="#fff8e1" i] h4,
div[style*="#ffcdd2" i] h3, div[style*="#ffcdd2" i] h4,
div[style*="#ffebee" i] h3, div[style*="#ffebee" i] h4{
  color: var(--text-1) !important;
}
li[style*="background: #ddd" i], span[style*="background: #ddd" i]{
  background: var(--glass-hover) !important;
  color: var(--text-2) !important;
}

/* refueling-service.html embedded SEO sections */
.hero-seo, .seo-problems, .seo-price, .seo-freon, .seo-links, .seo-geo{
  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-glass) !important;
  color: var(--text-2) !important;
}
.hero-seo h1, .seo-problems h2, .seo-price h2, .seo-freon h2, .seo-links h2, .seo-geo h2{
  color: var(--text-1) !important;
}
.hero-seo ul li{ background: var(--glass-hover) !important; color: var(--text-2) !important; }
.seo-links ul li a{ background: var(--glass-hover) !important; color: var(--text-2) !important; }

/* video-demo widget on blog post */
.video-demo{ background: var(--glass) !important; border:1px solid var(--glass-border) !important; }
.video-caption{ color: var(--text-3) !important; }

.drive2-reference,
.drive2-icon{
  background: var(--glass) !important;
  border:1px solid var(--glass-border-strong) !important;
  box-shadow: var(--shadow-glass) !important;
}
.drive2-icon{ color: var(--accent-cyan) !important; background: rgba(56,189,248,.12) !important; }
.drive2-link{
  background: var(--accent-grad) !important;
  box-shadow: var(--shadow-glow) !important;
}
.drive2-link:hover{ background: var(--accent-grad-rev) !important; }

/* shop.html extra inline-styled blocks */
.catalog-top-seo, .brand-filters, .seo-text{
  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-glass) !important;
}
.catalog-top-seo h2, .seo-text h2, .filter-label{ color: var(--text-1) !important; }
.catalog-top-seo p, .seo-text h3, .seo-text p, .seo-text li{ color: var(--text-2) !important; }
.brand-filter-link, .hint-tag, .details-link{
  background: var(--glass-hover) !important;
  color: var(--accent-cyan) !important;
  border:1px solid var(--glass-border) !important;
}
.brand-filter-link:hover, .hint-tag:hover, .details-link:hover{
  background: var(--accent-grad) !important;
  color:#fff !important;
}
.product-quick-view-btn{
  background: var(--accent-grad) !important;
  box-shadow: var(--shadow-glow) !important;
}
.product-quick-view-btn:hover{ background: var(--accent-grad-rev) !important; }
.product-details-link{ border-top:1px solid var(--glass-border) !important; }

/* 404 standalone page */
.card{
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-glass) !important;
  color: var(--text-2) !important;
}
.card h1{ color: var(--text-1) !important; }
.actions .primary{ background: var(--accent-grad) !important; box-shadow: var(--shadow-glow) !important; }
.actions .ghost{ border:1px solid var(--glass-border-strong) !important; color: var(--text-1) !important; }
.actions .ghost:hover{ background: var(--glass-hover) !important; }