html {
  height: 100%;
}

body.pb-preloader .pb-footer {
  display: none !important;
}

body.pb-has-footer {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100dvh;
}

body.pb-has-footer #root {
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
}

body.pb-has-banner.pb-has-footer #root {
  flex: 1 1 auto;
}

#root header > div.h-full {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
  padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
}

#root header > div.h-full > div.min-w-0:first-child {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

#root header .pb-header-actions,
#root header .flex.items-center.gap-2.md\:gap-4.flex-shrink-0 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 10px);
  margin-left: auto;
}

#root header button[aria-label="Menu"] {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #root header > div.h-full > .flex-1 {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #root header .pb-header-actions,
  #root header .flex.items-center.gap-2.md\:gap-4.flex-shrink-0 {
    flex-shrink: 0;
    max-width: min(52vw, 12.5rem);
  }

  #root header a[href="/"] span.truncate {
    max-width: clamp(48px, 18vw, 100px);
  }

  #root header button[aria-label="Search"],
  #root header button[aria-label="Close search"] {
    flex-shrink: 0;
    padding: 0.5rem !important;
  }

  .pb-parabet-btn {
    padding: 6px clamp(6px, 2vw, 10px);
    margin-right: 0;
    font-size: clamp(0.65rem, 2.4vw, 0.75rem);
    max-width: clamp(4.5rem, 22vw, 5.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  #root header a[href="/"] img {
    max-width: 72px !important;
  }

  #root header a[href="/"] span.font-black {
    font-size: 0.9rem !important;
  }

  #root header a[href="/"] span.truncate {
    display: none;
  }
}

@media (min-width: 768px) {
  #root header .pb-header-actions,
  #root header .flex.items-center.gap-2.md\:gap-4.flex-shrink-0 {
    max-width: none;
  }
}

.pb-parabet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: clamp(6px, 2vw, 10px);
  padding: clamp(6px, 1.8vw, 8px) clamp(10px, 2.8vw, 14px);
  border-radius: 999px;
  background: linear-gradient(160deg, #ffb700 0%, #dea90a 100%);
  color: #2f0742;
  font:
    700 clamp(0.72rem, 2.6vw, 0.8125rem) / 1.2 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 183, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.pb-parabet-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 183, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

.pb-footer {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  z-index: 1;
  background: linear-gradient(180deg, #2f0742 0%, #1a0224 100%);
  color: #e8dce9;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 32px) clamp(14px, 4vw, 24px) clamp(24px, 6vw, 40px);
}

.pb-footer .tl_col-4 {
  margin-bottom: clamp(16px, 4vw, 24px);
}

.pb-footer .footer_social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pb-footer .footer_social-list.d-flex.gx-2 {
  gap: 8px;
}

.pb-footer .footer_social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.pb-footer .footer_social-list a:hover {
  opacity: 0.85;
}

.pb-footer .footer_social-list img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: 44px;
  object-fit: contain;
}

.pb-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-footer-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.7rem;
  font-weight: 800;
  color: #f0d78a;
}

.pb-footer-bottom p {
  margin: 0;
  font-size: clamp(0.7rem, 2.4vw, 0.78rem);
  color: rgba(232, 220, 233, 0.7);
}

button.sidebar-sport-btn.group {
  gap: 6px;
}

button.sidebar-league-btn.group {
  color: #fff !important;
}

span.flex-1.text-sm.font-medium.truncate.text-left {
  color: #fff !important;
}

span.shrink-0.text-xs.font-medium.px-2.py-0\.5.rounded-full {
  background-color: #250632 !important;
}

#root h3 {
  color: #fff !important;
}

#root .relative.flex-1.rounded-full.bg-border {
  background-color: #6d0993 !important;
}

#root header .hidden.md\:flex.items-center.gap-3.px-4.py-2\.5.rounded-xl,
#root header .flex-1.flex.items-center.gap-2\.5.px-3\.5.py-2\.5.rounded-xl {
  background-color: #3d0952 !important;
}

#root header input[type="text"],
#root header input[type="search"],
#root input[style*="rgba(255, 255, 255, 0.12)"] {
  background-color: transparent !important;
}

#root h3.text-\[11px\].font-semibold.text-muted-foreground.uppercase.tracking-wide.group-hover\:text-foreground.transition-colors.duration-150 {
  text-align: left !important;
}

#root button.group.inline-flex.items-center.gap-2\.5.px-4.py-2\.5.rounded-xl.bg-card\/80.backdrop-blur-sm.border.border-border\/50.text-sm.font-medium.text-muted-foreground.hover\:text-foreground.hover\:bg-card.hover\:border-border.hover\:shadow-lg.transition-all.duration-200.press-effect.opacity-0.animate-fade-in {
  width: 100% !important;
  background: border-box !important;
}

#root div.inline-flex.items-center.gap-2.px-3.py-1\.5.rounded-lg.bg-muted.opacity-0.animate-fade-in {
  background: #2f0742 !important;
}

.pb-footer-container {
  max-width: 100%;
}

.pb-footer .footer_social-list.d-flex.gx-2 {
  justify-content: flex-start !important;
}

.pb-footer-bottom {
  justify-content: flex-start !important;
}

@media (min-width: 1024px) {
  .pb-footer-container {
    text-align: left;
  }
}

#root button.sidebar-sport-btn.group,
#root button.sidebar-league-btn.group,
#root button.sidebar-sport-btn.group *,
#root button.sidebar-league-btn.group * {
  opacity: 1 !important;
}

#root button.sidebar-sport-btn.group [class*="text-muted-foreground"],
#root button.sidebar-league-btn.group [class*="text-muted-foreground"] {
  color: #fff !important;
}

#root button.sidebar-sport-btn.group span,
#root button.sidebar-league-btn.group span {
  color: #fff !important;
}

#root button.sidebar-league-btn.group > span.flex-1.text-sm.text-muted-foreground,
#root button.sidebar-league-btn.group > span.flex-1.text-sm.text-muted-foreground.group-hover\:text-foreground.truncate.text-left,
#root button.sidebar-league-btn.group > span.text-xs.text-muted-foreground\/60,
#root button.sidebar-league-btn.group > span.text-xs.tabular-nums {
  color: #fff !important;
}

#root div.flex.items-center.gap-3.py-2 h2.flex-1,
#root div.flex.items-center.gap-3.md\:gap-5.py-2 h2.flex-1,
#root h2.flex-1.text-right.text-lg.font-bold.text-foreground,
#root h2.flex-1.text-left.text-lg.font-bold.text-foreground,
#root h2.flex-1.text-right.text-lg.md\:text-2xl.font-bold.text-foreground,
#root h2.flex-1.text-left.text-lg.md\:text-2xl.font-bold.text-foreground {
  font-size: 1rem !important;
  line-height: 1.3rem !important;
}

#root div.flex.items-center.gap-3.py-2 > span,
#root div.flex.items-center.gap-3.md\:gap-5.py-2 > span {
  font-size: 1rem !important;
  line-height: 1.3rem !important;
}

.w-100 {
  width: 100% !important;
}

@media (max-width: 767px) {
  #root {
    --muted-foreground: 0 0% 100%;
  }

  #root .fixed.inset-y-0.left-0.h-full.border-r:has(button.sidebar-sport-btn),
  #root .w-100.p-0.bg-background {
    width: 100% !important;
    max-width: 100% !important;
  }

  #root button.sidebar-league-btn.group span.text-muted-foreground,
  #root button.sidebar-league-btn.group .text-muted-foreground,
  #root button.sidebar-league-btn.group span.text-muted-foreground\/60,
  #root button.sidebar-league-btn.group > span.text-xs.tabular-nums {
    color: #fff !important;
  }
}
