/* =========================
   FONTS & GLOBAL
   ========================= */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #f9fafd;
  color: #23272f;
  margin: 0;
  font-size: 15px;
  overflow-x: hidden;
}

/* =========================
   DESKTOP / PC (DEFAULT)
   ========================= */

/* --- LAYOUT STRONY --- */
.car-details-page {
  max-width: 1150px;
  margin: 40px auto 40px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 32px rgba(40,60,120,0.13);
  padding: 36px 38px 38px 38px;
  display: flex;
  flex-direction: row;
  gap: 36px;
}

/* --- GALERIA --- */
.car-gallery {
  flex: 1 1 0;
  max-width: 100%;
}




/* Kategorie miniatur */
.photo-category-block {
  border: 1.5px solid #e0e6ef;
  background: #f5f8fc;
  border-radius: 14px;
  box-shadow: 0 2px 12px #d6e2fa15;
  display: flex;
  flex-direction: column;
  gap: 6px 0;
}
.photo-category-title {
  font-weight: 600;
  color: #3477bb;
  margin-bottom: 6px;
  font-size: 1.08em;
  letter-spacing: 0.01em;
  margin-left: 2px;
  cursor: pointer;
  transition: color 0.13s;
  user-select: none;
  position: relative;
}
.photo-category-title::after {
  content: '';
  display: inline-block;
  border: solid #3477bb;
  border-width: 0 2.5px 2.5px 0;
  padding: 4px;
  margin-left: 8px;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.14s;
}
.photo-category-title.open::after {
  transform: rotate(-135deg) translateY(1px);
}
.photo-category-thumbs-collapsed {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 8px;
  margin-top: 3px;
}

/* Główne zdjęcie (kontener) */
.car-gallery-main-photo-block {
  width: 100%;
  max-width: 100%; /* spójne z blokami kategorii */
  border-radius: 18px;
  background: #f7fafd;
  border: 1.5px solid #e0e6ef;
  box-shadow: 0 8px 34px #c3d9f722, 0 1.5px 7px #b9c6e110;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Główne zdjęcie (img) */
.car-gallery-main-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  transition: filter 0.12s;
  cursor: pointer;
  background: #f8fafd;
}
.car-gallery-main-photo-img:hover {
  filter: brightness(0.97) saturate(1.12);
}

/* --- OPIS + DANE --- */
.car-details-info {
  flex: 1 1 0px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.car-details-title {
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.car-details-vin {
  font-size: 1.08em;
  font-family: "Courier New", monospace;
  color: #236294;
  letter-spacing: 0.13em;
  font-weight: 500;
  margin-bottom: 4px;
}
.car-details-meta {
  color: #6c7284;
  font-size: 1em;
  margin-bottom: 12px;
}

/* Tabela detali */
.car-details-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px 0;
  font-size: 1.09em;
  overflow-x: auto;
  min-width: 0;
  display: block;
}
.car-details-table th, .car-details-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f2f7;
}
.car-details-table th {
  font-weight: 600;
  color: #456194;
  background: #f7f9fc;
}
.car-details-table tr:last-child td,
.car-details-table tr:last-child th {
  border-bottom: none;
}
.car-details-table td {
  color: #25282d;
  font-weight: 500;
}

/* Opis */
.car-details-description {
  font-size: 1.12em;
  color: #333;
  margin-top: 18px;
  line-height: 1.65;
  background: #f7f9fd;
  border-radius: 12px;
  padding: 16px 22px;
}

/* --- CENY --- */
.car-details-prices {
  display: flex;
  gap: 22px;
  margin: 20px 0 18px 0;
}
.car-details-price-block {
  background: #f7f9fb;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 10px 26px;
  min-width: 110px;
  text-align: center;
}
.car-details-price-label {
  font-size: 0.89em;
  color: #7c8393;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.car-details-price-value {
  font-size: 1.22em;
  font-weight: 700;
  color: #212228;
}

/* --- STATUSY --- */
.car-details-status-row {
  display: flex;
  gap: 13px;
  margin-bottom: 8px;
}
.car-details-status-box {
  background: #eef4fb;
  color: #2274a5;
  border: 1px solid #dbe4f1;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 1.03em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.car-details-status-box.available {
  background: #e5f8ea;
  color: #169954;
  border: 1px solid #c4edd2;
}
.car-details-status-box.reg-ok {
  background: #e5f8ea;
  color: #6c757d;
  border: 1px solid #c4edd2;
}
.car-details-status-box.reg-nok {
  background: #fff9e7;
  color: #ad6b0f;
  border: 1px solid #f7dc8e;
}

/* --- PODOBNE AUTA --- */
.similar-cars-section {
  margin: 40px auto 0 auto;
  max-width: 1120px;
  padding: 30px 20px 8px 20px;
  border-radius: 22px;
  background: #fafbfc;
  box-shadow: 0 2px 18px rgba(40,50,70,0.04);
}
.similar-cars-title {
  font-size: 1.33em;
  font-weight: 700;
  margin-bottom: 22px;
  color: #456194;
  letter-spacing: 0.02em;
}
.similar-cars-list {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.similar-car-card {
  flex: 0 0 340px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(60,80,120,0.07);
  padding: 16px 12px 18px 12px;
  text-align: left;
  border: 1px solid #ecedf1;
  margin-bottom: 10px;
}
.similar-car-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 9px;
  background: #f6f9ff;
}
.similar-car-title {
  font-size: 1.08em;
  font-weight: 600;
  margin: 5px 0 2px 0;
  color: #233661;
}
.similar-car-meta {
  color: #8a94a8;
  font-size: 0.98em;
  margin-bottom: 5px;
}
.similar-car-link {
  display: inline-block;
  margin-top: 5px;
  color: #2274a5;
  background: #e7f1ff;
  border-radius: 6px;
  padding: 7px 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1em;
  border: 1px solid #b6d3ee;
  transition: background 0.12s, color 0.12s;
}
.similar-car-link:hover {
  background: #cfe7fa;
  color: #173b5c;
}

/* --- PRZYCISK AKCJI (bez zmian) --- */
.car-action-btn {
  font-family: 'Montserrat', sans-serif;
  width: fit-content;
  min-width: 345px;
  max-width: 345px;
  margin: 18px 0 0 0;

  background: transparent;
  color: #2274a5;
  border: 2px solid #b6d3ee;
  border-radius: 11px;
  padding: 13px 0;
  font-size: 1.10em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  letter-spacing: 0.01em;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
  outline: none;
  display: block;
  text-transform: lowercase;
  text-shadow: 0 1px 3px #e4eefa, 0 0.5px 0.5px #b6d3ee33;
}
.car-action-btn:hover,
.car-action-btn:focus,
.car-action-btn:active {
  background: #e7f1ff;
  color: #1b4f91;
  border-color: #7cb0e4;
  box-shadow: 0 3px 14px rgba(60,100,170,0.08);
  text-shadow: 0 2px 5px #c7dcf944, 0 0.5px 1px #b6d3ee44;
}

.back-link-wrap {
  position: fixed;
  bottom: 50px; /* wyżej od krawędzi */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 53, 69, 0.8); /* czerwony 50% */
  padding: 14px 28px; /* większy przycisk */
  border-radius: 30px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 9999;
}

.back-link {
  color: #fff; /* białe litery */
  font-weight: 700;
  font-size: 1.1em; /* trochę większy tekst */
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}


/* Sam kontener modala */
#interestModal .modal-content {
  border-radius: 20px;
  border: none;
  background: linear-gradient(145deg, #ffffff, #f7f9fc);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  animation: modalFadeIn 0.3s ease;
}

/* Nagłówek */
#interestModal .modal-header {
  background: #2274a5;
  color: white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 20px;
  border-bottom: none;
}

#interestModal .modal-title {
  font-weight: 700;
  font-size: 1.25em;
}

/* Przyciski w stopce */
#interestModal .modal-footer .btn-primary {
  background: #2274a5;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
}

#interestModal .modal-footer .btn-secondary {
  background: #6c757d;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
}

/* Kontener statusu transportu */
.car-transport-status-box {
  background: #fdfdfd; /* lekko szare tło */
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px 24px;
  margin: 10px 0;
  border: 1px solid #e8ecf3;
  max-width: 1150px;     /* tyle samo co .car-details-page */
    margin: 0 auto 28px auto; /* wyśrodkowanie + odstęp na dole */
    box-sizing: border-box;
}
.car-transport-status-title {
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 16px;
  color: #2f4b75;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e6ef;
}

/* Kontener filmów */
#car-videos-section {
  background: #fdfdfd;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px 24px;
  margin: 28px 0;
  border: 1px solid #e8ecf3;
    max-width: 1150px;     /* tyle samo co .car-details-page */
    margin: 0 auto 28px auto; /* wyśrodkowanie + odstęp na dole */
    box-sizing: border-box;
}
.videos-title {
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 16px;
  color: #2f4b75;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e6ef;
}

/* Filmy */
#car-videos-list video {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Efekt wejścia modala */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.similar-cars-section {
  background: #fdfdfd;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px 24px;
  margin: 28px auto;
  border: 1px solid #e8ecf3;
  max-width: 1150px; /* taka sama szerokość jak główny kontener */
  box-sizing: border-box;
}

.similar-cars-title {
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 16px;
  color: #2f4b75;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e6ef;
}

.similar-cars-list {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: flex-start;
}


@media (max-width: 900px) {
  /* Układ w kolumnie + zero bocznych paddingów kontenera */
  .car-details-page {
    flex-direction: column;
    padding: 0;           /* <-- kluczowe */
    gap: 16px;
    border-radius: 0;
    box-shadow: none;
  }

  /* Kolumna galerii na 100% szerokości */
  .car-gallery {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Kontener głównego zdjęcia wyśrodkowany i bez overflowu */
  .car-gallery-main-photo-block,
  .car-gallery-main,
  #car-main-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* Sam obrazek: pełna szerokość, proporcje zachowane */
  #car-main-photo img,
  .car-gallery-main-photo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
  }

  /* Miniatury – wiersze, nie wychodzą poza ekran */
  #car-thumbnails,
  .car-gallery-thumbs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
    justify-content: center;
  }
  .car-gallery-thumb { flex: 0 0 auto; }

  /* Teksty obok – bez lewego paddingu, by nie “ścinać” szerokości */
  .car-details-info {
    padding-left: 0;
    min-width: 0;
  }

  /* Karty podobnych aut na pełną szerokość */
  .similar-car-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
    /* Przycisk "zarezerwuj" wyśrodkowany na mobile */
  .car-action-btn {
    display: block;
    margin: 20px auto; /* auto w poziomie => wyśrodkowanie */
    text-align: center;
  }
.back-link-wrap {
    bottom: 10px; /* bliżej dołu */
    padding: 8px 16px; /* mniejszy przycisk */
    border-radius: 20px;
  }
  .back-link {
    font-size: 0.95em; /* mniejszy tekst */
  }
  .back-full-text {
    display: none; /* ukryj dłuższą część na mobile */
  }

  /* Status transportu – dopasowanie na mobile */
    .car-transport-status-box {
        width: 100%;
        max-width: 100%;
        overflow: visible; /* pozwól tooltipowi wychodzić poza obrys */
        padding: 12px;
        box-sizing: border-box;
    }

    .transport-timeline-horizontal {
        overflow-x: visible;  /* przewijanie tylko dla osi transportu */
        padding-bottom: 10px; /* trochę miejsca, żeby tooltip miał gdzie się pojawić */
    }

  .car-transport-status-box .status-step {
    flex: 0 0 auto;       /* każdy krok ma stałą szerokość */
  }