:root{--tfp-primary-color:#0088FE}
.tfpv-layout{display:grid; grid-template-columns:280px 1fr; gap:1rem}
.tfpv-sidebar{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:.8rem}
.tfpv-header{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f1f5f9; padding-bottom:.5rem; margin-bottom:.5rem}
.tfpv-reset{color:var(--tfp-primary-color); text-decoration:none}
.tfpv-acc{border-top:1px solid #f1f5f9; padding:.45rem 0}
.tfpv-acc:first-child{border-top:none}
.tfpv-acc__title{width:100%; text-align:left; background:transparent; border:none; padding:.4rem 0; font-weight:700; cursor:pointer; color:#111}
.tfpv-acc.is-open > .tfpv-acc__title{color:var(--tfp-primary-color)}
.tfpv-acc__body{display:none}
.tfpv-search-input{width:100%; padding:.45rem .55rem; border:1px solid #e2e8f0; border-radius:8px; margin:.35rem 0}
.tfpv-check{display:block; margin:.25rem 0; font-size:.95rem}
.tfpv-check input{margin-right:.35rem}
.tfpv-load-more{margin-top:.35rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:.35rem .55rem; cursor:pointer}
.tfpv-price{display:flex; gap:.4rem; align-items:center}
.tfpv-price input{width:100%; padding:.45rem .55rem; border:1px solid #e2e8f0; border-radius:8px}
.tfpv-price .tfpv-apply{background:var(--tfp-primary-color); color:#fff; border:none; border-radius:10px; padding:.5rem .8rem; cursor:pointer}
/* results grid inherits shared css */


/* Front-end visual modes for vertical layout */
.tfp-mode-dark.tfpv-layout,
.tfp-mode-dark .tfpv-sidebar,
.tfp-mode-dark .tfpv-results {
  background-color: #0b0b0d;
  color: #f5f5f5;
}

.tfp-mode-dark .tfpv-header h3 {
  color: #ffffff;
}

.tfp-mode-dark .tfpv-group-title {
  color: #f5f5f5;
}

.tfp-mode-dark .tfpv-group-body select {
  background-color: #111111;
  color: #ffffff;
  border-color: #333333;
}

.tfp-mode-dark .tfpv-results .tfp-card {
  background-color: #151515;
  border-color: #262626;
  color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  .tfp-mode-auto.tfpv-layout,
  .tfp-mode-auto .tfpv-sidebar,
  .tfp-mode-auto .tfpv-results {
    background-color: #0b0b0d;
    color: #f5f5f5;
  }

  .tfp-mode-auto .tfpv-group-body select {
    background-color: #111111;
    color: #ffffff;
    border-color: #333333;
  }

  .tfp-mode-auto .tfpv-results .tfp-card {
    background-color: #151515;
    border-color: #262626;
    color: #f5f5f5;
  }
}

/* === Tire Filter Pro v3.3 – vertical layout refined light/dark === */

/* Light mode refinements */
.tfp-mode-light.tfpv-layout {
  background-color: var(--tfp-bg-light);
}

.tfp-mode-light .tfpv-sidebar {
  background-color: var(--tfp-card-light);
}

/* Dark mode – elegant style */
.tfp-mode-dark.tfpv-layout {
  background-color: var(--tfp-bg-dark);
  color: var(--tfp-text-light);
}

.tfp-mode-dark .tfpv-sidebar {
  background-color: var(--tfp-card-dark);
  border-color: var(--tfp-border-dark);
}

.tfp-mode-dark .tfpv-header h3 {
  color: var(--tfp-text-light);
}

.tfp-mode-dark .tfpv-reset {
  color: var(--tfp-primary-color);
}

.tfp-mode-dark .tfpv-acc__title {
  color: var(--tfp-text-light);
}

.tfp-mode-dark .tfpv-acc.is-open > .tfpv-acc__title {
  color: var(--tfp-primary-color);
}

.tfp-mode-dark .tfpv-search-input,
.tfp-mode-dark .tfpv-price input {
  background-color: #111827;
  border-color: var(--tfp-border-dark);
  color: var(--tfp-text-light);
}

.tfp-mode-dark .tfpv-check {
  color: var(--tfp-text-light);
}

.tfp-mode-dark .tfpv-load-more {
  background-color: #111827;
  border-color: var(--tfp-border-dark);
  color: var(--tfp-text-light);
}

/* Cards inside vertical layout */
.tfp-mode-dark .tfpv-results .tfp-card,
.tfp-mode-dark .tfpv-results .tfp-card.tfp-card-modern {
  background-color: var(--tfp-card-dark);
  border-color: var(--tfp-border-dark);
  color: var(--tfp-text-light);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

/* Auto mode: system preference */
@media (prefers-color-scheme: dark) {
  .tfp-mode-auto.tfpv-layout {
    background-color: var(--tfp-bg-dark);
    color: var(--tfp-text-light);
  }

  .tfp-mode-auto .tfpv-sidebar {
    background-color: var(--tfp-card-dark);
    border-color: var(--tfp-border-dark);
  }

  .tfp-mode-auto .tfpv-results .tfp-card,
  .tfp-mode-auto .tfpv-results .tfp-card.tfp-card-modern {
    background-color: var(--tfp-card-dark);
    border-color: var(--tfp-border-dark);
    color: var(--tfp-text-light);
  }
}