/* SwiftSub — bespoke styles layered on Tailwind. */

:root {
  --ss-brand: #142464;
  --ss-accent: #1fa55a;
}

html { scroll-behavior: smooth; }

body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Slim scrollbars */
.ss-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ss-scroll::-webkit-scrollbar-thumb { background: rgb(148 163 184 / .5); border-radius: 999px; }
.ss-scroll::-webkit-scrollbar-track { background: transparent; }

/* PIN boxes */
.ss-pin-box {
  width: 3rem; height: 3.5rem;
  text-align: center; font-size: 1.375rem; font-weight: 700;
  border-radius: 0.875rem;
  border: 1.5px solid rgb(203 213 225);
  background: rgb(255 255 255);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-pin-box:focus {
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 4px rgb(31 165 90 / .15);
}
.dark .ss-pin-box { background: rgb(15 23 42); border-color: rgb(51 65 85); }

/* Service tile press feedback */
.ss-tile { transition: transform .12s ease, box-shadow .12s ease; }
.ss-tile:active { transform: scale(.96); }

/* Progress shimmer for the usage meter */
.ss-meter-fill {
  background-image: linear-gradient(90deg, #1fa55a, #34c373, #1fa55a);
  background-size: 200% 100%;
  animation: ss-shimmer 2.4s linear infinite;
}
@keyframes ss-shimmer { 0% { background-position: 0% 0 } 100% { background-position: -200% 0 } }

/* Hide number input spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Balance tabular figures */
.ss-num { font-variant-numeric: tabular-nums; }