#car-comparator-app {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== REMOVE UNWANTED HIGHLIGHTS ===== */
#car-comparator-app *:focus,
#car-comparator-app *:active,
#car-comparator-app button:focus,
#car-comparator-app select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== HEADER ===== */
#car-comparator-app header {
  padding-top: 12px !important;  /* slightly smaller padding */
  padding-bottom: 12px !important;
  position: relative !important; /* non-sticky */
  top: auto !important;
}

#car-comparator-app h1 {
  font-size: 3.5rem !important; /* Bigger than Model titles */
  font-weight: 700;
}

#car-comparator-app header img {
  height: 120px !important;
  max-width: 300px;
}

/* ===== BOXES ===== */
#car-comparator-app .card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  transition: none !important;
}

#car-comparator-app .card:hover {
  background-color: white !important; /* removes unwanted blue hover */
}

/* ===== MODEL TITLES ===== */
#car-comparator-app section h2 {
  font-size: 2.5rem !important; /* Twice as big as before */
  font-weight: 600;
}

/* ===== DROPDOWN STYLING ===== */
#car-comparator-app select {
  background: linear-gradient(145deg, #f9fafb, #f3f4f6);
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem;
  transition: background 0.2s, border-color 0.2s;
}

#car-comparator-app select:hover {
  background: linear-gradient(145deg, #f3f4f6, #f9fafb);
}

#car-comparator-app select:focus {
  border-color: #0284c7;
  background: linear-gradient(145deg, #f3f4f6, #f9fafb);
}

/* ===== VARIABLES ===== */
:root {
  --brand: #0ea5e9;
  --brand-600: #0284c7;
  --ok: #16a34a;
  --bad: #dc2626;
  --equip-bg: #fff7ed;
  --equip-border: #fed7aa;
  --tech-bg: #eff6ff;
  --tech-border: #bfdbfe;
  --phys-bg: #ecfdf5;
  --phys-border: #a7f3d0;
}

/* ===== COMPONENTS ===== */
.row-diff { background: #fff7ed; }
.row-same { background: #fff; }

.badge-x {
  color: var(--bad);
  font-weight: 600;
}

.summary-pill {
  background:#f1f5f9;
  border:1px solid #e5e7eb;
}

.sticky-title {
  position: sticky;
  top: var(--sticky-offset, 64px);
  z-index: 20;
  background: white;
}

.accordion-content {
  overflow: hidden;
  height: 0;
  transition: height 260ms ease;
}

.step-dot, .step-line { background: #e5e7eb; }

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  display: inline-block;
}

.step-line {
  height: 6px;
  flex: 1;
  border-radius: 9999px;
}

.step-active { background: var(--brand-600) !important; }

.acc-equipment summary { background: var(--equip-bg); border: 1px solid var(--equip-border); }
.acc-technical summary { background: var(--tech-bg); border: 1px solid var(--tech-border); }
.acc-physical summary { background: var(--phys-bg); border: 1px solid var(--phys-border); }
.acc-default summary { background: #f3f4f6; border: 1px solid #e5e7eb; }

details > summary {
  border-radius: .5rem;
  padding: .5rem;
}

/* ===== CAR IMAGES ===== */
#car-comparator-app #results-wrap img {
  max-height: 180px;
  width: auto;
}

/* ===== BUTTON FIXES: keep visible on hover/focus ===== */
#car-comparator-app button {
  transition: background 0.2s, color 0.2s;
}

#car-comparator-app button:hover,
#car-comparator-app button:focus {
  background-color: #f3f4f6 !important;
  color: #111 !important;
  opacity: 1 !important;
}

/* ===== PRINT FIX: only print app ===== */
@media print {
  body * { visibility: hidden; }
  #car-comparator-app, #car-comparator-app * { visibility: visible; }
  #car-comparator-app { position: absolute; top: 0; left: 0; width: 100%; }
  .no-print { display: none !important; }
}