/* Comparison Chart Styles */
#chart-container { width:100%; margin:10px auto; }
.chart-wrapper { width:100%; display:block; clear:both; }
#chart-container .info-panel-content,
.comparison-card .info-panel-content { display:flex; flex-wrap:wrap; gap:20px; }
#chart-container .info-panel-basic,
.comparison-card .info-panel-basic { flex:1 1 220px; min-width:220px; }
#chart-container .info-panel-ratings,
.comparison-card .info-panel-ratings { flex:2 1 320px; min-width:260px; }
#chart-container .info-panel-row,
.comparison-card .info-panel-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:6px 0;
}
#chart-container .info-panel-label,
#chart-container .info-panel-value,
.comparison-card .info-panel-label,
.comparison-card .info-panel-value,
.comparison-card .rating-value,
#chart-container .rating-value {
  font-weight:600;
  color: var(--e-global-color-accent, #f21844);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8em;
  line-height:1.2;
  margin:0;
}
#chart-container .info-panel-value,
.comparison-card .info-panel-value { text-align:right; }
#chart-container .rating-row,
.comparison-card .rating-row {
  display:grid;
  grid-template-columns:140px minmax(60px,auto) 1fr;
  grid-template-areas: "label value bar";
  column-gap:10px;
  align-items:center;
  margin:6px 0;
}
.rating-label { grid-area: label; white-space:nowrap; }
.rating-value { grid-area: value; white-space:nowrap; }
.rating-indicator { grid-area: bar; width:100%; }
.rating-indicator { width:100%; height:6px; border-radius:3px; position:relative; }
.rating-fill { position:absolute; left:0; top:0; height:100%; width:0; border-radius:3px; background: var(--e-global-color-primary, currentColor); }

.control-row { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; margin:16px 0 8px; }
.sort-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sort-controls label { font-weight:600; font-size:.9em; }
.sort-select-wrapper { position:relative; display:inline-flex; align-items:center; max-width:400px; width:100%; }
.sort-select-wrapper::after {
  content:''; position:absolute; right:12px; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); pointer-events:none; opacity:.8;
}
.sort-controls select {
  width:100%; padding:8px 34px 8px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.35); background-color:rgba(255,255,255,.08);
  color:inherit; font-size:.9em; -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.sort-controls select:focus,
.sort-controls select:focus-visible {
  outline:0;
  box-shadow:none;
}
.sort-controls select::-ms-expand { display:none; }
.sort-controls select option { color:#0f172a; }

.filter-group { flex:1 1 260px; min-width:220px; padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.filter-header { display:flex; align-items:center; justify-content:space-between; }
.filter-header h6 { margin:0; font-size:.85em; font-weight:600; }
.filter-header span { font-size:.85em; font-weight:600; opacity:.8; }
.dual-slider { position:relative; height:28px; margin-top:12px; }
.dual-slider::before,
.dual-slider::after {
  content:''; position:absolute; left:0; right:0; height:4px; border-radius:999px;
  background:rgba(255,255,255,.22); top:calc(50% - 2px);
}
.dual-slider::after {
  background:#f21844;
  left:var(--range-start-pct, 0%); right:calc(100% - var(--range-end-pct, 100%));
}
.dual-slider input[type="range"] {
  position:absolute; left:0; right:0; width:100%; height:100%;
  margin:0; background:transparent; pointer-events:auto; -webkit-appearance:none; z-index:2;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:18px; height:18px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative; z-index:3;
}
.dual-slider input[type="range"]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative; z-index:3;
}
.dual-slider input[type="range"]::-ms-thumb {
  width:18px; height:18px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.4);
  position:relative; z-index:3;
}
.filter-note { font-size:.85em; margin:6px 0 2px; color:#f44; display:none; }

.chart-area-container { width:100%; margin:18px 0; }
.filter-note + .chart-area-container { margin-top:8px; }
.chart-area { position:relative; padding:12px 0; min-height:160px; }
.chart-area::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor),
    linear-gradient(to bottom, currentColor, currentColor);
  background-repeat:no-repeat;
  background-size:1px 100%;
  background-position:0 0,20% 0,40% 0,60% 0,80% 0,100% 0;
  opacity:.12;
  pointer-events:none;
}
.chart-empty { padding:20px; text-align:center; font-size:.9em; opacity:.8; }
.bar-container { display:flex; align-items:center; position:relative; padding:2px 0; cursor:pointer; min-height:24px; border-radius:4px; }
.bar-wrapper { flex:1 1 auto; height:22px; position:relative; overflow:hidden; border-radius:3px; }
.bar { height:100%; position:absolute; left:0; top:0; border-radius:3px; background: var(--e-global-color-primary, currentColor); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.bar::after { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,.06)); }
.bar-container .text-container { position:absolute; left:12px; right:12px; display:flex; align-items:center; height:100%; pointer-events:none; }
.bar-name { margin:0; font-size:.85em; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.bar-container:focus-within .bar { filter: brightness(1.2); transform: scaleY(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.18); }
.bar-container.disabled { pointer-events:none; cursor:not-allowed; }
.bar-container.disabled .bar { filter:none !important; transform:none !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.bar-container.disabled .bar::after { background: linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,.06)); }
.bar-container.disabled .text-container .bar-name { text-decoration:none; opacity:.65; }
.bar-container.is-compared .bar { box-shadow: inset 0 0 0 2px currentColor, 0 0 12px rgba(0,0,0,.25); }
.bar-container.is-compared .text-container .bar-name { text-decoration:underline; }
.bar-container:focus-within .bar::after { background: linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,.10)); }
.bar-container { outline:none; }
.bar-container:focus-visible { outline:none; box-shadow:0 0 0 2px currentColor inset; }
@media (hover: hover) and (pointer: fine){
  .bar-container:not(.is-compared):hover .bar {
    filter: brightness(1.2);
    transform: scaleY(1.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.18);
  }
  .bar-container:not(.is-compared):hover .bar::after { background: linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,.10)); }
  .bar-container:not(.is-compared):hover .text-container .bar-name { text-decoration:none; }
}

.comparison-grid { margin-top:16px; display:none; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.comparison-card { background:rgba(17,17,17,.95); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; color:inherit; display:flex; flex-direction:column; gap:12px; }
.comparison-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.comparison-card-brand { margin:0; font-size:1.05em; letter-spacing:.05em; text-transform:uppercase; }
.comparison-card-model { margin:0; font-weight:600; font-size:1em; color:var(--e-global-color-primary, currentColor); }
.comparison-action {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  --action-accent: var(--comparison-action-accent, #f21844);
  border:1px solid var(--action-accent) !important;
  background:transparent !important;
  color:#ffffff !important;
  cursor:pointer;
  font-size:1.1em;
  line-height:1.2;
  padding:6px 14px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.comparison-action:hover,
.comparison-action:focus-visible {
  text-decoration:none;
  background:var(--action-accent) !important;
  border-color:var(--action-accent) !important;
  color:#ffffff !important;
}
.comparison-action:hover .comparison-action__badge-percent,
.comparison-action:focus-visible .comparison-action__badge-percent { color:#111111; }
.comparison-action__icon {
  font-size:1em;
  line-height:1;
}
.comparison-action__content {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  min-width:0;
  gap:2px;
}
.comparison-action__label {
  display:inline-flex;
  flex-direction:column;
  font-size:1.05em;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.comparison-action__badge {
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  font-size:.7em;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.comparison-action__badge-percent { color: var(--action-accent); }
.comparison-action__badge-code { color:#ffffff; opacity:.9; }
.comparison-action:focus-visible { outline:2px solid var(--action-accent); outline-offset:2px; }
.comparison-links { display:flex; flex-wrap:wrap; gap:8px; }
.comparison-message { font-size:.85em; margin:6px 0; color:var(--e-global-color-primary, currentColor); }
.comparison-empty { margin:12px 0 0; font-size:.9em; opacity:.85; }

#chart-container {
  --bm-neutral: #1f2937;
  --brand-Simagic:     #0f766e;
  --brand-VRS:         #0f4c81;
  --brand-Moza:        #6b5d27;
  --brand-Asetek:      #9a3412;
  --brand-Simucube:    #553c9a;
  --brand-Logitech:    #2e7d9a;
  --brand-Fanatec:     #7f1d2e;
  --brand-Thrustmaster:#5b21b6;
  --brand-Default: var(--e-global-color-primary, #3f3f46);
}

@supports (color: color-mix(in srgb, black, white)) {
  #chart-container{
    --brand-Simagic:     color-mix(in srgb, #0f766e 60%, var(--bm-neutral) 40%);
    --brand-VRS:         color-mix(in srgb, #0f4c81 60%, var(--bm-neutral) 40%);
    --brand-Moza:        color-mix(in srgb, #6b5d27 60%, var(--bm-neutral) 40%);
    --brand-Asetek:      color-mix(in srgb, #9a3412 60%, var(--bm-neutral) 40%);
    --brand-Simucube:    color-mix(in srgb, #553c9a 60%, var(--bm-neutral) 40%);
    --brand-Logitech:    color-mix(in srgb, #2e7d9a 60%, var(--bm-neutral) 40%);
    --brand-Fanatec:     color-mix(in srgb, #7f1d2e 60%, var(--bm-neutral) 40%);
    --brand-Thrustmaster:color-mix(in srgb, #5b21b6 60%, var(--bm-neutral) 40%);
    --brand-Default:     color-mix(in srgb, var(--e-global-color-primary, #3f3f46) 60%, var(--bm-neutral) 40%);
  }
}

@media (prefers-contrast: more){
  .bar::after{ background: linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,.12)); }
  .chart-area::before{ opacity:.22; }
}

#chart-container .info-panel { scroll-margin-top: 80px; }

/* Single Product Table */
#ps-table-container { width:100%; max-width:820px; margin:20px auto; color:#f4f4f4; font-family:inherit; }
.ps-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.ps-tab {
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  padding:6px 18px;
  background:#0c0c0c;
  color:inherit;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.8em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ps-tab[aria-selected="true"] {
  background:#151515;
  color:#ffffff;
  border-color:#ffffff;
}
.ps-tab:focus-visible { outline:2px solid #ffffff; outline-offset:2px; }
.ps-status { font-size:.85em; margin-bottom:8px; color:rgba(255,255,255,.7); }
.ps-table { display:flex; flex-direction:column; gap:4px; }
.ps-row {
  display:grid;
  grid-template-columns:minmax(130px, auto) minmax(140px, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:6px 0;
  width:100%;
}
.ps-row.total { margin-top:10px; padding-top:8px; }
.ps-label {
  font-weight:600;
  font-size:.8em;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  word-break:break-word;
}
.ps-bar { position:relative; height:6px; border-radius:999px; background:#1f1f1f; overflow:hidden; width:100%; min-width:80px; }
.ps-fill { position:absolute; inset:0; border-radius:inherit; background:#ff0041; width:0%; }
.ps-value {
  text-align:right;
  font-weight:700;
  font-size:.85em;
  color:#ffffff;
  white-space:nowrap;
}
.ps-row.total .ps-label,
.ps-row.total .ps-value {
  font-weight:700;
  letter-spacing:.1em;
}
.ps-error { color:#f87171; font-weight:600; padding:12px 0; }
@media (max-width:640px){
  .ps-row {
    grid-template-columns:minmax(100px, auto) minmax(100px, 1fr) auto;
    gap:10px;
  }
  .ps-bar { min-width:60px; }
}