/* ==========================================================================
   SWYFT CORP LLC -- Form styling (contact, name search/generator, formation
   wizard forms added in later phases all reuse these classes).
   ========================================================================== */

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
  margin-bottom: 6px;
}
.form-field .required { color: var(--color-error); margin-left: 2px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  background: #fff;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-secondary);
}

/* A "$"-prefixed money input (corporate-stock.html's own Par Value field,
   per explicit request to show "$0.01" pre-filled in the box) -- the
   input itself still matches every other .form-field input's border/
   padding/focus styling above, just with its left padding widened to
   clear the prefix glyph rather than a second, differently-styled input
   variant. */
.form-field-prefixed { position: relative; }
.form-field-prefixed input { padding-left: 26px !important; }
.form-field-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-weight: 600; font-size: 0.95rem; pointer-events: none;
}

/* A masked field (an actual SSN/ITIN, or any other value sensitive enough
   to hide by default the same way a password field is) paired with a
   reveal/hide toggle button -- ein-information.html's own identification-
   number field is the first real use of this, per explicit request that it
   behave "the same as we keep password field with eye button." The button
   sits inside the input's own right edge rather than beside it, the same
   visual language as a native browser password-reveal control, so
   .password-field-wrap just needs relative positioning and the input needs
   enough right-padding to clear the icon -- no other layout change. */
.password-field-wrap { position: relative; }
.password-field-wrap input { padding-right: 44px !important; }
.password-toggle-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: none; background: none;
  color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.password-toggle-btn:hover { color: var(--color-primary); background: #f3f5f9; }
.password-toggle-btn svg { width: 20px; height: 20px; }
.password-toggle-btn .icon-eye-off { display: none; }
.password-toggle-btn[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle-btn[aria-pressed="true"] .icon-eye-off { display: block; }
.form-field .field-hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 6px; }
/* Same "unscoped on purpose" reasoning as .field-error below -- the SMS
   opt-in legal text on contact-information.html sits as a sibling of
   .consent-check, not nested inside a .form-field, so it needs its own
   top-level rule rather than silently falling back to unstyled default
   text. */
.field-hint { font-size: 0.8rem; color: var(--color-text-muted); }
.field-hint a { color: var(--color-secondary); }
/* Unscoped on purpose -- company-information.html's own .field-error (the
   shared "please fix this and try again" message for the whole Company
   Information form) sits as a sibling of .form-field, not nested inside
   one, so a rule scoped to ".form-field .field-error" would silently miss
   it and it would render in the page's default muted text color instead
   of red (caught from a live screenshot: the message displayed, but not
   in red). This rule applies wherever the class appears, nested or not. */
.field-error { font-size: 0.8rem; color: var(--color-error); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A 3-up row (contact-information.html's City / State / Zip Code) --
   collapses at the same responsive.css breakpoints as .form-row, just one
   step earlier (2-up at 1024px, 1-up at 640px) since 3 narrow fields get
   cramped sooner than 2. */
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Per-field inline validation (contact-information.html) -- a red border on
   the offending input plus a small icon + message directly under it, not
   just the one shared banner every earlier wizard step's .field-error
   already provides above the Next button. Scoped under .form-field so it
   only ever appears once a specific field has actually been validated,
   never as a blanket page-wide state. */
.form-field.has-error input,
.form-field.has-error select { border-color: var(--color-error); }
.field-error-inline {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.8rem; color: var(--color-error); margin-top: 6px;
}
.field-error-inline svg { width: 14px; height: 14px; flex-shrink: 0; }
.form-status-banner {
  padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 20px;
}
.form-status-banner.success { background: #e6f6ee; color: #14663f; }
.form-status-banner.error { background: #fbe9eb; color: #9c2333; }
.optional-label { font-weight: 400; color: var(--color-text-muted); text-transform: none; }

/* Confirm-style modals (contact-information.html's email-domain-validity
   and email-already-registered checks) -- this project's first modal, so
   it's defined here rather than borrowed from anywhere else. Swyft Launch's
   own navy/blue/surface tokens throughout -- not a competitor's branding
   or exact wording, just the same underlying pattern (a centered overlay
   dialog with two actions). */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 30, 61, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Same [hidden]-vs-specificity fix as .structure-card/.need-item/
   .requirement-row/.requirement-panel-cta in components.css -- a bare
   `[hidden]` loses to this file's own `.modal-overlay { display: flex }`
   above (equal specificity, author styles beat the browser's UA default),
   so closeModal()'s `modal.hidden = true` in contact-info-form.js silently
   failed to actually hide the dialog again after it had been opened once.
   This explicit, higher-specificity override fixes it for both modals. */
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 20px 60px rgba(15, 30, 61, 0.28);
}
.modal-box h3 { margin: 0 0 12px; color: var(--color-primary); font-size: 1.15rem; }
.modal-box p { margin: 0 0 22px; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.55; }
.modal-box p strong { color: var(--color-text); word-break: break-word; }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap-reverse; justify-content: flex-end; }
.modal-actions .btn { margin: 0; }
/* A small top-right "X" close control (ein-information.html's own EIN
   modals) -- same effect as that modal's own Cancel button (see
   ein-form.js's own docblock), just available as a corner icon too, since
   that's how the reference layout for these two modals showed it. Not
   added retroactively to contact-information.html's older modals, which
   never had one in their own design. */
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--color-text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* Centered variant (contact-information.html's single-button domain-invalid
   modal) -- an icon above the title instead of the left-aligned
   heading+actions-on-the-right layout the two-button modals above use. */
.modal-box-center { text-align: center; }
.modal-box-center h3, .modal-box-center p { text-align: center; }
.modal-icon {
  width: 52px; height: 52px; margin: 0 auto 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.modal-icon svg { width: 26px; height: 26px; }
.modal-icon-warning { background: #fdf1e2; color: var(--color-warning); }
/* ein-information.html's own "Confirm" modal (shown after choosing "Yes" to
   "I am a foreign individual and do not have a Social Security Number") --
   an informational icon, not a warning one, since nothing here is wrong,
   the customer is just being asked to confirm a few facts before ein-form.js
   prepares the SS-4 paperwork. Same navy/blue tokens as the rest of the
   site, no borrowed branding. */
.modal-icon-info { background: #e7effc; color: var(--color-secondary); }
.modal-actions-center { justify-content: center; }
.modal-actions-center .btn { min-width: 140px; }

/* "owners" step (owners.html) -- each of the four officer roles (every
   entity type now) or each Member/Director row (added/removed live as
   "Number of Owners" changes) gets its own bordered card, distinct from
   the plain .form-field rows the rest of this page uses. */
.officer-card, .owner-row-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px 22px; margin: 0 0 18px;
}
.officer-card h4 { margin: 0 0 4px; font-size: 1rem; color: var(--color-primary); }
.officer-desc {
  color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.55;
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border);
}
/* Sits between the "Officer Information" heading and the first card,
   explaining -- once the section actually reveals itself (see
   owners-form.js's setOwnerCount()) -- that these dropdowns pull from the
   people already listed above, since the section no longer names a
   specific entity-type variant ("Directors" vs "Members") the way the
   heading above it does. */
.officer-section-intro {
  color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.5;
  margin: 0 0 18px;
}
.owner-row-card .owner-row-title { margin: 0 0 14px; font-size: 0.95rem; color: var(--color-primary); }
.owner-row-card .form-field:last-child { margin-bottom: 0; }
/* Each owner row's own "Use the same address entered on the Contact
   Information step" checkbox (owners-form.js's applyRowSameAsContact()) --
   checking it copies that address in and disables these same fields rather
   than hiding them, so the customer can still see exactly what's being
   submitted; unchecking re-enables them without clearing what was copied
   in, in case they only meant to tweak one line. Plain :disabled has no
   built-in visual treatment otherwise, so it would look identical to an
   editable field. */
.form-field input:disabled, .form-field select:disabled {
  background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed;
}