/* RapitwebGreen - mobile sign-in / sign-up (Login.cshtml, Register.cshtml). Tokens only.
   Load after base.css. Mobile first: one column, 16px inputs (no iOS zoom), 3rem touch targets. */
.rwa-page[v-cloak] { display: none; }
.rwa-page { max-inline-size: 28rem; margin-inline: auto; padding-block: 1rem 2rem; padding-inline: .75rem; }

/* ---- cards ---- */
.rwa-card { margin-block-end: 1rem; padding: 1.5rem 1.25rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.rwa-card--aside { padding-block: 1.25rem; box-shadow: var(--shadow-sm); }
.rwa-head { margin-block-end: 1.25rem; text-align: center; }
.rwa-title { margin: 0 0 .35rem; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.rwa-sub, .rwa-aside-text { margin: 0 0 1rem; font-size: .9375rem; color: var(--muted); }
.rwa-aside-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.rwa-lead { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.9; color: var(--text); }
.rwa-ltr { direction: ltr; unicode-bidi: isolate; font-weight: 700; }

/* ---- stepper (register) ---- */
.rwa-steps { display: flex; justify-content: center; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.rwa-steps li { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted); }
.rwa-steps li + li::before { content: ""; inline-size: 1rem; block-size: 1px; background: var(--gray); }
.rwa-steps li > span { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; background: var(--gray); border-radius: 50%; font-size: .75rem; font-weight: 700; color: var(--text); }
.rwa-steps li.is-active { font-weight: 700; color: var(--text); }
.rwa-steps li.is-active > span { background: var(--dark); color: var(--bg); }
.rwa-steps li.is-done > span { background: var(--main); color: var(--dark); }

/* ---- form ---- */
.rwa-form { display: grid; gap: 1rem; }
.rwa-grid { display: grid; gap: 1rem; }
@media (min-width: 480px) { .rwa-grid { grid-template-columns: 1fr 1fr; } }
.rwa-field { display: grid; gap: .35rem; }
.rwa-label { font-size: .875rem; font-weight: 600; color: var(--text); }
.rwa-input {
  inline-size: 100%;
  block-size: 3rem;
  padding-inline: .9rem;
  background: var(--bg);
  border: 1px solid var(--gray);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rwa-input[dir="ltr"] { text-align: end; }   /* right-aligned inside the RTL page */
.rwa-input::placeholder { color: var(--muted); opacity: .7; }
.rwa-input:focus { outline: 0; border-color: var(--main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 25%, transparent); }
.rwa-field.has-error .rwa-input { border-color: var(--danger); }
.rwa-field.has-error .rwa-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.rwa-input--code { letter-spacing: .5rem; text-align: center !important; font-size: 1.5rem; font-weight: 700; }
.rwa-input-wrap { position: relative; }
.rwa-input-wrap .rwa-input { padding-inline-end: 3rem; }
.rwa-eye {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 3rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  color: var(--muted);
}
.rwa-eye:hover, .rwa-eye:focus-visible { color: var(--text); }
.rwa-hint { margin: 0; font-size: .8125rem; color: var(--muted); }
.rwa-error { margin: 0; font-size: .8125rem; color: var(--danger); }
.rwa-row-end { display: flex; justify-content: flex-end; margin-block-start: -.25rem; font-size: .875rem; }
.rwa-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text); cursor: pointer; }
.rwa-check input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--main); }

/* ---- messages ---- */
.rwa-alert {
  margin-block-end: 1rem;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--danger) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--white));
  border-radius: var(--radius-md);
  font-size: .875rem;
  color: var(--danger);
}
.rwa-done { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.rwa-done-icon { font-size: 3rem; line-height: 1; color: var(--main); }

/* ---- buttons (own classes: the global a { color } rule never touches them) ---- */
.rwa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  inline-size: 100%;
  min-block-size: 3rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.rwa-btn:disabled { opacity: .6; cursor: default; }
.rwa-btn--primary { background: var(--dark); color: var(--gray) !important; }
.rwa-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--dark) 85%, var(--bg)); }
.rwa-btn--ghost { background: var(--white); border-color: var(--gray); color: var(--text) !important; }
.rwa-btn--ghost:hover { background: var(--gray); border-color: var(--muted); }
.rwa-btn--text { background: transparent; color: var(--muted) !important; min-block-size: 2.5rem; }
.rwa-btn--text:hover:not(:disabled) { color: var(--text) !important; }
.rwa-btn:focus-visible, .rwa-eye:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.rwa-actions { display: grid; gap: .5rem; margin-block-start: 1rem; }
.rwa-link { color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; }   /* beats the global a { color } rule */
.rwa-link:hover { color: var(--main) !important; }
.rwa-external:not(:empty) { margin-block-start: 1rem; }

/* ---- busy spinner ---- */
.rwa-spin { inline-size: 1.1rem; block-size: 1.1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: rwa-spin .7s linear infinite; }
@keyframes rwa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rwa-spin { animation-duration: 1.6s; } .rwa-input, .rwa-btn { transition: none; } }