/* Shared account UI: the header chip, waitlist button states and the toast.
   Each site can tint it through --xv-* (defaults are the Xeravon / Jarvis cyan). */

.xv-acct {
  --a: var(--xv-accent, #22D3EE);
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 34px; padding: 0 14px 0 5px;
  border: 1px solid var(--xv-line, rgba(34, 211, 238, .28)); border-radius: 999px;
  background: var(--xv-panel, #0B1A2B); color: var(--xv-fg, #EAF6FF);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .2s;
}
.xv-acct:hover { border-color: var(--a); }
.xv-acct-ic, .xv-acct-av { flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.xv-acct-ic { display: grid; color: var(--a); background: color-mix(in srgb, var(--a) 15%, transparent); }
.xv-acct-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xv-acct-av { display: none; background: var(--a); color: var(--xv-on-accent, #04131C); font-size: 12px; font-weight: 700; }
.xv-acct.is-in .xv-acct-ic { display: none; }
.xv-acct.is-in .xv-acct-av { display: grid; }
@media (max-width: 560px) {
  .xv-acct { width: 34px; padding: 0; justify-content: center; }
  .xv-acct-tx { display: none; }
}

[data-xv-wait].is-busy { opacity: .7; pointer-events: none; }

/* "Free" tag next to a waitlist button */
.xv-free {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--xv-accent, #22D3EE) 55%, transparent);
  background: color-mix(in srgb, var(--xv-accent, #22D3EE) 12%, transparent);
  color: var(--xv-accent, #22D3EE); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
html[lang="ar"] .xv-free { letter-spacing: 0; font-size: 13px; }

.xv-toast {
  position: fixed; z-index: 300; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  width: max-content; max-width: min(calc(100vw - 32px), 460px);
  padding: 12px 18px; border-radius: 12px; text-align: center;
  background: var(--xv-panel, #0B1A2B); color: var(--xv-fg, #EAF6FF);
  border: 1px solid var(--xv-accent, #22D3EE); box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
  font-size: 15px; line-height: 1.5;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.xv-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .xv-toast { transition: none; } }