/* 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);
}

/* Tawk.to — skrytí chat widgetu (tracking běží na pozadí) */
#tawkchat-minified-wrapper,
#tawkchat-container,
.tawk-min-container,
.tawk-button-circle,
.tawk_button_circle,
[id^="tawk-"],
[class^="tawk-"],
[class*=" tawk-"],
iframe[title*="chat"],
iframe[title*="Chat"],
iframe[src*="tawk.to"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Savings box — mobilní responsivita */
/* Drží column layout až do 767px, protože mezi 601-667 se horizontální řádek
nevejde a '=' by zůstalo viset napravo bez "32 000 Kč" za ním. */
@media (max-width: 767px) {
  #savings-compare {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Majitelé/Grafici sekce — dark mode pro li/strong uvnitř feature-card */
body.dark-mode .feature-card li {
  color: #c0c0d0 !important;
}
body.dark-mode .feature-card li strong {
  color: #ffffff !important;
}
body.dark-mode .feature-card li span[style*="#00a550"] {
  color: #00a550 !important;
}
body.dark-mode .feature-card li span[style*="#ff6600"] {
  color: #ff6600 !important;
}

/* Barevné odkazy zachované v dark mode */
body.dark-mode a[style*="color: #00a550"] {
  color: #00a550 !important;
}
body.dark-mode a[style*="color: #ff6600"] {
  color: #ff6600 !important;
}

/* ↓↓↓ NOVÉ — sem vložit ↓↓↓ */
/* Demo karty — barevný "+ prodloužení klíčem zdarma" text zachovat v dark mode */
body.dark-mode .download-card p span[style*="#00a550"],
body.dark-mode .download-card span[style*="color: #00a550"] {
  color: #00a550 !important;
}
body.dark-mode .download-card p span[style*="#ff6600"],
body.dark-mode .download-card span[style*="color: #ff6600"] {
  color: #ff6600 !important;
}

/* Zelené ROI poznámky v pricing kartách — zachovat v dark mode */
body.dark-mode .pricing-card p[style*="#00a550"] {
  color: #00a550 !important;
}

/* Pricing karty — tlačítka zarovnaná u dolního okraje bez ohledu na počet odrážek */
.pricing-card {
  display: flex !important;
  flex-direction: column !important;
}
.pricing-card > div:last-child {
  margin-top: auto !important;
}

/* Support karty — tlačítka zarovnaná u dolního okraje */
.support-card {
  display: flex !important;
  flex-direction: column !important;
}
.support-card > a:last-child {
  margin-top: auto !important;
}

/* Hover efekt pro kartičky — konzistentní napříč webem */
.feature-card,
.download-card,
.support-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.feature-card:hover,
.download-card:hover,
.support-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px);
}
body.dark-mode .feature-card:hover,
body.dark-mode .download-card:hover,
body.dark-mode .support-card:hover {
  box-shadow: 0 6px 20px rgba(100,100,180,0.25) !important;
}

/* Outlined tlačítko pro dark mode */
body.dark-mode a.cta-btn[style*="background: transparent"] {
  color: #aaa !important;
  border-color: #666 !important;
}

/* ===== DARK MODE — zachování brand border barev ===== */

/* 1. CTA karty "Chybí funkce?" — border-left */
body.dark-mode .feature-card[style*="border-left: 4px solid #ff6600"] {
  border-left-color: #ff6600 !important;
}
body.dark-mode .feature-card[style*="border-left: 4px solid #00a550"] {
  border-left-color: #00a550 !important;
}

/* 2. Info karty "Proč není demo?" — dashed border */
body.dark-mode .download-card[style*="border: 2px dashed #ff6600"],
body.dark-mode div[style*="border: 2px dashed #ff6600"] {
  border-color: #ff6600 !important;
}
body.dark-mode .download-card[style*="border: 2px dashed #00a550"],
body.dark-mode div[style*="border: 2px dashed #00a550"] {
  border-color: #00a550 !important;
}

/* "Jak to funguje" — posunout šipky dolů na střed karet (ne středu step wrapperu) */
.step-arrow {
  margin-top: 35px !important;
}

/* CTA karta "Chybí funkce?" — v 2-col (tablet) layoutu zabere celý řádek a vycentruje se */
@media (min-width: 768px) and (max-width: 991px) {
  .feature-card[style*="border-left: 4px solid #ff6600"],
  .feature-card[style*="border-left: 4px solid #00a550"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 318px !important;
    max-width: 320px !important;
  }
}

/* Centrování poslední karty v 3-card gridu na 2-col layoutu
Rozsah 540-991: Kontakt grid přepíná na 2-col už od 540px (má jiný min-width
než ceník, který zůstává 1-col do 767px díky mobilnímu max-width: 320px rule).
Takže bez této úpravy je Vzdálená plocha v 540-767px sirotek vlevo. */
@media (min-width: 540px) and (max-width: 991px) {
  .download-card:nth-child(3):last-child,
  .pricing-card:nth-child(3):last-child,
  .support-card:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 318px !important;
    max-width: 320px !important;
  }
}

/* Podpora/Kontakt: všechny support-card 1-col až do 767px
Bez tohoto pravidla grid přepne na 2-col v 540px a 3. karta je osamělá,
což user na Podpoře nechce — chce jednotné úzké karty stacked. */
@media (min-width: 540px) and (max-width: 767px) {
  .support-card {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 318px !important;
    max-width: 320px !important;
  }
}



/* Ceník: na mobilu (<768px) sjednotit šířku všech karet na 320px */
/* DEMO wrapper: max-width 320px + padding 0 20px → vnitřní 280px (přepíšeme padding na 0 → 320px)
Grid wrapper: max-width 960px + padding 10px 20px → omezíme na 320px + zrušíme H padding → 320px */
@media (max-width: 767px) {
  /* DEMO wrapper — odstranit 20px vnitřní horizontální padding */
  .section-content > div[style*="max-width: 320px"][style*="padding: 0 20px"] {
    padding: 0 !important;
  }
  /* Grid wrapper 3 placených — omezit na 320px, zrušit horizontální padding */
  .section-content > div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
    max-width: 320px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Objednávka: "Co následuje po odeslání objednávky" — 4 kroky v 2+2 layoutu
v rozsahu 992-1199px (místo 3+1 s osamělým čtvrtým krokem vlevo).
Grid má inline 'grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))'
a 'max-width: 1000px' — druhá podmínka odlišuje od checklistu varianty
(který taky používá minmax(220px, 1fr) ale bez max-width: 1000px).
Od 1200px grid přirozeně zobrazí 4 karty v řadě. */
@media (min-width: 992px) and (max-width: 1199px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"][style*="max-width: 1000px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 700px !important;
  }
}

/* Videa (Illustrator/CorelDRAW) — centrovat 3. video pokud je poslední a osamělé ve 2-col layoutu */
/* Video grid má inline 'grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))' a gap 25px */
@media (min-width: 992px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] > div:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 12.5px) !important;
  }
}

/* Default (Chrome, Safari, Edge, všechny ne-Firefox) */
/* 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: translateX(5px) rotate(90deg) !important;
    padding: 5px 0 !important;
  }
}

/* Firefox-only override */
/* 2. sipka dolu: Step1 -> Step2, dolu sipka, Step3 */
@-moz-document url-prefix() {
  @media (max-width: 991px) {
    .step-arrow:nth-child(4) {
      transform: translateX(1px) rotate(90deg) !important;
    }
  }
}


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

/* Firefox-only override */
/* Uzky mobil: obe sipky dolu, vse pod sebe */
@-moz-document url-prefix() {
  @media (max-width: 767px) {
    .step-arrow {
      transform: translateX(1px) rotate(90deg) !important;
    }
  }
}

/* ========================================
404 ERROR PAGE
Pouziva se na vlastni 404 strance (priraz. v Nastaveni/Nastaveni prostredi).
HTML: 5 jazykovych bloku <div class="e404 e404-{cz|en|de|sk|pl}">.
JS pri parse nastavi html.lang dle URL, CSS prepne viditelnost.
======================================== */

/* Jazykove prepinani: default CZ, ostatni skryte; html[lang] selektor odkryje */
.e404 { display: none; }
.e404-cz { display: block; }
html[lang="en"] .e404-cz { display: none; }
html[lang="en"] .e404-en { display: block; }
html[lang="de"] .e404-cz { display: none; }
html[lang="de"] .e404-de { display: block; }
html[lang="sk"] .e404-cz { display: none; }
html[lang="sk"] .e404-sk { display: block; }
html[lang="pl"] .e404-cz { display: none; }
html[lang="pl"] .e404-pl { display: block; }

/* Per-jazykovy podpisovy box (Napiste mi + Ulrych + kontakt) za bloky.
findFooter v JS si v nem najde "Ulrych" a vlozi "Dalsi sekce" pred zaver. */
.e404-footer { display: none; }
.e404-footer-cz { display: block; }
html[lang="en"] .e404-footer-cz { display: none; }
html[lang="en"] .e404-footer-en { display: block; }
html[lang="de"] .e404-footer-cz { display: none; }
html[lang="de"] .e404-footer-de { display: block; }
html[lang="sk"] .e404-footer-cz { display: none; }
html[lang="sk"] .e404-footer-sk { display: block; }
html[lang="pl"] .e404-footer-cz { display: none; }
html[lang="pl"] .e404-footer-pl { display: block; }

/* Velke oranzove "404" cislo */
.e404 .e404-num {
  font-size: 120px;
  font-weight: bold;
  color: #ff6600;
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 5px;
  font-family: Arial, sans-serif;
}
@media (max-width: 516px) {
  .e404 .e404-num {
    font-size: 84px;
  }
}

/* CTA tlacitka na 404 strance */
.e404 .e404-btn {
  display: inline-block;
  padding: 12px 26px;
  text-decoration: none;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.e404 .e404-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.e404 .e404-btn-primary {
  background: #ff6600;
  color: #fff;
}
.e404 .e404-btn-primary:hover {
  background: #e05a00;
  color: #fff !important;
}
.e404 .e404-btn-secondary {
  background: #fff;
  color: #333;
  border: 2px solid #e0e0e0;
}
.e404 .e404-btn-secondary:hover {
  border-color: #ff6600;
  color: #ff6600 !important;
}
.e404 .e404-btn-corel {
  background: #00a550;
  color: #fff;
}
.e404 .e404-btn-corel:hover {
  background: #008c43;
  color: #fff !important;
}

/* Footer: social ikony (YouTube + Facebook) — vkládá JS */
.epdf-social-icons {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 18px;
  font-size: 24px;
}
.epdf-social-icons a {
  color: #888;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease;
}
.epdf-social-icons a:hover {
  color: #ff6600;
  transform: translateY(-2px);
}
body.dark-mode .epdf-social-icons a {
  color: #aaa;
}
body.dark-mode .epdf-social-icons a:hover {
  color: #ff6600;
}

/* Dark mode: secondary tlacitka + sive pozadi sekce */
body.dark-mode .e404 .e404-btn-secondary {
  background: #252540;
  color: #d0d0d0;
  border-color: #3a3a5c;
}
body.dark-mode .e404 .e404-btn-secondary:hover {
  border-color: #ff6600;
  color: #ff6600 !important;
}
body.dark-mode .e404 div[style*="background: #f8f9fa"] {
  background: #1e1e32 !important;
}
body.dark-mode .e404 div[style*="border-top: 1px solid #e0e0e0"] {
  border-color: #3a3a5c !important;
}
/* Breadcrumb: skrýt na mobilu (na malé obrazovce zabírá prostor; tabs jsou primární nav) */
@media (max-width: 767px) {
  .breadcrumb {
    display: none !important;
  }
}