/* Českolipský BETT – Microsite Starter (v2025-08-15 20:27)
   Zásady: přehledná typografie, responzivní grid, a11y-first, bez externích knihoven. */
:root {
  --bg: #f6f8fc;
  --bg-alt: #ffffff;
  --bg-alt2: #f0e8ef;
  --fg: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --card: #ffffff;
  --border: rgba(0, 0, 0, .12);
  --shadow: 0 10px 22px rgba(0, 0, 0, .10);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
}

/* Light mode via data-theme on <html> */
:root[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-alt: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --card: #ffffff;
  --border: rgba(0, 0, 0, .12);
  --shadow: 0 10px 22px rgba(0, 0, 0, .10);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  /* Fallback vh, then small/large/dynamic viewport units for modern browsers (prevents iOS 100vh jump) */
  min-height: 100vh;
  /* basic fallback */
  min-height: 100svh;
  /* stable (small) viewport height */
  min-height: 100dvh;
  /* dynamic viewport (most up to date) */
  background: linear-gradient(180deg, var(--bg), var(--bg-alt) 60%);
  background-repeat: no-repeat;
  /* be explicit */
  background-attachment: fixed;
  /* stretch nicely on short pages */
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.55;
  display: flex;
  /* allow sticky footer pattern */
  flex-direction: column;
}

a {
  color: var(--primary);
  text-decoration: none
}

button:hover,
a:hover {
  text-decoration: underline
}

.themeswitcher:hover {
  text-decoration: none;
}

.container {
  width: min(1100px, 92%);
  margin: 0 auto
}

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(8px);
  background: rgba(10, 16, 30, .7);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 0
}


/* Desktop/top nav layout */
.nav>nav,
.nav .nav__menu {

  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  /* match logo height in nav */
  padding: 0 12px;
  border-radius: 10px;
  color: var(--fg);
}

.nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .06)
}

/* Header CTA must not inherit global top margin */
.header .cta,
.nav .cta {
  margin-top: 0;
  height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .3px
}

.brand .tag {
  font-size: .8rem;
  color: var(--muted)
}

/* --- Mobile nav (burger) --- */
.nav__toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 40px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

/* Collapsible menu panel for small screens */
@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav .nav__menu {
    position: absolute;
    top: 100%;
    right: 4%;
    /* align to container edge */
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    width: min(92vw, 320px);
    z-index: 80;
  }

  .nav .nav__menu a {
    display: block;
    height: auto;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .nav .nav__menu .cta {
    display: block;
    text-align: center;
    margin-left: 0;
  }

  .header.is-open .nav__menu {
    display: flex;
  }

  /* Hide inline desktop menu spacing */
  .nav>nav {
    margin-left: 0;
  }

  .hero {
    padding: 16px 0 0 !important;
  }

  .hero-image {
    margin-bottom: 2rem !important;
  }

}

.hero {
  padding: 72px 0 36px;
  text-align: center;
}


.hero h1 {
  font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);
  margin: .2rem 0;
  display: none;
}

.hero p.lead {
  color: var(--muted);
  font-size: 1.05rem
}

.cta {
  display: inline-block;
  background: var(--primary);
  color: #00223a;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 12px;
  margin-top: 18px;
  box-shadow: var(--shadow);
}

/* Destructive CTA variant (uses accent) */
.cta--danger {
  background: var(--accent);
  color: #111;
}

/* Utility: smaller CTA for table alignment */
.cta--sm {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .95rem;
}

.section {
  padding-bottom: 36px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: .2rem 0 .6rem
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem
}

/* Utility: explicit green badge for "Zaregistrováno" */
.badge--mine {
  background: #19d38a;
  color: #0b1220;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

@media (max-width:800px) {
  .grid-2 {
    grid-template-columns: 1fr
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: var(--card)
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top
}

/* Subtle block coloring: each block id gets a gentle stripe */
tr[data-block="1"] {
  background: linear-gradient(0deg, rgba(74, 198, 255, .06), rgba(74, 198, 255, .06)), var(--card);
}

tr[data-block="2"] {
  background: linear-gradient(0deg, rgba(25, 211, 138, .08), rgba(25, 211, 138, .08)), var(--card);
}

tr[data-block="3"] {
  background: linear-gradient(0deg, rgba(255, 209, 102, .10), rgba(255, 209, 102, .10)), var(--card);
}

tr[data-block="4"] {
  background: linear-gradient(0deg, rgba(255, 107, 107, .08), rgba(255, 107, 107, .08)), var(--card);
}

/* Keep header/footer solid */
thead tr,
tfoot tr {
  background: var(--card) !important;
}

/* Pager */
.pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.pager button,
.pager a {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
}

.pager .is-active {
  background: var(--primary);
  color: #001a2a;
  border-color: transparent;
}

.pager button[disabled] {
  opacity: .5;
  cursor: default;
}

tfoot td {
  color: var(--muted)
}

footer {
  padding: 28px 0 40px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  margin-top: auto;
  /* sticky footer */
}

/* Theme-specific footer stylings */
body.theme-c footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 2px solid var(--primary);
  color: var(--fg);
}

body.theme-c footer .muted {
  color: var(--muted);
}

body.theme-c footer h3 {
  color: var(--primary);
  font-weight: 800;
}

/* Footer vertical rhythm */
footer h3 {
  margin: 0 0 6px;
}

footer p {
  margin: 0 0 8px;
}

/* Adjusted grid layout - wider left column */
footer .grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* wider left column for KPIs */
  gap: 32px;
}

/* Improved KPI cards layout */
footer .kpis {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

footer .kpi {
  flex: 1;
  min-width: 140px;
  /* ensure consistent sizing */
  padding: 10px;
  background: rgba(217, 38, 132, 0.05);
  border: 1px solid rgba(217, 38, 132, 0.15);
  border-radius: 8px;
  text-align: center;
}

footer .kpi strong {
  display: block;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

/* Subtle hover tint for footer KPI cards */
footer .kpi {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

footer .kpi:hover,
footer .kpi:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
  background: rgba(217, 38, 132, 0.07);
  border-color: color-mix(in oklab, var(--primary) 40%, rgba(217, 38, 132, 0.15));
}

/* Partner list - prepared for 5 partners */
footer .partners-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

footer .partners-list>strong {
  color: var(--fg);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(217, 38, 132, 0.1);
  border: 1px solid rgba(217, 38, 132, 0.2);
  font-size: 0.85rem;
}

footer .partners-list>.muted {
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 800px) {
  footer .grid-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  footer .kpis {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  footer .partners-list {
    flex-direction: column;
    gap: 12px;
  }

  footer .partners-list>.muted {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }

  footer .kpis {
    flex-direction: column;
    gap: 8px;
  }

  footer .kpi {
    min-width: auto;
    text-align: center;
  }
}

/* Footer left column: center KPI block between intro text and bottom edge */
footer .grid-2>div:first-child {
  display: flex;
  flex-direction: column;
}

footer .grid-2>div:first-child .kpis {
  margin-top: auto;
  /* push down from intro */
  margin-bottom: auto;
  /* equal space below = vertical center */
}

@media (max-width: 800px) {

  /* On small screens, keep natural flow under intro */
  footer .grid-2>div:first-child .kpis {
    margin-top: 10px;
    margin-bottom: 0;
  }
}

#program-body td {
  vertical-align: text-top;
}

.notice {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted)
}

.filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 20px
}

.select,
.input {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.kpis {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 160px
}

.kpi strong {
  display: block;
  font-size: 1.3rem
}

.qr {
  width: 110px;
  height: 110px;
  background: repeating-linear-gradient(45deg, #1d2a4a, #1d2a4a 10px, #0e162a 10px, #0e162a 20px);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* --- Theme C: Českolipský BETT Colors (white + magenta + cyan) --- */
body.theme-c {
  --bg: #ffffff;
  --bg-alt: #f8f9fa;
  --bg-alt2: #f0e8ef;
  --fg: #182525;
  --muted: #6c757d;
  --primary: #D92684;
  --hover: #B5206E;
  /* hlavní akcentová barva */
  /*--accent: #26D9D5;*/
  /* původní */
  --accent: #20B5B1;
  --accent-hover: #19918E;
  /* sekundární akcentová barva */
  --card: #ffffff;
  --border: rgba(24, 37, 37, .08);
  --shadow: 0 6px 20px rgba(0, 0, 0, .12);
  --radius: 12px;
}

body.theme-c .header {
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(24, 37, 37, .1);
}

body.theme-c .cta {
  color: #ffffff;
  background: var(--primary);
}

body.theme-c .cta:hover {
  background: var(--hover);
}

/* Theme C: ensure white text on dark-blue primary buttons */
body.theme-c .modal .btn--primary {
  color: #ffffff;
}

body.theme-c .pager .is-active {
  color: #ffffff;
}

body.theme-c .theme-switcher .theme-btn[aria-pressed="true"] {
  color: #ffffff;
}

/* Status badges for workshop detail */
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.badge--ok {
  background: var(--primary);
  color: #ffffff;
}

.badge--full {
  background: var(--accent);
  color: #111111;
}

body.theme-c .badge--full {
  background: #ffe2e5;
  /* light red/pink tint for better readability */
  color: var(--fg);
  /* dark text from theme C */
  border-color: rgba(0, 0, 0, .08);
}

.badge--neutral {
  background: var(--bg-alt, #f4f4f8);
  color: var(--fg, #222);
  border: 1px solid var(--border, rgba(0, 0, 0, .1));
}

#ws-aside {
  margin: 2rem 0;
}

/* --- Active filter chips (štítky) --- */
.filter-tags {
  margin: 8px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.chip--ghost {
  opacity: .7;
  font-weight: 500;
  cursor: default;
}

.chip--danger {
  border-color: var(--accent);
}

.chip__x {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.chip--danger .chip__x {
  background: var(--accent);
  color: #111;
}

/* Global lightweight button styles for inline actions */
.btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Micro-interactions & motion --- */
/* Lift effect for specific cards */
.card--lift {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.card--lift:hover,
.card--lift:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

/* CTA hover/active */
.cta {
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Simple reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .38s ease, transform .38s ease;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .card--lift,
  .cta,
  .reveal {
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

.btn--lg {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 1rem;
}

.btn--sm {
  padding: 6px 10px;
  font-size: .95rem;
}

.btn--primary {
  background: var(--primary);
  color: var(--fg);
  border-color: transparent;
}

:root[data-theme="light"] .btn--primary {
  color: var(--bg) !important;
}

.btn--accent {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: transparent;
}

.btn--accent:hover {
  background: var(--accent-hover) !important;
  color: var(--bg) !important;
  border-color: transparent;
}

.btn--danger {
  background: #ef4444;
  color: #ffffff;
  border-color: transparent;
}

.btn--warning {
  background: #ffd166 !important;
  color: #0b1220 !important;
  border-color: transparent;
}

.btn--back,
.btn--secondary {
  background: rgba(255, 255, 255, .08);
  color: var(--fg);
  border-color: var(--border);
}

:root[data-theme="light"] .btn--back,
:root[data-theme="light"] .btn--secondary {
  background: #e5e7eb;
  color: #111827;
  border-color: rgba(0, 0, 0, .10);
}

.btn--ghost {
  background: transparent;
}

.modal .btn--success,
.btn--success {
  background: #34d399 !important;
  color: #ffffff !important;
  border-color: transparent;
}

body.theme-c .btn--primary {
  color: #ffffff;
}

/* --- Toast notifications --- */
.toast-container {
  position: fixed;
  z-index: 3000;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: min(420px, 90vw);
  position: relative;
}

/* Stronger, theme-aware tinting */
.toast--success {
  border-color: rgba(25, 211, 138, .45);
  background: linear-gradient(0deg, rgba(25, 211, 138, .14), rgba(25, 211, 138, .14)), var(--card);
  box-shadow: 0 10px 26px rgba(25, 211, 138, .18);
  border-left: 5px solid rgba(25, 211, 138, .9);
}

.toast--info {
  border-color: rgba(74, 198, 255, .50);
  background: linear-gradient(0deg, rgba(74, 198, 255, .15), rgba(74, 198, 255, .15)), var(--card);
  box-shadow: 0 10px 26px rgba(74, 198, 255, .18);
  border-left: 5px solid rgba(74, 198, 255, .95);
}

.toast--warning {
  border-color: rgba(255, 209, 102, .60);
  background: linear-gradient(0deg, rgba(255, 209, 102, .18), rgba(255, 209, 102, .18)), var(--card);
  box-shadow: 0 10px 26px rgba(255, 209, 102, .22);
  border-left: 5px solid rgba(255, 209, 102, 1);
}

.toast--danger,
.toast--error {
  border-color: rgba(255, 107, 107, .55);
  background: linear-gradient(0deg, rgba(255, 107, 107, .16), rgba(255, 107, 107, .16)), var(--card);
  box-shadow: 0 10px 26px rgba(255, 107, 107, .20);
  border-left: 5px solid rgba(255, 107, 107, 1);
}

.toast__title {
  font-weight: 800;
}

.toast__msg {
  opacity: .9;
}

.toast__close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

/* --- Confirm modal (centered overlay) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  width: min(520px, 96vw);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  /* anchor for absolute dropdowns */
  z-index: 1110;
  /* above backdrop content */
  overflow: visible;
  /* allow Select2 dropdown to escape */
}

.modal__header {
  padding: 14px 16px 8px;
}

.modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.modal__body {
  padding: 0 16px 8px;
  color: var(--fg);
}

.modal__actions {
  padding: 12px 16px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Scoped buttons (no global .btn impact) */
.modal .btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.modal .btn:hover {
  filter: brightness(1.05);
}

.modal .btn--danger {
  background: linear-gradient(0deg, rgba(255, 107, 107, .16), rgba(255, 107, 107, .16)), var(--card);
  border-color: rgba(255, 107, 107, .55);
}

.modal .btn--primary {
  background: var(--primary);
  color: #001a2a;
  border-color: transparent;
}

.modal .btn--ghost {
  background: transparent;
}

/* Tinted border like toasts */
.modal--success {
  border-left: 6px solid rgba(25, 211, 138, 1);
}

.modal--primary {
  border-left: 6px solid var(--primary);
}

.modal--info {
  border-left: 6px solid rgba(74, 198, 255, 1);
}

.modal--warning {
  border-left: 6px solid rgba(255, 209, 102, 1);
}

.modal--danger {
  border-left: 6px solid rgba(255, 107, 107, 1);
}

/* Inputs inside modals: larger and theme-aware */
.modal .input {
  display: block;
  width: 100%;
  max-width: 260px;
  background: var(--bg-alt);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1.05rem;
  font-weight: 700;
}

.modal .input[type="number"] {
  text-align: center;
}

/* Light themes: keep contrast pleasant */
body.theme-b .modal .input,
body.theme-c .modal .input {
  background: #f5f8ff;
  color: #0c1830;
  border-color: rgba(0, 0, 0, .1);
}

/* Stepper control (used in My Program for lectures) */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
}

.stepper__btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.stepper__btn:disabled {
  opacity: .5;
  cursor: default;
}

.stepper__val {
  min-width: 38px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
}

/* Light themes tweak */
body.theme-c .stepper {
  background: #f5f8ff;
  border-color: rgba(0, 0, 0, .1);
}

body.theme-c .stepper__btn {
  background: #ffffff;
  color: #0c1830;
  border-color: rgba(0, 0, 0, .08);
}

/* Better readability for active options (selected but not hovered) and highlight */
.select2-results__option[aria-selected="true"] {
  background: rgba(59, 130, 246, .22) !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted.select2-results__option--selectable {
  background: rgba(59, 130, 246, .33) !important;
}

/* Theme-specific text color for visibility */
html[data-theme="light"] .select2-results__option--highlighted[aria-selected],
html[data-theme="light"] .select2-results__option--highlighted.select2-results__option--selectable,
html[data-theme="light"] .select2-results__option[aria-selected="true"] {
  color: #111 !important;
}

/* Dark theme: slightly dim the backgrounds to avoid a bright block and ensure dark text is readable */
html:not([data-theme="light"]) .select2-results__option[aria-selected="true"] {
  background: rgba(59, 130, 246, .20) !important;
}

html:not([data-theme="light"]) .select2-results__option--highlighted[aria-selected],
html:not([data-theme="light"]) .select2-results__option--highlighted.select2-results__option--selectable {
  color: #e5e7eb;
  background: rgba(59, 130, 246, .32) !important;
}

html:not([data-theme="light"]) .select2-container--default .select2-results__option--selected[aria-selected="false"] {
  color: #0f172a;
}

/* Ensure Select2 dropdown within modal overlays everything */
.modal .select2-container--open .select2-dropdown {
  z-index: 2000 !important;
}

/* Modal-only alignment tweak: dropdown sits ~6px too far right; align to field */
.modal .select2-container .select2-dropdown {
  left: -6px !important;
}

/* --- Logo --- */
.logo {
  width: 290px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

/* --- Hero image --- */
.hero-image {
  width: 100%;
  max-width: 1100px;
  /* Maintain image ratio without leaving extra space */
  height: auto;
  aspect-ratio: 16 / 6;
  /* initial fallback; exact height set via JS after image load */
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  margin-bottom: 5rem;
  box-shadow: var(--shadow);
}

/* Hero slides – swipe (slide + fade) with parallax-friendly CSS vars */
.hero-image .hero-slide {
  --slide-x: 100%;
  --parallax-y: 0px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateX(var(--slide-x)) translateY(var(--parallax-y));
  transition: transform .7s ease, opacity .7s ease;
  pointer-events: none;
  /* purely decorative */
}

.hero-image .hero-slide.is-active {
  --slide-x: 0%;
  opacity: 1;
  z-index: 2;
}

.hero-image .hero-slide.is-exit-left {
  --slide-x: -100%;
  opacity: 0;
  z-index: 1;
}

/* Logo v navigaci - menší velikost */
.nav .logo {
  width: 145px;
  height: 30px;
  font-size: 8px;
}

/* Footer logo (visible on light theme) */
.logo--footer {
  width: 220px;
  height: 60px;
  margin: 6px 0 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .logo--footer {
    width: 180px;
    height: 50px;
  }
}

.img-fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Emoji v badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Font Awesome icons inline spacing within badges/text */
.badge i[class^="fa-"],
.badge i[class*=" fa-"] {
  margin-right: 6px;
}

i[class^="fa-"],
i[class*=" fa-"] {
  vertical-align: -.1em;
}

/* Speciální styling pro tombola badge */
.badge[style*="accent"] {
  font-weight: 700;
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 5px rgba(38, 217, 213, 0.3);
  }

  to {
    box-shadow: 0 0 15px rgba(38, 217, 213, 0.6);
  }
}

/* Responsivní CTA tlačítka v hero */
.hero .cta {
  min-width: 160px;
  text-align: center;
}

@media (max-width: 600px) {
  .logo-placeholder {
    width: 250px;
    height: 52px;
    font-size: 12px;
  }

  .nav .logo-placeholder {
    width: 120px;
    height: 25px;
    font-size: 7px;
  }

  .hero-image-placeholder {
    height: 250px;
    font-size: 14px;
  }

  .brand {
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
  }

  .hero .cta {
    width: 100%;
    max-width: 200px;
  }

  .grid-2 {
    gap: 16px;
  }

  .kpis {
    gap: 8px;
  }

  .kpi {
    min-width: 120px;
    padding: 12px;
  }
}

/* --- Partners: responsive link cards with hover --- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}

.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--fg);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.partner-card:hover {
  text-decoration: none;
}

.partner-card:hover,
.partner-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

.partner-card:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--primary) 35%, transparent);
  outline-offset: 2px;
}

.partner-card__logo {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* If you later place an <img> inside, fit it nicely */
.partner-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.partner-card__name {
  font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) {
  .partner-card {
    padding: 12px;
  }

  .partner-card__logo {
    height: 60px;
  }
}

/* Sticky CTA bar */
#sticky-cta {
  position: fixed;
  z-index: 70;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

#sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#sticky-cta .cta {
  margin-top: 0;
}

@media (max-width: 640px) {
  #sticky-cta {
    left: 10px;
    right: 10px;
    justify-content: center;
    border-radius: 14px;
  }
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {

  footer .kpi,
  #sticky-cta {
    transition: none !important;
  }
}

/* Full-width wrapper sections */
.section-wide {
  width: 100%;
  padding-top: 6px;
}

.section-wide--alt {
  background: var(--bg-alt2);
}