/* «Сравнить с моей машиной» — car detail page block.
   Not global: pulled in by app/Views/catalog/show.php, like combobox.css and landing.css.

   Colour is never the only signal here — every row also carries an explicit +/− sign and
   a → arrow — so the verdict tints only reinforce what the text already says. */

.na82-cmp {
  /* Verdict tints are local to this block: it is the only place on the site that scores
     a value as better/worse. (They lived in theme.css for one round, while catalogue
     cards carried a badge strip — that was rolled back 2026-08-10.) */
  --cmp-better: #1a7f4b;
  --cmp-worse: #b1182a;
  --cmp-better-bg: rgba(26, 127, 75, 0.08);
  --cmp-worse-bg: rgba(177, 24, 42, 0.07);
  /* Selected engine tile — distinct from --cmp-better-bg so it reads as "current",
     not "better": reusing the verdict tint would imply the chosen engine wins the diff. */
  --cmp-selected-bg: rgba(220, 53, 69, 0.10);
  /* --accent does NOT flip with the theme, and on the dark surface it lands at 3.65:1 —
     below AA for the 14 px bold text it is used on here. --price makes exactly this jump
     (#dc3545 → #ff5160), so accent-coloured TEXT in this block follows the same pair. */
  --cmp-accent-text: var(--accent);
}

[data-bs-theme="dark"] .na82-cmp {
  --cmp-better: #5ec98b;
  --cmp-worse: #ff6b78;
  --cmp-better-bg: rgba(94, 201, 139, 0.10);
  --cmp-worse-bg: rgba(255, 107, 120, 0.10);
  --cmp-selected-bg: rgba(255, 81, 96, 0.14);
  --cmp-accent-text: #ff5160;
}

.na82-cmp__intro {
  color: var(--fg-muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.na82-cmp__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Aligns a control and its button on one baseline — the button has no label above it. */
.na82-cmp__row--bottom {
  align-items: flex-end;
}

.na82-cmp__field {
  flex: 1 1 12rem;
  min-width: 0;
}

.na82-cmp__field--action {
  flex: 0 0 auto;
}

/* Buttons are styled here rather than borrowed from Bootstrap: `.btn-outline-primary`
   and friends read `--bs-{name}-rgb`, which does not follow [data-bs-theme], and the
   blue they land on belongs to no palette this site uses. */
.na82-cmp__btn {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--cmp-accent-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.na82-cmp__btn:hover:not(:disabled),
.na82-cmp__btn:focus-visible:not(:disabled) {
  background: var(--accent);
  color: var(--fg-on-dark);
}

.na82-cmp__btn:disabled {
  border-color: var(--border);
  color: var(--fg-subtle);
  cursor: not-allowed;
}

.na82-cmp__btn--quiet {
  border-color: var(--border);
  color: var(--fg-muted);
}

.na82-cmp__btn--quiet:hover,
.na82-cmp__btn--quiet:focus-visible {
  border-color: var(--fg-muted);
  background: transparent;
  color: var(--fg);
}

/* Reset ("Сравнить с другой машиной") at the top of the result: a full-width row of
   its own so the engine/trim tiles below it keep their flex-wrap layout intact.
   float:right collapsed the tile row to the remaining left space; block layout here
   is the fix. The footer reset button it replaced needed a scroll that no JS approach
   could keep stable through the stickySidebar layout thrash — moving the button up
   removed the need entirely. */
.na82-cmp__reset {
  display: block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  text-align: right;
}

/* Inline text action ("Выбрать другую") — a button for semantics, a link for looks. */
.na82-cmp__link {
  padding: 0;
  border: none;
  background: none;
  color: var(--cmp-accent-text);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.na82-cmp__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--fg);
}

.na82-cmp__hint {
  color: var(--fg-subtle);
  font-size: 0.8125rem;
  margin: 0.375rem 0 0;
}

.na82-cmp__step {
  margin-top: 1rem;
}

.na82-cmp__steplabel {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.na82-cmp__gen {
  font-weight: 400;
  color: var(--fg-subtle);
}

/* Engine / generation choices — tiles, not a select: the list is short (4-6 entries)
   and this is the one answer the visitor is expected to recognise at a glance. */
.na82-cmp__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.na82-cmp__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.na82-cmp__tile:hover,
.na82-cmp__tile:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* Selected engine tile in the result switcher — accent border + selected tint.
   Uses --cmp-selected-bg, not --cmp-better-bg, so it reads as "current" not "better". */
.na82-cmp__tile--active {
  border-color: var(--accent);
  background: var(--cmp-selected-bg);
  color: var(--cmp-accent-text);
}

/* Tiles are disabled while the engine swap's diff request is in flight: pointer-events
   go off so a second click cannot start a parallel swap, and the cursor reflects it. */
.na82-cmp__tile:disabled {
  cursor: progress;
  opacity: 0.6;
}

/* The switcher sits above the result heads; tighten the bottom margin so the two
   heads don't drift away from it. */
.na82-cmp__switcher {
  margin-bottom: 0.75rem;
}

.na82-cmp__tile small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--fg-subtle);
}

/* ---------------------------------------------------------------- result */

/* Gallery-equivalent enter animation (cf. .card-preview-swap opacity transition in
   style.css): the result block fades in when it arrives, whether via the picker or
   the init auto-open from localStorage. One-shot enter only — no leave animation,
   so stage swaps (result→picking on changeCar) don't jitter. */
@keyframes na82-cmp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.na82-cmp__result { animation: na82-cmp-fade-in 0.3s ease-out; }
@media (prefers-reduced-motion: reduce) { .na82-cmp__result { animation: none; } }

/* Option diff sits under the trim chips; give it a subtle separator. */
.na82-cmp__optresult {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.na82-cmp__heads {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.na82-cmp__head {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.na82-cmp__head small {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
}

.na82-cmp__head strong {
  display: block;
  font-size: 0.875rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.na82-cmp__head--ours {
  background: var(--cmp-better-bg);
}

/* Fixed aspect box: the two photos come from different sources (uploaded listing shot vs
   CarsBase catalogue render) and would otherwise set two different column heights. */
.na82-cmp__photo {
  display: block;
  aspect-ratio: 4 / 3;
  margin: 0.375rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--skeleton-bg);
}

.na82-cmp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.na82-cmp__line {
  display: grid;
  grid-template-columns: minmax(6rem, 1.2fr) minmax(0, 1.4fr) minmax(4.5rem, auto);
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.na82-cmp__line:last-of-type {
  border-bottom: none;
}

.na82-cmp__name {
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

/* Footnote marker on a row whose catalogue figure is not defined consistently. */
.na82-cmp__mark {
  color: var(--cmp-worse);
  font-weight: 700;
  padding-left: 0.125rem;
}

.na82-cmp__vals {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.na82-cmp__theirs {
  color: var(--fg-subtle);
}

.na82-cmp__arrow {
  color: var(--fg-subtle);
}

.na82-cmp__ours {
  font-weight: 600;
  color: var(--fg);
}

.na82-cmp__delta {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
}

.na82-cmp__line--better .na82-cmp__delta {
  color: var(--cmp-better);
}

.na82-cmp__line--worse .na82-cmp__delta {
  color: var(--cmp-worse);
}

/* ---------------------------------------------------------------- options */

.na82-cmp__options {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.na82-cmp__trimnote {
  font-size: 0.8125rem;
  color: var(--fg-muted);
  margin: 0 0 0.75rem;
}

.na82-cmp__optblock {
  margin-bottom: 0.875rem;
}

.na82-cmp__optheading {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 0.375rem;
  color: var(--fg);
}

.na82-cmp__optheading--gain {
  color: var(--cmp-better);
}

.na82-cmp__optheading--loss {
  color: var(--cmp-worse);
}

.na82-cmp__optgroup {
  margin-bottom: 0.625rem;
}

.na82-cmp__optcat {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fg-subtle);
  margin-bottom: 0.25rem;
}

.na82-cmp__optlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.na82-cmp__chip {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--fg);
  font-size: 0.8125rem;
}

/* The tint repeats what the «Добавится» / «Пропадёт» heading already states, so the
   list stays readable for anyone who cannot separate the two colours. */
.na82-cmp__chip--gain {
  background: var(--cmp-better-bg);
}

.na82-cmp__chip--loss {
  background: var(--cmp-worse-bg);
}

/* Shared options — deliberately the quietest of the three. They are the baseline the
   green and red lists are measured against, not a third verdict, so they take the
   neutral surface and a muted label. */
.na82-cmp__chip--common {
  background: var(--surface-2);
  color: var(--fg-muted);
}

.na82-cmp__optblock--common {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* A <button>, so keyboard and screen readers get the disclosure for free — hence the
   reset of the UA button styling back to the heading it looks like. */
.na82-cmp__optheading--common {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg-muted);
  cursor: pointer;
  text-align: left;
}

.na82-cmp__optheading--common:hover {
  color: var(--fg);
}

.na82-cmp__caret {
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.na82-cmp__caret--open {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .na82-cmp__caret { transition: none; }
}

.na82-cmp__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.na82-cmp__disclaimer {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--fg-subtle);
}

/* The same note, but next to the three option lists it qualifies rather than in the
   footer. `--fg-muted` and not `--fg-subtle`: this one lands on the options block's own
   tinted surface, where subtle drops under AA in the light theme. */
.na82-cmp__disclaimer--inline {
  flex: none;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
  color: var(--fg-muted);
  line-height: 1.45;
}

@media (max-width: 575.98px) {
  .na82-cmp__line {
    grid-template-columns: 1fr auto;
    row-gap: 0.125rem;
  }

  .na82-cmp__name {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
  }
}