/* Special-day theme button (next to the Menu button in header.mobile).
   Only loaded when a Site:SpecialDays theme has Auto = false and is active today (see _Head.cshtml / _MobileHeader.cshtml).
   It is a round, icon-only button. It carries its own colours (--x99-c1 / --x99-c2, from appsettings "Colors"), so it looks like the theme
   even while the theme itself is switched off. */
.x99-theme-btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 46px;
  padding: 0;
  margin-inline-end: 10px;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(100deg, var(--x99-c1, #024187), var(--x99-c2, #024187));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.x99-theme-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.x99-theme-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--x99-c1, #024187); }

/* off: slightly muted; on: glowing ring */
.x99-theme-btn[aria-pressed="false"] { filter: saturate(.75); }
.x99-theme-btn[aria-pressed="false"]:hover { filter: saturate(1) brightness(1.05); }
.x99-theme-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 18px var(--x99-c1, #024187); }

/* phones: same 46px round size as the compact Menu button, a little less spacing */
@media (max-width: 640px) {
  .x99-theme-btn { margin-inline-end: 8px; }
}

/* icon: colour(s) from appsettings "IconColors" (one = plain, two = gradient), combined with the circle colours */
.x99-theme-btn i {
  background: linear-gradient(135deg, var(--x99-i1, #fff), var(--x99-i2, var(--x99-i1, #fff)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}