/* Component-level styles for the TOPMIX data entry form (vanilla build). */
* { box-sizing: border-box; }
body { margin: 0; background: var(--form-page-bg); font-family: var(--font-body); }

.wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.card {
  width: 100%; max-width: 420px;
  background: var(--form-card-bg); border-radius: var(--radius-xl);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.header img { height: 44px; width: auto; flex: none; }
.header h1 { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: var(--form-heading-color); margin: 0; }
.subtitle { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--form-body-text); margin: 0 0 20px; }

.field-list { display: flex; flex-direction: column; gap: 16px; }

.field { position: relative; background: var(--form-card-bg); border: 1.5px solid var(--form-field-border); border-radius: var(--radius-sm); box-sizing: border-box; transition: border-color .15s, padding .15s; padding: 14px 16px; }
.field.raised { padding: 20px 16px 8px; }
.field label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-label); font-size: 15px; font-weight: 500; color: var(--form-label-color); pointer-events: none; transition: all .15s, color .15s; }
.field.raised label { top: 8px; transform: none; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.field.focus { border-color: var(--form-field-border-focus); }
.field input, .field select { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--form-input-text); padding: 0; margin: 0; display: block; }
.field .prefix-row { display: flex; align-items: center; gap: 8px; }
.field .prefix { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--form-input-text); flex: none; }

.asterisk { color: var(--form-mandatory-empty); }
.asterisk.filled { color: var(--form-mandatory-filled); }

.error-text { font-family: var(--font-body); font-size: 12px; line-height: 1.3; color: var(--form-error-text); margin: -10px 0 0; }
.toast-text { font-family: var(--font-body); font-size: 13px; line-height: 1.3; font-style: italic; color: var(--form-toast-text); margin: -10px 0 0; }
.helper-text { font-family: var(--font-body); font-size: 12px; line-height: 1.3; font-style: italic; color: var(--form-body-text); margin: -10px 0 0; }
.terms-text { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--form-body-text); margin: 4px 0 0; }
a { color: var(--form-link-color); }
a:hover { color: var(--form-link-hover); }

/* Company Type group */
.group { background: var(--form-card-bg); border: 1.5px solid var(--form-field-border); border-radius: var(--radius-sm); transition: border-color .15s; }
.group .row { position: relative; padding: 20px 16px 8px; height: 49px; box-sizing: border-box; }
.group .row label { font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--form-label-color); position: absolute; left: 16px; top: 8px; }
.group .select-wrap { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.group.focus .select-wrap { top: auto; bottom: 8px; transform: none; }
.group select { border: none; background: transparent; font-size: 13.5px; font-style: italic; color: var(--form-body-text); text-align: right; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: var(--font-body); }
.group .other-row { position: relative; padding: 20px 16px 8px; border-top: 1.5px solid var(--form-field-border); }
.group .other-row label { position: absolute; left: 16px; top: 8px; font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--form-label-color); }
.group .other-row input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--form-input-text); padding-top: 8px; }

/* Upload */
.upload-group { border: 1.5px dashed var(--form-field-border); border-radius: var(--radius-sm); background: var(--form-card-bg); transition: border-color .15s; overflow: hidden; }
.upload-group.focus { border-color: var(--form-field-border-focus); }
.upload-trigger { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 16px 8px; cursor: pointer; height: 98px; box-sizing: border-box; }
.upload-trigger .upload-label { left: 16px; top: 14px; position: absolute; font-size: 15px; }
.upload-trigger input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-trigger .cta { margin-left: auto; font-family: var(--font-body); font-size: 13.5px; color: var(--form-body-text); font-weight: 400; text-align: right; font-style: italic; }
.uploaded-heading { padding: 8px 16px 0; border-top: 1.5px solid var(--form-field-border); font-family: var(--font-body); font-size: 12px; font-style: italic; color: var(--form-body-text); }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; font-family: var(--font-body); font-size: 13.5px; font-style: italic; color: var(--form-input-text); }
.file-row .remove { cursor: pointer; color: var(--form-remove-icon); font-style: normal; font-weight: 700; flex: none; line-height: 1; background: none; border: none; padding: 0; font-size: 14px; }

/* Submit button */
.submit-btn {
  display: flex; width: 100%; align-items: center; justify-content: center;
  padding: 16px 30px; font-family: var(--font-label); font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em; border-radius: var(--radius-pill); border: none; cursor: pointer;
  transition: transform .1s, filter .1s, background .15s, opacity .15s;
  background: var(--form-button-enabled-bg); color: var(--form-button-enabled-text);
}
.submit-btn:disabled {
  background: var(--form-button-disabled-bg); color: var(--form-button-disabled-text);
  opacity: var(--form-button-disabled-opacity); cursor: not-allowed;
}
.submit-btn:not(:disabled):hover { filter: brightness(1.06); }
.submit-btn:not(:disabled):active { transform: scale(0.97); }