/* Základní tmavé pozadí pro celou stránku */
html,
body {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
}

/* Karty her stejně vysoké, tlačítka dole */
.card.card-game {
  height: 100%;
}

/* Widget styling - fix white lines */
.sccz-widget {
  background-color: var(--brand-surface) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.sccz-widget iframe {
  background-color: var(--brand-surface) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Widget container styling */
#widget-section .col-12 {
  padding: 0 !important;
  margin: 0 !important;
}

#widget-section .row {
  margin: 0 !important;
}

/* Hero (statické pozadí) */
.hero {
  position: relative;
  min-height: 80vh;
  color: var(--bs-body-color);
  padding: 6rem 0;
  background-color: var(--brand-bg) !important;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* VÝCHOZÍ TMAVÉ POZADÍ PRO KAŽDOU SEKCI */
.section-pad {
  padding: 4.5rem 0;
  background-color: var(--brand-surface);
}

/* Pomocné utility (zůstávají) */
.bg-surface {
  background-color: var(--brand-surface) !important;
}
.bg-subtle {
  background-color: var(--brand-subtle) !important;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* Dropdown menu styly */
.dropdown-menu {
  background-color: var(--brand-surface) !important;
}

.dropdown-item {
  color: var(--brand-text) !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--brand-subtle) !important;
  color: var(--brand-text) !important;
}

.dropdown-item:active {
  background-color: var(--brand-primary-500) !important;
  color: var(--btn-primary-text) !important;
}

/* Utility třídy pro barvy*/
.text-colorful {
  color: var(--text-accent);
}

.bg-colorful {
  background-color: var(--text-accent);
}

.border-colorful {
  border-color: var(--text-accent) !important;
}

/* CTA –  */
.btn-cta {
  --btn-bg: var(--brand-primary-500);
  --btn-bg-hover: var(--brand-primary-600);
  --btn-bg-active: var(--brand-primary-700);
  --btn-text: var(--btn-primary-text);
  color: var(--btn-text);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  box-shadow: none;
}
.btn-cta:hover {
  color: var(--btn-text);
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
}
.btn-cta:active {
  background-color: var(--btn-bg-active);
  border-color: var(--btn-bg-active);
}

/* Tmavé outline tlačítko */
.btn-outline-secondary {
  --bs-btn-color: var(--brand-text);
  --bs-btn-border-color: var(--brand-muted);
  --bs-btn-hover-bg: var(--brand-surface);
  --bs-btn-hover-border-color: var(--brand-text);
  --bs-btn-active-bg: var(--brand-surface);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
}

/* Tlačítka "Více info" - stejný styl jako CTA */
.btn-outline-light {
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
}

/* Kontaktní tlačítka - stejná velikost */
.btn-cta,
.btn-outline-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Základní odkazy*/
a,
.nav-link,
.navbar-brand {
  color: var(--brand-text);
}
a:hover,
.nav-link:hover,
.navbar-brand:hover {
  color: var(--brand-text);
}

/* Jednoduché CSS třídy pro barvy - místo inline stylů */
.text-brand {
  color: var(--brand-text) !important;
}

.bg-brand {
  background-color: var(--brand-bg) !important;
}

.bg-surface {
  background-color: var(--brand-surface) !important;
}

.bg-subtle {
  background-color: var(--brand-subtle) !important;
}

/* Hero carousel - fix white lines */
.carousel {
  background-color: var(--brand-bg) !important;
}

.carousel-inner {
  background-color: var(--brand-bg) !important;
}

.carousel-item {
  background-color: var(--brand-bg) !important;
}

.carousel-item > div {
  background-color: var(--brand-bg) !important;
}

/* Fix pro bílé pozadí při přepínání */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  background-color: var(--brand-bg) !important;
}

.carousel-fade .carousel-item {
  background-color: var(--brand-bg) !important;
}

/* Žluté dekorativní čáry */
.brand-line {
  width: 100px;
  height: 4px;
  background-color: #f5e021;
}

.brand-line-vertical {
  width: 4px;
  height: 30px;
  background-color: #f5e021;
}

.brand-line-vertical-lg {
  width: 4px;
  height: 40px;
  background-color: #f5e021;
}