/* Fazonetka - Jak zakoupit a stahnout PDF strih
Poznamky a screenshoty u vsech 5 kroku - velikosti a umisteni (v6).
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.
Odkazy na kategorie u kroku 1 - barva jako nadpisy.
MOBIL (max-width:1100px): sipky mezi dvojicemi ikon v "postupu nakupu" (Vyberu strih -> Objednam, atd.),
nove obrazkove poznamky i u kroku 1 a 2 (stejne jako na desktopu), umistene nad screenshotem (sipka v obrazku miri dolu do nej),
kategorie (Detske strihy | ...) u kroku 1 vycentrovane.
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;
  }

  /* Krok 1 a 2 - stejne nove obrazky poznamek jako na desktopu (misto puvodnich vychozich), nad screenshotem (sipka v obrazku miri dolu) */
  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;
    order: -1 !important;
    margin: 0 auto 10px !important;
  }
  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;
    order: -1 !important;
    margin: 0 auto 10px !important;
  }

  /* Text ve vsech krocich (odstavce) - zarovnany do bloku (justify), pres celou sirku okna mobilu.
     Odstavce jsou v gridu vedle cislo-kolecka (40px + mezera 12px), takze bez opravy by byly posunute doprava
     (vlevo vic mista nez vpravo) - proto je "vytahneme" na celou sirku radku. */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-step-copy p {
    text-align: justify !important;
    text-align-last: left !important;
    margin-left: -52px !important;
    width: calc(100% + 52px) !important;
  }

  /* Odkazy na kategorie (Detske strihy | ...) u kroku 1 - tenhle jeden radek necháme vycentrovany (nejde o beznou vetu) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(1) .fz-step-copy p:has(a) {
    text-align: center !important;
  }

  /* Krok 1 - prvni odstavec posunuty o radek niz, aby se neprekryval s cislo-koleckem "1" (nadpis je kratky, jednoradkovy) */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step:nth-of-type(1) .fz-step-copy p:first-of-type {
    margin-top: 24px !important;
  }

  /* Odrazky (napr. u kroku 5: A4 / A0 / A0 s pridavky na svy) - normalni odrazky misto sipek ">",
     zacinaji skoro u okraje stranky (ne uprostred). Jde o skutecny <ul><li> seznam, takze Google ho
     uz predtim bral spravne jako seznam - meni se jen vizualni styl. */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-step-copy ul {
    margin-left: -52px !important;
    width: calc(100% + 52px) !important;
    padding-left: 20px !important;
    list-style: disc outside !important;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-step-copy li {
    list-style: disc outside !important;
    padding-left: 4px !important;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-step .fz-step-copy li::before {
    display: none !important;
    content: none !important;
  }

  /* "Postup nakupu" (Vyberu strih -> Objednam -> ...): sipky mezi dvojicemi ikon ve 2 sloupcich, stejne jako na PC */
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 6px !important;
    row-gap: 14px !important;
    align-items: center !important;
    justify-items: center !important;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(1) { grid-row: 1; grid-column: 1; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(2) { grid-row: 1; grid-column: 3; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(3) { grid-row: 2; grid-column: 1; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(4) { grid-row: 2; grid-column: 3; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(5) { grid-row: 3; grid-column: 1; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-item:nth-of-type(6) { grid-row: 3; grid-column: 3; }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-arrow:nth-of-type(1) {
    grid-row: 1; grid-column: 2; display: inline-flex !important; align-items: center; justify-content: center; font-size: 20px; color: #296974;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-arrow:nth-of-type(3) {
    grid-row: 2; grid-column: 2; display: inline-flex !important; align-items: center; justify-content: center; font-size: 20px; color: #296974;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-arrow:nth-of-type(5) {
    grid-row: 3; grid-column: 2; display: inline-flex !important; align-items: center; justify-content: center; font-size: 20px; color: #296974;
  }
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-arrow:nth-of-type(2),
  body.in-jak-zakoupit-a-stahnout-pdf-strih .fz-pdf-guide-flow .fz-flow-arrow:nth-of-type(4) {
    display: none !important;
  }
}