/* ==============================================
   QUIZ REDESIGN – v5 (KOMPLETNÍ)
   Všechny kroky – kartový layout
   Text vlevo, obrázek vpravo
   ============================================== */


/* -----------------------------------------------
   GLOBÁLNÍ: Quiz container
   ----------------------------------------------- */
.id-2605 #quiz-form {
  background: white !important;
margin-bottom: 60px !important;
}
.id-2605 #quiz-result {
background: #f5f3f0 !important;
margin-bottom: 60px !important;
border-radius: 20px !important;
}

.id-2605 .dmproducts:before {
background: #f5f3f0 !important;
}

.id-2605 #quiz-result .result-buttons button {
background: #E7B5BD !important;
border: none !important;
color: white !important;
}

.id-2605 #quiz-result .result-buttons a.eshop.eshop {
  background: #fff !important;
  border: none !important;
  color: #E7B5BD !important;
}

.id-2605 #quiz-result .result-buttons a.eshop.eshop:before {
  display: none !important;
}


/* Širší container pro dotazník */
@media (min-width: 992px) {
  .id-2605 .container-narrow {
    width: 1100px !important;
  }
}

@media (min-width: 1200px) {
  .id-2605 .container-narrow {
    width: 1300px !important;
  }
}

@media (min-width: 1440px) {
  .id-2605 .container-narrow {
    width: 1500px !important;
  }
}


/* -----------------------------------------------
   GLOBÁLNÍ: Všechny kroky – kartový layout
   ----------------------------------------------- */
.id-2605 #quiz-form .step {
  background: #f5f3f0 !important;
  background-image: none !important;
  border-radius: 20px;
  padding: 0 !important;
  position: relative;
  margin: 0 !important;
  border: none !important;
  display: none !important;
}

.id-2605 #quiz-form .step.active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  margin-top: 20px !important;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step.active {
    flex-direction: row;
    align-items: stretch;
    overflow: visible;
    margin-top: 40px !important;
  }
}

/* --- Logo – skrýt na všech krocích --- */
.id-2605 #quiz-form .step .quiz-logo {
  display: none !important;
}

/* --- Skrýt dekorativní pseudo-elementy --- */
.id-2605 #quiz-form .step:after,
.id-2605 #quiz-form .step:before {
  display: none !important;
}


/* -----------------------------------------------
   GLOBÁLNÍ: Navigace (step counter + šipky)
   ----------------------------------------------- */

/* Skrýt na kroku 1 */
.id-2605 #quiz-form .step.uvod .quiz-navigation {
  display: none !important;
}

/* Zobrazit na krocích 2–5 */
.id-2605 #quiz-form .step .quiz-navigation {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  padding: 12px 15px;
  background: transparent;
}


/* -----------------------------------------------
   GLOBÁLNÍ: Textová část (levá strana)
   ----------------------------------------------- */
.id-2605 #quiz-form .step .quiz-inner {
  padding: 30px 25px 30px 30px !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step .quiz-inner {
    width: 58%;
    padding: 50px 40px 40px 50px !important;
    flex-shrink: 0;
    min-height: 350px;
  }
}

/* Nadpisy */
.id-2605 #quiz-form .step h2 {
  text-align: left !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 12px;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step h2 {
    font-size: 30px !important;
  }
}

.id-2605 #quiz-form .step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  margin-top: 15px;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step h3 {
    font-size: 18px;
  }
}

/* Odstavce */
.id-2605 #quiz-form .step .quiz-inner p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 8px;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step .quiz-inner p {
    font-size: 18px;
  }
}


/* -----------------------------------------------
   GLOBÁLNÍ: Obrázek (pravá strana)
   ----------------------------------------------- */
.id-2605 #quiz-form .step .corner-img {
  position: relative !important;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  object-fit: cover;
  object-position: top center;
  bottom: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 1;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step .corner-img {
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 45% !important;
    height: auto !important;
    max-height: calc(100% + 40px);
    object-fit: contain;
    object-position: bottom right;
    border-radius: 0;
    order: unset;
    flex-shrink: 0;
  }
}


/* -----------------------------------------------
   GLOBÁLNÍ: Options (odpovědi – radio/checkbox)
   ----------------------------------------------- */
.id-2605 #quiz-form .step .option {
  background: #fff !important;
  border: 1px solid #e8e4e0 !important;
  border-radius: 25px;
  padding: 12px 15px 12px 50px !important;
  margin-bottom: 8px;
  max-width: 100% !important;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.id-2605 #quiz-form .step .option:hover {
  background: #fdf5f8 !important;
  border-color: #f0b8cf !important;
}

/* Indikátor – růžový kruh */
.id-2605 #quiz-form .step .option:before {
  width: 28px !important;
  height: 28px !important;
  left: 10px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #E7B5BD !important;
  background-image: none !important;
}

/* Hover – tmavší kruh */
.id-2605 #quiz-form .step .option:hover:before {
  background: #e8a0b4 !important;
  background-image: none !important;
}

/* Checked state */
.id-2605 #quiz-form .step .option:has(input:checked) {
  background: #fceef4 !important;
  border-color: #e8a0b4 !important;
}

.id-2605 #quiz-form .step .option:has(input:checked):before {
  background: #d88ea3 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 55% !important;
}


/* -----------------------------------------------
   KROKY S TLAČÍTKEM: Options užší + tlačítko vedle
   (Krok 4 a 5 – checkboxy s Pokračovat/Přeskočit)
   ----------------------------------------------- */
@media (min-width: 992px) {
  /* Options užší */
  .id-2605 #quiz-form [data-step="4"] .option,
  .id-2605 #quiz-form [data-step="5"] .option {
    max-width: 64% !important;
  }

  /* Tlačítko – vytažené nahoru vedle poslední option */
  .id-2605 #quiz-form [data-step="4"] .next-question,
  .id-2605 #quiz-form [data-step="4"] .skip-button,
  .id-2605 #quiz-form [data-step="5"] .next-question,
  .id-2605 #quiz-form [data-step="5"] .skip-button {
    display: block !important;
    margin: -42px 15% 0 auto !important;
    max-width: 30%;
  }

  /* Double-class override */
  .id-2605 #quiz-form [data-step="4"] .next-question.next-question,
  .id-2605 #quiz-form [data-step="5"] .skip-button.next-question {
    display: block !important;
    margin: -45px 2% 0 auto !important;
  }
}


/* -----------------------------------------------
   GLOBÁLNÍ: Tlačítka (Pokračovat, Přeskočit)
   ----------------------------------------------- */

/* Quiz-inner s otázkami */
.id-2605 #quiz-form .step .quiz-inner.questions {
  position: relative;
}

.id-2605 #quiz-form .step .next-question,
.id-2605 #quiz-form .step .skip-button {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 15px auto 0 0 !important;
  padding: 10px 25px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 25px !important;
  background: #E7B5BD !important;
  border: 1px solid #d88ea3 !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.3s ease;
  line-height: 1;
}

.id-2605 #quiz-form .step .next-question:before,
.id-2605 #quiz-form .step .skip-button:before,
.id-2605 #quiz-form .step .next-question.next-question:before {
  display: none !important;
}

.id-2605 #quiz-form .step .next-question.next-question,
.id-2605 #quiz-form .step .skip-button.next-question {
  background: #E7B5BD !important;
  border: none !important;
}

.id-2605 #quiz-form .step .next-question:hover,
.id-2605 #quiz-form .step .skip-button:hover {
  background: #d88ea3 !important;
}

/* Šipka v tlačítku */
.id-2605 #quiz-form .step .next-question:after,
.id-2605 #quiz-form .step .skip-button:after {
  content: " →";
  margin-left: 6px;
}

/* Hover přebití double-class */
.id-2605 #quiz-form .step .next-question.next-question:hover,
.id-2605 #quiz-form .step .skip-button.next-question:hover {
  background: #d88ea3 !important;
}


/* -----------------------------------------------
   KROK 1 SPECIFICKÉ: Úvod
   ----------------------------------------------- */

/* Subtitle */
.id-2605 #quiz-form .step.uvod .quiz-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555;
  margin-bottom: 6px;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step.uvod .quiz-subtitle {
    font-size: 25px;
    margin-bottom: 8px;
  }
}

/* Nadpis kroku 1 – větší */
.id-2605 #quiz-form .step.uvod h2.first {
  font-size: 26px !important;
  margin-bottom: 18px;
}

.id-2605 #quiz-form .step.uvod h2.first:after {
  display: none !important;
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step.uvod h2.first {
    font-size: 34px !important;
  }
}

@media (min-width: 1200px) {
  .id-2605 #quiz-form .step.uvod h2.first {
    font-size: 38px !important;
  }
}

/* Info text span */
.id-2605 #quiz-form .step.uvod .quiz-inner p span {
  text-align: left !important;
  font-size: 18px;
  color: #888;
}

/* Tlačítko "Začít dotazník" */
.id-2605 #quiz-form .step.uvod .start-btn {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 20px auto 15px 0 !important;
  padding: 14px 35px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  border-radius: 25px !important;
  background: #E7B5BD !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  text-align: center;
  line-height: 1;
}

.id-2605 #quiz-form .step.uvod .start-btn:before {
  display: none !important;
}

.id-2605 #quiz-form .step.uvod .start-btn:hover {
  background: #d88ea3 !important;
  transform: translateY(-1px);
}

@media (min-width: 992px) {
  .id-2605 #quiz-form .step.uvod .start-btn {
    font-size: 20px !important;
    padding: 16px 45px !important;
  }
}


/* -----------------------------------------------
   NAVIGAČNÍ ŠIPKY: Styling
   ----------------------------------------------- */
.id-2605 #quiz-form .step-arrows {
  display: flex;
  gap: 8px;
  align-items: center;
}

.id-2605 #quiz-form .step-arrows button {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid #ddd !important;
  border-radius: 8px;
  padding: 5px 10px;
  min-width: 30px;
  height: 30px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.id-2605 #quiz-form .step-arrows button:hover {
  background: #fff !important;
}

.id-2605 #quiz-form .step-counter {
  font-size: 14px;
  color: #666;
}