@charset "UTF-8";
  .tire-brake-wrapper {
    position: relative;
    padding: 20px;
    background-color: #2f2f38;
    border-radius: 12px;
    margin: 20px 0;
  }
  .tire-brake-wrapper .max-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #f6c32f;
    color: #2c2c34;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 0.9rem;
  }
  /* Removed initial tire-brake-container layout definitions in favor of the
     dedicated layout rules defined later in this file. */
  /* .tire-brake-container { ... } */
  .tire-card {
    background-color: #3a3a47;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    width: 260px;
    box-sizing: border-box;
    color: white;
    display: flex;
    flex-direction: column;
  }
  .tire-card h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
    text-align: left;
  }
  .upload-area {
    border: 2px dashed #888;
    border-radius: 8px;
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background-color: #1e1e26;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  .upload-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .tire-card .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tire-card .input-group label {
    font-size: 1rem;
    margin-right: 6px;
    flex-basis: 50%;
    text-align: left;
  }
  .tire-card .input-group input {
    background-color: #1e1e24;
    color: white;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 4px 6px;
    flex-basis: 55%;
  }

  /* Styles for the central car diagram in the wheel section.
     We replicate the removed car-zone `.car-wrapper` styling to ensure
     the tyre car view is properly sized and centered. */
  .tyre-car-wrapper {
    position: relative;
    width: 300px;
    margin: 0 auto;
  }
  .tyre-car-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }
/* Layout for the tyre and brake inspection section.
   Use a two-row grid: the first column contains the front and rear left tyres,
   the second column contains the car which spans both rows, and the third
   column contains the front and rear right tyres. This mirrors the layout
   shown in the reference image and ensures the car remains centred between
   the tyre cards. On smaller screens the grid will naturally wrap via
   media queries below. */
.tire-brake-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto auto;
  gap: 30px;
  justify-content: center;
}

/* Position each card and the car within the grid */
.front-left {
  grid-column: 1;
  grid-row: 1;
}
.rear-left {
  grid-column: 1;
  grid-row: 2;
}
.tire-center {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.front-right {
  grid-column: 3;
  grid-row: 1;
}
.rear-right {
  grid-column: 3;
  grid-row: 2;
}

/* Ensure tyre cards maintain fixed width */
.front-left,
.rear-left,
.front-right,
.rear-right {
  width: 260px;
}

/* Car wrapper crosshair lines and arrow positioning */
.tyre-car-wrapper {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.tyre-car-wrapper::before,
.tyre-car-wrapper::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
/* Vertical line through the center of the car */
.tyre-car-wrapper::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
}
/* Horizontal line through the center of the car */
.tyre-car-wrapper::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
}

/* Arrow indicators overlay the car image. Adjust positions to align with
   front/rear and left/right tyre positions. */
/* Remove default arrow icon definitions (no longer used) */
/*
.tyre-car-wrapper .arrow {
  position: absolute;
  font-size: 2rem;
  color: #999;
  font-weight: bold;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow-left-front {
  top: 25%;
  left: -40px;
}
.arrow-left-rear {
  bottom: 25%;
  left: -40px;
}
.arrow-right-front {
  top: 25%;
  right: -40px;
}
.arrow-right-rear {
  bottom: 25%;
  right: -40px;
}
*/

/* ------------------------------------------------------------------ */
/*  Tyre & brake – new grid layout and responsive design (added)        */
/*  This section overrides any previous layout rules for the tyre/brake */
/*  inspection. On mobile (max-width: 767px) the grid becomes a single */
/*  column; on tablets it uses three columns with the centre spanning   */
/*  both rows; and on desktop it increases the gap between items.       */

/* Hide old pseudo cross lines defined earlier */
.tyre-car-wrapper::before,
.tyre-car-wrapper::after {
  display: none;
}

/* Base grid layout: 1 column for mobile */
.tire-brake-container {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "tire-front-left"
    "center"
    "tire-front-right"
    "tire-rear-left"
    "tire-rear-right";
}

/* Assign grid areas to our new card classes */
.tire-front-left {
  grid-area: tire-front-left;
}
.tire-front-right {
  grid-area: tire-front-right;
}
.tire-rear-left {
  grid-area: tire-rear-left;
}
.tire-rear-right {
  grid-area: tire-rear-right;
}
.tire-center {
  grid-area: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Resize the tyre cards and car wrapper for responsiveness */
.tyre-car-wrapper {
  position: relative;
  width: clamp(220px, 30vw, 300px);
  margin: 0 auto;
}

/* Crosshair lines: horizontal and vertical lines overlaying the car */
.tyre-car-wrapper .cross-h,
.tyre-car-wrapper .cross-v {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
}
.tyre-car-wrapper .cross-h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-0.5px);
}
.tyre-car-wrapper .cross-v {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  transform: translateX(-0.5px);
}

/* Directional arrows made from borders */
.tyre-car-wrapper .arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  opacity: 0.65;
}
.tyre-car-wrapper .arrow-left {
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #bbb;
}
.tyre-car-wrapper .arrow-right {
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #bbb;
}
.tyre-car-wrapper .arrow-top {
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #bbb;
}
.tyre-car-wrapper .arrow-bottom {
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #bbb;
}

/* Tablet breakpoint: 768px - 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
  .tire-brake-container {
    grid-template-columns: 1fr minmax(240px, 320px) 1fr;
    grid-template-areas:
      "tire-front-left  center tire-front-right"
      "tire-rear-left   center tire-rear-right";
    align-items: start;
  }
  .tire-card {
    width: min(100%, var(--card-w));
  }
}

/* Desktop breakpoint: ≥1200px */
@media (min-width: 1200px) {
  .tire-brake-container {
    gap: 30px;
  }
  .tire-card {
    width: var(--card-w);
  }
}

/* ----------------- Custom arrow definitions ----------------- */
/* These classes create separate arrows for each tyre card. They are
   used in the tyre inspection section when the car is shown on
   larger screens. Each arrow is positioned relative to the car
   wrapper and points towards the corresponding tyre card. */
.tyre-car-wrapper .arrow-front-left,
.tyre-car-wrapper .arrow-rear-left,
.tyre-car-wrapper .arrow-front-right,
.tyre-car-wrapper .arrow-rear-right {
  position: absolute;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  opacity: 0.65;
}
.tyre-car-wrapper .arrow-front-left {
  left: -28px;
  top: 30%;
  border-right-color: #d7d01f;
}
.tyre-car-wrapper .arrow-rear-left {
  left: -28px;
  top: 70%;
  border-right-color: #d7d01f;
}
.tyre-car-wrapper .arrow-front-right {
  right: -28px;
  top: 30%;
  border-left-color: #d7d01f;
}
.tyre-car-wrapper .arrow-rear-right {
  right: -28px;
  top: 70%;
  border-left-color: #d7d01f;
}

/* Hide the entire car wrapper on narrow screens to prioritise the tyre cards. */
@media (max-width: 767px) {
  .tire-center { display: none; }
}

/* Ensure any legacy arrow classes are not visible. These were used in
   earlier versions of the tyre section but have been replaced by
   arrow-front-left/rear-left/front-right/rear-right. */
.tyre-car-wrapper .arrow-left,
.tyre-car-wrapper .arrow-right,
.tyre-car-wrapper .arrow-top,
.tyre-car-wrapper .arrow-bottom {
  display: none !important;
}

/* ----------------------------------------------------------------------- */
/* Responsive tyre/brake inspection layout
   These rules adjust the layout and widths to better center the car and align
   the tyre cards on larger screens while stacking them on small screens. */

@media (min-width: 768px) {
  /* Limit the width of the wrapper and center it horizontally */
.tire-brake-wrapper {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Define a three‑column grid: two fixed‑width card columns and one auto
     column for the car. The car column will grow to fill remaining space.
     Use grid areas so the items position consistently. */
  .tire-brake-container {
    grid-template-columns: var(--card-w) auto var(--card-w);
    grid-template-areas:
      "tire-front-left  center tire-front-right"
      "tire-rear-left   center tire-rear-right";
    justify-content: center;
    gap: 30px;
  }
  /* Fix tyre card width using the CSS variable */
  .tire-card {
    width: var(--card-w);
	border: 1.5px solid #f0f0f2
  }
  /* Center the car horizontally and allow it to scale between defined bounds */
  .tire-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tyre-car-wrapper {
    width: clamp(240px, 30vw, 320px);
  }
}

/* ----------------------------------------------------------------------- */
/* JUSTCAR 4.7.7 — moderní přehled stavu pneumatik
   Starší sekce měla auto uprostřed a čtyři karty kolem něj. Tady ji
   sjednocujeme s novým vizuálem protokolu: čisté karty, menší mezery,
   rychlejší vyplňování a lepší mobil. */

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd {
  max-width: none;
  margin: 24px 10px 34px;
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid rgba(230, 236, 255, 0.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 116, 171, 0.16), transparent 38%),
    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) .stav-pneumatik-a-brzd .tire-brake-wrapper {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-brake-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tire-front-left tire-front-right"
    "tire-rear-left tire-rear-right";
  gap: 16px;
  justify-content: stretch;
  align-items: stretch;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-front-left { grid-area: tire-front-left; }
body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-front-right { grid-area: tire-front-right; }
body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-rear-left { grid-area: tire-rear-left; }
body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-rear-right { grid-area: tire-rear-right; }

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(150px, 205px) minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(104, 118, 148, 0.72);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(38, 42, 56, 0.96), rgba(31, 31, 41, 0.96));
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card:hover {
  border-color: rgba(88, 166, 255, 0.82);
  box-shadow: 0 12px 30px rgba(31, 96, 156, 0.18);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card h4 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  color: #ffffff;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card h4::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid #9fb3c9;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 27%, rgba(159, 179, 201, 0.95) 28% 38%, transparent 39%),
    rgba(32, 56, 86, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(88, 166, 255, 0.22),
    0 0 0 1px rgba(88, 166, 255, 0.18);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area {
  grid-row: 2 / span 6;
  align-self: start;
  width: 100%;
  height: 218px;
  min-height: 0;
  margin: 0;
  border: 1px dashed rgba(88, 166, 255, 0.65);
  border-radius: 15px;
  background:
    radial-gradient(circle at center, rgba(88, 166, 255, 0.08), transparent 54%),
    linear-gradient(135deg, rgba(29, 38, 55, 0.9), rgba(24, 24, 32, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area::after {
  content: "+ Přidat fotku";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #dbeafe;
  font-weight: 800;
  font-size: 13px;
  background: rgba(13, 26, 43, 0.64);
  border: 1px solid rgba(88, 166, 255, 0.38);
  pointer-events: none;
  transition: 0.18s ease;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area:hover::after {
  background: rgba(33, 81, 125, 0.92);
  border-color: rgba(88, 166, 255, 0.82);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0.92;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area img[src*="placeholder"] {
  opacity: 0;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area:hover img {
  transform: none;
  opacity: 1;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area.has-photo::after {
  display: none;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area input[type="file"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 3;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area.has-photo input[type="file"] {
  pointer-events: none;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-change-photo {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid rgba(88, 166, 255, 0.48);
  border-radius: 999px;
  background: rgba(13, 26, 43, 0.76);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-change-photo:hover {
  border-color: rgba(88, 166, 255, 0.95);
  background: rgba(33, 81, 125, 0.94);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card .input-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card .input-group label {
  margin: 0;
  color: #bad2f0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card .input-group input {
  width: 100%;
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid rgba(112, 123, 145, 0.75);
  border-radius: 12px;
  background: rgba(25, 25, 33, 0.96);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card .input-group input:focus {
  border-color: #58a6ff;
  background: rgba(18, 23, 34, 1);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.14);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card .input-group input::placeholder {
  color: rgba(214, 222, 235, 0.52);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-center {
  grid-area: center;
  display: none;
  justify-content: center;
  align-items: center;
  min-height: 116px;
  padding: 10px 14px;
  border: 1px solid rgba(104, 118, 148, 0.52);
  border-radius: 16px;
  background: rgba(24, 27, 38, 0.54);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tyre-car-wrapper {
  width: min(260px, 36vw);
  margin: 0 auto;
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tyre-car-wrapper img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tyre-car-wrapper .cross-h,
body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tyre-car-wrapper .cross-v,
body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tyre-car-wrapper .arrow {
  display: none !important;
}

@media (max-width: 1180px) {
  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-brake-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tire-front-left"
      "tire-front-right"
      "tire-rear-left"
      "tire-rear-right";
  }
}

@media (max-width: 760px) {
  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd {
    margin: 18px 0 28px;
    padding: 14px;
    border-radius: 16px;
  }

  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-brake-container {
    gap: 12px;
  }

  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 15px;
  }

  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .upload-area {
    grid-row: auto;
    height: 210px;
    min-height: 0;
  }

  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-card h4 {
    font-size: 19px;
  }

  body:is(.jc, .jc-view) .stav-pneumatik-a-brzd .tire-center {
    display: none;
  }
}