.text-success {
    color: #28a745 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.d-inline {
    display: inline-block;
}

input.readonly-field {
    background-color: #EFEFEF;
}

#arva-job-application-form-wrapper {
    font-family: Arial, sans-serif;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* General Labels (applied to all labels, then overridden where needed) */
#arva-job-application-form label {
    display: block; /* Default to block for stacking */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

#arva-job-application-form label.d-inline {
    display: inline-block;
}

/* General Inputs (applied to all inputs, then overridden where needed) */
#arva-job-application-form input[type="text"],
#arva-job-application-form input[type="email"],
#arva-job-application-form input[type="tel"],
#arva-job-application-form input[type="number"],
#arva-job-application-form input[type="date"],
#arva-job-application-form select,
#arva-job-application-form textarea {
    width: calc(100% - 22px); /* Full width, adjusted for padding/border */
    padding: 10px;
    margin-bottom: 15px; /* Default margin between fields */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Form Group for single fields (label on top, input below) */
.form-group {
    margin-bottom: 15px; /* Spacing between form groups */
}
.form-group label {
    display: block; /* Ensure label is on its own line */
    margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%; /* Take full width of the form group */
    margin-bottom: 0; /* Remove extra margin as form-group handles it */
}

/* CORRECTED: Special handling for radio/checkbox groups inside form-group */
.form-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    align-items: center;
    margin-bottom: 0;
}
.form-group > div input[type="radio"],
.form-group > div input[type="checkbox"] {
    width: auto;
    margin-right: 0;
    margin-bottom: 0;
}
.form-group > div label { 
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0;
    white-space: nowrap;
}


/* Multi-step form styling */
.form-step {
    display: none;
    padding: 20px 0;
    margin-top: 20px;
}
.form-step.active {
    display: block;
}

/* Buttons */
.arva-button {
    background-color: #ed1c24;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    margin-right: 10px; 
}
.arva-button:hover {
    background-color: #e6131c;
}
#arva-job-application-form button {
    background-color: #ed1c24;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    margin-right: 10px;
}
#arva-job-application-form button.prev-step {
    background-color: #666;
}
#arva-job-application-form button[type="submit"] {
    background-color: #28a745;
}
#arva-job-application-form button:hover {
    opacity: 0.9;
}

/* Add More Field Item Containers (educational-record-item, etc.) */
.educational-record-item,
.work-experience-item,
.skill-course-item,
.foreign-language-item,
.software-skill-item,
.emergency-contact-item {
    border: 1px dashed #c0c0c0;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    position: relative;
    /* Mobile-first: default to block (stacked) */
    display: block;
}

/* Inner form-group-inline for fields within repeatable items */
.form-group-inline {
    display: block;
    margin-bottom: 15px;
}
.form-group-inline label {
    display: block; 
    margin-bottom: 5px;
    margin-right: 0;
    white-space: normal;
}
.form-group-inline input,
.form-group-inline select,
.form-group-inline textarea {
    width: 100%; 
    margin-bottom: 0;
}


/* Remove button for repeatable items (Restored colors) */
.remove-item-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px; /* Changed from left to right for consistency with other buttons */
    font-size: 12px;
}

/* --- Responsive Columns for specific form-groups --- */

/* Default for mobile: .form-row-X-col contents stack */
.form-row-2-col,
.form-row-3-col,
.form-row-4-col { /* Added form-row-4-col */
    display: block; /* Stack on mobile */
    margin-bottom: 15px; /* Add margin if needed below the row */
}

/* Tablet (min-width: 600px):
   - 2 columns for .form-row-2-col
   - 2 columns for .form-row-3-col (if desired, otherwise keep 1)
   - 2 columns for .form-row-4-col
*/
@media (min-width: 600px) {
    .form-row-2-col,
    .form-row-3-col, /* Apply 2-column flex to 3-col on tablet */
    .form-row-4-col { /* Apply 2-column flex to 4-col on tablet */
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* Space between columns */
        margin-bottom: 15px;
    }

    .form-row-2-col .form-group,
    .form-row-3-col .form-group, /* Make 3-col items 2-col on tablet */
    .form-row-4-col .form-group { /* Make 4-col items 2-col on tablet */
        flex: 1 1 calc(50% - 10px); /* 50% width minus half the gap */
        max-width: calc(50% - 10px);
        margin-bottom: 0;
    }

    /* Adjust inputs inside .form-group within these rows for proper sizing */
    .form-row-2-col .form-group input[type="text"],
    .form-row-2-col .form-group input[type="email"],
    .form-row-2-col .form-group input[type="tel"],
    .form-row-2-col .form-group input[type="number"],
    .form-row-2-col .form-group input[type="date"],
    .form-row-2-col .form-group select,
    .form-row-2-col .form-group textarea,
    .form-row-3-col .form-group input[type="text"],
    .form-row-3-col .form-group input[type="email"],
    .form-row-3-col .form-group input[type="tel"],
    .form-row-3-col .form-group input[type="number"],
    .form-row-3-col .form-group input[type="date"],
    .form-row-3-col .form-group select,
    .form-row-3-col .form-group textarea,
    .form-row-4-col .form-group input[type="text"],
    .form-row-4-col .form-group input[type="email"],
    .form-row-4-col .form-group input[type="tel"],
    .form-row-4-col .form-group input[type="number"],
    .form-row-4-col .form-group input[type="date"],
    .form-row-4-col .form-group select,
    .form-row-4-col .form-group textarea {
        width: 100%;
    }
}

/* Desktop (min-width: 992px, or adjust as needed for larger screens):
   - 3 columns for .form-row-3-col
   - 4 columns for .form-row-4-col
*/
@media (min-width: 992px) { /* A common desktop breakpoint */
    .form-row-3-col {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 15px;
    }
    .form-row-3-col .form-group {
        flex: 1 1 calc(33.333% - 13.333px);
        max-width: calc(33.333% - 13.333px);
        margin-bottom: 0;
    }

    .form-row-4-col {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 15px;
    }
    .form-row-4-col .form-group {
        flex: 1 1 calc(25% - 15px);
        max-width: calc(25% - 15px);
        margin-bottom: 0;
    }
}


/* --- Desktop Styles for Add More Sections (min-width: 769px) --- */
@media (min-width: 769px) {

    /* Flexbox for individual field groups within repeatable items (on desktop) */
    .form-group-inline {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 150px;
        margin-bottom: 0;
    }
    .form-group-inline label {
        display: block; 
        margin-bottom: 5px;
        margin-right: 0;
        white-space: normal;
    }
    .form-group-inline input,
    .form-group-inline select,
    .form-group-inline textarea {
        width: 100%;
        margin-bottom: 0;
    }

    /* Adjust checkbox/radio labels within repeatable items for desktop */
    .form-group-inline input[type="checkbox"],
    .form-group-inline input[type="radio"] {
        width: auto;
        flex: none;
        margin-right: 5px;
    }
    .form-group-inline input[type="checkbox"] + label,
    .form-group-inline input[type="radio"] + label {
        display: inline-block; 
        margin-right: 15px;
        margin-bottom: 0;
        white-space: nowrap;
    }
}


/* Common styles for form messages */
#form-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
    display: none;
}
#form-message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
#form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* General responsive adjustment for overall form wrapper and buttons (mobile-first) */
@media (max-width: 768px) {
    #arva-job-application-form-wrapper {
        margin: 10px;
        padding: 15px;
    }
    #arva-job-application-form input[type="text"],
    #arva-job-application-form input[type="email"],
    #arva-job-application-form input[type="tel"],
    #arva-job-application-form input[type="number"],
    #arva-job-application-form input[type="date"],
    #arva-job-application-form select,
    #arva-job-application-form textarea {
        width: calc(100% - 20px);
    }
    #arva-job-application-form button {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
    }
}