/* FlatcastX 05.11.2026 - scoped lobby polish only. */
/* The dark appearance stylesheet overrides generic pagination hover with !important.
   Restrict this override to unselected links and leave current page styling intact. */
html[data-fx-site-theme="dark"] body .page .top-pagination a:hover,
html[data-fx-site-theme="dark"] body .page .top-pagination a:focus-visible {
  background: linear-gradient(180deg, #159de9 0%, #0066ba 100%) !important;
  color: #ffffff !important;
  border-color: #71d4ff !important;
  box-shadow: 0 0 0 2px rgba(44, 174, 241, .18), 0 4px 10px rgba(0, 0, 0, .25) !important;
  transform: translateY(-2px);
}
/* Add an independent visual caret without changing the native country selector or
   its onchange form submit behavior. */
main.content > .section-bar.fx-country-v64-bar > form.fx-country-filter {
  position: relative !important;
}
main.content > .section-bar.fx-country-v64-bar > form.fx-country-filter::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #07518c;
  border-bottom: 2px solid #07518c;
  transform: translateY(-68%) rotate(45deg);
}
html[data-fx-site-theme="dark"] main.content > .section-bar.fx-country-v64-bar > form.fx-country-filter::after {
  border-color: #d6ebff;
}

/* v1.1: current page number stays highlighted in dark mode, just as in light mode.
   This span is server-rendered with .active; it is not a navigation link. */
html[data-fx-site-theme="dark"] body .page .top-pagination span.active {
  background: linear-gradient(180deg, #ffdb23 0%, #ffbe00 100%) !important;
  color: #004486 !important;
  border-color: #e0aa00 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.16) !important;
}

/* V1.2: selected pagination item must override the generic dark-mode !important styles. */
html[data-fx-site-theme="dark"] body .page main.content .section-bar .top-pagination > span.active,
html[data-fx-site-theme="dark"] body .page main.content .section-bar .top-pagination > .active,
html[data-fx-site-theme="dark"] body .page main.content .section-bar .top-pagination > [aria-current="page"] {
  background: linear-gradient(180deg, #ffdf37 0%, #ffbf00 100%) !important;
  background-color: #ffcc00 !important;
  color: #004486 !important;
  border: 1px solid #e0a900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.18) !important;
}

/* V1.3 - Bottom pagination: selected page remains yellow in dark appearance only.
   Do not alter light appearance, filters, links or paging logic. */
html[data-fx-site-theme="dark"] body .page main.content .pagination > span.active,
html[data-fx-site-theme="dark"] body .page main.content .pagination > [aria-current="page"] {
  background: linear-gradient(180deg,#ffdf37 0%,#ffbf00 100%) !important;
  background-color: #ffcc00 !important;
  color: #004486 !important;
  border: 1px solid #e0a900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.18) !important;
}
html[data-fx-site-theme="dark"] body .page main.content .pagination > a:hover,
html[data-fx-site-theme="dark"] body .page main.content .pagination > a:focus-visible {
  background: linear-gradient(180deg,#159de9 0%,#0066ba 100%) !important;
  color: #fff !important;
  border-color: #71d4ff !important;
  box-shadow: 0 0 0 2px rgba(44,174,241,.18),0 4px 10px rgba(0,0,0,.25) !important;
  transform: translateY(-2px);
}


/* V1.4 — Bottom pagination visual response for clickable page links.
   Keep selected page yellow; apply hover to links in both themes. */
body .page main.content .pagination a:not(.active):not([aria-current="page"]):hover,
body .page main.content .pagination a:not(.active):not([aria-current="page"]):focus-visible {
  background: linear-gradient(145deg, #19a9f7 0%, #0068bd 100%) !important;
  border-color: #6fd1ff !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(32,166,244,.16), 0 5px 13px rgba(0,82,158,.33) !important;
  transform: translateY(-2px) scale(1.04);
  text-decoration: none !important;
  outline: none;
}
body .page main.content .pagination a:not(.active):not([aria-current="page"]):active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 6px rgba(0,82,158,.2) !important;
}
body .page main.content .pagination a {
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html[data-fx-site-theme="dark"] body .page main.content .pagination > .active,
html[data-fx-site-theme="dark"] body .page main.content .pagination > [aria-current="page"] {
  background: linear-gradient(180deg, #ffdf37 0%, #ffbf00 100%) !important;
  border-color: #e0a900 !important;
  color: #004486 !important;
}
@media (prefers-reduced-motion: reduce) {
  body .page main.content .pagination a { transition: none !important; }
  body .page main.content .pagination a:hover,
  body .page main.content .pagination a:focus-visible { transform: none !important; }
}