/* ==========================================================================
   Datovna — společné styly ukázky (doplňují inline styly převzatých stránek)

   1. posun lepivých a pevných prvků pod lištu úrovní (--uk-h z lista.js)
   2. tmavý režim (úroveň 1+) — přepisuje stejné tokeny, jaké mají stránky
   3. sloty na obrázky a ikony — bez souboru vypadají záměrně, s ním se přepnou
   4. sekce, které v původním demu nebyly (datová centra, novinky, kariéra…)
   ========================================================================== */

/* ------------------------------------------------ 1. posun pod lištu úrovní */
html.uk-ma-listu .nav { top: var(--uk-h); }
html.uk-ma-listu .tabs-bar { top: calc(var(--uk-h) + 70px); }
html.uk-ma-listu .filters { top: calc(var(--uk-h) + 160px); }
html.uk-ma-listu .calc-summary, html.uk-ma-listu .cart-summary { top: calc(var(--uk-h) + 90px); }
html.uk-ma-listu .app-shell .sidebar { top: var(--uk-h); height: calc(100vh - var(--uk-h)); }
html.uk-ma-listu .topbar { top: var(--uk-h); }
html.uk-ma-listu .detail-panel { top: var(--uk-h); height: calc(100vh - var(--uk-h)); }
@media (max-width: 980px) {
  html.uk-ma-listu .app-shell .sidebar { top: var(--uk-h) !important; height: calc(100vh - var(--uk-h)) !important; max-height: calc(100vh - var(--uk-h)); }
}
html.uk-zamceno body { overflow: hidden; }

/* ------------------------------------------------------ 2. tmavý režim */
[data-theme="dark"] {
  --bg: #16181c; --bg-alt: #1d2025; --bg-soft: #24272d; --bg-tint: #2a2e35;
  --text: #ecebe6; --text-mute: #b7bac0; --text-light: #8f949c;
  --border: #33373f; --border-soft: #2a2e35;
  --card-bg: #262a31; --card-bg-2: #1a1d22; --card-text: #f3f1ea; --card-mute: #a9aba4;
  --sage: #9fc3b5; --sage-deep: #86ae9e; --sage-soft: rgba(148,181,168,.16); --sage-glow: rgba(148,181,168,.26);
  --btn-bg: #ecebe6; --btn-bg-hover: #ffffff; --btn-text: #16181c;
  --shadow: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 14px 44px rgba(0,0,0,.45); --shadow-warm: 0 18px 50px rgba(0,0,0,.4);
  color-scheme: dark;
}
[data-theme="dark"] body::before { opacity: .12; mix-blend-mode: normal; }
[data-theme="dark"] .nav { background: rgba(22,24,28,.88); }
[data-theme="dark"] .tabs-bar { background: rgba(22,24,28,.9); }
[data-theme="dark"] .btn-sage { color: #10231c; }
[data-theme="dark"] .hero::before { opacity: .35; }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: var(--bg-soft); color: var(--text); }
[data-theme="dark"] .calc-option, [data-theme="dark"] .calc-check { background: var(--bg-soft); color: var(--text); }
[data-theme="dark"] .product, [data-theme="dark"] .filter-block, [data-theme="dark"] .cart-item, [data-theme="dark"] .auth-card { background: var(--bg-alt); }

/* ------------------------------------------------ 3. sloty na obrázky */
.dv-foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg, 22px); background: var(--bg-soft);
  isolation: isolate; }
.dv-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-foto--chybi { background:
  radial-gradient(circle at 20% 15%, rgba(148,181,168,.35), transparent 55%),
  repeating-linear-gradient(0deg, rgba(42,45,50,.06) 0 2px, transparent 2px 22px),
  linear-gradient(135deg, #e9e5da, #d6dfd9); }
[data-theme="dark"] .dv-foto--chybi { background:
  radial-gradient(circle at 20% 15%, rgba(148,181,168,.22), transparent 55%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 22px),
  linear-gradient(135deg, #22262c, #1b2522); }
.dv-foto--chybi::after { content: ""; position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; opacity: .45;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%236E9385' stroke-width='2'><rect x='8' y='8' width='32' height='9' rx='2'/><rect x='8' y='20' width='32' height='9' rx='2'/><rect x='8' y='32' width='32' height='9' rx='2'/><circle cx='13' cy='12.5' r='1' fill='%236E9385'/><circle cx='13' cy='24.5' r='1' fill='%236E9385'/><circle cx='13' cy='36.5' r='1' fill='%236E9385'/></svg>"); }
html.dv-sloty .dv-foto--chybi::before { content: attr(data-slot); position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font: 600 11px/1.2 ui-monospace, Consolas, monospace; background: #10131c; color: #fff; padding: 4px 7px; border-radius: 6px; }
.dv-ikona-slot { position: relative; display: inline-flex; }
.dv-ikona-slot > img { width: 100%; height: 100%; object-fit: contain; }
.dv-ikona-slot > img + svg { display: none; }
html.dv-sloty .dv-ikona-slot:not(:has(img))::after { content: attr(data-slot); position: absolute; top: 100%; left: 0; white-space: nowrap;
  font: 600 10px/1.2 ui-monospace, Consolas, monospace; background: #10131c; color: #fff; padding: 2px 5px; border-radius: 4px; }

/* logo */
.logo, .sb-logo { display: inline-flex; align-items: center; gap: 8px; }
.dv-logo-slot { display: inline-flex; width: 28px; height: 28px; }
.dv-logo-slot img { width: 28px; height: 28px; object-fit: contain; }
.dv-logo-slot:not(:has(img)) { display: none; }

/* ------------------------------------------------ 4. hero s obrázkem */
.dv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.dv-hero-grid .dv-foto { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
@media (max-width: 980px) { .dv-hero-grid { grid-template-columns: 1fr; gap: 28px; } }

/* služby: ikona ze slotu */
.service-icon .dv-ikona-slot { width: 100%; height: 100%; }

/* ------------------------------------------------ společné karty sekcí */
.dv-sekce-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dv-mrizka { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.dv-karta { position: relative; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg, 22px);
  padding: 26px; box-shadow: var(--shadow); min-width: 0; }
.dv-sekce-alt .dv-karta { background: var(--bg); }
.dv-karta h3 { font-size: 18px; font-weight: 750; letter-spacing: -.01em; margin: 0 0 8px; color: var(--text); }
.dv-karta p { color: var(--text-mute); font-size: 15px; line-height: 1.55; margin: 0; }
.dv-karta .dv-ikona-slot { width: 44px; height: 44px; margin-bottom: 16px; color: var(--sage-deep); }
.dv-karta .dv-ikona-slot svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dv-cislo { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--sage-deep); margin-bottom: 4px; }

/* datová centra */
.dv-dc { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dv-dc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dv-dc { grid-template-columns: 1fr; } }
.dv-dc-karta { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg, 22px); overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.dv-dc-karta .dv-foto { aspect-ratio: 3 / 2; border-radius: 0; }
.dv-dc-telo { padding: 18px 20px 20px; }
.dv-dc-telo h3 { font-size: 17px; font-weight: 750; margin: 0 0 6px; color: var(--text); }
.dv-dc-telo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--text-mute); }
.dv-dc-telo li b { color: var(--text); font-weight: 600; }
.dv-stav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #3f8a64; margin-bottom: 8px; }
.dv-stav::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #52a372; box-shadow: 0 0 0 4px rgba(82,163,114,.18); }

/* FAQ */
.dv-faq { display: grid; gap: 10px; max-width: 860px; }
.dv-faq details { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; }
.dv-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 16px; color: var(--text); display: flex; justify-content: space-between; gap: 12px; min-height: 48px; }
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq summary::after { content: "+"; color: var(--sage-deep); font-size: 22px; line-height: 1; }
.dv-faq details[open] summary::after { content: "−"; }
.dv-faq details p { margin: 0; padding: 0 22px 20px; color: var(--text-mute); font-size: 15px; line-height: 1.6; }

/* novinky */
.dv-clanky { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .dv-clanky { grid-template-columns: 1fr; } }
.dv-clanek { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg, 22px); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.dv-clanek .dv-foto { aspect-ratio: 16 / 9; border-radius: 0; }
.dv-clanek-telo { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.dv-clanek time { font-size: 13px; color: var(--text-light); }
.dv-clanek h3 { font-size: 18px; line-height: 1.3; margin: 0; color: var(--text); font-weight: 750; }
.dv-clanek p { margin: 0; color: var(--text-mute); font-size: 15px; line-height: 1.55; }
.dv-prazdne { color: var(--text-mute); font-size: 15px; }

/* kariéra */
.dv-kariera { display: grid; gap: 28px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 980px) { .dv-kariera { grid-template-columns: 1fr; } }
.dv-kariera .dv-foto { aspect-ratio: 3 / 2; }
.dv-pozice { display: grid; gap: 12px; }
.dv-pozice-karta { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; display: grid; gap: 6px; }
.dv-pozice-karta h3 { margin: 0; font-size: 17px; color: var(--text); }
.dv-pozice-karta .dv-meta { font-size: 13px; color: var(--sage-deep); font-weight: 600; }
.dv-pozice-karta p { margin: 0; font-size: 14px; color: var(--text-mute); }

/* AI poradce — upoutávka */
.dv-ai { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 980px) { .dv-ai { grid-template-columns: 1fr; } }
.dv-ai .dv-foto { aspect-ratio: 4 / 3; }
.dv-ai-form { display: grid; gap: 10px; margin-top: 22px; }
.dv-ai-form textarea { width: 100%; min-height: 110px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--bg-alt); color: var(--text); font: inherit; font-size: 15px; resize: vertical; }
.dv-ai-form textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-soft); }
.dv-cipy { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-cip { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-mute); font-size: 13px; cursor: pointer; }
.dv-cip:hover { color: var(--text); border-color: var(--text-light); }

/* dohled — upoutávka */
.dv-dohled { background: var(--card-bg); background-image: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)); color: var(--card-text); }
.dv-dohled .section-eyebrow { color: var(--sage); }
.dv-dohled .section-head h2 { color: var(--card-text); }
.dv-dohled .section-head p { color: var(--card-mute); }
.dv-dohled-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
@media (max-width: 980px) { .dv-dohled-grid { grid-template-columns: 1fr; } }
.dv-dohled .dv-foto { aspect-ratio: 16 / 10; }
.dv-pravidla { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dv-pravidla li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.03); font-size: 14px; color: var(--card-mute); }
.dv-pravidla b { display: block; color: var(--card-text); font-size: 15px; }
.dv-pravidla svg { width: 22px; height: 22px; stroke: var(--sage); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-stavy { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.dv-stavy div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--card-mute); }
.dv-stavy b { display: block; color: var(--card-text); font-size: 15px; }
.dv-stavy .dv-stav { color: #8fd3ab; margin: 0 0 4px; }

/* kontakt: Google karta s mapou */
.dv-kontakt { display: grid; gap: 24px 50px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start;
  grid-template-areas: "text formular" "google formular"; }
.dv-kontakt > .contact-text { grid-area: text; }
.dv-kontakt > .dv-google { grid-area: google; }
.dv-kontakt > .form { grid-area: formular; }
html[data-uk-uroven="0"] .dv-kontakt { grid-template-areas: "text google"; }
@media (max-width: 980px) {
  .dv-kontakt, html[data-uk-uroven="0"] .dv-kontakt { grid-template-columns: 1fr; grid-template-areas: "text" "google" "formular"; }
}
.dv-google { position: relative; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg, 22px); overflow: hidden; box-shadow: var(--shadow); }
.dv-mapa { position: relative; aspect-ratio: 16 / 9; background: #e7ece6; }
[data-theme="dark"] .dv-mapa { background: #1f2622; }
.dv-mapa svg { width: 100%; height: 100%; display: block; }
.dv-google-telo { padding: 16px 20px 18px; display: grid; gap: 4px; }
.dv-google-telo b { color: var(--text); font-size: 16px; }
.dv-hodnoceni { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-mute); }
.dv-hvezdy { color: #d9a93d; letter-spacing: 2px; font-size: 15px; }
.dv-pozn { font-size: 12px; color: var(--text-light); }

/* formulář: chyby a past */
.field--chyba input, .field--chyba select, .field--chyba textarea { border-color: #c26060 !important; }
.field__chyba { display: none; font-size: 12px; color: #b54a4a; }
.field--chyba .field__chyba { display: block; }
.dv-past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dv-souhlas { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-mute); margin-top: 12px; }
.dv-souhlas input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--sage-deep); flex: 0 0 auto; }
.dv-souhlas a { color: var(--sage-deep); text-decoration: underline; }

/* cookie lišta */
.dv-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin: 0 auto;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 18px 20px; display: grid; gap: 12px; }
.dv-cookie[hidden] { display: none !important; }
.dv-cookie p { margin: 0; font-size: 14px; color: var(--text-mute); line-height: 1.5; }
.dv-cookie p b { color: var(--text); }
.dv-cookie-akce { display: flex; flex-wrap: wrap; gap: 8px; }

/* patička */
.dv-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; position: relative; }
.dv-legal a, .dv-legal button { color: var(--card-mute); background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer; }
.dv-legal a:hover, .dv-legal button:hover { color: var(--sage); }
.dv-smyslena { margin: 22px 0 0; font-size: 12.5px; color: rgba(255,255,255,.45); }
.dv-smyslena a { color: rgba(255,255,255,.6); text-decoration: underline; }
.nav-right .icon-btn.dv-jazyk { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--text-mute); text-decoration: none; }

/* mobilní menu (úroveň 1+ má víc sekcí než se vejde) */
.dv-burger { display: none; }
.dv-menu { display: none; }
@media (max-width: 980px) {
  .dv-burger { display: inline-flex; }
  .dv-menu[data-otevreno="true"] { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-alt);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 8px 20px 16px; }
  .dv-menu a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-weight: 600; }
}
.dv-menu .dv-menu-jazyk { display: none; }
@media (max-width: 520px) {
  .nav-right .dv-jazyk, .nav-right .btn-sage[href$="#kontakt"] { display: none; }
  .dv-menu[data-otevreno="true"] .dv-menu-jazyk { display: flex; }
}

/* obecné: fade-in, které se ukázalo přepnutím úrovně, nesmí zůstat průhledné */
html.dv-bez-animace .fade-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1 !important; transform: none !important; } }

/* ------------------------------------------------ poznámka „není v této úrovni“ */
.dv-nahrada { display: grid; gap: 8px; padding: 16px 18px; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-soft); color: var(--text-mute); font-size: 14px; }
.dv-nahrada b { color: var(--text); }

/* počet v košíku: prázdný košík bez odznaku (třída .badge jinak přebije atribut hidden) */
[data-kosik-pocet][hidden] { display: none !important; }

/* „Vyzkoušejte to“ — lidi u AI ukázek čekají nahrávku a nic nezkusí; tahle
   výzva říká, že poradce opravdu odpoví. Na poradci velká, v upoutávce malá. */
.dv-zkuste { display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 0; padding: 16px 18px; max-width: 760px;
  border: 1px solid var(--sage); border-radius: var(--radius); background: var(--sage-soft); color: var(--text); }
.dv-zkuste p { margin: 0; line-height: 1.55; }
.dv-zkuste b { color: var(--text); }
.dv-zkuste__ikona { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sage-deep); color: #fff; font-size: 12px; padding-left: 2px; animation: dv-zkuste-puls 2.4s ease-out infinite; }
.dv-zkuste--maly { margin: 0 0 12px; padding: 12px 14px; gap: 12px; font-size: 14px; }
.dv-zkuste--maly .dv-zkuste__ikona { width: 28px; height: 28px; font-size: 10px; }
@keyframes dv-zkuste-puls { 0% { box-shadow: 0 0 0 0 var(--sage-glow); } 70% { box-shadow: 0 0 0 12px rgba(148,181,168,0); } 100% { box-shadow: 0 0 0 0 rgba(148,181,168,0); } }
@media (prefers-reduced-motion: reduce) { .dv-zkuste__ikona { animation: none; } }
.dv-cipy__popis { align-self: center; font-size: 13px; font-weight: 600; color: var(--text-mute); margin-right: 2px; }
[data-theme="dark"] .dv-zkuste { background: rgba(148,181,168,0.10); }