/* ============================================================
   PARTNERSKÝ PROGRAM — /partnersky-program/
   ============================================================
   Načítava sa len na šablóne template-affiliate.php.
   Farby idú výhradne cez sémantické tokeny z main.css, takže tmavý
   režim prepína jeden riadok v :root a nie sú tu žiadne override bloky.
   Mriežky majú minmax(min(280px, 100%), 1fr) — samotné `1fr` nepustí
   stĺpec pod min-content obsahu a pri 320 px displeji preteká. */

.sp-af h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 14px; color: var(--grey-900); }
.sp-af h3 { font-size: 17px; margin: 0 0 8px; color: var(--grey-900); }
.sp-af p  { color: var(--grey-700); line-height: 1.6; margin: 0 0 10px; }

/* --- Úvod --- */
.sp-af-hero {
  padding: 56px 0 44px;
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
}
.sp-af-hero h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin: 6px 0 16px;
  color: #fff;
}
.sp-af-hero h1 span { color: var(--yellow); }
.sp-af-hero .lead { color: rgba(255,255,255,0.88); }
.sp-af-hero .eyebrow { color: var(--yellow); }

.sp-af-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* Názov prvku v selektore je nutný: `.entry-content a` aj `.sp-af-hero a`
   majú (0,1,1) a z červeného tlačidla by spravili podčiarknutý odkaz. */
.sp-af .sp-af-cta a.sp-af-btn { min-width: 210px; justify-content: center; text-decoration: none; }
/* `.btn-outline` má v main.css `background: var(--surface)`, čo je na svetlom
   režime biela — samotné `color: #fff` z neho spravilo biele písmo na bielom
   a tlačidlo bolo v hero prakticky neviditeľné. Podklad musí ísť dole spolu
   s farbou písma. */
.sp-af-hero .sp-af-cta a.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.sp-af-hero .sp-af-cta a.btn-outline:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* --- Spoločné sekcie --- */
.sp-af-sekcia { padding: 48px 0; }
.sp-af-sekcia--tonovana { background: var(--grey-50); }

/* --- Ako to funguje --- */
.sp-af-kroky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 22px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  counter-reset: none;
}
.sp-af-kroky li { padding: 0; }
.sp-af-cislo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

/* --- Odmeny --- */
.sp-af-odmeny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 26px;
}
.sp-af-odmena {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--red);
}
.sp-af-sadzba {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: var(--red-ink);
  margin-bottom: 10px;
}
.sp-af-priklad {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
  font-size: 14px;
  color: var(--grey-700);
}
.sp-af-priklad b { color: var(--grey-900); }
.sp-af-priklad .sp-af-suma { color: var(--green-ink); }
.sp-af-strop { font-size: 12.5px; color: var(--grey-700); margin: 6px 0 0; }

/* --- Pre koho --- */
.sp-af-skupiny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: 26px;
}
.sp-af-skupina {
  padding: 22px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--grey-100);
}
.sp-af-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-ink);
}
.sp-af-ikona svg { width: 24px; height: 24px; }

/* --- Podmienky --- */
.sp-af-pravidla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px 30px;
  margin-top: 24px;
}
.sp-af-pravidlo h3 { display: flex; gap: 8px; }
.sp-af-pravidlo h3::before { content: "✓"; color: var(--green-ink); font-weight: 900; }
.sp-af-pravidlo p { font-size: 14px; margin: 0; }

/* --- Záver --- */
.sp-af-zaver {
  padding: 48px 0;
  background: var(--blue-deep);
  color: #fff;
  text-align: center;
}
.sp-af-zaver h2 { color: #fff; }
.sp-af-zaver p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 auto; }
.sp-af-zaver .sp-af-cta { justify-content: center; }

@media (max-width: 640px) {
  .sp-af-hero { padding: 40px 0 32px; }
  .sp-af-sekcia, .sp-af-zaver { padding: 36px 0; }
  .sp-af .sp-af-cta a.sp-af-btn { min-width: 0; width: 100%; }
}

.sp-af-prihlasenie { margin: 16px 0 0; font-size: 14px; color: rgba(255,255,255,0.85); }
/* Názov prvku v selektore: `.sp-af-hero a` (0,1,1) by inak prebil farbu. */
.sp-af-hero .sp-af-prihlasenie a { color: var(--yellow); text-decoration: underline; }
.sp-af-hero .sp-af-prihlasenie a:hover { color: #fff; }

/* ============================================================
   PARTNERSKÁ ZÓNA — formuláre SliceWP
   ============================================================
   Plugin dodáva holé polia a systémové tlačidlo. Štýly kopírujú
   kontaktný formulár (kontakt.css), aby zóna vyzerala ako zvyšok webu.
   Stránka beží vnútri `.entry-content`, takže `.entry-content a` (0,1,1)
   prebíja triedu na odkaze — selektory preto nesú aj názov prvku. */

.slicewp-form {
  max-width: 620px;
  margin: 0 0 34px;
  padding: 24px 22px;
  border: 1px solid var(--grey-100);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.slicewp-field-wrapper { margin-bottom: 14px; }
.slicewp-field-label-wrapper label,
.slicewp-field-wrapper label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-900);
  margin: 0 0 6px;
}
.slicewp-field-required-marker { color: var(--red-ink); }

.slicewp-form input[type="text"],
.slicewp-form input[type="email"],
.slicewp-form input[type="url"],
.slicewp-form input[type="password"],
.slicewp-form textarea {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 2px solid var(--grey-200);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  color: var(--grey-900);
  background: var(--bg);
  outline: none;
  transition: border-color .15s;
}
.slicewp-form textarea { resize: vertical; min-height: 96px; }
.slicewp-form input:focus,
.slicewp-form textarea:focus { border-color: var(--red); }
.slicewp-form ::placeholder { color: var(--grey-300); }

/* Pole hesla má vnútri odkaz s ikonou oka — bez toho by ho `.entry-content a`
   prefarbilo na modrý podčiarknutý odkaz a posunulo mimo poľa. */
.slicewp-field-input-password { position: relative; }
.entry-content a.slicewp-show-hide-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-300);
  text-decoration: none;
  border-bottom: 0;
}
.entry-content a.slicewp-show-hide-password:hover { color: var(--grey-700); }
.slicewp-form input[type="password"] { padding-right: 42px; }

.slicewp-form button.slicewp-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: var(--ui-h);
  margin-top: 6px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.slicewp-form button.slicewp-button-primary:hover { background: var(--red-dark); }

.sp-zona-nadpis { margin: 0 0 6px; font-size: 20px; color: var(--grey-900); }
.sp-zona-popis { margin: 0 0 16px; color: var(--grey-700); font-size: 14.5px; max-width: 620px; }

@media (max-width: 640px) {
  .slicewp-form { padding: 20px 16px; }
  .slicewp-form button.slicewp-button-primary { width: 100%; min-width: 0; }
}

/* Nápoveda pod poľom. `code` dedí z main.css monospace — tu ide len o to,
   aby sa príklad adresy vizuálne odlíšil od vety. */
.slicewp-field-description {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey-700);
}
.slicewp-field-description p { margin: 0; }
.slicewp-field-description code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--grey-100);
  font-size: 12px;
  color: var(--grey-900);
}

/* ============================================================
   HLÁŠKY SliceWP V TMAVOM REŽIME
   ============================================================
   Plugin dáva hláškam len `background` a `border-color`, farbu písma nie —
   text tak zdedí `--grey-900`, čo je v tmavom režime takmer biela. Na svetlo-
   ružovom pozadí bola hláška prakticky neviditeľná (namerané 1,1:1).
   V tmavom režime preto podklad tmavne a signálom zostáva farebný rám. */
.slicewp-user-notice { color: var(--grey-900); }

[data-theme="dark"] .slicewp-user-notice.slicewp-error {
  background: rgba(211, 47, 47, 0.16);
  border-color: var(--red);
}
[data-theme="dark"] .slicewp-user-notice.slicewp-warning {
  background: rgba(243, 156, 18, 0.16);
  border-color: #f39c12;
}
[data-theme="dark"] .slicewp-user-notice.slicewp-updated {
  background: rgba(46, 125, 50, 0.20);
  border-color: var(--green);
}

/* ============================================================
   PARTNERSKÝ PANEL — TMAVÝ REŽIM
   SliceWP má farby PLÔCH napevno (`.slicewp-card { background: #fff }`,
   modál, tooltip grafu, kalendár, stránkovanie), ale farbu písma necháva
   zdediť z témy. V tmavom režime tak na bielej karte stál takmer biely
   text — namerané 1,17:1. Prefarbujú sa preto plochy, nie písmo; text
   ostáva zdedený, takže po prípadnej aktualizácii pluginu nič nesvieti
   nesprávnou farbou. Rovnaká príčina ako pri hláškach (blok vyššie).
   ============================================================ */

[data-theme="dark"] .slicewp-card,
[data-theme="dark"] .slicewp-global-overlay .slicewp-global-overlay-inner,
[data-theme="dark"] .slicewp-date-picker-modal,
[data-theme="dark"] .slicewp-date-picker-wrapper .slicewp-date-picker-input {
  background: var(--surface);
  border: 1px solid var(--grey-100);
  color: var(--grey-900);
}

[data-theme="dark"] .slicewp-chart-tooltip {
  background: rgba(25, 31, 39, 0.97);
  border: 1px solid var(--grey-200);
  color: var(--grey-900);
}

[data-theme="dark"] .slicewp-loading-overlay {
  background: rgba(16, 21, 27, 0.6);
}

[data-theme="dark"] .slicewp-loader {
  color: var(--grey-700);
}

/* Aktívna a prejdená záložka mala napevno tmavomodrú #2e4453 — 1,81:1. */
[data-theme="dark"] .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover,
[data-theme="dark"] .slicewp-nav-tab-wrapper .slicewp-nav-tab a:focus,
[data-theme="dark"] .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a {
  color: var(--grey-900);
  border-bottom-color: var(--blue-ink);
}

[data-theme="dark"] .slicewp-menu-left .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover,
[data-theme="dark"] .slicewp-menu-left .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a,
[data-theme="dark"] .slicewp-menu-right .slicewp-nav-tab-wrapper .slicewp-nav-tab a:hover,
[data-theme="dark"] .slicewp-menu-right .slicewp-nav-tab-wrapper .slicewp-nav-tab.slicewp-active a {
  border-color: var(--blue-ink);
}

[data-theme="dark"] .slicewp-page-numbers-wrapper .page-numbers,
[data-theme="dark"] .slicewp-pagination-links .slicewp-pagination-link,
[data-theme="dark"] .slicewp-field-file-item,
[data-theme="dark"] .slicewp-card-affiliate-dashboard .slicewp-card-inner .slicewp-kpi-direction {
  background: var(--grey-50);
  color: var(--grey-900);
}

[data-theme="dark"] .slicewp-field-wrapper .slicewp-field-drag-drop-area {
  background: var(--grey-50);
  border-color: var(--grey-200);
}

[data-theme="dark"] .slicewp-field-file-item-remove svg {
  color: var(--grey-900);
}

/* Odkazy v pätičke karty boli #777 — na tmavom povrchu pod hranicou. */
[data-theme="dark"] .slicewp-card-footer-actions a {
  color: var(--blue-ink);
}

[data-theme="dark"] .slicewp-card-footer-actions a:hover {
  color: var(--grey-900);
}

/* Kalendár si farby berie z premenných, nie zo selektorov. */
[data-theme="dark"] .slicewp-date-picker-modal,
[data-theme="dark"] .slicewp-date-picker-wrapper {
  --slicewp-litepicker-month-header-color: var(--grey-900);
  --slicewp-litepicker-day-color: var(--grey-900);
  --slicewp-litepicker-day-color-hover: var(--blue-ink);
  --slicewp-litepicker-is-today-color: var(--blue-ink);
  --slicewp-litepicker-month-weekday-color: var(--grey-700);
  --slicewp-litepicker-month-week-number-color: var(--grey-700);
}

/* ============================================================
   NÁHĽADY PARTNERSKEJ ZÓNY
   Skutočné snímky panela pre návštevníka, ktorý ešte partnerom nie je.
   ============================================================ */

.sp-af-nahlady {
  padding: 64px 0;
  background: var(--grey-50);
}

.sp-af-nahlady h2 {
  text-align: center;
  margin-bottom: 10px;
}

.sp-af-nahlady .lead {
  text-align: center;
  margin: 0 auto 36px;
}

.sp-af-nahlady-mriezka {
  display: grid;
  /* minmax(0, …) drží stĺpec pod min-content obsahu — inak by široká snímka
     rozťahovala mriežku a na 320 px by stránka dostala vodorovný posuv. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px;
  align-items: stretch;
}

.sp-af-nahlad {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--grey-100);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sp-af-nahlad-odkaz {
  display: block;
  position: relative;
  text-decoration: none;
}

.sp-af-nahlad-obr {
  display: block;
  width: 100%;
  /* Pevná výška, nie max-height: snímky sú rôzne vysoké (odkazy 374 px, bannery
     1433 px) a pri max-height by karty v rade skončili nezarovnané. Orezáva sa
     zdola, takže hore ostanú záložky a prvé karty — to, na čom záleží. */
  height: 260px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border-bottom: 1px solid var(--grey-100);
}

/* Zmenšená snímka sa nedá čítať, preto sa dá otvoriť v plnej veľkosti. */
.sp-af-nahlad-lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(21, 101, 192, 0.94);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sp-af-nahlad-odkaz:hover .sp-af-nahlad-lupa,
.sp-af-nahlad-odkaz:focus-visible .sp-af-nahlad-lupa {
  opacity: 1;
}

/* Na dotykovom zariadení hover nenastane — štítok tam svieti stále. */
@media (hover: none) {
  .sp-af-nahlad-lupa { opacity: 1; }
}

.sp-af-nahlad figcaption {
  padding: 16px 18px 20px;
  display: grid;
  gap: 6px;
}

.sp-af-nahlad figcaption b {
  font-size: 1.05rem;
  color: var(--grey-900);
}

.sp-af-nahlad figcaption span {
  color: var(--grey-700);
  font-size: 0.93rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .sp-af-nahlady { padding: 44px 0; }
  .sp-af-nahlad-obr { height: 210px; }
}