/* eMobility Tools — tools.css */
:root {
  --em-green:      #1D9E75;
  --em-green-dk:   #0F6E56;
  --em-green-lt:   #E1F5EE;
  --em-blue:       #378ADD;
  --em-blue-lt:    #E6F1FB;
  --em-amber:      #E6920A;
  --em-amber-lt:   #FAEEDA;
  --em-black:      #111111;
  --em-gray-700:   #444444;
  --em-gray-500:   #777777;
  --em-gray-300:   #cccccc;
  --em-gray-200:   #e8e8e5;
  --em-gray-100:   #f5f5f3;
  --em-white:      #ffffff;
  --em-radius:     8px;
  --em-radius-lg:  12px;
  --em-shadow:     0 2px 12px rgba(0,0,0,.08);
  --em-font:       'DM Sans', system-ui, sans-serif;
}

.emtools-wrap { font-family: var(--em-font); color: var(--em-black); }

/* ── Header ── */
.emtools-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.emtools-title {
  font-size: 22px; font-weight: 700; margin: 0 0 4px;
  color: var(--em-black);
}
.emtools-sub { font-size: 13px; color: var(--em-gray-500); margin: 0; }

/* ── Section label ── */
.emtools-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--em-green);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.emtools-section-label::before {
  content: ''; display: block; width: 3px; height: 14px;
  background: var(--em-green); border-radius: 2px;
}

/* ── Filters / pills ── */
.emtools-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 20px; align-items: center;
}
.emtools-pill {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--em-gray-200); background: var(--em-white);
  color: var(--em-gray-700); cursor: pointer; transition: all .15s;
}
.emtools-pill:hover { border-color: var(--em-green); color: var(--em-green); }
.emtools-pill.active {
  background: var(--em-green); border-color: var(--em-green); color: white;
}

/* ── Inputs ── */
.emtools-input {
  width: 100%; padding: 10px 14px; border-radius: var(--em-radius);
  border: 1px solid var(--em-gray-200); font-family: var(--em-font);
  font-size: 14px; color: var(--em-black); outline: none;
  transition: border-color .15s;
}
.emtools-input:focus { border-color: var(--em-green); }
.emtools-select {
  padding: 8px 12px; border-radius: var(--em-radius);
  border: 1px solid var(--em-gray-200); font-family: var(--em-font);
  font-size: 13px; color: var(--em-gray-700); background: white;
  outline: none; cursor: pointer;
}
.emtools-sort-wrap { margin-left: auto; }

/* ── Autocomplete suggestions ── */
.emtools-search-wrap { position: relative; min-width: 260px; }
.emtools-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: white; border: 1px solid var(--em-gray-200);
  border-radius: var(--em-radius); box-shadow: var(--em-shadow);
  max-height: 280px; overflow-y: auto; display: none;
}
.emtools-suggestion {
  padding: 10px 14px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--em-gray-200); transition: background .1s;
}
.emtools-suggestion:last-child { border-bottom: none; }
.emtools-suggestion:hover { background: var(--em-green-lt); }
.emtools-suggestion-brand {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--em-green);
  background: var(--em-green-lt); padding: 2px 7px; border-radius: 10px;
  flex-shrink: 0;
}

/* ── Comparison picker grid ── */
.emcompare-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.emcompare-car-card {
  border: 1px solid var(--em-gray-200); border-radius: var(--em-radius-lg);
  padding: 14px; cursor: pointer; transition: all .15s;
  background: var(--em-white); position: relative; overflow: hidden;
}
.emcompare-car-card:hover {
  border-color: var(--em-green); box-shadow: var(--em-shadow);
  transform: translateY(-2px);
}
.emcompare-car-card.selected {
  border-color: var(--em-green); border-width: 2px;
  background: var(--em-green-lt);
}
.emcompare-car-card .brand {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--em-green); margin-bottom: 3px;
}
.emcompare-car-card .model {
  font-size: 13px; font-weight: 600; color: var(--em-black);
  line-height: 1.3; margin-bottom: 6px;
}
.emcompare-car-card .price-tag {
  font-size: 14px; font-weight: 700; color: var(--em-black);
}
.emcompare-car-card .range-tag {
  font-size: 11px; color: var(--em-gray-500); margin-top: 2px;
}
.emcompare-selected-badge {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  background: var(--em-green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: white; font-weight: 700;
  opacity: 0; transition: opacity .15s;
}
.emcompare-car-card.selected .emcompare-selected-badge { opacity: 1; }

/* ── Comparison table ── */
.emcompare-table-wrap { margin-top: 16px; }
.emcompare-table-wrap.hidden { display: none; }
.emcompare-table {
  width: 100%; border: 1px solid var(--em-gray-200);
  border-radius: var(--em-radius-lg); overflow: hidden;
}
.emcompare-row {
  display: grid; border-bottom: 1px solid var(--em-gray-200);
}
.emcompare-row:last-child { border-bottom: none; }
.emcompare-row.header { background: var(--em-black); }
.emcompare-row.alt { background: var(--em-gray-100); }
.emcompare-cell {
  padding: 12px 16px; font-size: 13px; color: var(--em-gray-700);
  border-right: 1px solid var(--em-gray-200);
}
.emcompare-cell:last-child { border-right: none; }
.emcompare-cell.label {
  font-weight: 600; color: var(--em-gray-500); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; background: var(--em-gray-100);
}
.emcompare-row.alt .emcompare-cell.label { background: #eeede9; }
.emcompare-cell.header {
  color: white; font-weight: 700; font-size: 14px;
  background: var(--em-black);
}
.emcompare-cell.best {
  color: var(--em-green); font-weight: 700;
}
.emcompare-cell.remove-btn {
  font-size: 11px; color: var(--em-gray-500); cursor: pointer;
  text-align: center; padding: 6px;
}
.emcompare-cell.remove-btn:hover { color: #c00; }
.emcompare-bar-wrap { display: flex; align-items: center; gap: 8px; }
.emcompare-bar {
  height: 6px; border-radius: 3px; background: var(--em-green);
  transition: width .4s ease; flex-shrink: 0;
}

/* ── Buttons ── */
.emtools-btn { /* primary */
  padding: 10px 20px; border-radius: var(--em-radius);
  background: var(--em-green); color: white; border: none;
  font-family: var(--em-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.emtools-btn:hover { background: var(--em-green-dk); }
.emtools-btn-outline {
  padding: 9px 18px; border-radius: var(--em-radius);
  background: white; color: var(--em-green);
  border: 1px solid var(--em-green);
  font-family: var(--em-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.emtools-btn-outline:hover { background: var(--em-green-lt); }

/* ── Savings calculator ── */
.emsavings-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.emtools-field { margin-bottom: 18px; }
.emtools-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--em-gray-700); margin-bottom: 6px;
}
.emtools-slider-row {
  display: flex; align-items: center; gap: 10px;
}
.emtools-slider-row input[type="range"] {
  flex: 1; accent-color: var(--em-green);
}
.emtools-val {
  font-size: 13px; font-weight: 700; color: var(--em-green);
  min-width: 80px; text-align: right; white-space: nowrap;
}
.emtools-note { font-weight: 400; color: var(--em-gray-500); font-size: 11px; }
.emtools-hint { font-size: 11px; color: var(--em-gray-500); margin-top: 5px; }

/* Results */
.emsavings-hero {
  background: var(--em-black); border-radius: var(--em-radius-lg);
  padding: 28px 24px; text-align: center; margin-bottom: 16px;
}
.emsavings-hero-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px;
}
.emsavings-hero-val {
  font-size: 48px; font-weight: 700; color: var(--em-green);
  line-height: 1; margin-bottom: 4px;
}
.emsavings-hero-sub {
  font-size: 13px; color: rgba(255,255,255,.5);
}
.emsavings-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.emsavings-card {
  background: var(--em-gray-100); border-radius: var(--em-radius);
  padding: 12px 14px;
}
.emsavings-card.highlight { background: var(--em-green-lt); }
.emsavings-card-label {
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--em-gray-500); margin-bottom: 4px;
}
.emsavings-card-val {
  font-size: 18px; font-weight: 700; color: var(--em-black);
}
.emsavings-card-val.petrol { color: #c0392b; }
.emsavings-card-val.ev     { color: var(--em-green); }
.emsavings-card.highlight .emsavings-card-val { color: var(--em-green-dk); }

.emsavings-co2 {
  display: flex; align-items: center; gap: 12px;
  background: #EAF3DE; border-radius: var(--em-radius);
  padding: 14px 16px;
}
.emsavings-co2-icon { font-size: 24px; }
.emsavings-co2-val { font-size: 16px; font-weight: 700; color: #27500A; }
.emsavings-co2-label { font-size: 11px; color: #3B6D11; margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .emsavings-layout { grid-template-columns: 1fr; }
  .emcompare-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .emtools-header { flex-direction: column; }
  .emtools-search-wrap { width: 100%; }
  .emsavings-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .emcompare-picker-grid { grid-template-columns: 1fr; }
}