/* ════════════════════════════════════════════════════════════════════
 * Iron Route GPS — Onboarding Step 4 Hotfix (2026-05-03)
 * Visible required asterisks, "(opcional)" hint, dependent Model select
 * disabled state. Loaded AFTER css/onboarding.css and the P0 patches.
 * ════════════════════════════════════════════════════════════════════ */

/* Required-field asterisk (gold for visibility against navy bg) */
.ob-step .ob-field > span .ob-req {
  color: #D4A84B;            /* gold — matches brand accent */
  margin-left: 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
/* Inline label text wrapper so the asterisk + "(opcional)" don't break weird */
.ob-step .ob-field > span .ob-lbl-text {
  display: inline;
}

/* "(opcional)" tag — muted grey */
.ob-step .ob-field > span .ob-opt,
.ob-step .ob-toggle > span .ob-opt {
  color: rgba(244, 241, 234, 0.55);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
  font-style: italic;
}
/* Light theme variant — keep readable on cream bg */
:root[data-theme="light"] .ob-step .ob-field > span .ob-opt,
:root[data-theme="light"] .ob-step .ob-toggle > span .ob-opt {
  color: rgba(9, 30, 54, 0.55);
}

/* Disabled Model dropdown ("Pick a make first") visual cue */
.ob-step .ob-field select[data-model-select][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  font-style: italic;
}

/* Footer specific-error message — slightly more emphasis when text changes */
.ob-footer [data-foot-msg] {
  transition: color 160ms ease;
}
.ob-footer [data-foot-msg]:not(:empty) {
  color: #E11D48;            /* rose-600 — clearly an error */
  font-weight: 600;
}

/* Light theme: keep error visible */
:root[data-theme="light"] .ob-footer [data-foot-msg]:not(:empty) {
  color: #B91C1C;
}

/* Make sure the year/model selects show the placeholder option in muted color */
.ob-step .ob-field select[name="year"] option[value=""],
.ob-step .ob-field select[name="model"] option[value=""] {
  color: rgba(244, 241, 234, 0.55);
}

/* Ensure required asterisk and optional tag remain readable at small sizes */
@media (max-width: 380px) {
  .ob-step .ob-field > span .ob-req { font-size: 13px; }
  .ob-step .ob-field > span .ob-opt { font-size: 11px; }
}