/* SILO create account styles */
/* Loads after friendcommon.css (header, card, buttons, notice, colors live there). */

/* Same dark green as the login page */
:root { --dark: var(--forest); }

/* No search bar or nav on this page, so the header needs bottom padding */
header.site { padding-block: 14px 16px; }

main > .wrap { max-width: 720px; padding-bottom: 40px; }

/* ---------- Form card ---------- */
#account-form { gap: 34px; }
.required-note { margin: 0; color: var(--muted); font-size: 1rem; }

fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
legend {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; line-height: 1.25;
  display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 12px;
}
legend svg { flex: none; width: 40px; height: 40px; }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label,
.field .label { font-weight: 700; font-size: 1.1rem; }
.optional { font-weight: 400; color: var(--muted); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"] {
  width: 100%; min-height: 60px; padding: 0 18px; color: var(--ink); background: #fff;
  border: 2px solid var(--dark); border-radius: 10px; font: inherit;
}
.hint { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Something is wrong with this field */
.field.has-error input { border-color: #B3261E; border-width: 3px; }
.field-error { margin: 0; color: #B3261E; font-weight: 700; font-size: 1rem; }
.field-error::before { content: "⚠ "; }

/* Side by side on wider screens, stacked on phones */
.two-col, .three-col { display: grid; gap: 18px; }
@media (min-width: 560px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .three-col { grid-template-columns: 2fr 1fr 1.4fr; }
}

/* ---------- Household number: big − and + buttons ---------- */
.stepper { display: flex; align-items: stretch; gap: 10px; max-width: 320px; }
.stepper input { text-align: center; font-size: 1.4rem; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn {
  flex: none; width: 64px; min-height: 60px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--dark); border: 2px solid var(--dark);
  font-size: 1.8rem; font-weight: 700; line-height: 1;
}
.step-btn:hover { background: var(--pale-green); }

/* ---------- Language choice: big tappable boxes ---------- */
.choice-row { display: flex; gap: 12px; flex-wrap: wrap; }
.choice {
  flex: 1 1 160px; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 18px; border: 2px solid var(--dark); border-radius: 10px;
  background: #fff; font-weight: 700; font-size: 1.1rem; cursor: pointer;
}
.choice input { width: 24px; height: 24px; accent-color: var(--green-deep); margin: 0; }
.choice:has(input:checked) { background: var(--pale-green); border-width: 3px; }

/* Hidden from people; catches bots that fill in every field */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Errors ---------- */
.error-summary { background: #FDECEA; border-color: #B3261E; }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.error-summary ul { margin: 8px 0 0; padding-left: 22px; }
.error-summary a { color: #B3261E; font-weight: 700; }
.send-error { margin: 0; }

/* ---------- Submit ---------- */
.btn { width: 100%; }
.fine-print { margin: -10px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; }
.back-line { margin: 22px 0 0; text-align: center; font-size: 1.1rem; }
.back-line a { color: var(--green-deep); font-weight: 700; }

/* ---------- Request sent ---------- */
.done { margin-top: 12px; gap: 14px; text-align: center; align-items: center; }
.done-check {
  width: 88px; height: 88px; border-radius: 44px; background: var(--green-deep); color: #fff;
  font-size: 2.6rem; font-weight: 700; line-height: 88px;
}
.done h2 { font-family: var(--font-head); font-size: 1.8rem; margin: 0; }
.done h2:focus { outline: none; }
.done-lead { margin: 0; font-size: 1.2rem; font-weight: 700; }
.done h3 { margin: 10px 0 0; font-size: 1.15rem; }
.next-steps { margin: 0; padding-left: 26px; text-align: left; font-size: 1.1rem; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.done .btn { margin-top: 8px; }

/* ---------- Food preferences: big tappable check boxes ---------- */
.prefs-hint { margin-top: -10px; }
.check-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check-grid .choice input { accent-color: var(--green-deep); }

/* ---------- Password with Show / Hide ---------- */
.pass-row { display: flex; gap: 10px; }
.pass-row input { flex: 1; min-width: 0; }
.field input[type="password"] {
  width: 100%; min-height: 60px; padding: 0 18px; color: var(--ink); background: #fff;
  border: 2px solid var(--dark); border-radius: 10px; font: inherit;
}
.show-pass {
  flex: none; min-width: 88px; min-height: 60px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--dark); border: 2px solid var(--dark); font: inherit; font-weight: 700;
}
.show-pass:hover { background: var(--pale-green); }

/* ---------- Confirmation: the new username ---------- */
.username-box {
  width: 100%; max-width: 520px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--pale-green); border: 3px solid var(--green-deep);
}
.username-box p { margin: 0; }
.username { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--green-deep); margin: 4px 0 6px !important; word-break: break-all; }
.write-down { font-size: 1rem; color: var(--muted); }

/* ---------- Food preferences drop-down (checkboxes inside) ---------- */
.pref-menu { border: 2px solid var(--dark); border-radius: 10px; background: #fff; }
.pref-menu[open] { border-width: 3px; }
.pref-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 18px;
}
.pref-summary::-webkit-details-marker { display: none; }
.pref-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.pref-summary-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pref-label { font-weight: 700; font-size: 1.1rem; }
.pref-chosen { color: var(--muted); font-size: 1rem; overflow-wrap: anywhere; }
.pref-chevron { flex: none; width: 28px; height: 28px; transition: transform .15s; }
.pref-menu[open] .pref-chevron { transform: rotate(180deg); }
.pref-list { padding: 4px 14px 14px; }
.allergy-field { margin-top: 18px; }