/* ============================================================
   Withdrawal and cancellation forms (legal-request-form.js)
   /retractation, /resiliation, /en/withdrawal, /en/cancellation
   Uses the design tokens each page defines on :root.
   ============================================================ */

.lr { max-width: 760px; margin: 2.2rem 0 3rem; }
.lr [hidden] { display: none !important; }

.lr-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(1.2rem, 4vw, 2rem);
}
.lr-step-title {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: .6rem;
}
.lr-step-title:focus { outline: none; }
.lr-lead { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }

/* Fields */
.lr-field { margin-bottom: 1.4rem; }
fieldset.lr-field { border: 0; padding: 0; min-width: 0; }
.lr-label { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: .45rem; }
.lr-hint { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: -.15rem 0 .5rem; }
.lr-input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--sans);
  font-size: 16px; /* 16px or more: no zoom on iOS */
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(14, 14, 16, .22);
  border-radius: 12px;
}
.lr-input:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; border-color: var(--violet); }
.lr-input[aria-invalid="true"] { border-color: #b42318; }
.lr-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 48px;
  padding: .75rem .9rem;
  margin-bottom: .55rem;
  background: #fff;
  border: 1px solid rgba(14, 14, 16, .22);
  border-radius: 12px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.45;
}
.lr-option input { flex: none; width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--violet); }
.lr-option:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); }
.lr-option:has(input:focus-visible) { outline: 2.5px solid var(--violet); outline-offset: 2px; }
fieldset.is-invalid .lr-option { border-color: #b42318; }
.lr-error { color: #b42318; font-size: .88rem; font-weight: 500; margin-top: .4rem; }
.lr-error:empty { display: none; }

/* The field only robots fill in: off screen, out of the tab order */
.lr-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.lr-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.lr .btn { min-height: 48px; justify-content: center; font-size: .95rem; white-space: normal; text-align: center; }
.lr .btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Summary and result */
.lr-summary {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  gap: .55rem 1.2rem;
  margin: 1.2rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--warm);
  border-radius: 14px;
}
.lr-summary dt { color: var(--muted); font-size: .9rem; }
.lr-summary dd { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.lr-status { font-size: .93rem; color: var(--muted); margin-top: 1rem; }
.lr-status:empty { display: none; }
.lr-status.is-error { color: #8a1c12; background: #fdecec; border: 1px solid rgba(180, 35, 24, .25); border-radius: 12px; padding: .8rem 1rem; }
.lr-notice { border-radius: 14px; padding: 1rem 1.2rem; margin: .4rem 0 1rem; font-size: .97rem; line-height: 1.65; }
.lr-notice p + p { margin-top: .5rem; }
.lr-number { white-space: nowrap; font-family: var(--mono); font-size: .92em; }
.lr-notice--ok { background: rgba(167, 232, 215, .35); border: 1px solid rgba(16, 128, 96, .28); color: var(--ink); }
.lr-notice--warn { background: rgba(255, 243, 205, .65); border: 1px solid rgba(255, 193, 7, .45); color: #5c4400; }
.lr-next { color: var(--muted); font-size: .95rem; line-height: 1.7; }
.lr a { color: var(--violet); text-decoration: underline; text-decoration-color: var(--violet-line); }

@media (max-width: 520px) {
  .lr-summary { grid-template-columns: 1fr; gap: .15rem; }
  .lr-summary dd { margin-bottom: .55rem; }
  .lr-actions { flex-direction: column; }
  .lr-actions .btn { width: 100%; }
}