/* ============================================================================
 *  car-card.css — единый стиль карточки автомобиля.
 *
 *  ИСПОЛЬЗУЕТСЯ:
 *    /search        — основной грид плиток
 *    /car           — модалка заявки (часть стилей)
 *    inventory      — карусель в статьях (.inv-track .card)
 *
 *  Layout: Data Power v3.1 (выбран продакт-овнером 25.04.2026)
 *
 *  Структура карточки:
 *    .card
 *      .photo
 *        .slides > img.active
 *        .badges > .badge[.acc|.good]      — топливо/привод/комплектация
 *        .nav.prev / .nav.next             — навигация фото
 *        .counter, .dots                   — индикаторы
 *        .id                                — ID объявления (моноспейс)
 *      .body
 *        .titlerow
 *          .name (with .br span)            — бренд + модель + год
 *          .pricecol
 *            .price                         — цена в ₽
 *            .pricetrend                    — л.с. или тренд
 *        .trim-line (опц.)                 — комплектация
 *        .table > .cell > .k / .v          — спеки 3×2
 *        .util-row                          — утильсбор/edge (опц.)
 *        .foot > .zayvka-btn                — CTA
 * ============================================================================ */

:root {
  --cc-bg: #0a0418;
  --cc-fg: #fff;
  --cc-dim: rgba(255,255,255,.66);
  --cc-mute: rgba(255,255,255,.4);
  --cc-line: rgba(255,255,255,.08);
  --cc-line2: rgba(255,255,255,.16);
  --cc-acc: #c084fc;
  --cc-acc2: #a855f7;
  --cc-acc3: #7c3aed;
  --cc-acc4: #d8b4fe;
  --cc-good: #86efac;
  --cc-bad: #fca5a5;
  --cc-warn: #fcd34d;
  --cc-ease: cubic-bezier(0.22,1,0.36,1);
  --cc-spring: cubic-bezier(0.34,1.56,0.64,1);
  --cc-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* === CARD === */
.card{
  background:rgba(255,255,255,.025);
  border:1px solid var(--cc-line);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .25s,transform .25s;
  cursor:pointer;
  opacity:0;animation:cardInCC .55s var(--cc-ease) forwards;
}
@keyframes cardInCC{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.card:hover{
  border-color:var(--cc-acc);
  box-shadow:0 0 0 1px rgba(192,132,252,.2),0 16px 40px rgba(0,0,0,.4);
  transform:translateY(-2px);
}

/* === PHOTO === */
.card .photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0418;}
.card .photo .slides{position:absolute;inset:0;}
.card .photo .slides img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;opacity:0;transition:opacity .35s;
}
.card .photo .slides img.active{opacity:1;}

/* Бейджи признаков (топливо/привод/комплектация) */
.card .photo .badges{
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;gap:6px;flex-wrap:wrap;z-index:3;
  pointer-events:none;
}
.card .photo .badge{
  background:rgba(0,0,0,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.card .photo .badge.acc{
  border-color:rgba(192,132,252,.5);
  color:var(--cc-acc4);
  background:rgba(168,85,247,.28);
}
.card .photo .badge.good{
  border-color:rgba(134,239,172,.4);
  color:var(--cc-good);
  background:rgba(134,239,172,.18);
}

/* ID объявления */
.card .photo .id{
  position:absolute;bottom:10px;right:10px;z-index:3;
  font:500 10px/1 var(--cc-mono);
  color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* Photo navigation */
.card .photo .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .2s,background .2s;
  z-index:4;backdrop-filter:blur(8px);font-family:inherit;
}
.card:hover .photo .nav{opacity:1;}
.card .photo .nav:hover{background:rgba(168,85,247,.7);}
.card .photo .nav.prev{left:10px;}
.card .photo .nav.next{right:10px;}

.card .photo .counter{
  position:absolute;bottom:10px;left:10px;z-index:3;
  font:500 10px/1 var(--cc-mono);
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.55);padding:4px 8px;border-radius:6px;
  backdrop-filter:blur(8px);
}
.card:hover .photo .counter{}
.card .photo .dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:3;pointer-events:none;
}
.card .photo .dots span{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background .2s,width .2s;
}
.card .photo .dots span.on{background:#fff;width:18px;border-radius:3px;}

/* === BODY === */
.card .body{
  padding:14px 16px 16px;flex:1;
  display:flex;flex-direction:column;gap:12px;
}

/* Title row: имя слева, цена справа */
.card .titlerow{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;
}
.card .name{
  font:700 16.5px/1.25 'Inter',system-ui,sans-serif;
  letter-spacing:-.015em;
  margin:0;color:#fff;
  min-width:0;flex:1;
}
.card .name .br{color:var(--cc-acc4,#d8b4fe);font-weight:600;}

.card .pricecol{text-align:right;flex-shrink:0;}
.card .pricecol .price{
  font:700 17px/1 'Inter',system-ui,sans-serif;
  letter-spacing:-.01em;color:#fff;white-space:nowrap;
}
.card .pricecol .pricetrend{
  display:inline-block;
  font-size:11px;margin-top:3px;font-weight:600;
  white-space:nowrap;color:rgba(255,255,255,.5);
}

/* Trim tier line */
.card .trim-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:-4px;
}
.card .trim-line .trim-name{font-size:12px;color:rgba(255,255,255,.7);}
.card .trim-line .tier-badge{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(168,85,247,.18);color:var(--cc-acc4);
  border:1px solid rgba(192,132,252,.35);
}
.card .trim-line .tier-1{background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1);}
.card .trim-line .tier-2{background:rgba(147,197,253,.12);color:#93c5fd;border-color:rgba(147,197,253,.3);}
.card .trim-line .tier-3{background:rgba(134,239,172,.12);color:var(--cc-good);border-color:rgba(134,239,172,.3);}
.card .trim-line .tier-4{background:rgba(252,211,77,.12);color:var(--cc-warn);border-color:rgba(252,211,77,.3);}
.card .trim-line .tier-5{background:rgba(192,132,252,.18);color:var(--cc-acc4);border-color:rgba(192,132,252,.45);}

/* Spec table 3×2 */
.card .table{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;
  padding:10px 0;
  border-top:1px solid var(--cc-line);
  border-bottom:1px solid var(--cc-line);
}
.card .table .cell{display:flex;flex-direction:column;gap:2px;min-width:0;}
.card .table .cell .k{
  font:500 10px/1 var(--cc-mono);
  color:var(--cc-mute);text-transform:uppercase;letter-spacing:.06em;
}
.card .table .cell .v{
  font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Утильсбор / возрастной edge */
.card .util-row{display:flex;flex-direction:column;gap:4px;font-size:11.5px;line-height:1.4;}
.card .util-row .util,.card .util-row .edge{
  color:rgba(255,255,255,.65);display:inline-flex;align-items:center;gap:4px;
}
.card .util-row .util.heavy{color:var(--cc-bad);}
.card .util-row .edge{color:var(--cc-warn);}

/* Footer with CTA */
.card .foot{display:flex;gap:8px;align-items:center;margin-top:auto;}
.card .zayvka-btn{
  flex:1;display:block;text-align:center;
  padding:12px 14px;border-radius:11px;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--cc-acc2),var(--cc-acc3));
  border:0;color:#fff;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 22px rgba(168,85,247,.45),inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;overflow:hidden;
  transition:transform .2s var(--cc-spring),box-shadow .25s;
}
.card .zayvka-btn::before{
  content:'';position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);
  animation:zayvkaShimmer 3.5s infinite;
  pointer-events:none;
}
@keyframes zayvkaShimmer{0%{left:-100%}60%,100%{left:150%}}
.card .zayvka-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(168,85,247,.6),inset 0 1px 0 rgba(255,255,255,.28);
}
.card .zayvka-btn:active{transform:translateY(0) scale(.98);}

/* Inventory carousel в статьях — компактнее */
.inv-track .card{font-size:13px;}
.inv-track .card .body{padding:12px 14px 14px;gap:10px;}
.inv-track .card .name{font-size:15px;}
.inv-track .card .pricecol .price{font-size:15.5px;}
.inv-track .card .table{gap:6px 8px;padding:8px 0;}
.inv-track .card .table .cell .v{font-size:12px;}
.inv-track .card .table .cell .k{font-size:9px;}
.inv-track .card .zayvka-btn{padding:10px 12px;font-size:12.5px;border-radius:10px;}
.inv-track .card .photo .badge{font-size:10px;padding:4px 9px;}
.inv-track .card .photo .id{font-size:9.5px;padding:3px 7px;}

/* === Расширенная анкета: select / radio / hint / scroll === */
.amodal .fld select{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:12px 36px 12px 15px;
  font:15px/1.5 'Inter',sans-serif;
  color:#fff;
  outline:none;
  transition:border-color .2s,background .2s;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23c084fc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.amodal .fld select:focus{border-color:#c084fc;background-color:rgba(168,85,247,.08);}
.amodal .fld select option{background:#0d0520;color:#fff;}

.amodal .fld-hint{
  font-size:11.5px;color:rgba(255,255,255,.42);
  margin-top:6px;line-height:1.45;
}

.amodal .radio-group{display:flex;gap:8px;}
.amodal .radio-pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 12px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);
  font-size:14px;font-weight:600;color:rgba(255,255,255,.72);
  transition:all .18s;user-select:none;
}
.amodal .radio-pill input{display:none;}
.amodal .radio-pill:hover{border-color:rgba(168,85,247,.45);color:#fff;}
.amodal .radio-pill.on{
  background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(124,58,237,.12));
  border-color:#c084fc;color:#fff;box-shadow:inset 0 0 0 1px rgba(192,132,252,.35);
}

/* Скролл при длинной форме (вытесненной анкетой). */
.amodal-box{display:flex;flex-direction:column;max-height:calc(100vh - 40px);}
#amodal-form-wrap{display:flex;flex-direction:column;min-height:0;}
.amodal-top{flex-shrink:0;}
.amodal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.amodal-body::-webkit-scrollbar{width:5px;}
.amodal-body::-webkit-scrollbar-thumb{background:rgba(168,85,247,.35);border-radius:5px;}