/* ===== Modern Tyre Filter – overrides (v1.1.2) ===== */

.vue-tyre-filter-small {
  /* Airier desktop look as requested */
  --mtf-gap: 22px;            /* spacing between blocks (was 20px) */
  --mtf-row-gap: 0px;         /* vertical gap within the row */
  --mtf-control-h: 44px;      /* control/button height */
  --mtf-card-py: 10px;        /* card vertical padding */
  --mtf-card-px: 12px;        /* card horizontal padding */
  --mtf-select-w: 170px;      /* wider dropdowns (was 160px) */
  --mtf-radius: 6px;          /* corner radius */
  --mtf-font-size: 15px;      /* typographic scale */

  background:#000000 !important; /* black card */
  border:none !important; border-radius:var(--mtf-radius);
  padding:var(--mtf-card-py) var(--mtf-card-px) !important;
  display:inline-block; max-width:100%;
}

/* Hide By Vehicle and tab bar */
.vue-tyre-filter-small .tabs ul,
.vue-tyre-filter-small .tabs .tab.by-vehicle,
.vue-tyre-filter-small [data-tab="by-vehicle"],
.vue-tyre-filter-small .tabs .tab:not(.by-size) { display:none !important; }

/* Desktop row layout with robust spacing & alignment */
.vue-tyre-filter-small .tabs .tab {
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap: var(--mtf-row-gap) var(--mtf-gap); column-gap: var(--mtf-gap); row-gap: var(--mtf-row-gap);
  flex-wrap: nowrap; background: transparent !important; padding: 0 !important; border-radius: var(--mtf-radius);
}

/* Fallback margin if anything kills the gap */
.vue-tyre-filter-small .tabs .tab > * { margin-right: var(--mtf-gap) !important; }
.vue-tyre-filter-small .tabs .tab > *:last-child { margin-right: 0 !important; }

/* Normalize wrappers and remove accidental margins */
.vue-tyre-filter-small .tabs .tab > .select,
.vue-tyre-filter-small .tabs .tab > .field,
.vue-tyre-filter-small .tabs .tab > .form-group,
.vue-tyre-filter-small .tabs .tab > .mtf-field { flex: 0 0 auto; margin: 0 !important; }

/* Dropdowns – larger, centered text, better legibility */
.vue-tyre-filter-small .tabs .tab select,
.vue-tyre-filter-small .tabs .tab .select select {
  width: var(--mtf-select-w) !important; max-width: var(--mtf-select-w) !important;
  height: var(--mtf-control-h) !important; line-height: var(--mtf-control-h) !important;
  display: inline-block !important; border-radius: var(--mtf-radius) !important;
  border: 1px solid #cfcfcf !important; background: #ffffff !important; color: #111 !important;
  font-size: var(--mtf-font-size) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 0 16px !important; margin: 0 !important; box-sizing: border-box !important;
  text-align: center; text-align-last: center; -moz-text-align-last: center;
}
.vue-tyre-filter-small .tabs .tab select option { text-align:center; }

/* Search button – red with white text; sized to match controls */
.vue-tyre-filter-small .mtf-search-btn {
  flex: 0 0 auto; height: var(--mtf-control-h); line-height: var(--mtf-control-h);
  padding: 0 20px; border-radius: var(--mtf-radius); background: #FF0000 !important; color: #FFFFFF !important;
  font-size: var(--mtf-font-size) !important; border: none !important; white-space: nowrap; order: 99; margin: 0 !important;
}
.vue-tyre-filter-small .mtf-search-btn:hover { background:#cc0000 !important; }

/* Hide legacy bottom row */
.vue-tyre-filter-small .search-reset { display:none !important; }

/* Responsive adjustments */
@media (max-width: 900px) {
  .vue-tyre-filter-small { --mtf-gap: 18px; --mtf-select-w: 160px; }
}
@media (max-width: 720px) {
  .vue-tyre-filter-small { display:block; --mtf-gap: 12px; --mtf-select-w: 140px; --mtf-control-h: 42px; }
  .vue-tyre-filter-small .tabs .tab { flex-wrap: wrap; row-gap: 10px; }
}