/* Basic Styling for Tabs */
.vendor-onboarding-form-wrapper {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

.vendor-onboarding-tab-navigation {
    display: flex;
    flex-wrap: wrap; /* Allows tabs to wrap on smaller screens */
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.vendor-onboarding-tab-navigation .tab-button {
    background-color: #f1f1f1;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 16px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-right: 2px;
    margin-bottom: -2px; /* Pulls tab button slightly over the border */
    flex-grow: 1; /* Allows buttons to grow and fill space */
    white-space: nowrap; /* Prevent text wrapping within a tab button */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
}

.vendor-onboarding-tab-navigation .tab-button:hover {
    background-color: #e0e0e0;
}

.vendor-onboarding-tab-navigation .tab-button.active {
    background-color: #0073aa; /* WordPress primary blue */
    color: white;
    border-bottom: 2px solid #0073aa;
}

.form-section.tab-content {
    padding: 20px 0;
    border: 1px solid #ddd; /* Add a subtle border around content area */
    border-top: none; /* No top border, as the tab navigation provides it */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    background-color: #fafafa;
}

/* General form element styling */
.vendor-onboarding-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}
.vendor-onboarding-form input[type="text"],
.vendor-onboarding-form input[type="email"],
.vendor-onboarding-form input[type="url"],
.vendor-onboarding-form input[type="number"],
.vendor-onboarding-form input[type="date"],
.vendor-onboarding-form select,
.vendor-onboarding-form textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding in width */
}
.vendor-onboarding-form textarea {
    min-height: 80px;
    resize: vertical;
}
.vendor-onboarding-form .button-primary,
.vendor-onboarding-form .button-secondary,
.vendor-onboarding-form button[type="submit"],
.vendor-onboarding-form .button-remove {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}
.vendor-onboarding-form .button-primary,
.vendor-onboarding-form button[type="submit"] {
    background-color: #0073aa;
    color: white;
    border: none;
}
.vendor-onboarding-form .button-primary:hover,
.vendor-onboarding-form button[type="submit"]:hover {
    background-color: #005177;
}
.vendor-onboarding-form .button-secondary {
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #ccc;
}
.vendor-onboarding-form .button-secondary:hover {
    background-color: #d0d0d0;
}
.vendor-onboarding-form .button-remove {
    background-color: #dc3232;
    color: white;
    border: none;
    float: right; /* Align remove buttons to the right */
}
.vendor-onboarding-form .button-remove:hover {
    background-color: #b30000;
}
.clear-both {
    clear: both;
}
.form-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    background-color: #fcfcfc;
    border-radius: 5px;
}
.form-section .section-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}
.required-star, .text-red-500 {
    color: red;
}
.radio-group label, .checkbox-group label {
    display: inline-block;
    margin-left: 5px;
    font-weight: normal;
}
.radio-group input[type="radio"], .checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}
.vendor-onboarding-message {
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
}
.vendor-onboarding-message.success {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;
}
.vendor-onboarding-message.error {
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

/* Styles for WordPress media uploader integration */
.wp-media-upload-wrapper img {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.wp-media-upload-wrapper button {
    margin-right: 10px;
}

/* Client-side validation highlighting */
.error-highlight {
    border: 1px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}
.validation-error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 5px;
}