/* UKPayday — the small amount of CSS the prerendered pages need on top of
   their own inline styles. Layout and colour live in the page markup. */

/* Cookie settings modal: two buttons side by side above the mid breakpoint. */
@media (min-width: 700px) {
  .ukp-modal-btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
  .ukp-modal-btns { grid-template-columns: minmax(0, 1fr); }
}

@keyframes ukpWordIn {
  from { opacity: 0; transform: translateY(0.32em); }
  to   { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 3px solid #95FF2A;
  outline-offset: 2px;
}

/* "Check my eligibility" CTAs, inverted: they sit ink with lime text and flip
   to lime with ink text on hover (the reverse of the other lime buttons).
   !important overrides the inline rest style and the shared scp* hover rules. */
.ukp-cta-invert {
  background: #0B0F0A !important;
  color: #95FF2A !important;
}
.ukp-cta-invert:hover {
  background: #95FF2A !important;
  color: #0B0F0A !important;
  transform: translateY(-1px) !important;
}
.ukp-cta-invert:active {
  background: #7BE01F !important;
  color: #0B0F0A !important;
  transform: translateY(1px) !important;
}
.ukp-cta-invert svg { color: currentColor !important; }

/* Stop mobile double-tap from zooming the page (and remove the 300ms tap delay),
   while keeping pinch-to-zoom and scrolling. Range sliders keep their native
   touch handling so dragging the amount selector still works. */
*:not(input[type="range"]) {
  touch-action: manipulation;
}

/* Amount slider. It is an invisible range input over a styled track/handle. With
   no thumb defined its hit area is tiny, so drags — especially on mobile — get
   read as a page scroll and it feels stuck. Give the thumb a large grab area and
   let the element own horizontal drags (pan-y still allows vertical page scroll),
   so it moves easily and taps on the track jump straight to that amount. */
input[type="range"] {
  touch-action: pan-y;
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
}
input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
input[type="range"]::-moz-range-track { background: transparent; }

/* Risk warning bar: tighten padding and size on mobile so the prescribed
   wording fits two lines instead of three. */
@media (max-width: 699px) {
  .ukp-warn {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ukp-warn-text {
    font: 500 10px / 14px Archivo, sans-serif !important;
    letter-spacing: -0.01em !important;
  }
}

/* Cookie consent: when JS is on, the blocking modal (built in site.js) replaces
   the static bottom banner, so hide the banner before first paint — no flash,
   no duplicate. With JS off, the banner stays as the fallback. */
html.ukp-js .ukp-cookie-banner { display: none; }

/* Consent modal — centred card with a backdrop on desktop, full-screen on
   mobile so it commands attention and must be dismissed with a choice. */
.ukp-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Generous padding so the dimmed site shows around the card on every screen,
     making it clear this is an overlay to get past before using the site. */
  padding: clamp(20px, 6vw, 32px);
  background: rgba(11, 15, 10, 0.55);
}
.ukp-consent-card {
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  border: 2px solid #0B0F0A;
  border-radius: 14px;
  overflow-y: auto;
  max-height: 88vh;
}

/* Brief green loading wheel shown when an eligibility CTA is clicked. */
html.ukp-splash-open { overflow: hidden; }
.ukp-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B0F0A;
  animation: ukpSplashIn 120ms ease both;
}
.ukp-splash-spin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(149, 255, 42, 0.25);
  border-top-color: #95FF2A;
  animation: ukpSpin 0.7s linear infinite;
}
@keyframes ukpSplashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ukpSpin { to { transform: rotate(360deg); } }