/* =========================================================
   Welcome & Validate pages — page-specific layout only.

   Buttons and the back link reuse payment_summary.css's .confirm-btn /
   .back-link (both pages load that file too, same as PaymentResult.cshtml
   already does for its own "Volver a Facturas" button), and colors/fonts
   reuse invoice_list.css's :root design tokens — nothing is redefined
   here.
   ========================================================= */

/* ---------- Language switcher (Welcome page only) ----------
   .lang-switcher itself (invoice_list.css) is shared with
   ChoosePayInvoices.cshtml, where it's right-aligned above the logo in a
   header row — left untouched there. This page has no header row; the
   switcher sits centered under the logo instead, so only re-point its
   layout (alignment/spacing), not the button styling (.lang-link/.lang-sep
   colors, weight, hover/aria-current state) that invoice_list.css already
   provides and this still relies on. */
.lang-switcher-welcome {
  justify-content: center;
  /* pb-5 on #client-logo above already puts 3rem of clear space between
     the logo and this row; this margin is what separates the row, in
     turn, from the "Welcome"/"Bienvenido" heading below it — sized to
     match .welcome-actions' own 32px rhythm elsewhere on this page. */
  padding: 0;
  margin: 0 0 32px;
}

.welcome-card,
.validate-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.welcome-card h3,
.validate-card h3 {
  text-align: center;
}

.welcome-body,
.validate-body {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
}

.welcome-body p,
.validate-body p {
  margin-bottom: 16px;
}

.welcome-actions {
  margin-top: 32px;
}

/* ---------- Validation form ---------- */

.validate-form .form-group {
  margin-bottom: 20px;
}

.validate-form label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 6px;
}

.validate-form input[type="date"],
.validate-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--surface);
  box-sizing: border-box;
}

.validate-form input[type="date"]:focus,
.validate-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Toggled by wwwroot/js/validate.js once a field is empty-and-touched
   ("required") or non-empty-but-malformed ("invalid format") — same
   --danger token and .is-invalid/:focus pairing as PaymentSummary.cshtml's
   .receipt-field-input.is-invalid, reused here rather than redefined so
   this reads as the same error state everywhere in the app. The actual
   message text lives in .field-error below (payment_summary.css, which
   this page already loads for .confirm-btn/.back-link), not duplicated
   here. */
.validate-form input.is-invalid {
  border-color: var(--danger);
}

.validate-form input.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.validate-error {
  margin-bottom: 20px;
  padding: 14px 16px;
  background-color: var(--danger-soft);
  border: 1.5px solid var(--danger);
  border-radius: 12px;
  color: var(--danger);
  font-size: 0.88rem;
}

.validate-actions {
  margin-top: 28px;
}

.validate-back {
  margin-top: 20px;
  text-align: center;
}