/* ---------- Global Styles for Multi Step Form ---------- */

/* Labels */
.msf-step label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-style: Medium !important;
    font-size: 16px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;
}

/* Input fields */
/* -------- Text, Email, Number, Date Inputs ONLY -------- */
.msf-step input[type="text"],
.msf-step input[type="email"],
.msf-step input[type="number"],
.msf-step input[type="date"] {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-style: Regular !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    border-radius: 5px !important;
    background-color: #F8F9FA !important;
    border: 1px solid #F8F9FA !important;
    padding: 25px 12px !important;
}


/* Placeholder text */
.msf-step input::placeholder {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-style: Regular !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #9B9B9B !important;
}

/* Required field star */
.msf-step label.required::after {
    content: "*" !important;
    margin-left: 3px !important;
    color: #022D36 !important;
}

/* Specific layout for basic-info-1 */
.msf-step[data-step="1"] .row-gap-20 {
    gap: 20px !important;
}

/* One row two columns layout */
.msf-step[data-step="1"] .two-cols {
    display: flex !important;
    gap: 20px !important;
}

.msf-step[data-step="1"] .two-cols > div {
    flex: 1 !important;
}

/* Basic info 2 design  */
/* -------- Radio Buttons -------- */
.msf-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.msf-radio-group .form-check-input {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    accent-color: #022D36 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid #022D36 !important;
    position: relative !important;
    outline: none !important;
    cursor: pointer !important;
}

.msf-radio-group .form-check-input:checked::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #022D36 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.msf-radio-group .form-check-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}
.msf-radio-group input[type="radio"]:checked{
        background-color: #022D36 !important;
}
.work-authorization{
    margin-bottom: 30px !important;
}


/* basic info 3 design  */

/* ---------- File Upload ---------- */
.msf-file-upload {
    border: 1px dashed #9B9B9B !important;
    border-radius: 5px !important;
    padding: 27px 0px 18px 0px !important;
    text-align: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
}

.msf-file-upload:hover {
    background-color: #f0f0f0 !important;
}

.msf-file-upload .msf-upload-icon {
    display: block !important;
    margin: 0 auto 10px auto !important;
    width: 50px !important;
    height: auto !important;
}

.msf-file-upload .msf-upload-text {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;
    margin: 20px 0px !important;
}

.msf-file-upload .msf-upload-btn {
    border-radius: 8px !important;
    border: 1px solid #CCCCCC !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 100% !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;
    background-color: #fff !important;
    padding: 9px 23px !important;
    cursor: pointer !important;
    margin: 0px 0px 20px 0px !important;
}

.msf-file-upload .msf-upload-info {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #9B9B9B !important;
    margin-top: 8px !important;
}

/* Hide native file input */
.msf-file-upload .msf-input-file {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.msf-textarea-wrap {
    position: relative !important;
}

/* Counter inside textarea */
.msf-textarea-wrap .msf-word-count {
    position: absolute !important;
    bottom: 10px !important;
    right: 12px !important;

    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;

    pointer-events: none !important;
    background: transparent !important;
}

/* Add padding so text doesn't overlap counter */
.msf-textarea-wrap textarea {
    padding-bottom: 40px !important;
}


/* Textarea styling */
.msf-step textarea.msf-input {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: -0.02em !important;
    color: #000 !important;
    border-radius: 5px !important;
    border: 1px solid #F8F9FA !important;
    background-color: #F8F9FA !important;
    padding: 12px !important;
    width: 100% !important;
    min-height: 120px !important;
}
select.form-select.msf-input {
    height: 48px !important;
    border: none !important;
    background-color: #F8F9FA !important;
    border-radius: 5px !important;
}

.msf-textarea-wrap.cover-letter {
    margin-bottom: 35px !important;
}

/* review part design  */
/* -------- Review Blocks -------- */
.msf-review-row {
    display: flex !important;
    gap: 6px !important;
    align-items: flex-start !important;
}

.msf-review-key {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 28px !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;
    /* min-width: 140px !important; */
}

.msf-review-value {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 28px !important;
    letter-spacing: -0.02em !important;
    color: #022D36 !important;
    word-break: break-word !important;
}

.msf-review-block {
    margin-bottom: 8px !important;
}


/* basic info 7 design  */
.msf-checkbox-group .form-check {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.msf-checkbox-group .form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 2px !important;
    border: 1px solid #D9D9D9 !important;
    background-color: #fff !important;
    margin-top: 2px;
    margin-right: 10px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
}

.msf-checkbox-group .form-check-input:checked {
    background-color: #022D36 !important;
    border-color: #022D36 !important;
}

/* .msf-checkbox-group .form-check-input:checked::after {
    content: "\2714";
    color: #FFFFFF !important;
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 14px;
} */

.msf-checkbox-group .form-check-label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-style: Regular !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: -0.02em !important;
    color: #000000 !important;
}
.msf-checkbox-group {
    margin-top: 28px !important;
}

/* ---------- Multi-Step Form Validation Errors ---------- */
.mf-error {
    border-color: #e74c3c !important; /* red border for invalid fields */
}

.mf-error-msg {
    color: #e74c3c; /* red text */
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    margin-top: 4px;
}

/* Specific spacing for checkboxes and radios */
.msf-step .form-check .mf-error-msg {
    margin-left: 24px; /* aligns error below label */
}

/* Optional: smooth transition when error appears */
.mf-error-msg {
    opacity: 0;
    animation: fadeInError 0.3s forwards;
}
.msf-review-row .msf-review-key {
    white-space: nowrap; /* Prevent wrapping */
    display: inline-block; /* Optional: ensures width fits content */
}
@keyframes fadeInError {
    to { opacity: 1; }
}

.mf-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: mf-spin 0.8s linear infinite;
}

@keyframes mf-spin {
    to { transform: rotate(360deg); }
}
/* =============================== */
/* 💻 Small Laptop (max-width:1366px) */
/* =============================== */
@media (max-width: 1366px) {

    .msf-step {
        padding: 0 10px;
    }

    .msf-step input[type="text"],
    .msf-step input[type="email"],
    .msf-step input[type="number"],
    .msf-step input[type="date"],
    .msf-step textarea,
    .msf-step select {
        padding: 20px 12px !important;
    }

}


/* =============================== */
/* 📱 Tablet (max-width:1024px) */
/* =============================== */
@media (max-width: 1024px) {

    /* Force two-cols to stack */
    .msf-step .two-cols {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .msf-step .two-cols > div {
        width: 100% !important;
    }

    /* Make radio groups more compact */
    .msf-radio-group {
        gap: 8px !important;
    }

    /* Slight font scaling */
    .msf-step label {
        font-size: 15px !important;
    }

    .msf-review-key,
    .msf-review-value {
        font-size: 15px !important;
    }
}


/* =============================== */
/* 📲 Mobile (max-width:767px) */
/* =============================== */
@media (max-width: 767px) {

    /* Stack everything */
    .msf-step .two-cols {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .msf-step .two-cols > div {
        width: 100% !important;
    }

    /* Inputs full width spacing */
    .msf-step input[type="text"],
    .msf-step input[type="email"],
    .msf-step input[type="number"],
    .msf-step input[type="date"],
    .msf-step textarea,
    .msf-step select {
        padding: 16px 10px !important;
        font-size: 13px !important;
    }

    .msf-step label {
        font-size: 14px !important;
    }

    /* Radio & checkbox spacing */
    .msf-radio-group {
        gap: 6px !important;
    }

    .msf-checkbox-group .form-check-label {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Review section stacked nicely */
    .msf-review-row {
        flex-direction: row !important;
        gap: 2px !important;
        flex-wrap: wrap
    }

    .msf-review-key,
    .msf-review-value {
        font-size: 14px !important;
        line-height: 22px !important;
    }

    /* File upload padding smaller */
    .msf-file-upload {
        padding: 20px 10px !important;
    }

}