/* Fazonetka - Jak zakoupit a stahnout PDF strih
Poznamky a screenshoty u vsech 5 kroku - velikosti a umisteni (v3).
Krok 1: screenshot -20% (kotva vlevo dole), poznamka nahoru, sipka na posledni kategorii (Sety strihu).
Krok 2: screenshot +10%, poznamka (dulezite) o neco vetsi, presunuta dovnitr bloku kroku 2, sipka k "Povinna pole".
Krok 3: screenshot +30%, poznamka +10% vetsi, pod screenshotem vpravo, sipka k "je pripravena".
Krok 4: screenshot celkem cca +48% (puvodnich +35% a dalsich +10%), poznamka posunuta vys, aby nezasahovala do kroku 5, sipka k odkazu se strihem.
Krok 5: screenshot +12%, poznamka +20% vetsi, pod screenshotem vpravo, sipka smerem k pravemu dolnimu rohu obrazku.
Nacita se AZ ZA v2.css a fazonetka-jak-zakoupit-pdf-v4-test-krok1-2.css v hlavicce.
*/

/* Odkazy na kategorie (Detske strihy | Damske strihy | ...) u kroku 1 - stejna barva jako nadpisy kroku */
body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide .fz-step-copy a {
  color: #296974 !important;
}

@media (min-width: 1101px) {

  /* Spolecny reset: vsech 5 kroku prepneme z gridu na relative, aby poznamka mohla byt volne pozicovana */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(1) .fz-pdf-step-visual,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(2) .fz-pdf-step-visual,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-pdf-step-visual,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-pdf-step-visual,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-pdf-step-visual {
    display: block !important;
    position: relative !important;
  }

  /* Skryjeme puvodni textove poznamky (.fz-note) u kroku 3, 4 a 5 */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-note,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-note,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-note {
    display: none !important;
  }

  /* Spolecne vlastnosti vsech obrazkovych poznamek (::after) na desktopu */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-pdf-step-visual::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    height: auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
  }

  /* ===== KROK 1 - Vyberte si strih ===== */
  /* Screenshot: -20 % (466px -> 373px), kotva vlevo dole zustava (jen zmenseni) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(1) .fz-pdf-step-visual img {
    width: 373px !important;
    height: auto !important;
    display: block !important;
  }
  /* Poznamka nahoru, sipka miri dolu na posledni kategorii (Sety strihu, vpravo) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(1) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-1-vyber-strihu-v2.png") !important;
    width: 250px !important;
    aspect-ratio: 520 / 173 !important;
    left: 324px !important;
    top: -64px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-1deg) !important;
  }

  /* ===== KROK 2 - Dokoncete a zaplatte objednavku ===== */
  /* Screenshot: +10 % (466px -> 513px) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(2) .fz-pdf-step-visual img {
    width: 513px !important;
    height: auto !important;
    display: block !important;
  }
  /* Poznamka "Dulezite!" (novy obrazek v4) o neco vetsi, uvnitr bloku (nezasahuje do kroku 1 nahore), sipka smerem k "Povinna pole" */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(2) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-2-dulezite-v4.png") !important;
    width: 330px !important;
    aspect-ratio: 520 / 173 !important;
    left: 371px !important;
    top: -25px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(.5deg) !important;
  }

  /* ===== KROK 3 - Pockejte na e-mail se strihem ===== */
  /* Screenshot: +30 % (313px -> 407px) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-pdf-step-visual img {
    width: 407px !important;
    height: auto !important;
    display: block !important;
  }
  /* Poznamka +10% vetsi, pod screenshotem vpravo, sipka k "je pripravena" */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-3-strih-v-mailu.png") !important;
    width: 286px !important;
    aspect-ratio: 520 / 173 !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(-0.8deg) !important;
  }

  /* ===== KROK 4 - Stahnete si strih do pocitace ===== */
  /* Screenshot: puvodne +35 %, nyni jeste +10 % navic (423px -> 465px) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-pdf-step-visual img {
    width: 465px !important;
    height: auto !important;
    display: block !important;
  }
  /* Poznamka pod screenshotem uprostred, posunuta vys (prekryva spodek screenshotu), aby nezasahovala do kroku 5, sipka k odkazu se strihem */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-4-stazeni-souboru.png") !important;
    width: 260px !important;
    aspect-ratio: 520 / 173 !important;
    top: calc(100% - 25px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) rotate(0.6deg) !important;
  }

  /* ===== KROK 5 - Pokud je soubor ZIP, nejprve ho rozbalte ===== */
  /* Screenshot: +12 % (313px -> 351px) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-pdf-step-visual img {
    width: 351px !important;
    height: auto !important;
    display: block !important;
  }
  /* Poznamka +20% vetsi, pod screenshotem vpravo, sipka smerem k pravemu dolnimu rohu obrazku */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-5-rozbaleni-zip.png") !important;
    width: 312px !important;
    aspect-ratio: 520 / 173 !important;
    top: 190px !important;
    left: 300px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-0.5deg) !important;
  }
}

@media (max-width: 1100px) {

  /* Skryjeme puvodni textove poznamky u kroku 3, 4 a 5 i na mobilu/tabletu */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-note,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-note,
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-note {
    display: none !important;
  }

  /* Spolecne vlastnosti vsech novych obrazkovych poznamek pod screenshotem (beze zmeny oproti puvodni verzi) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-pdf-step-visual::after {
    content: "" !important;
    display: block !important;
    width: min(430px, 92%) !important;
    height: auto !important;
    aspect-ratio: 520 / 173 !important;
    margin: 8px auto 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
  }

  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(3) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-3-strih-v-mailu.png") !important;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(4) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-4-stazeni-souboru.png") !important;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(5) .fz-pdf-step-visual::after {
    background-image: url("/user/documents/upload/DMupravy/fazonetka-pdf-poznamka-krok-5-rozbaleni-zip.png") !important;
  }
}