:root {
  --paper: #e6ecf5;
  --paper-raised: #ffffff;
  --ink: #0a1f38;
  --ink-soft: #64748b;
  --hairline: #e2e8f0;
  --accent: #06b172;
  --accent-ink: #0b3d22;
  --accent-vivid: #08774a;
  --critical: #c4342b;
  --critical-soft: #fce9e6;
  --warning: #c77d0a;
  --warning-soft: #fbf0dd;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 40px -20px rgba(15, 23, 42, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #020617;
    --paper-raised: #0f172a;
    --ink: #f8fafc;
    --ink-soft: #94a3b8;
    --hairline: #1e293b;
    --accent: #10d987;
    --accent-ink: #062713;
    --accent-vivid: #10d987;
    --critical: #f0776c;
    --critical-soft: #2f1c1a;
    --warning: #e2a53f;
    --warning-soft: #3a2f16;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -20px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
/* Cele pozadie (desktop aj mobil) je jednotne jemne sivomodre (--paper).
   Farebny cover obrazok bg-cover.jpg je uchovany v repo pre pripadne
   buduce pouzitie (Vikov ask - vratit spat 2026-07-28). */
h1, h2, h3 {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-wrap: balance;
  margin: 0;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  padding: 40px 0 8px;
  text-align: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
/* Skutočné logo (inline SVG) - zelený badge má pevné farby, nápis
   WORDPRESS DOKTOR dedí farbu témy cez currentColor (funguje aj v dark
   mode). */
.brand-logo {
  display: block;
  height: 58px;
  width: auto;
  color: var(--ink);
}

/* Sticky lišta s kontaktným CTA - nabehne zhora po odscrollovaní */
.wpdoktor-stickybar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.4);
  transform: translateY(-100%);
  /* visibility: hidden az PO dobehnuti slide-out animacie (0.28s delay) -
     inak by tien listy presvital do stranky aj ked je lista schovana */
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.wpdoktor-stickybar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.28s ease;
}
.wpdoktor-stickybar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wpdoktor-stickybar-logo {
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}
.wpdoktor-stickybar-logo .brand-logo { height: 38px; }
/* Slogan v strede lišty (PC) - dopĺňa kontext medzi logom a tlačidlom */
.wpdoktor-stickybar-tagline {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.wpdoktor-stickybar-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 14px 26px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpdoktor-stickybar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.wpdoktor-stickybar-btn .wpdoktor-icon { width: 16px; height: 16px; }
/* Mobil: claim ako prvy plnosiroky riadok (oddeleny hairline ciarou),
   pod nim druhy riadok s vacsim logom a CTA tlacidlom. Bez flex-wrap sa
   flex: 0 0 100% nezalomi - polozky sa natlacia do jedneho riadku. */
@media (max-width: 820px) {
  .wpdoktor-stickybar-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
  }
  .wpdoktor-stickybar-tagline {
    order: -1;
    flex: 0 0 100%;
    white-space: normal;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.35;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hairline);
  }
  .wpdoktor-stickybar-logo .brand-logo { height: 36px; }
}
@media (max-width: 560px) {
  .wpdoktor-stickybar-inner { padding: 10px 16px 12px; }
  .wpdoktor-stickybar-btn { padding: 12px 20px; font-size: 13.5px; }
  .wpdoktor-stickybar-tagline { font-size: 12px; }
}

/* Hero */
.hero { padding: 24px 0 64px; flex: 1 0 auto; }
.hero-grid { max-width: 900px; margin: 0 auto; }
/* Počas analýzy a pri výsledkoch je hero marketing zbytočný - JS prepína
   triedu na <body> (setResultsMode), logo v hlavičke ostáva. */
/* Skryje LEN landing nadpis (priamy potomok hero-copy), nie novy
   h1.wpdoktor-kicker vnoreny v analyzeri (Vikov ask 2026-07-23) */
body.wpdoktor-results-mode .hero-copy > h1,
body.wpdoktor-results-mode .hero-checks { display: none; }
.accent-text { color: var(--accent); }
.hero-copy h1 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 26px;
  text-align: center;
}
.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}

/* Trust checks strip - pilulky so zelenými ikonovými odznakmi (jediný
   prvok ponechaný z landing redizajnu, Vikovi sa páčil) */
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper-raised);
  color: var(--ink);
  /* sivy okraj (Vikov ask 2026-07-24) */
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 17px 8px 9px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 6px 16px -10px rgba(10, 31, 56, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.check-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(10, 31, 56, 0.45);
}
.check-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, #14385d 14%, transparent);
  color: #14385d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.check-icon svg { width: 100%; height: 100%; }

/* Ukazky vysledkov pod formularom - trust slider (Vikov napad 2026-07-24).
   Rovnaky mechanizmus ako loading ad-slider: absolutne prekryte slidy,
   horizontalny prechod cez .is-active/.is-prev, bodky, swipe aj drag.
   Skryty v results mode a na mobile (mobilne screenshoty budu neskor). */
body.wpdoktor-results-mode .wpdoktor-demo { display: none; }
.wpdoktor-demo {
  max-width: 900px;
  margin: 46px auto 0;
}
.wpdoktor-demo-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 18px;
}
.wpdoktor-demo-slider {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.wpdoktor-demo-slider:active { cursor: grabbing; }
.wpdoktor-demo-slides {
  position: relative;
  /* pomer stran screenshotov (1400x674) - drzi vysku bez skoku layoutu */
  aspect-ratio: 1400 / 674;
}
.wpdoktor-demo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.wpdoktor-demo-slide.is-prev { transform: translateX(-36px); }
.wpdoktor-demo-slide.is-active {
  opacity: 1;
  transform: none;
}
.wpdoktor-demo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.wpdoktor-demo-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
/* bodky zdielaju vzhlad s loading sliderom (.wpdoktor-addot je scopovana
   na .wpdoktor-analyzer, preto samostatne pravidla) */
.wpdoktor-demo .wpdoktor-addot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 20%, var(--hairline));
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.wpdoktor-demo .wpdoktor-addot.is-active {
  width: 20px;
  background: var(--accent);
}
@media (max-width: 820px) {
  .wpdoktor-demo { display: none; }
}

/* Footer */
.site-footer {
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 13px;
  flex-shrink: 0;
}
.footer-inner {
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Facebook nateraz skryty - ma len placeholder odkaz (href="#");
   Instagram je odhaleny (Vikov ask 2026-07-24). Vyssia specificita
   (2 triedy), aby prebilo neskorsie .footer-social display:inline-flex. */
.footer-socials .footer-social--fb { display: none; }
.footer-brand {
  color: var(--ink);
  font-weight: 400;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.footer-social:hover {
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(10, 31, 56, 0.4);
}
.footer-social svg { width: 18px; height: 18px; }
/* Facebook "f" glyph je uzky/vysoky (viewBox 320x512) - drz vysku, sirka auto */
.footer-social--fb svg { width: auto; height: 17px; }
@media (max-width: 560px) {
  .footer-inner {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }
}

/* Vacsie obrazovky (desktop/full HD) maju vela vertikalneho priestoru -
   pridaj vzdusnost medzi nadpis, pilulky a formular */
@media (min-width: 1000px) {
  .site-header { padding-top: 56px; }
  .hero { padding-top: 44px; }
  .hero-copy h1 { font-size: 50px; margin-bottom: 44px; }
  .hero-checks { margin-bottom: 48px; }
}
@media (max-width: 820px) {
  .hero-copy h1 { font-size: 32px; }
  .brand-logo { height: 46px; }
  .wpdoktor-analyzer .wpdoktor-panel { padding: 28px 22px 24px; }
}
/* Mobil: pilulky ostavaju, len mensie - zmestia sa 2-3 vedla seba a
   prirodzene sa zalamuju */
@media (max-width: 640px) {
  .hero-checks { gap: 7px; margin-bottom: 24px; }
  .check-item {
    gap: 6px;
    padding: 5px 12px 5px 6px;
    font-size: 11.5px;
  }
  .check-icon { width: 21px; height: 21px; padding: 4px; }
}

/* ---- Analyzer widget ---- */
.wpdoktor-analyzer .wpdoktor-panel {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 28px 64px -28px rgba(15, 23, 42, 0.4);
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
}
.wpdoktor-analyzer .wpdoktor-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.wpdoktor-analyzer .wpdoktor-icon { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; }
.wpdoktor-analyzer .wpdoktor-icon svg { width: 100%; height: 100%; }
.wpdoktor-analyzer .wpdoktor-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wpdoktor-analyzer .wpdoktor-input-wrap {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}
.wpdoktor-analyzer .wpdoktor-input-wrap > .wpdoktor-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}
.wpdoktor-analyzer .wpdoktor-input {
  width: 100%;
  padding: 13px 16px 13px 38px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
}
.wpdoktor-analyzer .wpdoktor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.wpdoktor-analyzer .wpdoktor-button .wpdoktor-icon { width: 15px; height: 15px; }
.wpdoktor-analyzer .wpdoktor-button:disabled { opacity: 0.6; cursor: default; }
/* Velky styl pola zdielaju uvodny panel na landingu AJ email formular
   v CTA - jednotny dizajn (Vikova poziadavka 2026-07-23) */
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-input,
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-input {
  padding: 18px 20px 18px 46px;
  font-size: 16.5px;
  /* takmer cierna linia pola - vyraznejsie (Vikov ask 2026-07-24) */
  border: 2px solid var(--ink);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* CTA email field ma biele pozadie, aby vyskocil z jemneho zeleneho
   podkladu CTA karty (linia je cierna z pravidla vyssie) */
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-input {
  background: #fff;
}
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-input-wrap > .wpdoktor-icon,
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-input-wrap > .wpdoktor-icon { left: 18px; width: 19px; height: 19px; }
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-input:focus,
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-button,
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-button {
  padding: 18px 30px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-button .wpdoktor-icon,
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-button .wpdoktor-icon { width: 18px; height: 18px; }
/* Mobil: tlacidlo na plnu sirku, vyssi vertikalny padding, bez ikony.
   Musi byt AZ za zakladnym pravidlom vyssie, inak by ho to prebilo. */
@media (max-width: 640px) {
  .wpdoktor-analyzer .wpdoktor-panel .wpdoktor-button {
    width: 100%;
    padding: 20px 16px;
  }
  .wpdoktor-analyzer .wpdoktor-panel .wpdoktor-button .wpdoktor-icon { display: none; }
}
.wpdoktor-analyzer .wpdoktor-panel .wpdoktor-button:hover:not(:disabled),
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.wpdoktor-analyzer .wpdoktor-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--critical-soft);
  color: var(--critical);
  font-size: 13.5px;
}
/* "Nie je WordPress" obrazovka - cisté zastavenie namiesto reportu.
   Pozadie rovnake ako kriticky nalez v analyze (jemny cerveny gradient). */
.wpdoktor-analyzer .wpdoktor-notwp {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 34px 34px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--critical) 10%, var(--paper-raised)), var(--paper-raised));
}
/* Horna lista cervena (namiesto zelenej) - signalizuje "nedalo sa" */
.wpdoktor-analyzer .wpdoktor-notwp::before {
  background: linear-gradient(90deg, var(--critical), color-mix(in srgb, var(--critical) 35%, transparent));
}
.wpdoktor-analyzer .wpdoktor-notwp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical);
  margin-bottom: 14px;
}
.wpdoktor-analyzer .wpdoktor-notwp-icon .wpdoktor-icon { width: 30px; height: 30px; }
/* Easter egg (skusa sa analyzovat sam doktor) - priatelsky zeleny, nie
   cerveny ako "nie je WordPress". Preberá layout notwp karty. */
.wpdoktor-analyzer .wpdoktor-easteregg {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 34px 34px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--paper-raised)), var(--paper-raised));
}
.wpdoktor-analyzer .wpdoktor-easteregg::before {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.wpdoktor-analyzer .wpdoktor-easteregg .wpdoktor-notwp-icon {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-vivid);
}
.wpdoktor-analyzer .wpdoktor-easteregg h2 {
  font-size: 23px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-easteregg p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 auto 18px;
  max-width: 46ch;
}
.wpdoktor-analyzer .wpdoktor-easteregg p strong { color: var(--ink); }
.wpdoktor-analyzer .wpdoktor-easteregg .wpdoktor-button { margin-top: 6px; padding: 14px 26px; }
.wpdoktor-analyzer .wpdoktor-notwp h2 {
  font-size: 23px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-notwp p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 auto 14px;
  max-width: 48ch;
}
.wpdoktor-analyzer .wpdoktor-notwp p strong { color: var(--ink); }
.wpdoktor-analyzer .wpdoktor-notwp-note { font-size: 13.5px; }
.wpdoktor-analyzer .wpdoktor-notwp .wpdoktor-button { margin-top: 12px; padding: 14px 26px; }
.wpdoktor-analyzer .wpdoktor-loading {
  text-align: center;
  padding: 48px 16px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.wpdoktor-analyzer .wpdoktor-loading p {
  max-width: 40ch;
  margin: 0 auto;
  transition: opacity 0.2s ease;
}
.wpdoktor-analyzer .wpdoktor-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent);
  animation: wpdoktor-spin 0.8s linear infinite;
}
@keyframes wpdoktor-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wpdoktor-analyzer .wpdoktor-spinner { animation: none; }
}
.wpdoktor-analyzer .wpdoktor-progress {
  position: relative;
  width: 116px;
  height: 116px;
  /* mensia medzera - DIAGNOSTIKUJEME tesnejsie pod kruhom (Vikov ask) */
  margin: 0 auto 4px;
}
.wpdoktor-analyzer .wpdoktor-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.wpdoktor-analyzer .wpdoktor-progress circle {
  fill: none;
  stroke-width: 9;
}
/* Neaktivna cast kruhu aj bodky slidera: samotny --hairline bol privelmi
   svetly, 35% ink-soft zas primoc (Vikov feedback 2026-07-23 x2) */
.wpdoktor-analyzer .wpdoktor-progress-track { stroke: color-mix(in srgb, var(--ink-soft) 20%, var(--hairline)); }
.wpdoktor-analyzer .wpdoktor-progress-bar {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
}
.wpdoktor-analyzer .wpdoktor-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 31px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wpdoktor-analyzer .wpdoktor-progress-pct i {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  align-self: center;
  margin: 6px 0 0 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wpdoktor-analyzer .wpdoktor-progress-bar { transition: none; }
}

/* Reklamný slider v loading screene (captive priestor počas čakania) */
/* Podnadpis "Diagnostikujeme" medzi kruhom a sliderom; tri bodky sa
   dopĺňajú v slučke cez steps() animáciu na ::after */
.wpdoktor-analyzer .wpdoktor-loading-subtitle {
  /* maly capslock "kicker" tesne pod kruhom (Vikov feedback 2026-07-23) */
  margin: 2px auto 0 !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Nazov domeny nazeleno v podnadpise (Vikov ask 2026-07-23) */
.wpdoktor-analyzer .wpdoktor-loading-host { color: var(--accent-vivid); }
.wpdoktor-analyzer .wpdoktor-loading-subtitle::after {
  /* Pevné '...' odkrývané zľava cez clip-path (animácia content nefunguje
     spoľahlivo). margin-right: -3ch drží samotný text presne v strede. */
  content: '...';
  display: inline-block;
  width: 3ch;
  margin-right: -3ch;
  text-align: left;
  clip-path: inset(0 100% 0 0);
  animation: wpdoktor-ellipsis 1.8s steps(4, jump-none) infinite;
}
@keyframes wpdoktor-ellipsis {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.wpdoktor-analyzer .wpdoktor-adslider {
  max-width: 460px;
  margin: 18px auto 0;
  /* horizontalny swipe patri slideru, zvisly scroll ostava stranke */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.wpdoktor-analyzer .wpdoktor-adslider:active { cursor: grabbing; }
.wpdoktor-analyzer .wpdoktor-adslides {
  position: relative;
  min-height: 150px;
}
/* Horizontalny kolotoc (Vikov feedback - povodny translateY posobil ako
   swipe zhora dole): neaktivny slide caka VPRAVO, aktivny je v strede,
   odchadzajuci dostane .is-prev a zmizne DOLAVA. Vyssia karta s vacsim
   zvislym paddingom, nech obsah dycha. */
.wpdoktor-analyzer .wpdoktor-adslide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px;
  border-radius: 16px;
  background: linear-gradient(150deg, #14385d 0%, #0a1f38 100%);
  box-shadow: 0 20px 44px -24px rgba(10, 31, 56, 0.9);
  text-align: left;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.wpdoktor-analyzer .wpdoktor-adslide.is-prev { transform: translateX(-36px); }
.wpdoktor-analyzer .wpdoktor-adslide.is-active {
  opacity: 1;
  transform: none;
}
.wpdoktor-analyzer .wpdoktor-adslide-emoji {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
}
/* Ilustracia namiesto emoji (slide s `img` v AD_SLIDES) - priehladne
   pozadie (Vikova poziadavka 2026-07-23, biela nalepka zrusena) */
.wpdoktor-analyzer .wpdoktor-adslide-img {
  flex-shrink: 0;
  width: 110px;
  height: 98px;
  object-fit: contain;
}
.wpdoktor-analyzer .wpdoktor-adslide-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.wpdoktor-analyzer .wpdoktor-adslide-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.wpdoktor-analyzer .wpdoktor-addots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.wpdoktor-analyzer .wpdoktor-addot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  /* rovnaky posilneny odtien ako progress-track vyssie */
  background: color-mix(in srgb, var(--ink-soft) 20%, var(--hairline));
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.wpdoktor-analyzer .wpdoktor-addot.is-active {
  width: 20px;
  background: var(--accent);
}
@media (max-width: 560px) {
  .wpdoktor-analyzer .wpdoktor-adslides { min-height: 168px; }
  .wpdoktor-analyzer .wpdoktor-adslide { gap: 13px; padding: 24px 18px; }
  .wpdoktor-analyzer .wpdoktor-adslide-emoji { font-size: 34px; }
  .wpdoktor-analyzer .wpdoktor-adslide-img { width: 94px; height: 84px; }
  .wpdoktor-analyzer .wpdoktor-adslide-title { font-size: 15.5px; }
  .wpdoktor-analyzer .wpdoktor-adslide-text { font-size: 12.5px; }
}
.wpdoktor-analyzer .wpdoktor-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 30px 28px 26px;
  /* biele pozadie, zelena lista hore, cierny nadpis (Vikov ask 2026-07-24) */
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow);
  /* 40px gap medzi nadpisom, popisom a tlacidlami (Vikov ask) - vlastne
     marginy prvkov su vynulovane nizsie, rozostupy riadi len gap */
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* Zelena lista hore ako na domovskej stranke (Vikov ask 2026-07-24 -
   modry pas zmeneny spat na zeleny) */
.wpdoktor-analyzer .wpdoktor-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
/* "Diagnóza webu <doména>" = hlavny nadpis h1, dolava, bez capslocku;
   cierny (--ink, ako ostatne nadpisy) - Vikov ask 2026-07-24 */
.wpdoktor-analyzer .wpdoktor-kicker {
  display: block;
  text-align: left;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
/* Povodny nadpis "Vas web ... ma X problemov" - teraz mensia veta h2 urovne */
.wpdoktor-analyzer .wpdoktor-hero-lead {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.wpdoktor-analyzer .wpdoktor-hero-count { color: var(--critical); font-weight: 800; }
/* Domena je sucast cierneho nadpisu (Vikov ask 2026-07-24) */
.wpdoktor-analyzer .wpdoktor-hero-url {
  color: var(--ink);
  font-weight: 800;
}
@media (max-width: 560px) {
  .wpdoktor-analyzer .wpdoktor-kicker { font-size: 25px; }
}
.wpdoktor-analyzer .wpdoktor-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.wpdoktor-analyzer .wpdoktor-hero-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  /* Transparentne pozadie, bez viditelneho outlinu, text aj ikona zelene
     (Vikov ask 2026-07-24). 1px priehladny ram drzi rovnaku vysku ako
     plne tlacidlo vedla (to ma 1px ram). */
  border: 1px solid transparent;
  /* jemny zeleny podklad natrvalo (predtym len na hover) - Vikov ask 2026-07-24 */
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-vivid);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-hero-share:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.wpdoktor-analyzer .wpdoktor-hero-share .wpdoktor-icon { width: 15px; height: 15px; color: var(--accent-vivid); }
.wpdoktor-analyzer .wpdoktor-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  /* 1px outline rovnakej farby ako pozadie tlacidla (Vikov ask) */
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.wpdoktor-analyzer .wpdoktor-hero-cta .wpdoktor-icon { width: 16px; height: 16px; }
/* Mobil: obe tlacidla na celu sirku, pod sebou */
@media (max-width: 640px) {
  .wpdoktor-analyzer .wpdoktor-hero-cta,
  .wpdoktor-analyzer .wpdoktor-hero-share {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
  }
}
.wpdoktor-analyzer .wpdoktor-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--critical) 10%, var(--paper-raised)), var(--paper-raised));
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.wpdoktor-analyzer .wpdoktor-card--warning {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 10%, var(--paper-raised)), var(--paper-raised));
}
.wpdoktor-analyzer .wpdoktor-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--critical);
}
.wpdoktor-analyzer .wpdoktor-card--warning::before { background: var(--warning); }
.wpdoktor-analyzer .wpdoktor-card .wpdoktor-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--critical);
  display: block;
  margin-bottom: 8px;
}
.wpdoktor-analyzer .wpdoktor-card--warning .wpdoktor-tag { color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 8px;
}
.wpdoktor-analyzer .wpdoktor-card-icon { width: 20px; height: 20px; color: var(--critical); }
.wpdoktor-analyzer .wpdoktor-card--warning .wpdoktor-card-icon { color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.wpdoktor-analyzer .wpdoktor-evidence {
  margin-top: 10px;
  font-size: 12px;
  background: var(--critical-soft);
  color: var(--critical);
  border-radius: 8px;
  padding: 7px 11px;
  word-break: break-word;
}
.wpdoktor-analyzer .wpdoktor-card--warning .wpdoktor-evidence {
  background: var(--warning-soft);
  color: var(--warning);
}
.wpdoktor-analyzer .wpdoktor-tech-toggle {
  margin-top: 12px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
.wpdoktor-analyzer .wpdoktor-tech-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.wpdoktor-analyzer .wpdoktor-category { margin-bottom: 44px; }
.wpdoktor-analyzer .wpdoktor-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.wpdoktor-analyzer .wpdoktor-category-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 34px;
  font-weight: 800;
  margin: 0;
}
.wpdoktor-analyzer .wpdoktor-category-icon { width: 31px; height: 31px; color: var(--ink); }
@media (max-width: 560px) {
  .wpdoktor-analyzer .wpdoktor-category-title { font-size: 28px; }
  .wpdoktor-analyzer .wpdoktor-category-icon { width: 26px; height: 26px; }
}
.wpdoktor-analyzer .wpdoktor-category-count {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
}
.wpdoktor-analyzer .wpdoktor-category-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: -6px 0 16px;
  max-width: 62ch;
}
.wpdoktor-analyzer .wpdoktor-category-clean {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.wpdoktor-analyzer .wpdoktor-ok-label {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.wpdoktor-analyzer .wpdoktor-ok-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-ok-toggle:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-ok-toggle .wpdoktor-icon {
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-ok-toggle--open .wpdoktor-icon { transform: rotate(180deg); }
.wpdoktor-analyzer .wpdoktor-ok-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wpdoktor-analyzer .wpdoktor-ok-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
}
.wpdoktor-analyzer .wpdoktor-ok-item:last-child { border-bottom: none; }
.wpdoktor-analyzer .wpdoktor-ok-check {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 1px;
}
.wpdoktor-analyzer .wpdoktor-ok-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-ok-item p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.wpdoktor-analyzer .wpdoktor-plugin-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.wpdoktor-analyzer .wpdoktor-plugin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
}
.wpdoktor-analyzer .wpdoktor-plugin-card--outdated {
  border-color: color-mix(in srgb, var(--critical) 45%, var(--hairline));
  background: var(--critical-soft);
}
.wpdoktor-analyzer .wpdoktor-plugin-icon-wrap {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wpdoktor-analyzer .wpdoktor-plugin-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wpdoktor-analyzer .wpdoktor-plugin-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wpdoktor-analyzer .wpdoktor-plugin-icon-fallback .wpdoktor-icon { width: 16px; height: 16px; color: var(--ink-soft); }
.wpdoktor-analyzer .wpdoktor-plugin-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
  line-height: 1.3;
}
.wpdoktor-analyzer .wpdoktor-plugin-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.wpdoktor-analyzer .wpdoktor-plugin-outdated {
  color: var(--critical);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wpdoktor-analyzer .wpdoktor-scoreboard {
  background: var(--paper-raised);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 26px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.wpdoktor-analyzer .wpdoktor-score-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.wpdoktor-analyzer .wpdoktor-score-ring {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 6px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--ink-soft);
}
.wpdoktor-analyzer .wpdoktor-score-ring--red { border-color: var(--critical); color: var(--critical); }
.wpdoktor-analyzer .wpdoktor-score-ring--orange { border-color: var(--warning); color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-score-ring--green { border-color: var(--accent); color: var(--accent-vivid); }
.wpdoktor-analyzer .wpdoktor-score-overall-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.wpdoktor-analyzer .wpdoktor-score-grid {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.wpdoktor-analyzer .wpdoktor-score-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 13px;
}
.wpdoktor-analyzer .wpdoktor-score-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-score-item-icon { width: 15px; height: 15px; color: var(--ink-soft); }
.wpdoktor-analyzer .wpdoktor-score-item-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-soft);
}
.wpdoktor-analyzer .wpdoktor-score-item-value--red { color: var(--critical); }
.wpdoktor-analyzer .wpdoktor-score-item-value--orange { color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-score-item-value--green { color: var(--accent-vivid); }
@media (max-width: 480px) {
  .wpdoktor-analyzer .wpdoktor-score-grid { grid-template-columns: 1fr; }
}

/* PSI budiky v sekcii Rychlost - styl PageSpeed Insights: kruhove Google
   skore 0-100 pre mobil a pocitac, farebne pasma 90+/50-89/pod 50 */
.wpdoktor-analyzer .wpdoktor-psi-box {
  background: var(--paper-raised);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 26px 24px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.wpdoktor-analyzer .wpdoktor-psi-gauges {
  display: flex;
  justify-content: center;
  gap: 56px;
}
.wpdoktor-analyzer .wpdoktor-psi-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wpdoktor-analyzer .wpdoktor-psi-ring {
  position: relative;
  width: 88px;
  height: 88px;
}
.wpdoktor-analyzer .wpdoktor-psi-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.wpdoktor-analyzer .wpdoktor-psi-track,
.wpdoktor-analyzer .wpdoktor-psi-bar {
  fill: none;
  stroke-width: 7;
}
.wpdoktor-analyzer .wpdoktor-psi-bar { stroke-linecap: round; }
.wpdoktor-analyzer .wpdoktor-psi-score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}
.wpdoktor-analyzer .wpdoktor-psi-gauge--green .wpdoktor-psi-bar { stroke: var(--accent-vivid); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--green .wpdoktor-psi-track { stroke: color-mix(in srgb, var(--accent-vivid) 14%, transparent); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--green .wpdoktor-psi-score { color: var(--accent-vivid); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--orange .wpdoktor-psi-bar { stroke: var(--warning); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--orange .wpdoktor-psi-track { stroke: color-mix(in srgb, var(--warning) 14%, transparent); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--orange .wpdoktor-psi-score { color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--red .wpdoktor-psi-bar { stroke: var(--critical); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--red .wpdoktor-psi-track { stroke: color-mix(in srgb, var(--critical) 14%, transparent); }
.wpdoktor-analyzer .wpdoktor-psi-gauge--red .wpdoktor-psi-score { color: var(--critical); }
.wpdoktor-analyzer .wpdoktor-psi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-psi-label .wpdoktor-icon { width: 15px; height: 15px; color: var(--ink-soft); }
.wpdoktor-analyzer .wpdoktor-psi-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.wpdoktor-analyzer .wpdoktor-rx {
  background: var(--paper-raised);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 26px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 26px;
}
.wpdoktor-analyzer .wpdoktor-rx-header { margin-top: 20px; }
/* Rovnaka struktura ako scoreboard: kruh (26px medzera) + mriezka stlpcov
   s medzerou 8px, aby AKUTNE/MENEJ boli rozostupene ako Bezpecnost/E-shop. */
.wpdoktor-analyzer .wpdoktor-rx-cols {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-items: start;
}
/* Na mobile AKUTNE a MENEJ AKUTNE pod sebou, kazda na plnu sirku.
   POZOR: tento override musi byt AZ ZA definiciou vyssie - rovnaka
   specificita, vyhrava neskorsie pravidlo (preto predtym nefungoval
   kolaps z bloku pri score-grid, ktory je v subore skor). */
@media (max-width: 820px) {
  .wpdoktor-analyzer .wpdoktor-rx-cols { grid-template-columns: 1fr; }
}
.wpdoktor-analyzer .wpdoktor-rx-group {
  background: var(--paper);
  border-radius: 10px;
  padding: 14px 16px;
}
.wpdoktor-analyzer .wpdoktor-rx-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.wpdoktor-analyzer .wpdoktor-rx-group-label .wpdoktor-icon { width: 14px; height: 14px; }
.wpdoktor-analyzer .wpdoktor-rx-group--acute .wpdoktor-rx-group-label { color: var(--critical); }
.wpdoktor-analyzer .wpdoktor-rx-group--routine .wpdoktor-rx-group-label { color: var(--warning); }
.wpdoktor-analyzer .wpdoktor-rx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Polozka odporucania: farebna gulicka podla zavaznosti namiesto
   deliacich ciar - menej vizualneho sumu pri dlhych zoznamoch */
.wpdoktor-analyzer .wpdoktor-rx-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-rx-bullet {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
.wpdoktor-analyzer .wpdoktor-rx-group--acute .wpdoktor-rx-bullet {
  background: var(--critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 15%, transparent);
}
.wpdoktor-analyzer .wpdoktor-rx-group--routine .wpdoktor-rx-bullet {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 15%, transparent);
}
.wpdoktor-analyzer .wpdoktor-cta {
  /* Breaks out wider than the ~900px results column and centres on the
     viewport; self-limits to the viewport width so it never overflows.
     Generous top/bottom margins let the section breathe, clearly apart
     from Odporúčania above and the disclaimer below. */
  width: min(100% + 180px, 100vw - 48px);
  /* mensi vonkajsi odstup, dychanie presunute do vnutorneho paddingu
     (Vikov feedback 2026-07-23) */
  margin-top: 64px;
  margin-bottom: 110px;
  margin-left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--paper-raised)), var(--paper-raised));
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  text-align: left;
}
.wpdoktor-analyzer .wpdoktor-cta-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 52px 32px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wpdoktor-analyzer .wpdoktor-cta h3 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
}
.wpdoktor-analyzer .wpdoktor-cta p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 48ch;
}
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form {
  flex-direction: column;
  align-items: stretch;
  max-width: 380px;
}
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-button { width: 100%; }
/* Column form: neutralise the input-wrap's flex-basis:220px (meant as a
   WIDTH in the row form) - here it becomes a huge vertical basis, leaving a
   giant gap above/below the email field. Size it to its content instead. */
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-input-wrap { flex: 0 0 auto; }
/* Mini timeline in the CTA - numbered rows (title + detail) with a
   connector line; the thank-you slide flips step 1 to a green check */
.wpdoktor-analyzer .wpdoktor-cta-timeline {
  display: flex;
  flex-direction: column;
  margin: 4px 0 22px;
}
.wpdoktor-analyzer .wpdoktor-cta-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
}
.wpdoktor-analyzer .wpdoktor-cta-step:last-child { padding-bottom: 0; }
.wpdoktor-analyzer .wpdoktor-cta-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -2px;
  width: 2px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.wpdoktor-analyzer .wpdoktor-cta-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(150deg, #14385d 0%, #0a1f38 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 1px;
}
.wpdoktor-analyzer .wpdoktor-cta-step.is-done .wpdoktor-cta-step-num { background: var(--accent); }
.wpdoktor-analyzer .wpdoktor-cta-step-num .wpdoktor-icon,
.wpdoktor-analyzer .wpdoktor-cta-step-num svg { width: 14px; height: 14px; }
.wpdoktor-analyzer .wpdoktor-cta-step-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.wpdoktor-analyzer .wpdoktor-cta-step-detail {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 2px;
  max-width: 44ch;
}
/* Email formulár vnorený v kroku 1 timeline (Vikov vizuál) - obsah kroku
   sa musí vedieť zmestiť vedľa čísla, formulár dostane vzduch pod textom
   a krok s formulárom väčší odstup od ďalšieho kroku */
.wpdoktor-analyzer .wpdoktor-cta-step-content { flex: 1 1 auto; min-width: 0; }
.wpdoktor-analyzer .wpdoktor-cta-step .wpdoktor-form { margin-top: 12px; }
.wpdoktor-analyzer .wpdoktor-cta-step:has(.wpdoktor-form) { padding-bottom: 24px; }

/* Email pole ma rovnaky styl ako uvodny panel (pravidla pri .wpdoktor-panel
   vyssie) - povodny accent ram zruseny kvoli jednotnosti */

.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-cta-alt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 8px;
}
/* WhatsApp decentnejšie - šírkou kopíruje email pole (max 380px formulára) */
.wpdoktor-analyzer .wpdoktor-cta .wpdoktor-whatsapp {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  padding: 11px 18px;
  font-size: 14px;
}
.wpdoktor-analyzer .wpdoktor-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  color: var(--accent-vivid);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.wpdoktor-analyzer .wpdoktor-whatsapp:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.wpdoktor-analyzer .wpdoktor-whatsapp .wpdoktor-icon { width: 17px; height: 17px; }
/* Úvodná veta pod nadpisom (uvádza kroky) */
.wpdoktor-analyzer .wpdoktor-cta-intro {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
/* Portrét ako profesionálny "podpis" - fotka + meno + rola, oddelený od
   obsahu jemným zvislým predelom (nie plávajúca fotka v prázdne). */
.wpdoktor-analyzer .wpdoktor-cta-photo {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 28px 40px;
  border-left: 1px solid color-mix(in srgb, var(--hairline), transparent 35%);
}
.wpdoktor-analyzer .wpdoktor-cta-photo img {
  display: block;
  width: 152px;
  height: auto;
  object-fit: contain;
}
.wpdoktor-analyzer .wpdoktor-cta-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-top: 10px;
}
/* Podpis je PC prvok - na mobile skryty (meno je tam pri postave) */
.wpdoktor-analyzer .wpdoktor-cta-signature { display: none; }
/* PC verzia CTA podla Vikovho mockupu (2026-07-23): fotka velka, bez
   predelu a paddingu, dosada na spodok karty; WhatsApp text + tlacidlo
   odsadene na uroven formulara (36px = cislo kroku 24px + gap 12px). */
@media (min-width: 821px) {
  .wpdoktor-analyzer .wpdoktor-cta-photo {
    flex: 0 0 400px;
    position: relative;
    padding: 0;
    border-left: none;
    justify-content: flex-end;
  }
  .wpdoktor-analyzer .wpdoktor-cta-photo img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
    object-position: bottom center;
  }
  /* Plavajuce meno pri fotke sa Vikovi nepacilo - na PC je badge skryty
     a meno zije ako podpis v lavom stlpci pod WhatsApp tlacidlom */
  .wpdoktor-analyzer .wpdoktor-cta-badge { display: none; }
  /* p.signature - vyssia specificita nez vseobecne .wpdoktor-cta p,
     ktore by inak prebilo margin (0 0 20px) aj max-width (48ch) */
  .wpdoktor-analyzer .wpdoktor-cta p.wpdoktor-cta-signature {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0 36px;
    max-width: none;
    font-size: 14px;
    color: var(--ink);
  }
  .wpdoktor-analyzer .wpdoktor-cta-signature strong { font-weight: 700; }
  /* Dekorativna linka za menom v style timeline connectora - vyplni
     zvysok riadku a doprava sa strati */
  .wpdoktor-analyzer .wpdoktor-cta-signature::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  }
  .wpdoktor-analyzer .wpdoktor-cta .wpdoktor-cta-alt,
  .wpdoktor-analyzer .wpdoktor-cta .wpdoktor-whatsapp { margin-left: 36px; }
  /* Email input + tlacidlo Odoslat vedla seba (Vikov navrh - stlaci CTA
     obsah). Mobil ostava stlpec s tlacidlom na plnu sirku. */
  .wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form {
    flex-direction: row;
    align-items: stretch;
    max-width: 480px;
  }
  .wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-button { width: auto; }
  .wpdoktor-analyzer .wpdoktor-cta .wpdoktor-form .wpdoktor-input-wrap { flex: 1 1 220px; }
}
/* Drobná tlač / disclaimer pod celými výsledkami */
.wpdoktor-analyzer .wpdoktor-disclaimer {
  margin: 30px auto 0;
  max-width: 72ch;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.85;
}
@media (max-width: 820px) {
  .wpdoktor-analyzer .wpdoktor-cta {
    flex-direction: column;
    gap: 0;
    margin-top: 72px;
    margin-bottom: 64px;
  }
  .wpdoktor-analyzer .wpdoktor-cta-content { padding: 28px 22px 8px; }
  /* Fotka ako velky "podpis" cez spodok karty (Vikov nacrt 2026-07-23):
     ziadny predel ani bocne okraje, vyrazne vacsia, dosada priamo na
     spodnu hranu karty; meno + rola su prekryte cez spodok fotky. */
  .wpdoktor-analyzer .wpdoktor-cta-photo {
    padding: 10px 0 0;
    border-left: none;
    margin: 6px 0 0;
    position: relative;
  }
  .wpdoktor-analyzer .wpdoktor-cta-photo img { width: min(300px, 82%); }
  /* Meno vedla postavy: cely badge blok absolutne vlavo od hlavy (tam je
     volne miesto), mimo flowu - fotka tak stale dosada na spodok karty.
     Name/role su staticke deti bloku, ziadne prekryvanie. */
  .wpdoktor-analyzer .wpdoktor-cta-badge {
    position: absolute;
    left: 14px;
    top: 16%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
  }
  .wpdoktor-analyzer .wpdoktor-cta-name {
    margin-top: 0;
    color: var(--ink);
  }
}