/* =========================================================================
   carpanel.css — მანქანის პანელი (CEF.CARPANEL = 19 / page-carpanel)
   კაპოტი · საბარგული · კარების ჩაკეტვა/გაღება.   კლასები იწყება cp- პრეფიქსით
   ========================================================================= */
#page-carpanel {
  --red: #ff4747; --amber: #ffb81f; --green: #38d977; --light: #eaeaea; --muted: rgba(234, 234, 234, .55);
  justify-content: flex-end; align-items: center; padding-right: 60px;
  background: none; backdrop-filter: none;
  font-family: 'Noto Sans Georgian', 'Manrope', 'Segoe UI', Arial, sans-serif; color: var(--light);
}
#page-carpanel * { box-sizing: border-box; }

.cp-card {
  width: 360px; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(234, 234, 234, .1);
  background: linear-gradient(160deg, rgba(24, 24, 28, .995), rgba(10, 10, 12, .995)); backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 30px rgba(255, 71, 71, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateX(40px); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.1, .3, 1), opacity .3s;
}
#page-carpanel.visible .cp-card { transform: none; opacity: 1; }

.cp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.cp-head-tx { flex: 1; min-width: 0; }
.cp-title { font: 700 20px 'Rajdhani', 'Noto Sans Georgian', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cp-sub { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sub b { color: var(--light); font-weight: 600; }
.cp-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(234, 234, 234, .12); background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: .15s; }
.cp-x:hover { color: #fff; background: rgba(255, 71, 71, .25); border-color: var(--red); }

/* მანქანა ზემოდან */
.cp-view { position: relative; display: flex; justify-content: center; padding: 4px 0 6px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 71, 71, .1), transparent 65%); }
.cp-car { height: clamp(170px, 30vh, 270px); width: auto; overflow: visible; }
.cp-car .body  { fill: #17171b; stroke: rgba(234, 234, 234, .28); stroke-width: 2; }
.cp-car .glass { fill: rgba(120, 170, 220, .22); stroke: rgba(234, 234, 234, .2); stroke-width: 1.5; }
.cp-car .roof  { fill: #202026; stroke: rgba(234, 234, 234, .14); stroke-width: 1.5; }
.cp-car .wheel { fill: #0b0b0d; stroke: rgba(234, 234, 234, .2); stroke-width: 1.5; }
.cp-car .lamp  { fill: rgba(255, 238, 170, .75); }
.cp-car .tail  { fill: rgba(255, 71, 71, .85); }

.cp-car .part { fill: #26262d; stroke: rgba(234, 234, 234, .3); stroke-width: 2; transition: transform .55s cubic-bezier(.3, 1.25, .4, 1), fill .3s, stroke .3s, filter .3s; }
.cp-car #cpHood  { transform-origin: 80px 84px; }
.cp-car #cpTrunk { transform-origin: 80px 216px; }
.cp-car .part.open { fill: rgba(255, 184, 31, .3); stroke: var(--amber); filter: drop-shadow(0 0 8px rgba(255, 184, 31, .8)); }
.cp-car #cpHood.open  { transform: scaleY(.22); }
.cp-car #cpTrunk.open { transform: scaleY(.22); }

.cp-car .door { fill: var(--green); filter: drop-shadow(0 0 5px rgba(56, 217, 119, .8)); transition: fill .3s, filter .3s; }
.cp-car.locked .door { fill: var(--red); filter: drop-shadow(0 0 5px rgba(255, 71, 71, .8)); }
.cp-lock { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 12, .85); border: 2px solid var(--green); color: var(--green); box-shadow: 0 0 18px rgba(56, 217, 119, .5); transition: .3s; }
.cp-lock.locked { border-color: var(--red); color: var(--red); box-shadow: 0 0 18px rgba(255, 71, 71, .55); }
.cp-lock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-lock .shackle { transition: transform .35s; transform-origin: 8px 11px; }
.cp-lock:not(.locked) .shackle { transform: translate(0, -2px) rotate(-28deg); }
.cp-tag { position: absolute; padding: 2px 9px; border-radius: 8px; background: rgba(10, 10, 12, .85); border: 1px solid var(--amber); color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: 0; transform: scale(.8); transition: .3s; }
.cp-tag.on { opacity: 1; transform: none; }
.cp-tag.hood  { top: 8%; left: 50%; margin-left: 34px; }
.cp-tag.trunk { bottom: 8%; left: 50%; margin-left: 34px; }

/* ღილაკები */
.cp-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 18px; }
.cp-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left; color: inherit; font: inherit;
  border: 1px solid rgba(234, 234, 234, .1); background: rgba(255, 255, 255, .035); transition: transform .12s, background .2s, border-color .2s; }
.cp-row, .cp-x { outline: none; }
.cp-row:focus-visible { border-color: var(--red); }
.cp-row:hover { background: rgba(255, 255, 255, .07); border-color: rgba(234, 234, 234, .25); transform: translateY(-1px); }
.cp-row:active { transform: scale(.985); }
.cp-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); color: var(--light); transition: .25s; }
.cp-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-tx { flex: 1; min-width: 0; }
.cp-tx b { display: block; font-size: 14px; font-weight: 600; }
.cp-tx small { font-size: 12px; color: var(--muted); transition: color .25s; }
.cp-act { padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: rgba(255, 255, 255, .08); border: 1px solid rgba(234, 234, 234, .14); white-space: nowrap; transition: .2s; }
.cp-row:hover .cp-act { background: var(--red); border-color: var(--red); color: #fff; }
.cp-key { position: absolute; top: -7px; left: 12px; padding: 0 6px; border-radius: 5px; background: #0b0b0d; border: 1px solid rgba(234, 234, 234, .16); font: 700 10px/16px 'Manrope', sans-serif; color: var(--muted); }

.cp-row.open .cp-ic { background: rgba(255, 184, 31, .16); color: var(--amber); }
.cp-row.open .cp-tx small { color: var(--amber); }
.cp-row.open { border-color: rgba(255, 184, 31, .35); }
.cp-row.is-lock .cp-ic { background: rgba(56, 217, 119, .15); color: var(--green); }
.cp-row.is-lock .cp-tx small { color: var(--green); }
.cp-row.is-lock.locked .cp-ic { background: rgba(255, 71, 71, .15); color: var(--red); }
.cp-row.is-lock.locked .cp-tx small { color: var(--red); }
.cp-row.busy { pointer-events: none; opacity: .6; }
.cp-row.busy .cp-act::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: cpSpin .7s linear infinite; }
@keyframes cpSpin { to { transform: rotate(360deg); } }