@charset "UTF-8";

/* ==========================================================================
   HLAVNÍ STYLY - OBECNÉ PRVKY A TESTOVACÍ JÍZDA
   ========================================================================== */

/* ==========================================================================
   1. GLOBÁLNÍ STYLY AKORDEONŮ
   ========================================================================== */

section {
  margin: 16px 0;
}

/* -------------------------------------------------------------------------
   JUSTCAR 4.7.7 — Souhrn testovací jízdy
------------------------------------------------------------------------- */

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-summary-card {
  overflow: hidden;
  margin: 4px 0 22px;
  border: 1px solid rgba(230, 236, 255, 0.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 0%, rgba(47, 116, 171, 0.16), transparent 40%),
    linear-gradient(135deg, rgba(58, 58, 72, 0.98), rgba(43, 43, 55, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(32, 56, 86, 0.78);
  color: #b9d7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-summary-head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.05;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-summary-head p {
  margin: 8px 0 0;
  color: #b9c8dd;
  font-size: 15px;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-distance-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px solid rgba(16, 185, 129, 0.42);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #b6f3d8;
  font-size: 13px;
  font-weight: 900;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-distance-badge b {
  color: #35e49a;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #071121;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-height: 106px;
  padding: 20px 22px;
  border-right: 1px solid rgba(148, 163, 184, 0.22);
  color: #fff;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric:last-child {
  border-right: none;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric span {
  grid-column: 1 / -1;
  color: #8fb1d8;
  font-size: 12px;
  font-weight: 800;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric input,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric select {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  color: #fff !important;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  padding: 0 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric select {
  grid-column: 1 / -1;
  cursor: pointer;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric select option {
  color: #111827;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric input::placeholder {
  color: rgba(255, 255, 255, 0.46);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric em {
  color: #fff;
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 24px 8px;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks span::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.48);
  background: #071121;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks input:checked + span::before {
  content: "✓";
  border-color: rgba(174, 255, 42, 0.72);
  background: #071121;
  color: #baff2a;
  font-size: 18px;
  font-weight: 1000;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-tech-note {
  display: grid;
  gap: 8px;
  padding: 10px 24px 24px;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-tech-note span {
  color: #b9c8dd;
  font-size: 13px;
  font-weight: 800;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-tech-note textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-radius: 14px;
  background: rgba(24, 24, 32, 0.96) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

@media (max-width: 1100px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric:nth-child(2n) {
    border-right: none;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-summary-head {
    flex-direction: column;
    padding: 18px 16px;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metrics {
    grid-template-columns: 1fr;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-metric {
    min-height: 92px;
    padding: 17px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-quick-checks {
    grid-template-columns: 1fr;
    padding: 18px 16px 6px;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-tech-note {
    padding: 10px 16px 18px;
  }
}

/* Hlavička akordeonu */
.jc-acc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  border-radius: 10px;
  border: 1px solid #92963a;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(4px);
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}

.jc-acc-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.jc-acc-toggle:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.jc-acc-counters {
  font-size: .95rem;
  opacity: .85;
}

.jc-acc-panel {
  padding: 12px 0 0;
}

.jc-arrow {
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.jc-acc-toggle[aria-expanded="true"] .jc-arrow {
  transform: rotate(-180deg);
}

/* ==========================================================================
   2. GRIDY SEZNAMŮ
   ========================================================================== */

.jc-checklist,
.jc-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Běžné checklist řádky */
.jc-item {
  display: grid !important;
  align-items: start !important;
  grid-template-columns: 40px 320px minmax(0, 1fr) 220px !important;
  grid-template-areas: "state label note file" !important;
  gap: 16px !important;
  padding: 20px 16px !important;
  min-height: 80px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
}

/* Extra poznámky testovací jízdy - VIEW */
.td-note-item {
  display: grid !important;
  align-items: start !important;
  grid-template-columns: 40px minmax(0, 1fr) 220px !important;
  grid-template-areas: "state note file" !important;
  gap: 16px !important;
  padding: 20px 16px !important;
  min-height: 80px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
}

/* ==========================================================================
   3. PŘIŘAZENÍ GRID OBLASTÍ
   ========================================================================== */

.jc-state {
  grid-area: state !important;
  justify-self: center !important;
}

.jc-label {
  grid-area: label !important;
  align-self: start !important;
  padding-top: 6px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.jc-note,
.jc-item .note {
  grid-area: note !important;
}

.td-note-text {
  grid-area: note !important;
}

.td-note-file {
  grid-area: file !important;
  width: 220px !important;
  display: block !important;
  margin: 0 !important;
}

/* Křížek schovaný ve VIEW režimu */
.td-note-item .note-remove {
  display: none !important;
}

/* ==========================================================================
   4. STAVOVÉ KOLEČKO
   ========================================================================== */

.jc-state {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 2px solid #f0f0f2 !important;
  background-color: #3a3a47 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  transition: transform 0.1s ease !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
  margin: 0 !important;
  margin-top: 6px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
}

.jc-state:active {
  transform: scale(0.9) !important;
}

.jc-state::before {
  content: '•' !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

.jc-state[data-state="ok"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

.jc-state[data-state="ok"]::before {
  content: '✔' !important;
}

.jc-state[data-state="bad"],
.jc-state[data-state="warn"] {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.jc-state[data-state="bad"]::before,
.jc-state[data-state="warn"]::before {
  content: '!' !important;
}

.jc-icon {
  display: none !important;
}

/* ==========================================================================
   5. POZNÁMKY / INPUTY
   ========================================================================== */

.jc-note,
.td-note-text,
.jc-item .note {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  border-radius: 10px !important;
  border: 2px solid #777 !important;
  background-color: #1e1e24 !important;
  padding: 10px 12px !important;
  height: 48px !important;
  color: #fff !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  margin: 0 !important;
}

textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #777 !important;
  background-color: #1e1e24 !important;
  color: #ffffff !important;
  padding: 10px 12px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.jc-note::placeholder,
.td-note-text::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.55) !important;
}

/* ==========================================================================
   6. INPUT SOUBORU
   ========================================================================== */

input[type="file"] {
  width: 100% !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: #dddddd !important;
  cursor: pointer !important;
}

/* ==========================================================================
   7. TLAČÍTKO "PŘIDAT POZNÁMKU"
   ========================================================================== */

.jc-add-note-btn {
  display: block !important;
  width: 200px !important;
  max-width: 100% !important;
  padding: 12px 20px !important;
  margin: 20px auto !important;
  background-color: #a73014 !important;
  border: 2px solid #f0f0f2 !important;
  border-radius: 25px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s !important;
}

.jc-add-note-btn:hover {
  background-color: #c03512 !important;
}

/* ==========================================================================
   8. NÁHLEDY FOTEK
   ========================================================================== */

.ph,
.ph.ph-testdrive,
.note-preview > div {
  position: relative !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.04) !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: zoom-in !important;
}

.ph img,
.ph.ph-testdrive img,
.note-preview > div img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
  margin: 0 !important;
}

.ph:hover img,
.ph.ph-testdrive:hover img,
.note-preview > div:hover img {
  transform: scale(1.05) !important;
}

.note-preview {
  margin: 0 !important;
  padding: 0 !important;
}

/* Křížek na fotce */
.photo-remove,
.ph .photo-remove,
.remove-photo {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  font-size: 14px !important;
  z-index: 10 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
}

.photo-remove:hover,
.ph .photo-remove:hover,
.remove-photo:hover {
  background: rgba(220, 38, 38, 1) !important;
  transform: scale(1.1) !important;
}

/* ==========================================================================
   9. MOBILNÍ ZOBRAZENÍ
   ========================================================================== */

@media (max-width: 900px) {
  .jc-item {
    grid-template-areas:
      "state label"
      "state note"
      "state file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 8px !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  .td-note-item {
    grid-template-areas:
      "state note"
      "file file" !important;
    grid-template-columns: 40px 1fr !important;
    row-gap: 10px !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  .td-note-file {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ph,
  .ph.ph-testdrive,
  .note-preview > div {
    width: 220px !important;
    height: 160px !important;
    max-width: 100% !important;
  }
}

/* -------------------------------------------------------------------------
   JUSTCAR 4.7.7 — Testovací jízda jako ostatní kontrolní body
   Zachovává původní JS a názvy polí, mění jen rozložení a vzhled řádků.
------------------------------------------------------------------------- */

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-checklist {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) 190px minmax(260px, 1fr) 64px !important;
  grid-template-areas: "label state note file" !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 94px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(104, 118, 148, 0.72) !important;
  border-radius: 14px !important;
  background: rgba(55, 55, 70, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item:hover {
  border-color: rgba(88, 166, 255, 0.78) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-label {
  grid-area: label !important;
  align-self: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state {
  grid-area: state !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 190px !important;
  height: 50px !important;
  min-width: 190px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(112, 123, 145, 0.75) !important;
  background: rgba(30, 30, 38, 0.96) !important;
  color: #e5e7eb !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, transform .12s ease !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state:hover {
  border-color: rgba(88, 166, 255, 0.92) !important;
  background: rgba(31, 48, 70, 0.98) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state::before {
  content: "•" !important;
  flex: 0 0 auto;
  display: inline-grid !important;
  place-items: center !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: #9aa6b8 !important;
  font-size: 0 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state::after {
  content: "Nezkontrolováno" !important;
  color: #fff !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="ok"] {
  border-color: rgba(16, 185, 129, 0.72) !important;
  background: rgba(16, 185, 129, 0.16) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="ok"]::before {
  content: "✓" !important;
  width: auto !important;
  height: auto !important;
  color: #34f0a4 !important;
  background: transparent !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="ok"]::after {
  content: "V pořádku" !important;
  color: #baffdf !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="warn"] {
  border-color: rgba(245, 158, 11, 0.72) !important;
  background: rgba(245, 158, 11, 0.16) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="warn"]::before {
  content: "!" !important;
  width: auto !important;
  height: auto !important;
  color: #ffc107 !important;
  background: transparent !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="warn"]::after {
  content: "S výhradou" !important;
  color: #ffe6a6 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="bad"],
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="bad"] {
  border-color: rgba(239, 68, 68, 0.72) !important;
  background: rgba(239, 68, 68, 0.16) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="bad"]::before {
  content: "×" !important;
  width: auto !important;
  height: auto !important;
  color: #ff6b7d !important;
  background: transparent !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state[data-state="bad"]::after {
  content: "Závada" !important;
  color: #ffc4ca !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-icon {
  display: none !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-note {
  grid-area: note !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(112, 123, 145, 0.75) !important;
  border-radius: 11px !important;
  background: rgba(25, 25, 33, 0.98) !important;
  color: #fff !important;
  font-size: 16px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-note:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.14) !important;
  outline: none !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file {
  grid-area: file !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file > input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 56px !important;
  height: 56px !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 4 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file::before {
  content: "▧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(112, 123, 145, 0.75);
  border-radius: 13px;
  background: rgba(30, 30, 38, 0.96);
  color: #cfe1ff;
  font-size: 18px;
  font-weight: 900;
  transition: border-color .16s ease, background .16s ease;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file:hover::before {
  border-color: rgba(88, 166, 255, 0.92);
  background: rgba(31, 48, 70, 0.98);
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview {
  position: absolute !important;
  right: 64px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview:empty {
  display: none !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph-testdrive {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph img,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph-testdrive img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-extra {
  margin-top: 18px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-add-note-btn {
  width: 250px !important;
  max-width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 14px 22px !important;
  border: 1px solid rgba(88, 166, 255, 0.82) !important;
  border-radius: 12px !important;
  background: rgba(39, 57, 82, 0.92) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-add-note-btn:hover {
  background: rgba(45, 92, 135, 0.96) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
  display: grid !important;
  grid-template-columns: 190px minmax(260px, 1fr) 64px 44px !important;
  grid-template-areas: "state note file remove" !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 94px !important;
  margin: 0 0 10px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(104, 118, 148, 0.72) !important;
  border-radius: 14px !important;
  background: rgba(55, 55, 70, 0.88) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-text {
  grid-area: note !important;
  height: 50px !important;
  border: 1px solid rgba(112, 123, 145, 0.75) !important;
  border-radius: 11px !important;
  background: rgba(25, 25, 33, 0.98) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
  grid-area: file !important;
  width: 56px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-remove {
  grid-area: remove !important;
  justify-self: center !important;
  align-self: center !important;
}

@media (max-width: 1050px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: minmax(180px, 260px) 190px minmax(220px, 1fr) 64px !important;
    gap: 14px !important;
  }
}

@media (max-width: 760px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: 1fr 56px !important;
    grid-template-areas:
      "label file"
      "state file"
      "note note" !important;
    gap: 10px 12px !important;
    padding: 15px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-state {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file {
    align-self: start !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview {
    position: static !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
    grid-template-columns: 1fr 56px 44px !important;
    grid-template-areas:
      "state file remove"
      "note note note" !important;
    gap: 10px !important;
    padding: 15px !important;
  }
}

/* ==========================================================================
   JUSTCAR 4.7.7 — Testovací jízda: samostatný foto sloupec
   ========================================================================== */

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
  grid-template-columns: minmax(220px, 320px) 190px minmax(260px, 1fr) 174px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
  grid-area: file !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  width: 174px !important;
  min-width: 174px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file > input[type="file"],
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file > input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  color: transparent !important;
  font-size: 0 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file::before,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file::before {
  content: "▧" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(112, 123, 145, 0.75) !important;
  border-radius: 13px !important;
  background: rgba(30, 30, 38, 0.96) !important;
  color: #cfe1ff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file:hover::before,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file:hover::before {
  border-color: rgba(88, 166, 255, 0.96) !important;
  background: rgba(31, 48, 70, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview {
  position: absolute !important;
  top: 50% !important;
  right: 66px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: flex !important;
  gap: 6px !important;
  width: 88px !important;
  max-width: 88px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  justify-content: flex-end !important;
  align-items: center !important;
  pointer-events: auto !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview:empty,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview:empty {
  display: none !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph-testdrive,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview > div {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph img,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph-testdrive img,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview > div img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
  grid-template-columns: 190px minmax(260px, 1fr) 174px 44px !important;
}

@media (max-width: 1050px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: minmax(180px, 260px) 190px minmax(220px, 1fr) 174px !important;
  }
}

@media (max-width: 760px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: 1fr 174px !important;
    grid-template-areas:
      "label file"
      "state file"
      "note note" !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file,
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
    width: 174px !important;
    min-width: 174px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
    grid-template-columns: 1fr 174px 44px !important;
    grid-template-areas:
      "state file remove"
      "note note note" !important;
  }
}

@media (max-width: 520px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item,
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
    grid-template-columns: 1fr 56px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
    grid-template-areas:
      "state remove"
      "note note"
      "file file" !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item .pneu-file,
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
    width: 174px !important;
    justify-self: end !important;
  }
}

/* ==========================================================================
   JUSTCAR 4.7.7 — Testovací jízda: větší náhled + mobilní foto řádek
   ========================================================================== */

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
  grid-template-columns: minmax(220px, 320px) 190px minmax(260px, 1fr) 210px !important;
  min-height: 112px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
  grid-template-columns: 190px minmax(260px, 1fr) 210px 44px !important;
  min-height: 112px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
  width: 210px !important;
  min-width: 210px !important;
  height: 82px !important;
  min-height: 82px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file > input[type="file"],
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file > input[type="file"] {
  top: 13px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file::before,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file::before {
  top: 13px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview {
  top: 0 !important;
  right: 68px !important;
  transform: none !important;
  width: 132px !important;
  max-width: 132px !important;
  height: 82px !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-preview .ph-testdrive,
body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .note-preview > div {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  border-radius: 12px !important;
}

@media (max-width: 1050px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: minmax(180px, 260px) 190px minmax(220px, 1fr) 210px !important;
  }
}

@media (max-width: 760px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-item {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "label"
      "state"
      "note"
      "file" !important;
    min-height: 0 !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .pneu-file {
    width: 210px !important;
    min-width: 210px !important;
    justify-self: end !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-item {
    grid-template-columns: 1fr 44px !important;
    grid-template-areas:
      "state remove"
      "note note"
      "file file" !important;
    min-height: 0 !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .td-note-file {
    width: 210px !important;
    min-width: 210px !important;
    justify-self: end !important;
  }
}

/* ==========================================================================
   JUSTCAR 4.7.7 — Klikací hlavička akordeonu, výrazná ale čistší šipka
   ========================================================================== */

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 9px 14px 9px 10px !important;
  border: 1px solid rgba(146, 150, 58, 0.88) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(90deg, rgba(40, 52, 72, 0.34), rgba(255, 255, 255, 0.025)),
    rgba(43, 43, 54, 0.96) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle:hover {
  border-color: rgba(188, 197, 55, 0.98) !important;
  background:
    linear-gradient(90deg, rgba(43, 82, 118, 0.38), rgba(255, 255, 255, 0.04)),
    rgba(47, 47, 60, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 3px rgba(188, 197, 55, 0.08),
    0 10px 26px rgba(0,0,0,.18) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle:active {
  transform: translateY(1px) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-arrow {
  grid-column: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 1px solid rgba(188, 197, 55, 0.52) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(188, 197, 55, 0.18), transparent 62%),
    rgba(17, 24, 39, 0.52) !important;
  color: #f3f7a5 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 6px rgba(188, 197, 55, 0.35) !important;
  transition:
    transform .22s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle:hover .jc-arrow {
  border-color: rgba(188, 197, 55, 0.96) !important;
  background: rgba(40, 57, 79, 0.86) !important;
  color: #fffcc2 !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle[aria-expanded="true"] .jc-arrow {
  transform: rotate(-180deg) !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle > span:not(.jc-arrow):not(.jc-acc-counters) {
  grid-column: 2 !important;
  justify-self: start !important;
  min-width: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
}

body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-counters {
  grid-column: 3 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  opacity: .95 !important;
}

@media (max-width: 620px) {
  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-areas:
      "arrow title"
      "arrow counters" !important;
    gap: 3px 10px !important;
    padding: 10px 12px 10px 8px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-arrow {
    grid-area: arrow !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-toggle > span:not(.jc-arrow):not(.jc-acc-counters) {
    grid-area: title !important;
    font-size: 18px !important;
  }

  body:is(.jc, .jc-view) .sec-informace-o-testovaci-jizde .jc-acc-counters {
    grid-area: counters !important;
    justify-self: start !important;
    font-size: 14px !important;
  }
}