/**
 * Interaktywne boxy "Poznaj Target Auto"
 * Jeden grid z overlapping contentami
 */

.target-poznaj-boxes-wrapper {
  max-width: 1164px !important;
  margin: 48px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Główny grid - 3 kolumny */
.target-poznaj-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* ============================================
   POZYCJE BOXÓW
   ============================================ */

/* Rząd 1: Boxy 1-3 */
.target-poznaj-box[data-box-id="1"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.target-poznaj-box[data-box-id="2"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.target-poznaj-box[data-box-id="3"] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* Rząd 2: Boxy 4-6 */
.target-poznaj-box[data-box-id="4"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.target-poznaj-box[data-box-id="5"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
.target-poznaj-box[data-box-id="6"] {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

/* ============================================
   STYLE BOXÓW
   ============================================ */

.target-poznaj-box {
  background: #f5f5f5 !important;
  border-radius: 16px !important;
  height: 330px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
}

.target-poznaj-box:hover {
  background: #efefef !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.target-poznaj-box.active {
  transform: none !important;
  z-index: 2 !important;
}

.target-poznaj-box.active .target-poznaj-box-title {
  color: #fff !important;
}

.target-poznaj-box-inner {
  padding: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.target-poznaj-box-title {
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #181d25 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.3s ease !important;
  border: none !important;
  background: transparent !important;
}

/* ============================================
   CONTENT - POZYCJE I STYLE
   ============================================ */

/* Content - domyślnie ukryty */
.target-poznaj-content {
  display: none !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  border: none !important;
  box-shadow: 0 0 33px rgba(0, 0, 0, 0.08) !important;
  animation: slideDown 0.3s ease-out !important;
  z-index: 10 !important;
}

/* Content widoczny - wyśrodkowany w pionie */
.target-poznaj-content.active {
  position: relative;
  display: flex !important;
  align-items: center !important;
}

/* Content dla boxów 1-3: rząd 1 (zasłania boxy) */
.target-poznaj-content[data-content-id="1"],
.target-poznaj-content[data-content-id="2"],
.target-poznaj-content[data-content-id="3"] {
  grid-row: 1 !important;
}

/* Content dla boxów 4-6: rząd 2 (zasłania boxy) */
.target-poznaj-content[data-content-id="4"],
.target-poznaj-content[data-content-id="5"],
.target-poznaj-content[data-content-id="6"] {
  grid-row: 2 !important;
}

/* Pozycja lewa - kolumny 1-2 (dla box 1, 4) */
.target-poznaj-content.pos-left {
  grid-column: 1 / 3 !important;
}

/* Pozycja prawa - kolumny 2-3 (dla box 2, 3, 5, 6) */
.target-poznaj-content.pos-right {
  grid-column: 2 / 4 !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.target-poznaj-content-inner {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

.target-poznaj-content h3 {
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  color: #181d25 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 40px 0 0 !important;
  border: none !important;
  background: transparent !important;
}

.target-poznaj-content-text {
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.target-poznaj-content-text p {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  color: #000000 !important;
}

/* ul z margin-left tylko jeśli przed nim jest p */
.column_column .target-poznaj-content-text ul {
  margin-left: 15px !important;
}

.column_column .target-poznaj-content-text p + ul {
  margin-left: 30px !important;
}

.column_column .target-poznaj-content-text li {
  color: #000000 !important;
  margin-bottom: 0 !important;
}

.target-poznaj-content-text p:last-child {
  margin-bottom: 0 !important;
}

.target-poznaj-close {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: transparent !important;
  border: none !important;
  font-size: 32px !important;
  line-height: 1 !important;
  color: #181d25 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.target-poznaj-close:hover {
  color: #e85100 !important;
  transform: scale(1.1) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet - 2 kolumny */
@media (max-width: 1024px) {
  .target-poznaj-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Boxy - nowy układ 2 kolumny, 3 rzędy */
  .target-poznaj-box[data-box-id="1"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .target-poznaj-box[data-box-id="2"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .target-poznaj-box[data-box-id="3"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .target-poznaj-box[data-box-id="4"] {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .target-poznaj-box[data-box-id="5"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  .target-poznaj-box[data-box-id="6"] {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* Content - ten sam rząd co boxy, pełna szerokość */
  .target-poznaj-content[data-content-id="1"],
  .target-poznaj-content[data-content-id="2"] {
    grid-row: 1 !important;
  }
  .target-poznaj-content[data-content-id="3"],
  .target-poznaj-content[data-content-id="4"] {
    grid-row: 2 !important;
  }
  .target-poznaj-content[data-content-id="5"],
  .target-poznaj-content[data-content-id="6"] {
    grid-row: 3 !important;
  }

  .target-poznaj-content.pos-left,
  .target-poznaj-content.pos-right {
    grid-column: 1 / 3 !important;
  }
}

/* ============================================
   MOBILE - Akordeon (768px w dół)
   ============================================ */
@media (max-width: 768px) {
  /* Wyłącz grid na mobile - zwykły flow */
  .target-poznaj-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Ukryj desktop content na mobile */
  .target-poznaj-content {
    display: none !important;
  }

  /* Box na mobile - akordeon */
  .target-poznaj-box {
    height: auto !important;
    min-height: auto !important;
    background: #f5f5f5 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .target-poznaj-box-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 20px 20px !important;
    height: auto !important;
  }

  /* Ikona na mobile */
  .target-poznaj-box-icon {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .target-poznaj-box-icon svg {
    width: 48px !important;
    height: 48px !important;
  }

  /* Tytuł na mobile */
  .target-poznaj-box-title {
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  /* Strzałka na mobile */
  .target-poznaj-box-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #181d25 !important;
    transition: transform 0.3s ease !important;
  }

  .target-poznaj-box-arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Strzałka obrócona gdy aktywny */
  .target-poznaj-box.active .target-poznaj-box-arrow {
    transform: rotate(180deg) !important;
  }

  /* Content wewnątrz boxa - ukryty domyślnie */
  .target-poznaj-box-content {
    display: none !important;
    padding: 0 20px 24px !important;
  }

  /* Content widoczny gdy box aktywny */
  .target-poznaj-box.active .target-poznaj-box-content {
    display: block !important;
  }

  /* Aktywny box - bez zmiany tła */
  .target-poznaj-box.active {
    background: #f5f5f5 !important;
  }

  .target-poznaj-box.active .target-poznaj-box-title {
    color: #181d25 !important;
  }

  /* Tekst w contencie mobile */
  .target-poznaj-box-content .target-poznaj-content-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #4e5562 !important;
  }

  .target-poznaj-box-content .target-poznaj-content-text p {
    margin: 0 0 12px 0 !important;
  }

  .target-poznaj-box-content .target-poznaj-content-text ul {
    margin: 0 !important;
    padding-left: 20px !important;
  }

  .target-poznaj-box-content .target-poznaj-content-text li {
    margin-bottom: 8px !important;
  }
}

/* Desktop - ukryj elementy mobilne */
@media (min-width: 769px) {
  .target-poznaj-box-icon {
    display: none !important;
  }

  .target-poznaj-box-arrow {
    display: none !important;
  }

  .target-poznaj-box-content {
    display: none !important;
  }
}

@media (max-width: 768px) {
  #poznaj-target h2 {
    text-align: center !important;
  }
}

#faq-left {
  max-width: 470px;
  text-align: left;
}

.mcb-section #faq-left.mcb-wrap .mcb-column-inner {
  margin-bottom: 0px !important;
}

.mcb-section #faq-left.mcb-wrap .column_button {
  margin-left: 0px !important;
}

#kontakt-button {
  background-color: #e85100 !important;
  color: #fff !important;
  border-width: 0px !important;
  margin: 0px !important;
}

.style-simple .faq .question.active,
.style-simple .faq .question {
  border-width: 0px !important;
}

.faq .question::after {
  display: none !important;
}

.style-simple .faq .question .answer,
.style-simple .faq .question .title {
  padding-left: 0px !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

.faq .title .num {
  display: none !important;
}