/* 2. sipka dolu: Step1 -> Step2, dolu sipka, Step3 */
@media (max-width: 991px) {
  .step-arrow:nth-child(4) {
    flex: 0 0 100% !important;
    text-align: center !important;
    transform: rotate(90deg) !important;
    padding: 5px 0 !important;
  }
}

/* Uzky mobil: obe sipky dolu, vse pod sebe */
@media (max-width: 767px) {
  .step-arrow {
    flex: 0 0 100% !important;
    text-align: center !important;
    transform: rotate(90deg) !important;
    padding: 5px 0 !important;
  }
}

/* Banner/motiv: pomer stran 3000:700 = 4.286:1 */
.motive {
  height: 23.3vw !important;
  min-height: 120px !important;
  max-height: 500px !important;
}
.motive__background {
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 767px) {
  .motive__background {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
  }
  body.dark-mode .motive__background {
    background-color: #1a1a2e !important;
  }
}

/* Mensi mezery mezi sekcemi (sablona dava 57.6px) */
.section-container {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
@media (max-width: 767px) {
  .section-container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Sirsi obsah: 960px misto sablonoveho 800px */
.section-blank,
.section-accordion {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer: centrovani */
.footer {
  text-align: center !important;
}

/* Accordion sekce: centrovani obsahu */
.section-accordion .section-content {
  text-align: center !important;
  max-width: 650px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section-accordion .section-content ul,
.section-accordion .section-content ol {
  display: inline-block !important;
  text-align: left !important;
}
.section-accordion .section-content p {
  text-align: center !important;
}
/* Accordion: vetsi mezera nad podnadpisy */
.section-accordion .section-content h3 {
  margin-top: 1.5em !important;
}

/* Video: centrovani jedineho videa (max-width kontejner) */
div[style*="max-width: 640px"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Logo: pixel-perfect ostrost (1x + 2x obrazky pro kazdy breakpoint) */
/* 1x displeje: presna velikost = zadne zmensovani */
/* 2x displeje (Retina/mobil): 2x obrazek = pixel-perfect na HiDPI */
.navbar__brand-logo-img {
  display: none !important;
}
.navbar__brand-title-link {
  display: inline-block !important;
  background-image: url('/obrazek/3/logo-96x33-png/') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 96px !important;
  height: 33px !important;
}
@media (min-width: 576px) {
  .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-112x39-png/') !important;
    width: 112px !important;
    height: 39px !important;
  }
}
@media (min-width: 1200px) {
  .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-128x44-png/') !important;
    width: 128px !important;
    height: 44px !important;
  }
}
/* 2x (Retina/HiDPI) varianty */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-192x66-png/') !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), (min-resolution: 2dppx) and (min-width: 576px) {
  .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-224x78-png/') !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), (min-resolution: 2dppx) and (min-width: 1200px) {
  .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-256x88-png/') !important;
  }
}

/* Dark mode logo - 6 variant pro vsechny breakpointy a Retina */
body.dark-mode .navbar__brand-title-link {
  background-image: url('/obrazek/3/logo-96x33-dark-png/') !important;
}
@media (min-width: 576px) {
  body.dark-mode .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-112x39-dark-png/') !important;
  }
}
@media (min-width: 1200px) {
  body.dark-mode .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-128x44-dark-png/') !important;
  }
}
/* 2x (Retina/HiDPI) dark varianty */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body.dark-mode .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-192x66-dark-png/') !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 576px), (min-resolution: 2dppx) and (min-width: 576px) {
  body.dark-mode .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-224x78-dark-png/') !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px), (min-resolution: 2dppx) and (min-width: 1200px) {
  body.dark-mode .navbar__brand-title-link {
    background-image: url('/obrazek/3/logo-256x88-dark-png/') !important;
  }
}

/* Hover efekt: sekční taby (Úvod, Illustrator, CorelDRAW...) */
.section-tab {
  transition: transform 0.2s ease !important;
}
.section-tab:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
body.dark-mode .section-tab:hover {
  box-shadow: none;
}

/* Hover efekt: spodní sekce (Další sekce) */
.section-bottom-link {
  transition: transform 0.2s ease, background 0.2s ease !important;
}
.section-bottom-link:hover {
  transform: scale(1.06);

}
body.dark-mode .section-bottom-link:hover {
  box-shadow: none;
}

/* CTA tlačítka: hover ztmaví pozadí, text zůstane bílý */
.cta-btn {
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.cta-btn:hover {
  transform: none !important;
  box-shadow: 0 0px 8px rgba(0,0,0,0.25);
  color: #fff !important;
}
/* Illustrator (oranžová): #ff6600 → #e05a00 */
.cta-btn[style*="background: #ff6600"]:hover,
.cta-btn[style*="background:#ff6600"]:hover {
  background: #e05a00 !important;
}
/* CorelDRAW (zelená): #00a550 → #008c43 */
.cta-btn[style*="background: #00a550"]:hover,
.cta-btn[style*="background:#00a550"]:hover {
  background: #008c43 !important;
}
body.dark-mode .cta-btn:hover {
  box-shadow: 0 0px 12px rgba(150,150,255,0.2);
}

/* Ceník: flex layout pro zarovnání tlačítek dolů */
.pricing-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Hover efekt: "Jak to funguje" karty */
.step-card {
  transition: transform 0.25s ease, box-shadow 0.35s ease !important;
  border-radius: 12px;
}
/* ZAKOMENTOVÁNO – step-card hover (možný návrat)*/
.step-card:hover {
  transform: translateY(-5px);
  /*  box-shadow: 0 8px 20px rgba(0,0,0,0.15);*/
}
.step-number {
  transition: transform 0.25s ease !important;
}
.step-card:hover .step-number {
  transform: scale(1.2) translateY(-6px);
}
/* */


/* Porovnání verzí - tabulka dark mode */
body.dark-mode #compare-table td,
body.dark-mode #compare-table th {
  color: #d0d0d0 !important;
}
body.dark-mode #compare-table td[style*="#ff6600"],
body.dark-mode #compare-table th[style*="#ff6600"] {
  color: #ff6600 !important;
}
body.dark-mode #compare-table td[style*="#00a550"] {
  color: #00a550 !important;
}
body.dark-mode #compare-table td[style*="#d32f2f"] {
  color: #d32f2f !important;
}
body.dark-mode #compare-table tr {
  border-color: #3a3a5c !important;
}
body.dark-mode .cta-btn:hover {
  box-shadow: 0 0px 12px rgba(150,150,255,0.2);
}