/* ============================================================
   pk-site.css – přepínač jazyka a vzhledu + tmavý režim
   Tmavý režim přebarví tokeny (--canvas, --ink, …) a plochy,
   které mají ve stylech stránek natvrdo bílou nebo černou.
   ============================================================ */

/* ---------- Ovládání v navigaci ---------- */
.pk-ctl{ display:flex; align-items:center; gap:6px; margin-left:auto; position:relative; }
.pk-ctl + .nav-tel, .pk-ctl + .nav-cta{ margin-left:4px; }
.pk-ctl-btn{
  height:34px; min-width:34px; border-radius:100px; flex-shrink:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  background:transparent; color:var(--ink); border:1px solid var(--hair);
  font:700 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; letter-spacing:.02em;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, background-color .2s ease;
}
.pk-ctl-btn:hover{ border-color:var(--brand-ink); color:var(--brand-ink); transform:translateY(-1px); }
.pk-ctl-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pk-lang-btn{ padding:0 10px 0 8px; gap:7px; }
/* vlaječka */
.pk-flag{
  width:21px; height:14px; border-radius:3px; overflow:hidden; flex-shrink:0;
  display:inline-flex; box-shadow:0 0 0 1px rgba(23,22,31,.12);
}
.pk-ctl .pk-flag svg{ width:100%; height:100%; display:block; stroke:none; fill:initial; opacity:1; margin:0; }
html[data-theme="dark"] .pk-flag{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.pk-lang{ position:relative; }
.pk-lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:178px; z-index:1000;
  background:var(--surface, #fff); border:1px solid var(--hair); border-radius:16px; padding:6px;
  box-shadow:0 20px 50px -16px rgba(23,22,31,.3);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .18s ease, transform .2s cubic-bezier(.2,.9,.3,1.1), visibility 0s linear .2s;
}
.pk-ctl.is-open .pk-lang-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .2s cubic-bezier(.2,.9,.3,1.1); }
.pk-lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; cursor:pointer;
  padding:9px 10px; border-radius:11px; color:var(--ink); text-align:left;
  font:500 14px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
}
.pk-lang-menu button:hover{ background:var(--brand-soft); }
.pk-lang-menu .pk-check{ width:15px; height:15px; margin-left:auto; fill:none; stroke:var(--brand-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.pk-lang-menu [aria-checked="true"]{ font-weight:650; }
.pk-lang-menu [aria-checked="true"] .pk-check{ opacity:1; }
/* (selektory s „html“ – tenhle soubor se načítá před styly stránky a musí je přebít) */
html .nav-logo, html .nav-cta{ white-space:nowrap; }
@media(max-width:760px){
  html .pk-ctl{ margin-left:auto; }
}
@media(max-width:560px){
  html .nav-tel{ display:none; }            /* telefon je i v kontaktu a v chatu */
  html .nav-logo{ margin-right:6px; }
  html .pk-lang-code{ display:none; }        /* na telefonu stačí vlaječka */
  html .pk-lang-btn{ padding:0 9px; }
  html .nav-cta{ padding:7px 12px; font-size:12.5px; }
  /* nabídka jazyků pod navigací u pravého okraje (nevyjede mimo displej) */
  html .pk-lang-menu{ position:fixed; top:58px; right:12px; }
}
@media(max-width:360px){
  html .nav-logo{ font-size:15px; }
  html .nav-cta{ padding:7px 10px; font-size:12px; }
}

/* plynulý přechod barev při přepnutí (ne při načtení) */
html.pk-theme-anim, html.pk-theme-anim *{ transition:background-color .35s ease, border-color .35s ease, color .35s ease !important; }

/* ============================================================
   TMAVÝ REŽIM
   ============================================================ */
:root{ --surface:#fff; }
html[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0e0d14;
  --canvas-2:#15131e;
  --ink:#f1f0f7;
  --ink-2:#a9a6bb;
  --hair:rgba(169,156,255,.17);
  --brand-ink:#b4a9ff;
  --brand-soft:rgba(169,156,255,.16);
  --ok:#b4a9ff;
  --surface:#1a1825;
}
html[data-theme="dark"] body{ background:var(--canvas); color:var(--ink); }

/* navigace */
html[data-theme="dark"] .nav{ background:rgba(14,13,20,.74); }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a:focus-visible{ background:#fff; border-color:#fff; color:#0e0d14; }
html[data-theme="dark"] .nav-links a[aria-current="page"]{ background:var(--surface); }

/* tlačítka */
html[data-theme="dark"] .btn-black{ background:#fff; color:#0e0d14; }
html[data-theme="dark"] .btn-black:hover{ box-shadow:0 12px 28px rgba(255,255,255,.14); }
html[data-theme="dark"] .btn-quiet{ background:rgba(255,255,255,.08); }
html[data-theme="dark"] .btn-quiet:hover{ background:rgba(255,255,255,.14); }
html[data-theme="dark"] .btn-onvoid{ color:#0e0d14; }
/* na fialové výplni zůstává tmavý text */
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .btn-fill:not(.btn-black),
html[data-theme="dark"] .ck-btn-main,
html[data-theme="dark"] .proc-step.on .proc-rank i,
html[data-theme="dark"] .pres-btn:hover,
html[data-theme="dark"] .pres-btn:focus-visible{ color:#17161f; }
html[data-theme="dark"] .calc-cta-ico svg{ stroke:#17161f; }

/* bílé karty → tmavé plochy */
html[data-theme="dark"] .fig-card,
html[data-theme="dark"] .s-card,
html[data-theme="dark"] .feat,
html[data-theme="dark"] .svc,
html[data-theme="dark"] .tier,
html[data-theme="dark"] .shot,
html[data-theme="dark"] .shots-nav button,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .rail-card,
html[data-theme="dark"] .ck-panel,
html[data-theme="dark"] .ck-btn{ background:var(--surface); }
/* černé karty na tmavém pozadí potřebují jemný obrys */
html[data-theme="dark"] .fig-card.dark,
html[data-theme="dark"] .svc.dark,
html[data-theme="dark"] .tier.lead,
html[data-theme="dark"] .calc-cta,
html[data-theme="dark"] .steps .s-card.is-active{ background:#000; border:1px solid rgba(169,156,255,.28); }
html[data-theme="dark"] .svc.svc-cta{ background:var(--brand); border-color:transparent; color:#17161f; }
html[data-theme="dark"] .svc-cta h3{ color:#17161f; }
html[data-theme="dark"] .svc-cta p{ color:rgba(23,22,31,.75); }
html[data-theme="dark"] .svc-cta .btn-plain{ color:#17161f; }
html[data-theme="dark"] .svc-cta .btn-black{ background:#17161f; color:#fff; }

/* ukázky práce: karty s maketami zařízení */
html[data-theme="dark"] #prace.works .shot{ background:var(--surface); color:var(--ink); border:1px solid rgba(169,156,255,.14); }
html[data-theme="dark"] .dev-lap-scr, html[data-theme="dark"] .dev-phone-scr{ border-color:#3a3650; }
html[data-theme="dark"] .dev-lap-base, html[data-theme="dark"] .dev-phone-scr::before{ background:#3a3650; }

/* tmavé sekce: na tmavé stránce je odliší tenká linka */
html[data-theme="dark"] .void, html[data-theme="dark"] #prace.works{ border-block:1px solid rgba(169,156,255,.1); }

/* cookies */
html[data-theme="dark"] .ck-bar{ background:rgba(20,18,30,.9); }
html[data-theme="dark"] .ck-btn{ color:var(--ink); }
html[data-theme="dark"] .ck-btn-main{ background:var(--brand); }

/* ---------- Kalkulačka ---------- */
html[data-theme="dark"] .calc-chips span,
html[data-theme="dark"] .quiz,
html[data-theme="dark"] .q-back,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .pv-dev,
html[data-theme="dark"] .pv-frame,
html[data-theme="dark"] .pv-close,
html[data-theme="dark"] .pf-panel,
html[data-theme="dark"] .pf-x{ background:var(--surface); }
html[data-theme="dark"] .q-foot{ background:var(--surface); border-top-color:#2a2738; }
html[data-theme="dark"] .q-foot.is-good{ background:#26203f; }
html[data-theme="dark"] .q-msg-ico{ background:var(--canvas); }
html[data-theme="dark"] .q-prog{ background:#2a2738; }
html[data-theme="dark"] .q-bubble{ border-color:#2e2a3c; }
html[data-theme="dark"] .q-bubble::before{ border-right-color:#2e2a3c; }
html[data-theme="dark"] .q-bubble::after{ border-right-color:var(--surface); }
html[data-theme="dark"] .opt{ border-color:#2e2a3c; }
html[data-theme="dark"] .opt:hover{ background:#211e2d; border-color:#3a3550; }
html[data-theme="dark"] .opt.is-on{ background:rgba(169,156,255,.12); border-color:var(--brand-ink); }
html[data-theme="dark"] .opt-k{ border-color:#3a3550; }
html[data-theme="dark"] .opt.is-on .opt-ico svg{ stroke:#17161f; }
html[data-theme="dark"] .btn-go{ color:#17161f; box-shadow:0 4px 0 #7a6cf0; }
html[data-theme="dark"] .btn-go:hover{ box-shadow:0 5px 0 #7a6cf0; }
html[data-theme="dark"] .btn-go:disabled{ background:#2a2738; color:#6e6a82; box-shadow:0 4px 0 #1f1c2b; }
html[data-theme="dark"] .quiz.is-done .btn-go{ background:rgba(255,255,255,.08); color:var(--ink); box-shadow:none; }
html[data-theme="dark"] .r-medal{ box-shadow:0 5px 0 #7a6cf0; }
html[data-theme="dark"] .r-medal svg{ stroke:#17161f; }
html[data-theme="dark"] .r-card, html[data-theme="dark"] .pv-price, html[data-theme="dark"] .pf-price, html[data-theme="dark"] .q-pv{ background:#000; border:1px solid rgba(169,156,255,.22); }
html[data-theme="dark"] .pv-dev button.is-on{ background:#fff; color:#0e0d14; }
html[data-theme="dark"] .pv-url{ background:var(--canvas); }
html[data-theme="dark"] .pv-dots i{ background:#3a3550; }
html[data-theme="dark"] .pv-frame.is-m{ border-color:#2e2a3c; }
html[data-theme="dark"] .pv-frame.is-m .pv-bar{ background:var(--surface); }
html[data-theme="dark"] .pv-badge, html[data-theme="dark"] .pv-float{ color:#17161f; }
html[data-theme="dark"] .pf-f input, html[data-theme="dark"] .pf-f textarea{ background:var(--canvas); border-color:#2e2a3c; }
html[data-theme="dark"] .pf-f input:focus, html[data-theme="dark"] .pf-f textarea:focus{ background:#141220; }
html[data-theme="dark"] .pf-f.is-bad input{ background:#141220; }
html[data-theme="dark"] .pf-send.is-busy:disabled{ color:#17161f; }
html[data-theme="dark"] .pf-spin{ border-color:rgba(23,22,31,.25); border-top-color:#17161f; }
/* náhled webu zákazníka zůstává světlý – je to ukázka jeho stránky */
html[data-theme="dark"] .pv-vp{ background:#fff; }

/* ---------- při najetí myší jen kroužek – žádné podbarvení ----------
   Ruší změny pozadí, barvy textu, rámečku a barevné záře u tlačítek a odkazů.
   (Jemné nadzvednutí tlačítek zůstává, mění se jen barvy.) */
html .nav-links a:hover, html .nav-links a:focus-visible{ background:transparent !important; border-color:transparent !important; color:var(--ink) !important; opacity:1; }
html .nav-tel:hover, html .pk-ctl-btn:hover{ border-color:var(--hair) !important; color:var(--ink) !important; }
html .nav-cta:hover{ filter:none !important; }
html .btn:hover, html .ck-btn:hover, html .calc-cta:hover .calc-cta-btn{ box-shadow:none !important; filter:none !important; }
html .btn-go:hover{ box-shadow:0 4px 0 var(--brand-ink) !important; }          /* „3D“ spodní hrana zůstává */
html[data-theme="dark"] .btn-go:hover, html[data-theme="dark"] .pk-form button:hover{ box-shadow:0 4px 0 #7a6cf0 !important; }
html .btn-quiet:hover{ background:rgba(0,0,0,.05) !important; }
html[data-theme="dark"] .btn-quiet:hover{ background:rgba(255,255,255,.08) !important; }
html .btn-ghost-void:hover{ background:rgba(255,255,255,.14) !important; }
html .quiz.is-done .btn-go:hover{ background:rgba(0,0,0,.05) !important; }
html .ck-btn:hover, html .ck-btn-main:hover, html .q-back:hover, html .pf-x:hover, html .foot-soc a:hover,
html .shots-nav button:hover{ border-color:var(--hair) !important; }
html #prace.works .shots-nav button:hover{ border-color:rgba(255,255,255,.3) !important; }
html .opt:not(.is-on):hover{ background:#fff !important; border-color:#e7e4f2 !important; }
html[data-theme="dark"] .opt:not(.is-on):hover{ background:var(--surface) !important; border-color:#2e2a3c !important; }
html .pres-btn:hover{ background:var(--void, #000) !important; color:#fff !important; }
html .pres-tab:not(.is-on):hover{ border-color:rgba(255,255,255,.18) !important; color:rgba(255,255,255,.78) !important; }
html .pres-x:hover{ background:transparent !important; }
html .pres-nav:hover{ background:rgba(255,255,255,.16) !important; }
html .pk-lang-menu button:hover{ background:transparent !important; }
html .hs-dot:not(.is-on):hover{ background:color-mix(in srgb, var(--ink) 18%, transparent) !important; }
/* chat */
html .pk-chip:not(.pk-back):hover{ background:#fff !important; border-color:var(--field, #e7e4f2) !important; }
html[data-theme="dark"] .pk-chip:not(.pk-back):hover{ background:var(--surface) !important; }
html .pk-chip.pk-back:hover{ background:transparent !important; color:var(--dim) !important; }
html #pk-chat-close:hover{ background:rgba(255,255,255,.12) !important; }
html #pk-chat-bubble:hover{ box-shadow:0 12px 28px rgba(169,156,255,.5), 0 2px 6px rgba(23,22,31,.12) !important; }
html #pk-chat-send:hover, html .pk-form-close-btn:hover{ box-shadow:none !important; }
html .pk-form button:hover{ box-shadow:0 4px 0 var(--brand-ink) !important; }
html .pk-modal-close:hover{ border-color:var(--hair) !important; }

/* ---------- „konverzní“ kroužek kolem všeho klikacího (kreslí pk-site.js) ---------- */
.pk-ring{ position:fixed; left:0; top:0; width:0; height:0; z-index:2147483000; pointer-events:none; opacity:0; transition:opacity .18s ease; }
.pk-ring svg{ display:block; width:100%; height:100%; max-width:none; overflow:visible; }
.pk-ring path{
  fill:none; stroke:var(--brand, #a99cff); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.pk-ring.on{ opacity:1; transition:opacity 0s; }
.pk-ring.on path{ stroke-dashoffset:0 !important; transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1); }
@media(prefers-reduced-motion:reduce){ .pk-ring.on path{ transition:none; } }