/*
  Unified buttons on the test site, 26.10.2026.
  Any link with class "uoc-btn": translucent dark box (the page shows through), thin light-yellow outline,
  yellow uppercase label in regular weight, thin yellow ↗ on the right.
  Hover/focus: solid yellow, dark bold label, slightly larger; uoc_creative.js scrambles the label.
  Extra lines inside a button (class "uoc-btn-extra") stay hidden until hover; on touch screens they are always shown.
  The file loads after page styles; the doubled class and !important on colours keep these rules above
  page-specific ones (contacts/rules styles set their own colours with !important).
  "uoc-btn--link" = former plain text links that had no box of their own.
*/
html body.site-test .uoc-btn.uoc-btn {
  --ub-yellow: #f5d548;
  --ub-ink: #0c0b0e;
  position: relative;
  padding-right: 2.8em;
  color: var(--ub-yellow) !important;
  background: rgba(10, 10, 12, .42) !important;
  border: 1px solid rgba(248, 230, 150, .6) !important;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
html body.site-test .uoc-btn.uoc-btn * { color: inherit !important; background: transparent !important; font-weight: inherit; }
html body.site-test .uoc-btn.uoc-btn::before { content: none; }
html body.site-test .uoc-btn.uoc-btn::after {
  content: "↗";
  position: absolute;
  inset: 50% 1em auto auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: max(1.3em, 17px);
  font-weight: 400;
  line-height: 1;
  opacity: 1;
}

html body.site-test .uoc-btn.uoc-btn:hover,
html body.site-test .uoc-btn.uoc-btn:focus-visible {
  z-index: 2;
  color: var(--ub-ink) !important;
  background: var(--ub-yellow) !important;
  border-color: var(--ub-yellow) !important;
  box-shadow: none;
  font-weight: 800;
  transform: scale(1.04);
}
html body.site-test .uoc-btn.uoc-btn:focus-visible { outline: 2px solid var(--ub-yellow); outline-offset: 3px; }

/* Extra info lines: regular weight, shown on hover only. */
html body.site-test .uoc-btn.uoc-btn .uoc-btn-extra { font-weight: 400; opacity: 0; transition: opacity .2s ease; }
html body.site-test .uoc-btn.uoc-btn:is(:hover, :focus-visible) .uoc-btn-extra { opacity: 1; }
@media (hover: none) {
  html body.site-test .uoc-btn.uoc-btn .uoc-btn-extra { opacity: 1; }
}

/* Former text links: give them a button box. */
html body.site-test .uoc-btn.uoc-btn--link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 2.8em 12px 18px;
  font-size: .82rem;
  line-height: 1.2;
}

/* On light (paper) sections a translucent box turns grey — use a solid dark box there. */
html body.site-test :is(.cnt-card-btn, .nom-rules-link, .nom-mk-layout a, .offer-btn, .offer-link, .program-inline-link).uoc-btn.uoc-btn:not(:hover):not(:focus-visible) {
  background: #121115 !important;
}

/* Day navs sat on their own dark blurred strip; drop it so the picture shows through the buttons. */
html body.site-test :is(.program-day-nav, .timing-day-nav) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Prizes jump nav: its old arrow span used to sit last; keep the number and title together. */
html body.site-test .prz-jump .uoc-btn.uoc-btn span:last-child { margin-left: 0; }

/* Day lists stack on phones: the new outline needs inner left padding. */
@media (max-width: 760px) {
  html body.site-test :is(.timing-day-nav, .program-day-nav) .uoc-btn.uoc-btn { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html body.site-test .uoc-btn.uoc-btn, html body.site-test .uoc-btn.uoc-btn .uoc-btn-extra { transition: none; }
  html body.site-test .uoc-btn.uoc-btn:hover, html body.site-test .uoc-btn.uoc-btn:focus-visible { transform: none; }
}