/* ============================================
   Sylvia Brinkman Foundation - Form controls
   ============================================
   The controls the public forms share: the application form and the deletion and reviewer
   sign-in pages (with css/apply.css after this file), and Give Online on /donate (with
   css/donate.css). Moved out of apply.css verbatim for SBF-9, so the donate form uses these rules
   rather than a copy of them that could drift. Load this BEFORE apply.css: the rules apply.css
   adds on top (.apply--view .segment-opt, the scholarship page's .apply-message--info) rely on
   coming later. */

/* --- Messages --- */
.apply-message {
  padding: 16px 20px;
  border-radius: var(--radius-input);
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.apply-message--info {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

.apply-message--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.apply-message--error {
  background: #fbe9e7;
  color: #c62828;
  border: 1px solid #ffccbc;
}

.apply-message--warning {
  background: #fff3e0;
  color: #bf4500;
  border: 1px solid #ffe0b2;
}

.apply-message ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.apply-message ul li {
  margin-bottom: 4px;
}

/* Required mark — global scope */
.required-mark {
  color: #c62828;
}

/* --- Segmented control (replaces radio buttons for enum fields) --- */
.segment-group {
  display: flex;
  border: 2px solid var(--control-edge, #8E8E93);
  border-radius: var(--radius-input);
  overflow: hidden;
  background: var(--gray-100);
}

.segment-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: background 0.15s, color 0.15s;
  user-select: none;
  position: relative;
}

.segment-opt:not(:last-child) {
  border-right: 2px solid var(--gray-200, #E8E8ED);
}

.segment-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segment-opt.is-selected {
  background: var(--cardinal);
  color: #fff;
  font-weight: 600;
}

.segment-opt:hover:not(.is-selected) {
  background: var(--gray-200);
  color: var(--gray-800);
}

/* --- Consent checkbox --- */
.apply-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  cursor: pointer;
}

.apply-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--cardinal);
  cursor: pointer;
  flex-shrink: 0;
}

.apply-consent span {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Optional fields (SBF-6) ─────────────────────────────────────────────────────────────────── */
/* The counterpart to .required-mark. Saying "(optional)" outright beats the absence of an asterisk,
   which asks the applicant to notice something that is not there. */
.optional-mark {
  color: var(--gray-500, #6E6E73);
  font-weight: 400;
  font-size: 0.85em;
}

/* ── Character counter (SBF-7) ───────────────────────────────────────────────────────────────── */
/* The limits are part of the question design — a limit that makes a student choose what matters
   produces a better answer than one that rewards endurance. They only do that job if the applicant
   can see them. */
.apply-field-count {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--gray-500, #6E6E73);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.apply-field-count.is-near {
  color: #8a5a00;
}
.apply-field-count.is-over {
  color: #c62828;
  font-weight: 600;
}
.apply-field-count.is-over .apply-field-count-num {
  text-decoration: underline;
}