/* Styles for the WhatsApp sign-in widget. Change the variables to match your brand. */
.wa-signin {
  --wa-ink: #1b1b1f; --wa-ink-soft: #55555f; --wa-line: #dcdce3; --wa-accent: #1f6feb;
  --wa-green: #1f9d55; --wa-danger: #c62828; --wa-bg: #fff;
  display: grid; justify-items: center; gap: 14px; text-align: center; font-family: system-ui, sans-serif; color: var(--wa-ink);
}
.wa-signin [hidden] { display: none !important; }
.wa-step { display: grid; justify-items: center; gap: 12px; }
.wa-step.confirming > :not(.wa-confirm) { display: none; }
.wa-alert { padding: 10px 14px; border-radius: 10px; background: #fdecea; color: var(--wa-danger); font-weight: 600; }

.wa-qr-box { position: relative; width: min(264px, 72vw); aspect-ratio: 1; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--wa-line); box-sizing: border-box; }
.wa-qr, .wa-qr svg { display: block; width: 100%; height: 100%; }
.wa-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 22%; aspect-ratio: 1; border-radius: 14px; background: #fff; }
.wa-logo img { width: 82%; height: 82%; object-fit: contain; }

.wa-open { font-size: 14.5px; font-weight: 600; color: var(--wa-accent); }
.wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(340px, 86vw); min-height: 58px; padding: 0 22px; border-radius: 999px; background: var(--wa-green); color: #fff; font-size: 18px; font-weight: 800; }
.wa-btn svg { width: 26px; height: 26px; }
.wa-how { font-size: 17px; font-weight: 700; max-width: 34ch; margin: 0; }
.for-touch { display: none; }
.touch .for-touch { display: inline-flex; }
.touch .wa-how .for-touch { display: inline; }
.touch .for-desk, .touch .wa-qr-box { display: none; }
.touch .wa-open { text-decoration: none; }

.wa-codeline { color: var(--wa-ink-soft); font-size: 15px; margin: 0; }
.wa-code { font-size: 20px; letter-spacing: 0.16em; color: var(--wa-ink); font-variant-numeric: tabular-nums; }
.wa-waiting { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--wa-ink-soft); margin: 0; }
.wa-spinner { width: 18px; height: 18px; border: 3px solid var(--wa-line); border-top-color: var(--wa-accent); border-radius: 50%; animation: wa-spin 0.8s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wa-spinner { animation: none; } }

.wa-confirm { display: grid; gap: 12px; justify-items: center; width: min(340px, 86vw); }
.wa-confirm label { font-weight: 700; font-size: 17px; }
.wa-confirm-code { width: 100%; min-height: 58px; box-sizing: border-box; text-align: center; font: inherit; font-size: 28px; font-weight: 800; letter-spacing: 0.3em; border: 2px solid var(--wa-line); border-radius: 12px; }
.wa-confirm-code:focus-visible { outline: 0; border-color: var(--wa-ink); }
.wa-confirm-msg { min-height: 1.2em; margin: 0; font-weight: 600; color: var(--wa-danger); }
.wa-confirm small { color: var(--wa-ink-soft); font-size: 13px; }
.wa-primary { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--wa-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wa-new { width: auto; padding: 0 22px; }
.wa-primary:focus-visible, .wa-open:focus-visible { outline: 3px solid var(--wa-accent); outline-offset: 2px; }