/* =========================================================================
 * Expert Data — Panel klienta
 * Dark theme, flat & editorial. Akcent #0095ff, tlo #15181e.
 * Jeden plik. Tokens -> reset -> base -> components -> animations.
 * ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  --bg:           #15181e;
  --bg-elev-1:    #1c2028;
  --bg-elev-2:    #232830;
  --bg-elev-3:    #2a3038;
  --border:       #262b35;
  --border-strong:#343a47;

  --text:         #ffffff;
  --text-muted:   #a8b0bf;
  --text-dim:     #6c7382;

  --accent:       #0095ff;
  --accent-hover: #0080dd;
  --accent-active:#006cb8;
  --accent-soft:  rgba(0, 149, 255, 0.12);
  --accent-glow:  rgba(0, 149, 255, 0.35);

  --success:      #00c9a7;
  --success-soft: rgba(0, 201, 167, 0.12);
  --warning:      #ffb547;
  --warning-soft: rgba(255, 181, 71, 0.12);
  --danger:       #ed4c78;
  --danger-soft:  rgba(237, 76, 120, 0.12);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --topbar-h: 64px;
  --container: 1200px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
body.panel-body { display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
input, button, select, textarea { font: inherit; color: inherit; }

/* Selection / focus */
::selection { background: var(--accent-soft); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.panel-main { flex: 1; padding: 32px 0 64px; }
@media (max-width: 768px) { .panel-main { padding: 16px 0 48px; } }

.panel-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: auto;
}
.panel-footer .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--text-dim); flex-wrap: wrap;
}
.panel-footer__brand { font-weight: 700; color: var(--text); }
.panel-footer__brand span { color: var(--accent); }

/* ---------- 4. TOPBAR ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(21, 24, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
}
.topbar__inner {
  height: 100%;
  display: flex; align-items: center; gap: 24px;
}
.topbar__logo {
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  color: var(--text);
}
.topbar__logo span { color: var(--accent); }
.topbar__logo:hover { color: var(--text); }

.topbar__nav {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.topbar__nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius);
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  transition: var(--transition);
}
.topbar__nav-item:hover { background: var(--bg-elev-1); color: var(--text); }
.topbar__nav-item.is-active { background: var(--accent-soft); color: var(--accent); }
.topbar__nav-item .icon { width: 18px; height: 18px; }

.topbar__right { position: relative; display: flex; align-items: center; gap: 8px; }
.topbar__avatar-wrap { position: relative; }
.topbar__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-active));
  color: #fff; font-weight: 600; font-size: 14px;
  border: none; display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.topbar__avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 3px var(--accent-soft); }

.topbar__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px; background: var(--bg-elev-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: var(--transition);
}
.topbar__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar__menu-header {
  padding: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.topbar__menu-header strong { display: block; font-size: 14px; color: var(--text); }
.topbar__menu-header small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.topbar__menu-item {
  display: block; padding: 10px 12px; font-size: 14px; color: var(--text-muted);
  border-radius: var(--radius); transition: var(--transition);
}
.topbar__menu-item:hover { background: var(--bg-elev-2); color: var(--text); }
.topbar__menu-item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.topbar__menu-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.topbar__burger {
  display: none; background: none; border: none; padding: 8px;
  flex-direction: column; gap: 4px; width: 36px; height: 36px;
  align-items: center; justify-content: center;
}
.topbar__burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }

@media (max-width: 768px) {
  .topbar__nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-elev-1); border-bottom: 1px solid var(--border);
    padding: 12px; }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav-item { justify-content: flex-start; padding: 12px 16px; }
  .topbar__burger { display: inline-flex; }
}

/* ---------- 5. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: clamp(24px, 3vw, 32px); }
h2 { font-size: 22px; margin-bottom: 16px; }
h3 { font-size: 18px; margin-bottom: 12px; }
h4 { font-size: 16px; margin-bottom: 8px; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.label {
  display: inline-block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 4px;
}
.subtitle { color: var(--text-muted); font-size: 14px; }
.mono { font-family: var(--font-mono); }

/* ---------- 6. CARD ---------- */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.card--hover:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card--accent { border-left: 3px solid var(--accent); }
.card--success { border-left: 3px solid var(--success); }
.card--warning { border-left: 3px solid var(--warning); }
.card--danger { border-left: 3px solid var(--danger); }

.card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.card__header-title { font-size: 16px; font-weight: 600; color: var(--text); }
.card__body { padding: 20px; }
.card__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}

/* ---------- 7. BUTTON ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; }

.btn--primary {
  background: var(--accent); color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
.btn--primary:active { background: var(--accent-active); }

.btn--secondary {
  background: var(--bg-elev-2); color: var(--text); border-color: var(--border);
}
.btn--secondary:hover { background: var(--bg-elev-3); color: var(--text); border-color: var(--border-strong); }

.btn--ghost { color: var(--text-muted); }
.btn--ghost:hover { background: var(--bg-elev-1); color: var(--text); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger); color: #fff; opacity: 0.9; }

.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--xs { padding: 4px 10px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--icon { padding: 8px; min-width: 36px; min-height: 36px; }

/* ---------- 8. FORMS ---------- */
.field { margin-bottom: 16px; }
.field__label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-muted); margin-bottom: 6px;
}
.field__hint { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.field__error { display: block; font-size: 12px; color: var(--danger); margin-top: 4px; }

.input, .select, .textarea {
  display: block; width: 100%; min-width: 0;
  padding: 10px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  transition: var(--transition);
}
.input::placeholder { color: var(--text-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-elev-2);
}
.input.is-invalid, .select.is-invalid {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}
/* #6 (klient 29.06.2026): disabled input/select wyszarzony jak „Rok produkcji" */
.input:disabled, .select:disabled { opacity: .45; color: var(--text-dim); cursor: not-allowed; }
.input[type="date"]:disabled::-webkit-calendar-picker-indicator { opacity: 0; }

.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8b0bf' stroke-width='2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.select option { background: var(--bg-elev-1); color: var(--text); }

.textarea { resize: vertical; min-height: 90px; }

/* Input group — input + przycisk akcji w jednym pasku */
.input-group { display: flex; }
.input-group__input {
  flex: 1; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-right: none;
}
.input-group__btn {
  height: auto; padding: 10px 16px;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  flex-shrink: 0; white-space: nowrap;
}
.input-group__input:focus { z-index: 1; }
.input-group__input:focus + .input-group__btn { border-color: var(--accent); }

/* Checkbox / radio */
.check {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: 14px; color: var(--text-muted);
}
.check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.check.is-invalid .check__box { border-color: #e34d4d; box-shadow: 0 0 0 3px rgba(227,77,77,0.18); }
.check__error { display: none; color: #e34d4d; font-size: .85rem; margin-top: .35rem; }
.check.is-invalid .check__error { display: block; }
.check__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px; background: var(--bg-elev-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  margin-top: 1px;
}
.check__box::after {
  content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  opacity: 0; transform: scale(0.6); transition: var(--transition);
}
.check input:checked ~ .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked ~ .check__box::after { opacity: 1; transform: scale(1); }
.check__label a { color: var(--accent); }

/* Radio buttons (segmented) */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.segmented__item {
  position: relative; padding: 6px 14px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition);
}
.segmented__item input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active, .segmented__item:has(input:checked) {
  background: var(--accent); color: #fff;
}

/* ---------- 9. TABLE ---------- */
.table-wrap {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
/* #9e/#9f (klient 27.06.2026): na wąskich ekranach umożliw przewijanie tabeli w poziomie, by dotrzeć
   do kolumn VIN / nr rej. / podgląd (Archiwum wycen) oraz pełnych danych pakietu (Pakiety). Bez tego
   prawe kolumny były nieosiągalne na telefonie. min-width wymusza poziomy scroll zamiast ściskania. */
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* min-width: max-content — tabela przyjmuje szerokość swojej treści: szeroka (Archiwum: VIN / nr rej.
     / podgląd) przewija się w poziomie, a wąska (Pakiety) mieści się bez wymuszonego scrolla na tablecie. */
  .table-wrap > .table { min-width: max-content; }
}
.table {
  width: 100%; border-collapse: collapse;
}
.table thead th {
  text-align: left; padding: 12px 16px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.table tbody td {
  padding: 14px 16px; font-size: 14px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--bg-elev-2); }
.table tbody tr.is-clickable { cursor: pointer; }
.table--compact tbody td { padding: 10px 16px; font-size: 13px; }
.table .right { text-align: right; }
.table .narrow { width: 1%; white-space: nowrap; }
/* Uwaga klienta 02.07.2026: kwota + symbol waluty (zł) w jednym wierszu w podsumowaniu wyceny. */
.table .right.mono { white-space: nowrap; }

/* ---------- 10. BADGE ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft); color: var(--danger); }
.badge--info    { background: var(--accent-soft); color: var(--accent); }
.badge--neutral { background: var(--bg-elev-2); color: var(--text-muted); }

/* ---------- 11. ALERT / RIBBON ---------- */
.alert {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid transparent; margin-bottom: 16px;
  font-size: 14px;
  position: relative;
}
.alert--info    { background: var(--accent-soft); color: var(--accent); border-color: rgba(0,149,255,0.25); }
.alert--success { background: var(--success-soft); color: var(--success); border-color: rgba(0,201,167,0.25); }
.alert--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(255,181,71,0.25); }
.alert--danger  { background: var(--danger-soft); color: var(--danger); border-color: rgba(237,76,120,0.25); }
.alert__close {
  margin-left: auto; background: none; border: none; color: inherit;
  font-size: 22px; line-height: 1; padding: 0; opacity: 0.6;
}
.alert__close:hover { opacity: 1; }

.ribbon {
  padding: 12px 20px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  margin-bottom: 24px;
}
.ribbon--warning { background: var(--warning-soft); color: var(--warning); border-left: 3px solid var(--warning); }
.ribbon--danger  { background: var(--danger-soft); color: var(--danger); border-left: 3px solid var(--danger); }
.ribbon--info    { background: rgba(0,149,255,0.08); color: var(--accent); border-left: 3px solid var(--accent); }
.ribbon a { margin-left: auto; }

/* ---------- 12. STAT (hero numbers) ---------- */
.stat { padding: 4px 0; }
.stat__label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 8px;
}
.stat__value {
  font-size: clamp(28px, 4vw, 36px); font-weight: 700;
  color: var(--text); letter-spacing: -0.02em; line-height: 1.1;
  /* #9c (klient 27.06.2026): liczby 5–6-cyfrowe w podsumowaniu nie mogą się łamać na 2 linie. */
  white-space: nowrap;
}
/* #9c: na wąskich ekranach (dwa kafle obok siebie) zmniejsz czcionkę, by 6-cyfrowa wartość się zmieściła. */
@media (max-width: 480px) {
  .stat__value { font-size: clamp(20px, 6.5vw, 26px); }
  /* #9c: panel wyniku w wycenie szczegółowej — zmniejsz wartości, by nowrap nie ucinał liczb na wąsko. */
  .sticky-result__value { font-size: 17px; }
}
.stat__value-sub { font-size: 16px; color: var(--text-dim); font-weight: 500; margin-left: 6px; }
.stat__hint { display: block; font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* ---------- 13. PROGRESS ---------- */
.progress {
  height: 8px; background: var(--bg-elev-2);
  border-radius: 100px; overflow: hidden;
}
.progress__bar {
  height: 100%; width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--accent), #5fb8ff);
  border-radius: 100px;
  transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 14. EMPTY STATE ---------- */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  background: var(--bg-elev-2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.empty-state__icon .icon { width: 28px; height: 28px; }
.empty-state h3 { color: var(--text); }
.empty-state p { max-width: 420px; margin: 8px auto 0; }

/* ---------- 15. GRID HELPERS ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--auto-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
/* Uwaga klienta 02.07.2026 (iPad/telefon): pola dat w formularzu wyceny (grid 3-kol.)
   nachodziły na siebie / nie mieściły się na tablecie — stackujemy je do 1 kolumny do 992px. */
@media (max-width: 992px) {
  .grid[data-valuation-dates] { grid-template-columns: 1fr; }
}

.row { display: flex; gap: 16px; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }

/* Uwaga klienta 02.07.2026: przyciski na stronie „Dziękujemy" (po zakupie pakietu) nie mieściły
   się w jednej linii na telefonie i nie dało się przewinąć ekranu — pozwalamy im się zawijać,
   a na wąskim ekranie stackujemy pełną szerokością. */
.thanks-actions { flex-wrap: wrap; }
@media (max-width: 520px) {
  .thanks-actions { flex-direction: column; align-items: stretch; }
  .thanks-actions .btn { width: 100%; }
}

.spacer { flex: 1; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ---------- 16. PAGE HEADER ---------- */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-header__title { font-size: 24px; font-weight: 700; }
.page-header__subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 17. AUTH SCREEN ---------- */
.auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 80% -20%, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(circle at -10% 110%, var(--accent-soft) 0%, transparent 50%),
    var(--bg);
}
.auth__panel {
  width: 100%; max-width: 440px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 40px;
  box-shadow: var(--shadow-lg);
}
.auth__logo { text-align: center; margin-bottom: 28px; font-size: 22px; font-weight: 700; }
.auth__logo img { margin: 0 auto; display: block; }
.auth__logo span { color: var(--accent); }
.auth__title { text-align: center; margin-bottom: 8px; font-size: 22px; }
.auth__subtitle { text-align: center; color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }
.auth__footer { text-align: center; margin-top: 24px; font-size: 13px; color: var(--text-dim); }

/* ---------- 18. STICKY RESULT (wycena) ---------- */
.sticky-result {
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  position: sticky; top: calc(var(--topbar-h) + 16px);
}
.sticky-result__title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 16px; }
.sticky-result__group { padding: 14px 0; border-top: 1px solid var(--border); }
.sticky-result__group:first-of-type { border-top: none; padding-top: 0; }
.vehicle-selector__by-code { background: var(--bg-soft, rgba(255,255,255,0.04)); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.vehicle-selector__by-code-row { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.vehicle-selector__by-code-row input { flex: 1; min-width: 0; }
.vehicle-selector__by-code-results { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.vehicle-selector__by-code-results[hidden] { display: none; }
.vehicle-selector__by-code-result { background: var(--bg-soft, rgba(255,255,255,0.05)); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px; transition: all 0.15s; }
.vehicle-selector__by-code-result:hover { background: var(--accent-soft, rgba(0,149,255,0.15)); border-color: var(--accent); }
.vehicle-selector__by-code-result-code { font-weight: 700; color: var(--accent); }
.vehicle-selector__by-code-result-desc { color: var(--text-dim); margin-left: 8px; }

/* D2: Panel parametrów identyfikacyjnych wybranego kodu Expertdata (katalogowy podgląd).
   Renderuje się pod selectem "Grupa (kod Expertdata)"; wypełniany przez skrypt strony (data-code-params). */
.code-params {
    margin-top: 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1), max-height 0.25s cubic-bezier(.4,0,.2,1);
}
.code-params.is-open {
    opacity: 1;
    max-height: 480px;
    transform: translateY(0);
}
.code-params__head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
    color: var(--accent);
    text-transform: uppercase;
}
.code-params__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px 18px;
    padding: 12px 14px;
}
.code-params__row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.code-params__label { color: var(--text-dim); }
.code-params__value { color: var(--text); font-weight: 500; text-align: right; }
.code-params__empty { padding: 12px 14px; color: var(--text-dim); font-size: 13px; }
@media (max-width: 600px) {
    .code-params__body { grid-template-columns: 1fr; }
}
.sticky-result__warnings { margin: 8px 0; }
.sticky-result__warnings[hidden] { display: none; }
.sticky-result__warning { background: rgba(255, 165, 0, 0.12); border-left: 3px solid #ffa500; color: #ffb84d; padding: 8px 12px; border-radius: 6px; font-size: 12.5px; line-height: 1.4; margin-bottom: 6px; }
.sticky-result__group-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; }
.sticky-result__value-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.sticky-result__value { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticky-result__value-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.sticky-result__breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.sticky-result__breakdown-toggle { color: var(--accent); font-size: 12px; background: none; border: none; padding: 4px 0; }
.sticky-result__breakdown-list { display: none; margin-top: 8px; }
.sticky-result__breakdown.is-open .sticky-result__breakdown-list { display: block; }
/* #2 (klient 27.06.2026): „Składowe wyceny" w panelu wyniku odrobinę większe (12→13px) — bez zmiany
   układu okna, dla lepszej czytelności; rozmiar jak w podsumowaniu wyceny (.table--compact = 13px). */
.sticky-result__breakdown-row {
  display: flex; justify-content: space-between; padding: 4px 0; gap: 8px;
  font-size: 13px; color: var(--text-muted); font-family: var(--font-mono);
}
/* #13f (klient 29.06.2026): kwoty 5-cyfrowe nie łamią wiersza — prawa wartość nie może się łamić. */
.sticky-result__breakdown-row span:last-child { white-space: nowrap; flex-shrink: 0; text-align: right; }

@media (max-width: 992px) {
  .sticky-result {
    position: fixed; bottom: 0; left: 0; right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    z-index: 50;
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  .panel-main { padding-bottom: 320px; }
  /* #13e (klient 29.06.2026): otwarta lista składowych nie wypełnia całego ekranu na mobile. */
  .sticky-result__breakdown-list { max-height: 35vh; overflow-y: auto; }
}

/* ---------- 19. MODULE / PLAN CARDS ---------- */
.module-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--bg-elev-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: var(--transition);
}
.module-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.module-card__icon .icon { width: 22px; height: 22px; }
.module-card__title { font-size: 16px; font-weight: 600; }
.module-card__desc { font-size: 13px; color: var(--text-muted); }
.module-card.is-disabled { opacity: 0.55; }
.module-card.is-disabled:hover { border-color: var(--border); transform: none; }

.plan-card {
  position: relative;
  padding: 24px; background: var(--bg-elev-1);
  border: 2px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 16px;
  transition: var(--transition);
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.plan-card.is-current { border-color: var(--accent); }
.plan-card__badge {
  position: absolute; top: -10px; left: 20px;
  padding: 3px 10px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 100px;
}
.plan-card__name { font-size: 18px; font-weight: 700; }
.plan-card__price { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.plan-card__price small { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.plan-card__features { list-style: none; padding: 0; }
.plan-card__features li {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 14px; color: var(--text-muted);
}
.plan-card__features li .icon { color: var(--success); width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 20. CTA BIG ---------- */
.cta-big {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: var(--bg-elev-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--text);
  transition: var(--transition);
}
.cta-big:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.cta-big__icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cta-big__icon .icon { width: 24px; height: 24px; }
.cta-big__body { flex: 1; min-width: 0; }
.cta-big__title { font-size: 16px; font-weight: 600; }
.cta-big__desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.cta-big__arrow { color: var(--text-dim); transition: var(--transition); margin-left: auto; flex-shrink: 0; }
.cta-big:hover .cta-big__arrow { color: var(--accent); transform: translateX(2px); }
/* Zamrożony kafelek „Wyceń pojazd" bez aktywnego pakietu (uwaga klienta 15.06.2026 #1). */
.cta-big--locked { opacity: 0.55; filter: grayscale(0.4); }
.cta-big--locked:hover { border-color: var(--border); transform: none; }
.cta-big--locked .cta-big__desc { color: var(--accent); }

/* ---------- 21. SECTION (with title) ---------- */
.section { margin-bottom: 32px; }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.section__title { font-size: 18px; font-weight: 600; }
.section__link {
  font-size: 13px; font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- 22. PAGINATION ---------- */
.pagination {
  display: flex; gap: 4px; justify-content: center; margin-top: 24px;
}
.pagination__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  background: var(--bg-elev-1); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  transition: var(--transition);
}
.pagination__item:hover { background: var(--bg-elev-2); color: var(--text); }
.pagination__item.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination__item.is-disabled { opacity: 0.4; pointer-events: none; }

/* ---------- 23. ANIMATIONS ---------- */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal--stagger > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal--stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }
.reveal--stagger.is-visible > *:nth-child(n+7) { transition-delay: 360ms; }

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.pulse { animation: pulse-glow 600ms ease-out; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--bg-elev-3); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--stagger > * { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- 24. ICON ---------- */
.icon { display: inline-block; vertical-align: -2px; flex-shrink: 0; }

/* ---------- 25. UTILS / RESPONSIVE ---------- */
.hide-mobile { display: revert; }
.show-mobile { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: revert; }
}

/* ---------- 26. SEARCHABLE COMBOBOX ---------- */
.combo { position: relative; }
.combo__hidden { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }
.combo__input {
  width: 100%;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 38px 12px 14px;
  font: inherit;
  outline: none;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.combo__input::placeholder { color: var(--text-dim); }
.combo__input:focus,
.combo[data-open="true"] .combo__input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 149, 255, .15);
  background: var(--bg);
}
.combo__caret {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-dim);
  transition: transform .15s ease;
  width: 14px; height: 14px;
}
.combo[data-open="true"] .combo__caret { transform: translateY(-50%) rotate(180deg); color: var(--accent); }
.combo__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.combo[data-open="true"] .combo__menu { display: block; }
.combo__menu::-webkit-scrollbar { width: 8px; }
.combo__menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.combo__option {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s ease;
}
.combo__option:last-child { border-bottom: none; }
.combo__option:hover,
.combo__option[data-active="true"] { background: rgba(0, 149, 255, .12); color: var(--accent); }
.combo__option[data-selected="true"] { background: rgba(0, 149, 255, .2); color: var(--accent); font-weight: 500; }
.combo__option[hidden] { display: none; }
/* #13c (klient 29.06.2026): parametry kodu pod nazwą opcji (brak hovera na touch).
   Uwaga klienta 02.07.2026: pokazujemy je również na desktopie i tablecie — na iPadzie w widoku
   desktop nie ma tooltipa, więc opis pod kodem zastępuje go na każdej szerokości ekranu. */
.combo__option-params { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.3; white-space: normal; }
.combo__empty {
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

/* combo z-index fix — gdy otwarte, wynies wrapper nad sasiednie wiersze */
.combo[data-open="true"] { z-index: 100; }
.combo__menu { z-index: 100; }

/* gdy combobox w karcie jest otwarty, karta przestaje obcinac (overflow) */
.card:has(.combo[data-open="true"]) { overflow: visible; }

/* combobox — wyrownanie wysokosci i radiusu z .input/.select */
.combo__input {
  padding: 10px 38px 10px 14px;
  font-size: 14px;
  background: var(--bg-elev-1);
  border-radius: var(--radius);
}
.combo__input:focus,
.combo[data-open="true"] .combo__input { background: var(--bg-elev-2); }

/* sticky-result — pasek tytul + status, wyrownanie pionowe + odstep pod paskiem */
.sticky-result__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sticky-result__head .sticky-result__title { margin: 0; }
.sticky-result__status {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-dim);
  max-width: 60%;
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* date input — wyrownanie wysokosci + jasna ikona kalendarza */
.input[type="date"],
.input[type="datetime-local"],
.input[type="time"] {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  font-family: inherit;
  color-scheme: dark;
  /* 1a/1b (klient 06.07.2026, telefon): iOS nadaje date-inputom szerokosc wewnetrzna
     (intrinsic width) — pole wystawalo odrobine poza kontener. appearance:none kaze
     iOS respektowac box model; min-height chroni przed zapadnieciem pustego pola. */
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: 42px;
}
/* iOS/WebKit centruje wartosc date-inputa — wyrownaj do lewej jak pozostale pola */
.input[type="date"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}
/* 1a/1b: mrugniecie hintem zakresu po skorygowaniu daty spoza min/max (initDateRangeClamp) */
.field__hint--flash {
  color: var(--accent);
  transition: color .2s ease;
}
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s ease;
}
.input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Language switcher */
.topbar__lang { position: relative; }
.topbar__lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 12px; min-width: 50px;
    background: var(--bg-elev-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    transition: all 0.2s;
}
.topbar__lang-btn:hover { background: var(--bg-elev-3); border-color: var(--accent); }
.topbar__lang-flag { font-family: 'Inter', system-ui, sans-serif; }
.topbar__lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px; background: var(--bg-elev-2);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all 0.2s; z-index: 200;
}
.topbar__lang.is-open .topbar__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar__lang-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; color: var(--text); text-decoration: none;
    border-radius: 6px; font-size: 13px;
}
.topbar__lang-item:hover { background: var(--bg-elev-3); }
.topbar__lang-item.is-active { color: var(--accent); font-weight: 600; }
.topbar__lang-item .topbar__lang-flag {
    background: var(--bg-elev-3); padding: 3px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}

/* Instrukcje dropdown — topbar (Point 12) */
.topbar__help { position: relative; }
.topbar__help-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    background: var(--bg-elev-2); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all 0.2s;
}
.topbar__help-btn:hover { background: var(--bg-elev-3); border-color: var(--accent); color: var(--text); }
.topbar__help-btn .icon { width: 16px; height: 16px; }
.topbar__help-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px; background: var(--bg-elev-2);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all 0.2s; z-index: 200;
}
.topbar__help-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar__help-item {
    display: block; padding: 10px 12px; color: var(--text); text-decoration: none;
    border-radius: 6px; font-size: 13px; transition: background 0.15s;
}
.topbar__help-item:hover { background: var(--bg-elev-3); color: var(--accent); }
@media (max-width: 768px) { .topbar__help-label { display: none; } }

/* Strona instrukcji — lista kroków */
.instr-list {
    margin: 8px 0 0 0; padding-left: 20px;
    color: var(--text-muted); font-size: 14px; line-height: 1.7;
}
.instr-list li { margin-bottom: 6px; }
.instr-list li strong { color: var(--text); }

/* Footer links + legal docs */
.panel-footer__links { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.panel-footer__links a { color: var(--text-dim); text-decoration: none; font-size: 12px; transition: color 0.2s; }
.panel-footer__links a:hover { color: var(--accent); }
.panel-footer__credit { font-size: 12px; color: var(--text-dim); line-height: 1; }
.panel-footer__heart { color: #ff5a5f; }
.panel-footer .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.legal-doc h2 { font-size: 18px; margin: 24px 0 12px; color: var(--accent); font-weight: 600; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p, .legal-doc li { line-height: 1.7; color: var(--text); margin: 8px 0; }
.legal-doc ol, .legal-doc ul { padding-left: 24px; margin: 12px 0; }
.legal-doc ol li { margin-bottom: 8px; }
.legal-doc strong { color: var(--accent); font-weight: 600; }
.legal-doc em { color: var(--text-dim); font-style: italic; }

/* Layout helpers (moved from inline styles) */
.container--narrow { max-width: 720px; }
.container--narrow-md { max-width: 880px; }
.container--narrow-lg { max-width: 920px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-tiny { font-size: 11px; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.col--right { text-align: right; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.justify-center { justify-content: center; }
.va-middle { vertical-align: middle; }

/* Order page two-col grid */
.order-form-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
@media (max-width: 768px) {
    .order-form-grid { grid-template-columns: 1fr; }
}

/* Sticky position helpers */
.sticky-top-80 { position: sticky; top: 80px; }

/* Auth pages center icon circle */
.auth__icon-circle {
    width: 80px; height: 80px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
}

/* Thanks page success badge */
.thanks__icon {
    width: 88px; height: 88px;
    margin: 0 auto 24px;
    background: var(--success-soft); color: var(--success);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Card variants */
.card--padded-xl { padding: 56px 32px; text-align: center; }
.card--padded-md { padding: 32px; }
.card--padded-summary { padding: 20px; background: var(--bg-elev-2); text-align: left; }

/* Field group with disabled email */
.email-field--readonly { opacity: 0.7; }

/* Page header subtitle smaller */
.page-header__subtitle--sm { font-size: 14px; }
.page-header__subtitle a { color: var(--text-dim); font-size: 13px; }

/* Result hero values */
.stat__value--accent { color: var(--accent); }
.stat__value--md { font-size: 22px; }
.stat__value--lg { font-size: 26px; }

/* Stat strong with accent */
.strong--accent { color: var(--accent); font-weight: 700; }

/* Big title on thanks */
.title--xl { font-size: 28px; }
.subtitle--md { font-size: 15px; }

/* Spinner circle (auth/check) */
.spinner--lg { width: 48px; height: 48px; }

/* Mono inline */
.mono { font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 13px; }

/* Order summary total row */
.row--total { font-size: 18px; }

/* Auth small font links */
.text-link--sm { font-size: 13px; }

/* Auth check icon container */
.spinner-container { margin: 0 auto 16px; }

/* Center title block reduce */
.title--small { margin-bottom: 8px; }

/* Stat hint margin */
.alert-text--narrow { margin-bottom: 24px; }

/* Check page (payment status) */
.container--check { max-width: 560px; }
.card--center { text-align: center; }
.card__body--padded { padding: 40px 32px; }
.status-icon-wrap { margin: 0 auto 16px; }
.title--mb-sm { margin-bottom: 8px; }
.text-block--mb-md { margin-bottom: 24px; }

/* Valuation show page */
.page-header__back-link { font-size: 13px; }
.label--warn { color: var(--warning); }
.color--accent { color: var(--accent); }
.table--full { width: 100%; }

/* Visual vehicle picker */
.vehicle-picker { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.vehicle-picker__group-label {
    font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px;
}
.vehicle-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.vehicle-picker__card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.vehicle-picker__card:hover {
    border-color: var(--accent);
    background: var(--bg-elev-3);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 149, 255, 0.15);
}
.vehicle-picker__card.is-selected {
    border-color: var(--accent);
    background: rgba(0, 149, 255, 0.08);
    box-shadow: 0 0 0 1px var(--accent);
}
.vehicle-picker__icon {
    /* B2/B3: powiększony box; ikony białe na przezroczystym — bez filter:invert */
    width: 100%; height: 76px;
    display: flex; align-items: center; justify-content: center;
}
.vehicle-picker__icon img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    opacity: 0.92;
    transition: opacity 0.18s;
}
.vehicle-picker__card:hover .vehicle-picker__icon img,
.vehicle-picker__card.is-selected .vehicle-picker__icon img {
    opacity: 1;
}
.vehicle-picker__name {
    font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3;
}
/* B4: kod/zakres ukryty na kaflu (pozostaje w tooltipie kafla) */
.vehicle-picker__range { display: none; }
@media (max-width: 768px) {
    .vehicle-picker__grid { grid-template-columns: repeat(2, 1fr); }
    .vehicle-picker__icon { height: 60px; }
}
@media (max-width: 480px) {
    .vehicle-picker__grid { grid-template-columns: 1fr; }
}

/* Manufacturer codes list */
.manufacturer-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .manufacturer-list { grid-template-columns: 1fr 1fr; } }
.manufacturer-list__group .card__header { display: flex; align-items: center; justify-content: space-between; }
.manufacturer-list__body { padding: 0; }
.manufacturer-list__body .table { margin: 0; }
.manufacturer-list__body .table td, .manufacturer-list__body .table th { padding: 8px 14px; font-size: 13px; }
.manufacturer-list__body .mono { font-size: 12px; color: var(--accent); }

/* Combobox option with icon */
.combo__option--with-icon { display: flex; align-items: center; gap: 12px; }
.combo__option-icon {
    /* ikony białe na przezroczystym — bez filter:invert (inaczej znikają w ciemnym menu) */
    flex-shrink: 0;
    width: 64px; height: 32px;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.15s;
}
.combo__option--with-icon:hover .combo__option-icon,
.combo__option--with-icon[data-selected="true"] .combo__option-icon {
    opacity: 1;
}

/* ============ Vehicle selector toggle (drzewko/słownik) ============ */
.vehicle-selector__toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.vehicle-selector__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.03);
}
.vehicle-selector__option--active {
    border-color: var(--accent, #0095ff);
    background: rgba(0, 149, 255, 0.12);
}
.vehicle-selector__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.vehicle-selector__icon {
    font-size: 1.25rem;
}
.vehicle-selector__panel--dictionary {
    padding-top: 8px;
}
.vehicle-selector__resolved {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 149, 255, 0.06);
    border-radius: 6px;
    color: var(--text-dim, rgba(255, 255, 255, 0.6));
    font-size: 0.85rem;
}


/* ============ Tire corrections ============ */
.tire-corrections__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tire-row {
    display: grid;
    grid-template-columns: 130px 1fr 130px 130px;
    gap: 8px;
    align-items: center;
}
.tire-row__label {
    font-size: 0.85rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    white-space: nowrap;
}
@media (max-width: 720px) {
    .tire-row {
        grid-template-columns: 1fr;
    }
}

/* Market reports - Archive listing */
/* Pasek sortowania archiwum raportow rynkowych (uwaga klienta 29.06 #5a) */
.archive-sort { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.archive-sort__label { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.archive-sort__btn {
    font-size: 13px; padding: 5px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.archive-sort__btn:hover { border-color: var(--accent); color: var(--text); }
.archive-sort__btn.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.archive-sort + .report-list { margin-top: 14px; }

/* Bramka danych do faktury (uwaga klienta 29.06 #7): kropka przy Pakietach + gwiazdka pol wymaganych */
.topbar__req-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--warning); margin-left:5px; vertical-align: middle; }
.field__label--req::after { content: ' *'; color: var(--danger); font-weight: 700; }

.report-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.report-card {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1);
}
.report-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.report-card__icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--accent); }
.report-card__icon svg { width: 100%; height: 100%; }
.report-card__body { flex: 1; min-width: 0; }
.report-card__title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.report-card__meta { font-size: 13px; color: var(--muted); }
.report-card__action { flex-shrink: 0; width: 24px; height: 24px; color: var(--muted); }
.report-card__action svg { width: 100%; height: 100%; }

/* Market report banner on valuation page */
.market-report-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 149, 255, 0.08);
    border: 1px solid rgba(0, 149, 255, 0.25);
    border-radius: 8px;
    margin-bottom: 16px;
    color: inherit; text-decoration: none;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}
.market-report-banner:hover { background: rgba(0, 149, 255, 0.14); }
.market-report-banner__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent); }
.market-report-banner__icon svg { width: 100%; height: 100%; }
.market-report-banner__text { flex: 1; font-size: 14px; }
.market-report-banner__text strong { color: var(--accent); }

/* Dictionary tree (drzewko marek z plusami) */
.dict-tree {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.dict-tree__search { padding: 12px; border-bottom: 1px solid var(--border); }
.dict-tree__search .input { width: 100%; }
.dict-tree__list { max-height: 420px; overflow-y: auto; }
.dict-tree__loading,
.dict-tree__empty { padding: 24px; text-align: center; color: var(--muted); }
.dict-tree__roots { list-style: none; padding: 0; margin: 0; }
.dict-tree__make { border-bottom: 1px solid var(--border); }
.dict-tree__make:last-child { border-bottom: 0; }
.dict-tree__make-btn {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-size: 14px;
    transition: background 200ms cubic-bezier(.4,0,.2,1);
}
.dict-tree__make-btn:hover { background: rgba(255,255,255,0.04); }
.dict-tree__make.is-open .dict-tree__make-btn { background: rgba(0,149,255,0.06); }
.dict-tree__plus {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--accent);
    background: var(--bg);
}
.dict-tree__make-name { flex: 1; font-weight: 500; }
.dict-tree__count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--muted);
    background: var(--bg);
    border-radius: 10px;
    padding: 2px 8px;
}
.dict-tree__types {
    list-style: none;
    padding: 0; margin: 0;
    background: var(--bg);
}
.dict-tree__type {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.6fr;
    gap: 10px;
    align-items: center;
    padding: 10px 16px 10px 50px;
    cursor: pointer;
    font-size: 13px;
    border-top: 1px solid var(--border);
    transition: background 150ms cubic-bezier(.4,0,.2,1);
}
.dict-tree__type:hover { background: rgba(0,149,255,0.08); }
.dict-tree__type.is-selected { background: rgba(0,149,255,0.16); color: var(--accent); }
.dict-tree__type-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dict-tree__type-cat,
.dict-tree__type-kind { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dict-tree__type-code { font-family: monospace; font-size: 11px; color: var(--muted); text-align: right; }
.dict-tree__type.is-selected .dict-tree__type-code { color: var(--accent); }
/* #13a (klient 29.06.2026): na wąskim ekranie 4-kolumnowy grid typów redukujemy do 2 kolumn —
   nazwy ucięte: Kategoria i Rodzaj chowamy, kod dajemy mniejszą czcionkę. */
@media (max-width: 600px) {
    .dict-tree__type { grid-template-columns: 1fr auto; gap: 6px; }
    .dict-tree__type-cat, .dict-tree__type-kind { display: none; }
    .dict-tree__type-code { font-size: 10px; }
}

/* Dynamic vehicle tiles (per IDB edition) */
.dyn-tiles__loading,
.dyn-tiles__empty { padding: 24px; text-align: center; color: var(--muted); }
.dyn-tiles__grid {
    display: grid;
    /* minmax(0,1fr) zamiast 1fr: domyślny min-track = min-content, przez co szerokie ikony/długie
       nazwy rozpychały siatkę poza ekran na telefonie („wybór pojazdu chowa się poza krawędzią" —
       mail klienta 27.06.2026). minmax(0,…) pozwala kolumnom skurczyć się poniżej treści. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 8px;
}
.dyn-tiles__col {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0; /* element siatki musi móc się zwęzić — bez tego kolumna rozpycha układ */
}
.dyn-tiles__col-label {
    font-size: 12px; font-weight: 600;
    text-align: center;
    padding: 6px;
    background: rgba(0,149,255,0.16);
    color: var(--accent);
    border-radius: 8px;
    margin-bottom: 2px;
}
.dyn-tiles__card {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 8px;
    /* Uwaga klienta 22.06.2026 #17: min-height by karty 1-liniowe (np. „BDF") miały tę samą
       wysokość co karty 2-liniowe (np. „Skrzyniowe i kurtynowe"): 66px ikona + 6px mb + ~34px
       nazwa 2-liniowa + 20px padding top/bottom = ~126px → zaokrąglamy do 120px. */
    min-height: 120px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: inherit;
    text-align: center;
    transition: border-color 200ms cubic-bezier(.4,0,.2,1), transform 200ms cubic-bezier(.4,0,.2,1), background 200ms cubic-bezier(.4,0,.2,1);
}
.dyn-tiles__card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    background: rgba(0,149,255,0.04);
}
.dyn-tiles__card.is-selected {
    border-color: var(--accent);
    background: rgba(0,149,255,0.12);
}
.dyn-tiles__icon {
    /* B2/B3 + uwaga klienta 22.06.2026 #17: wszystkie grupy równe — 66px/120px jak naczepy/cysterny.
       Przyczepy (trailer) były niższe (50px) — klient prosi o wyrównanie wysokości kafli. */
    width: 100%; max-width: 120px; height: 66px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    opacity: 0.92;
    transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}
.dyn-tiles__card:hover .dyn-tiles__icon,
.dyn-tiles__card.is-selected .dyn-tiles__icon { opacity: 1; }

/* Uwaga klienta 18.06.2026 #8a: pola wprowadzone przez użytkownika (opisy, kwoty, komentarze)
   z wartością dostają białe tło — łatwo widać, gdzie dokonano modyfikacji wyceny. */
#valuation-form .input.is-filled,
#valuation-form .textarea.is-filled,
#valuation-form textarea.is-filled {
    background: #ffffff;
    color: #0f172a;
}
#valuation-form .input.is-filled::placeholder,
#valuation-form .textarea.is-filled::placeholder { color: #94a3b8; }
/* #9 (klient 29.06.2026): select bieżnika z wartością (is-filled) — białe tło i ciemny tekst
   jak pola input (spójność z resztą formularza po wyborze). */
#valuation-form .select.is-filled { background-color: #fff; color: #0f172a; }
/* Gwarancja czytelnosci (obawa klienta 30.06.2026): ciemny tekst opcji na bialym — niektore
   przegladarki dziedzicza kolor <option> (jasny z dark theme) do ZAMKNIETEGO selecta, co przy
   bialym tle dawaloby jasny-na-bialym. Wymuszamy ciemny, zeby na pewno bylo widac. */
#valuation-form .select.is-filled option { background-color: #fff; color: #0f172a; }
/* Uwaga klienta 18.06.2026 #2: „odwrócone kolory" naczep. brightness(0) invert(1) wymusza BIAŁĄ
   sylwetkę z DOWOLNEGO źródła (białe→białe, ciemne→białe), zachowując przezroczystość — niezależnie
   od tego, jakie PNG jest aktualnie na produkcji. To bezpieczniejsze niż samo filter:invert. */
.dyn-tiles__icon img { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
/* Uwaga klienta 22.06.2026 #11: rysunki przyczep (data-group="trailer") mają węższy aspect ratio
   (~2.1-2.7 vs ~3.1-3.5 naczep), przez co object-fit:contain wypełnia więcej wysokości kontenera
   i wizualnie wyglądają wyżej. Clampujemy do 36px ≈ wizualna wysokość kafla naczepy. */
[data-group="trailer"] .dyn-tiles__icon img { max-height: 36px; }
/* Uwaga klienta 19.06.2026 #3 → 22.06.2026 #17: poprzedni override semi/tanker (66px/120px)
   przeniesiony do bazy .dyn-tiles__icon — wszystkie grupy równe, override zbędny. */
.dyn-tiles__name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 0;
    overflow-wrap: anywhere; /* długie nazwy łamią się, nie rozpychają kafla poza ekran (mobile) */
}
/* B4: kod/zakres ukryty na kaflu (pozostaje w tooltipie kafla) */
.dyn-tiles__range { display: none; }

@media (max-width: 768px) {
    .dyn-tiles__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .dyn-tiles__icon { height: 60px; }
}
@media (max-width: 480px) {
    .dyn-tiles__grid { grid-template-columns: 1fr; }
}

::selection { background: var(--accent); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--accent); color: #fff; text-shadow: none; }

/* Drzewko wyboru pojazdu — układ pionowy (jeden-pod-drugim), uwagi klienta 24.05.2026 */
.vehicle-selector__panel--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}
.vehicle-selector__panel--stacked .field { width: 100%; max-width: 600px; }

/* Korekta opon — osie z bieżnikiem i checkboxem bliźniacze (klient 24.05.2026) */
.tire-axle { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.tire-axle__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; flex-wrap:wrap; }
.tire-axle__twin { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary, #cbd5e1); cursor:pointer; }
.tire-axle__twin input { width:auto; }
.tire-axle__rows { display:flex; flex-direction:column; gap:8px; }
/* #1c (klient 27.06.2026): skrócono kolumnę „Bieżnik" (lista wyboru zamiast wpisywania, 104→84px),
   zwolnione miejsce przeznaczono na wydłużenie pola „Opis opony" (1fr→2fr).
   #9 (klient 29.06.2026): kolumna bieżnika 84→110px żeby „Bieżnik" i „15 mm" się mieściły. */
.tire-row { display:grid; grid-template-columns: 120px 2fr 110px auto 80px; gap:8px; align-items:center; }
.tire-row__label { font-size:13px; color:var(--text-secondary, #cbd5e1); }
.tire-row__corr { font-size:13px; font-weight:600; color:var(--accent, #0095ff); text-align:right; }
.tire-row__new { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim, rgba(255,255,255,.7)); white-space:nowrap; cursor:pointer; }
.tire-row__new input { width:auto; margin:0; cursor:pointer; }
.tire-row__tread:disabled { opacity:.45; }
.tire-corrections__twin { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; cursor:pointer; }
@media (max-width: 768px) {
  .tire-row { grid-template-columns: 1fr 1fr; }
  .tire-row__label { grid-column: 1 / -1; font-weight:600; }
  .tire-row__new { grid-column: 1 / -1; }
}

/* Specyfikacja pojazdu — Equipment */
.equipment-list .check { display:flex; gap:10px; align-items:flex-start; padding:8px; border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.equipment-list .check:hover { background: rgba(0,149,255,0.05); }

/* Resolved vehicle — kolumny Kategoria/Rodzaj/Kod (klient 24.05.2026) */
.vehicle-selector__resolved span { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.resolved-col { display:inline-block; padding:2px 8px; background:rgba(0,149,255,0.12); border-radius:4px; font-size:12px; margin-right:6px; cursor:help; }

/* Gdy w gridzie jest tylko 1 pole — niech zajmuje całą szerokość boxa (klient 26.05.2026) */
.grid > .field:only-child,
.grid > *:only-child {
    grid-column: 1 / -1;
}
/* Również gdy field stoi poza gridem (jako bezpośrednie dziecko card__body) — niech ma 100% szerokości */
.card__body > .field { width: 100%; max-width: 100%; }
.vehicle-selector__panel--stacked .field { max-width: none; }

/* Sticky panel "Wynik wyceny" — slajdowanie za userem (klient 26.05.2026) */
/* Prawa kolumna w gridzie formularza wyceny musi rozciągać się na całą wysokość,
   a wewnętrzny wrapper valuation-after-gate również, żeby sticky-result miał gdzie się przykleić. */
.valuation-form-grid > .valuation-form-right,
.grid[style*="360px"] > div:last-child {
    align-self: start;
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 16px);
}
/* Dodatkowo: sticky-result sam w sobie ma już position:sticky — gdy wrapper jest sticky
   (np. valuation-after-gate), sticky wewnętrzny jest neutralizowany; tu opieramy sticky na wrapperze. */
.grid[style*="360px"] > div:last-child .sticky-result {
    position: static;
    top: auto;
}

/* Pomocniczy znak "?" z tooltipem przy nazwach korekt (klient 29.05.2026) */
.help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--accent, #0095ff);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
}
.help-dot:focus { outline: 2px solid var(--accent, #0095ff); outline-offset: 2px; }

/* Pole liczbowe z jednostką (np. "%") — korekty procentowe (klient 29.05.2026) */
.input-suffix { position: relative; display: block; }
.input-suffix .input { padding-right: 30px; width: 100%; }
.input-suffix__unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim, #9ca3af);
    font-size: 13px;
    pointer-events: none;
}

/* Cena brutto pakietu pod ceną netto (klient 29.05.2026: użytkownicy nie muszą być firmami) */
.plan-card__price-gross { font-size: 14px; color: var(--text-dim, #9ca3af); margin-top: 2px; }
.plan-card__price-gross small { font-size: 11px; }

/* ======= Blokada sekcji pojazdu po starcie wyceny (klient 12.06.2026 #7) ======= */
[data-vehicle-section].locked {
    pointer-events: none;
    position: relative;
}
[data-vehicle-section].locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}
[data-vehicle-section].locked .locked-field,
[data-vehicle-section].locked [data-dict-list],
[data-vehicle-section].locked [data-dyn-tiles] {
    opacity: 0.45;
    pointer-events: none;
}
[data-vehicle-section].locked .vehicle-selector__toggle { pointer-events: none; opacity: 0.5; }
[data-vehicle-section].locked .vehicle-selector__by-code { pointer-events: none; opacity: 0.5; }
/* E1: po zablokowaniu pojazdu combo "Wpisz kod Expertdata" nie może zostać rozwinięte —
   wymuszamy zwinięcie listy podpowiedzi (JS wyłącza je z .locked-field, CSS nie trzyma stanu otwartego). */
[data-vehicle-section].locked .vehicle-selector__by-code-results { display: none !important; }

/* Widoczność pól selektora wg AKTYWNEJ zakładki (uwaga klienta 17.06.2026 #1/#3a).
   „Wybierz wizualnie" (tiles): selektorem są kafelki — chowamy pola drzewka oraz daty.
   Panele drzewka są RODZEŃSTWEM .vehicle-selector, więc celujemy w [data-selector-mode] na sekcji
   (atrybut ustawiany przez setMode). Wcześniejsza flaga data-from-tiles była „lepka" i chowała pola
   w „Wybierz z drzewka" (gdzie miały być widoczne), a pokazywała w „Wybierz wizualnie". */
[data-vehicle-section][data-selector-mode="tiles"] .vehicle-selector__panel--tree,
[data-vehicle-section][data-selector-mode="tiles"] [data-valuation-dates] { display: none !important; }
/* „Wyszukaj po marce i typie" (dictionary): zbędne pole „Wpisz kod Expertdata" (uwaga #3a). */
[data-vehicle-section][data-selector-mode="dictionary"] [data-by-code] { display: none !important; }

/* #1 (klient 07.07.2026, telefon): w trybie „Wyszukaj po marce i typie" pola drzewka
   (Grupa/Kategoria/Rodzaj + select kodu) są ustawiane PROGRAMOWO na potrzeby zapisu formularza,
   ale NIE mogą być widoczne — inaczej dublują się z podglądem dict-meta (nad i pod listą marek/typów).
   Ukrywamy same pola-selecty; podgląd dict-meta oraz blok „Parametry identyfikacyjne"
   ([data-code-params], zagnieżdżony w #field-expertdataCode) zostają widoczne. !important
   neutralizuje też ewentualne inline-style z dawnego odsłaniania kontenerów. */
[data-vehicle-section][data-selector-mode="dictionary"] #field-vehicleType,
[data-vehicle-section][data-selector-mode="dictionary"] #field-treeL1,
[data-vehicle-section][data-selector-mode="dictionary"] #field-treeL2,
/* select kodu jest owinięty w widget .combo — chowamy WSZYSTKO w #field-expertdataCode
   oprócz bloku parametrów identyfikacyjnych (który ma zostać widoczny). */
[data-vehicle-section][data-selector-mode="dictionary"] #field-expertdataCode > *:not([data-code-params]) {
    display: none !important;
}

/* #3b (klient 17.06.2026): po wyborze pojazdu z listy marka/typ pojazd jest już zidentyfikowany
   do poziomu kodu Expertdata — zamrażamy pola wyboru (także select kodu), by nie dało się ich
   przypadkiem zmienić. */
[data-vehicle-section][data-dict-locked="1"] [data-by-code],
[data-vehicle-section][data-dict-locked="1"] #field-vehicleType,
[data-vehicle-section][data-dict-locked="1"] #field-treeL1,
[data-vehicle-section][data-dict-locked="1"] #field-treeL2,
[data-vehicle-section][data-dict-locked="1"] #field-expertdataCode,
[data-vehicle-section][data-dict-locked="1"] [data-dyn-tiles] { pointer-events: none; opacity: 0.6; }

/* ======= Toggle waluty PLN/EUR w sticky-result (klient 12.06.2026 #10) ======= */
.sticky-result__currency-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}
.sticky-result__currency-label { color: var(--text-dim, #9ca3af); }
.sticky-result__currency-btn {
    background: var(--bg-soft, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-dim, #9ca3af);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    transition: all 0.15s;
}
.sticky-result__currency-btn:hover { border-color: var(--accent, #0095ff); color: var(--accent, #0095ff); }
.sticky-result__currency-btn.is-active {
    background: var(--accent, #0095ff);
    border-color: var(--accent, #0095ff);
    color: #fff;
}

/* ======= Readonly display w dict-meta (klient 12.06.2026 #4) ======= */
.input.input--readonly {
    background: var(--bg-soft, rgba(255,255,255,0.04));
    color: var(--text-dim, #9ca3af);
    cursor: default;
    user-select: none;
    font-size: 13px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* =========================================================================
   Uwagi klienta 25.06.2026 — #5 (responsywność mobile/portrait) + #9 (dwie za-szerokie ikony naczep)
   CSS-only, dodatkowe; nie zmienia reguł desktopowych. Tokeny istniejące.
   ========================================================================= */

/* #5 — Zwijanie dwukolumnowego formularza wyceny do jednej kolumny <992px,
   spójnie z breakpointem sticky-result (@media max-width:992px). Inline style
   na .grid (grid-template-columns: minmax(0,1fr) 360px) jest nadpisywany przez !important. */
@media (max-width: 992px) {
    .valuation-form-grid {
        grid-template-columns: 1fr !important;
    }
    /* Prawa kolumna nie może być przyklejona/ściśnięta na mobile — wraca do przepływu statycznego. */
    .valuation-form-right {
        position: static !important;
        top: auto !important;
        align-self: stretch;
        width: 100%;
    }
}

/* #5 — Trzy zakładki trybu wyboru (drzewko/słownik) przepełniały się na ~360px portrait.
   Pionowy stos poniżej 600px (zachowuje tablet landscape), wszystkie w pełni widoczne i klikalne. */
@media (max-width: 600px) {
    .vehicle-selector__toggle {
        flex-direction: column;
        gap: 8px;
    }
    .vehicle-selector__option {
        flex: 1 1 auto;
    }
}

/* #5 — Wewnętrzny grid korekt użytkownika (inline 2fr 1fr 1fr) do jednej kolumny na wąskich ekranach. */
@media (max-width: 600px) {
    .corrections-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

/* #9 — Dwie ultraszerokie ikony naczep (BDF 02-trailer-bdf, roll-container 03-trailer-roll-container)
   mają aspect ~8.19 / ~6.15, więc to SZEROKOŚĆ jest wymiarem wiążącym (max-height:36px z reguły 22.06
   nic nie robi). Clampujemy szerokość, aby rozstaw osi pasował do sąsiednich naczep.
   Selektor z atrybutem [src*=...] ma wyższą specyficzność niż bazowa reguła trailer-img. */
[data-group="trailer"] .dyn-tiles__icon img[src*="02-trailer-bdf"],
[data-group="trailer"] .dyn-tiles__icon img[src*="03-trailer-roll-container"] {
    max-width: 78px;
}