/* =================================================================
   GARLIC BOY — WITHDRAWAL FORM (/withdraw/)
   Builds on styles.css (tokens, .btn, .privacy-* legal layout).
   ================================================================= */

.withdraw-form { display: grid; gap: 1.5rem; }
.withdraw-form[hidden],
.withdraw-result[hidden],
.withdraw-error-summary[hidden],
.withdraw-error[hidden] { display: none; }

.withdraw-field { display: grid; gap: 0.4rem; }
.withdraw-field label,
.withdraw-fieldset legend {
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}
.withdraw-req { font-weight: 400; text-transform: none; letter-spacing: 0; }
.withdraw-hint { font-size: 0.9rem; margin: 0; }
.privacy-row-body .withdraw-hint + .withdraw-field,
.privacy-row-body p.withdraw-error { margin-top: 0; }

.withdraw-field input,
.withdraw-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--garlic-black);
  background: transparent;
  border: 2px solid var(--garlic-black);
  border-radius: 6px;
}
.withdraw-field textarea { resize: vertical; min-height: 5.5rem; }
.withdraw-field input::placeholder { color: #6b6257; }
.withdraw-field input:focus-visible,
.withdraw-field textarea:focus-visible { outline-color: var(--garlic-red); box-shadow: 0 0 0 6px var(--garlic-black); }

/* Browser autofill: keep beige and charcoal instead of the browser's
   tint (an inset shadow is the only reliable override). Separate rules,
   since an unsupported pseudo-class would void a shared selector. */
.withdraw-field input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--garlic-beige);
  box-shadow: inset 0 0 0 1000px var(--garlic-beige);
  -webkit-text-fill-color: var(--garlic-black);
  caret-color: var(--garlic-black);
}
.withdraw-field input:-webkit-autofill:focus-visible {
  -webkit-box-shadow: inset 0 0 0 1000px var(--garlic-beige), 0 0 0 6px var(--garlic-black);
  box-shadow: inset 0 0 0 1000px var(--garlic-beige), 0 0 0 6px var(--garlic-black);
}
.withdraw-field.has-error input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1px var(--garlic-red), inset 0 0 0 1000px var(--garlic-beige);
  box-shadow: inset 0 0 0 1px var(--garlic-red), inset 0 0 0 1000px var(--garlic-beige);
}
.withdraw-field input:autofill { background: var(--garlic-beige); }

.withdraw-fieldset {
  border: 0;
  border-top: 1px solid var(--garlic-black);
  padding: 1.25rem 0 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.withdraw-fieldset legend { padding: 0; float: left; width: 100%; }
.withdraw-fieldset legend + * { clear: both; }

.withdraw-choice { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
/* Custom radio: charcoal ring on beige, charcoal dot when selected. */
.withdraw-choice input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--garlic-black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.withdraw-choice input:checked { background: radial-gradient(circle, var(--garlic-black) 0 42%, transparent 46%); }
.withdraw-choice input:focus-visible { outline-color: var(--garlic-red); border-radius: 50%; }
@media (forced-colors: active) {
  .withdraw-choice input { -webkit-appearance: auto; appearance: auto; }
}
.withdraw-choice label { font-family: var(--font-body); font-weight: 600; cursor: pointer; }

/* Errors: charcoal text with a red marker (red text alone would be too
   low-contrast on beige). */
.withdraw-error {
  font-weight: 700;
  font-size: 0.9rem;
  border-left: 4px solid var(--garlic-red);
  padding-left: 0.6rem;
}
.withdraw-error::before { content: "Error: "; }
.withdraw-field.has-error input,
.withdraw-field.has-error textarea { border-color: var(--garlic-red); box-shadow: inset 0 0 0 1px var(--garlic-red); }

.withdraw-error-summary {
  border: 2px solid var(--garlic-red);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  background: transparent;
}
.withdraw-error-summary-title { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; line-height: 1; margin: 0 0 0.5rem; }
.withdraw-error-summary ul,
.withdraw-error-list { margin: 0; padding-left: 1.2rem; list-style: disc; }
.withdraw-error-summary a { color: inherit; font-weight: 700; }

.withdraw-declaration {
  background: var(--garlic-black);
  color: var(--garlic-beige);
  border-radius: 6px;
  padding: 1.25rem;
}
.withdraw-declaration-label {
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.privacy-row-body .withdraw-declaration p + p { margin-top: 0.5rem; }
.withdraw-declaration #wd-declaration-de { font-weight: 700; }
.withdraw-declaration-en { font-size: 0.9rem; }

.withdraw-submit { justify-self: start; }
.withdraw-submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; transform: none; }
.withdraw-status:empty { display: none; }
.withdraw-status { font-weight: 700; }

/* Receipt (enhanced form and no-JavaScript result page). */
.withdraw-result .section-heading { margin-bottom: 1.25rem; }
/* Focus moves here programmatically so screen readers announce the
   receipt; no visible frame is needed on a non-interactive block. */
.withdraw-result:focus,
.withdraw-result:focus-visible { outline: none; box-shadow: none; }
.withdraw-receipt {
  display: grid;
  gap: 0.75rem;
  border-top: 2px solid var(--garlic-black);
  border-bottom: 2px solid var(--garlic-black);
  padding: 1rem 0;
  margin-bottom: 1.25rem;
}
.withdraw-receipt dt {
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}
.withdraw-receipt dd { margin: 0; font-family: var(--font-heading); font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.1; overflow-wrap: anywhere; }
/* Receipt time: date and "time + zone" never break internally; they
   move to two lines only when the line is too narrow. */
.withdraw-date,
.withdraw-time { display: inline-block; white-space: nowrap; }

/* After a successful submission the intro row is hidden and the
   receipt row moves up (.privacy-row sets display: grid). */
#withdraw-intro[hidden] { display: none; }
/* Success state: the "02" becomes a green check in the same spot. */
.privacy-num.privacy-num-done { color: var(--good-boy-green); }
#withdraw-main { scroll-margin-top: calc(var(--header-height) + 1rem); }
.withdraw-result p + p { margin-top: 1rem; }
.withdraw-test {
  border-left: 4px solid var(--good-boy-green);
  padding-left: 0.6rem;
  font-weight: 700;
}
@media (min-width: 600px) {
  .withdraw-receipt { grid-template-columns: 1fr 1fr; }
}