/* MP Stelco Forms — front-end styles
 * Design tokens lifted from prod (et-core-unified-373945.min.css)
 * and the Employment App's inline CSS — kept condensed per Stelco preference.
 */

:root {
    --mpsf-red:        #BF0B0B;
    --mpsf-red-dark:   #9A0909;
    --mpsf-red-glow:   rgba(191, 11, 11, 0.10);
    --mpsf-red-shadow: rgba(191, 11, 11, 0.30);
    --mpsf-charcoal:   #2D3436;
    --mpsf-slate:      #4A5568;
    --mpsf-border:     #E2E8F0;
    --mpsf-error:      #E53E3E;
    --mpsf-success:    #38A169;
    --mpsf-bg:         #FFFFFF;
}

.mpsf-form { max-width: 720px; margin: 0 auto; font-family: 'Open Sans', sans-serif; color: var(--mpsf-charcoal); }
.mpsf-form * { box-sizing: border-box; }

/* Field group */
.mpsf-group { margin-bottom: 10px; }
.mpsf-group > label { display: block; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--mpsf-charcoal); margin-bottom: 6px; }
.mpsf-req { color: var(--mpsf-red); margin-left: 2px; }
.mpsf-help { display: block; margin-top: 4px; font-size: 11px; color: var(--mpsf-slate); }

/* Inputs */
.mpsf-group input[type="text"],
.mpsf-group input[type="email"],
.mpsf-group input[type="tel"],
.mpsf-group input[type="number"],
.mpsf-group input[type="date"],
.mpsf-group input[type="url"],
.mpsf-group textarea,
.mpsf-group select {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: var(--mpsf-charcoal);
    background: var(--mpsf-bg);
    border: 2px solid var(--mpsf-border);
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.mpsf-group input:focus,
.mpsf-group textarea:focus,
.mpsf-group select:focus {
    outline: none;
    border-color: var(--mpsf-red);
    box-shadow: 0 0 0 3px var(--mpsf-red-glow);
}

.mpsf-group textarea { min-height: 100px; resize: vertical; }

.mpsf-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Two- and three-column rows */
.mpsf-row-2,
.mpsf-row-3 { display: grid; gap: 12px; }
.mpsf-row-2 { grid-template-columns: 1fr 1fr; }
.mpsf-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Checkbox / radio groups */
.mpsf-form ul.mpsf-choices,
.mpsf-form .mpsf-choices { list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 0 !important; }
.mpsf-form .mpsf-choices li { margin-bottom: 4px !important; padding: 0 !important; list-style: none !important; }
.mpsf-form .mpsf-choices li::before,
.mpsf-form .mpsf-choices li::marker { content: none !important; display: none !important; }
.mpsf-choices label { display: flex; align-items: center; gap: 8px; font-family: 'Open Sans', sans-serif; font-size: 13px; color: var(--mpsf-charcoal); cursor: pointer; }
.mpsf-choices input[type="checkbox"],
.mpsf-choices input[type="radio"] { width: 16px; height: 16px; accent-color: var(--mpsf-red); margin: 0; }

/* Submit button */
.mpsf-submit {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--mpsf-red);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--mpsf-red-shadow);
    transition: background .15s, transform .15s;
}
.mpsf-submit:hover { background: var(--mpsf-red-dark); transform: translateY(-2px); }
.mpsf-submit:disabled { opacity: .6; cursor: wait; transform: none; }

/* Status messages */
.mpsf-status { margin-top: 16px; padding: 14px 18px; border-radius: 8px; font-size: 14px; line-height: 1.5; display: none; }
.mpsf-status--success { display: block; background: rgba(56,161,105,.10); color: #1F6B47; border: 2px solid var(--mpsf-success); }
.mpsf-status--error   { display: block; background: rgba(229,62,62,.08); color: #9B2C2C; border: 2px solid var(--mpsf-error); }

/* Field-level errors */
.mpsf-input-error { border-color: var(--mpsf-error) !important; box-shadow: 0 0 0 3px rgba(229,62,62,.15) !important; }
.mpsf-field-error { display: block; margin-top: 4px; font-size: 12px; color: var(--mpsf-error); }

/* Privacy notice */
.mpsf-privacy { font-size: 11px; color: var(--mpsf-slate); margin-top: 12px; line-height: 1.5; }

/* ============================================
 * EMPLOYMENT WIZARD
 * ============================================ */
.mpsf-wizard { max-width: 880px; margin: 0 auto; }
.mpsf-progress { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; padding: 0 8px; }
.mpsf-progress-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.mpsf-progress-bullet { width: 32px; height: 32px; border-radius: 50%; background: #E8E8E6; color: var(--mpsf-slate); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; }
.mpsf-progress-step.is-active .mpsf-progress-bullet  { background: var(--mpsf-red); color: #fff; }
.mpsf-progress-step.is-done   .mpsf-progress-bullet  { background: var(--mpsf-charcoal); color: #fff; }
.mpsf-progress-label { font-size: 11px; color: var(--mpsf-slate); font-family: 'Montserrat', sans-serif; font-weight: 600; }
.mpsf-progress-line { flex: 1 1 auto; height: 2px; background: #E8E8E6; margin: 0 6px; align-self: center; transform: translateY(-8px); }

.mpsf-step { display: none; padding: 20px; background: #fff; border: 1px solid var(--mpsf-border); border-radius: 8px; }
.mpsf-step.is-active { display: block; }
.mpsf-step h2 { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: var(--mpsf-charcoal); margin: 0 0 4px; }
.mpsf-step .mpsf-subtitle { font-size: 13px; color: var(--mpsf-slate); margin: 0 0 16px; }

.mpsf-section { border-top: 1px solid var(--mpsf-border); margin-top: 16px; padding-top: 12px; }
.mpsf-section h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--mpsf-charcoal); margin: 0 0 8px; }

.mpsf-repeat-item { background: #F7F7F5; border: 1px solid var(--mpsf-border); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.mpsf-repeat-item .mpsf-remove { float: right; background: transparent; border: none; color: var(--mpsf-slate); cursor: pointer; font-size: 12px; }
.mpsf-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; color: var(--mpsf-red); border: 1px dashed var(--mpsf-red); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
.mpsf-add:hover { background: rgba(191,11,11,.05); }

.mpsf-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.mpsf-btn-back { padding: 12px 24px; background: transparent; color: var(--mpsf-charcoal); border: 1px solid var(--mpsf-border); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
.mpsf-btn-back:hover { background: #F7F7F5; }
.mpsf-btn-back.is-hidden { visibility: hidden; }

/* File upload */
.mpsf-file { display: block; padding: 24px; border: 2px dashed var(--mpsf-border); border-radius: 6px; text-align: center; color: var(--mpsf-slate); font-size: 13px; cursor: pointer; transition: border-color .15s; }
.mpsf-file:hover { border-color: var(--mpsf-red); color: var(--mpsf-red); }
.mpsf-file input[type="file"] { display: none; }
.mpsf-file-name { display: block; margin-top: 6px; font-weight: 600; color: var(--mpsf-charcoal); font-size: 12px; }

/* Wizard wrap + header (used by employment template) */
.mpsf-wizard-wrap { max-width: 880px; margin: 0 auto; padding: 0; }
.mpsf-wizard-header { background: var(--mpsf-charcoal); color: #fff; padding: 32px 24px; text-align: center; border-radius: 8px 8px 0 0; margin-bottom: 16px; }
.mpsf-wizard-header h1 { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.mpsf-wizard-header p { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 auto; max-width: 640px; line-height: 1.5; }

/* Next button (wizard step navigation) */
.mpsf-btn-next {
    padding: 12px 24px;
    background: var(--mpsf-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.mpsf-btn-next:hover { background: var(--mpsf-red-dark); transform: translateY(-1px); }

/* Certification block (Step 5) */
.mpsf-cert-text { background: #F7F7F5; border-left: 3px solid var(--mpsf-red); padding: 16px; margin: 16px 0; font-size: 13px; line-height: 1.6; color: var(--mpsf-charcoal); }
.mpsf-cert-text p { margin: 0 0 12px; }
.mpsf-cert-text p:last-child { margin: 0; }
.mpsf-cert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; cursor: pointer; }
.mpsf-cert input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--mpsf-red); }
.mpsf-cert span { font-size: 13px; line-height: 1.5; color: var(--mpsf-charcoal); }

/* Responsive */
@media (max-width: 600px) {
    .mpsf-row-2, .mpsf-row-3 { grid-template-columns: 1fr; }
    .mpsf-group input,
    .mpsf-group textarea,
    .mpsf-group select { font-size: 16px; } /* iOS no-zoom */
    .mpsf-progress-label { display: none; }
    .mpsf-submit { width: 100%; text-align: center; }
}