/* Loading UI. Teal brand; #17BD54 for ticks only. */
:root {
  --ts-teal: #0d9488;
  --ts-teal-soft: #ccfbf1;
  --ts-muted: #6b7280;
  --ts-tick: #17BD54;
  --ts-spin: #0d9488;
}

@media (prefers-reduced-motion: reduce) {
  .ts-spin, .ts-shimmer, .ts-btn-loading .ts-spin {
    animation: none !important;
  }
}

.ts-spin {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--ts-teal-soft);
  border-top-color: var(--ts-spin);
  border-radius: 50%;
  animation: ts-rotate .7s linear infinite;
  vertical-align: -0.15em;
}
@keyframes ts-rotate { to { transform: rotate(360deg); } }

.ts-btn-loading {
  pointer-events: none;
  opacity: .85;
  position: relative;
}
.ts-btn-loading .ts-spin { margin-right: .4em; }

/* Domain search skeleton. */
.ts-skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f5 25%, #e2e8f0 37%, #eef2f5 63%);
  background-size: 400% 100%;
  animation: ts-shimmer 1.2s ease-in-out infinite;
}
.ts-skeleton-row { margin: 10px 0; }
.ts-skeleton.lg { height: 44px; }
@keyframes ts-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Pay-success ring loader (mobile first). */
.ts-paydone { text-align: center; padding: 8px 0 24px; }
.ts-paydone-title { font-size: 22px; line-height: 1.3; font-weight: 700; color: #111827; margin: 0 0 8px; }
.ts-paydone-sub { color: var(--ts-muted); font-size: 15px; margin: 0 0 28px; }
.ts-paydone-domain { font-size: 20px; color: #111827; margin: 0 0 4px; word-break: break-all; }
.ts-ring { position: relative; width: 168px; height: 168px; margin: 0 auto; }
.ts-ring-svg, .ts-ring-tick { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-ring-svg { animation: ts-rotate 14s linear infinite; will-change: transform; } /* slow, subtle turn */
.ts-ring-track { fill: none; stroke: #e5e7eb; stroke-width: 9; }
.ts-ring-bar {
  fill: none; stroke: var(--ts-teal); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transform: rotate(-90deg); transform-origin: 60px 60px;
}
.ts-ring-tick { opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s ease; }
.ts-ring-tick path { fill: none; stroke: var(--ts-tick); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ts-ring.is-done .ts-ring-svg { animation: none; }
.ts-ring.is-done .ts-ring-bar { stroke: #e5e7eb; }
.ts-ring.is-done .ts-ring-tick { opacity: 1; transform: scale(1); }
.ts-ring.is-stuck .ts-ring-svg { animation: none; }
.ts-ring-pct { font-size: 28px; font-weight: 700; color: #111827; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.ts-paydone-note { color: #374151; font-size: 15px; max-width: 420px; margin: 12px auto 0; }
.ts-paydone-btns { display: flex; flex-direction: column; gap: 10px; margin: 22px auto 0; max-width: 320px; }
.ts-paydone-btns .btn, .ts-paydone-btns .tg-btn { width: 100%; justify-content: center; }
@media (min-width: 576px) {
  .ts-paydone-title { font-size: 26px; }
  .ts-paydone-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; }
  .ts-paydone-btns .btn, .ts-paydone-btns .tg-btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-ring-svg { animation: none !important; }
  .ts-ring-tick { transition: none; }
}

/* Google redirect overlay. */
.ts-oauth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255,255,255,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  font-family: system-ui, sans-serif;
  color: #111;
}
.ts-oauth-overlay .ts-spin { width: 28px; height: 28px; border-width: 3px; }

/* Invoice PDF preparing chip. */
.ts-pdf-prep {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: #f3f4f6; color: #374151; font-size: 14px;
}

.ts-svc-logins { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.ts-pdf-prep .ts-spin { margin-right:6px; }

/* Fallback link under the tick. */
.ts-paydone-go { margin: 18px 0 0; font-size: 14px; }

/* Google sign-in message and error state. */
.ts-oauth-msg { margin: 10px auto 0; max-width: 320px; text-align: center; font-size: 14px; color: #b91c1c; }
.ts-oauth-overlay .ts-oauth-text { max-width: 300px; padding: 0 16px; text-align: center; font-size: 15px; }
.ts-oauth-overlay.is-error .ts-oauth-text { color: #b91c1c; }
.ts-oauth-overlay .ts-oauth-retry { min-width: 160px; }