# mlsimport/7.2.1/admin/css/mlsimport-onboarding.css

MLSImport: IDX Plugin & MLS Plugin for Real Estate Listings, version 7.2.1. 1,218 lines.

- Page: https://pluginprobe.com/plugins/mlsimport/7.2.1/code/admin/css/mlsimport-onboarding.css
- Raw: https://pluginprobe.com/plugins/mlsimport/7.2.1/raw/admin/css/mlsimport-onboarding.css
- Modified: 2026-09-10T13:22:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/mlsimport/7.2.1/code/admin/css/mlsimport-onboarding.css#L10-L20`.

```css
/**
 * MLSImport Onboarding Wizard Styles - Modern Design
 *
 * Skins the 6-step onboarding wizard (admin.php?page=mlsimport-onboarding):
 * a full-screen fixed overlay that sits above wp-admin, with a progress bar,
 * numbered step indicators, forms, connection-test panels, an import log,
 * field-mapping tables and a success screen.
 *
 * Colours/spacing come from CSS custom properties (--primary-color,
 * --text-primary, --background-white, --shadow-sm, --transition-speed, etc.)
 * that are defined elsewhere (the wizard partial / a shared variables sheet),
 * NOT in this file — so most values here are token references.
 */

/* Import Inter font (remote Google Fonts import — the wizard's base typeface). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Lock the wp-admin body from scrolling while the fixed wizard overlay is up. */
.admin_page_mlsimport-onboarding {
    overflow: hidden;
}


/* Main Wrapper — full-viewport fixed overlay pinned above wp-admin chrome
   (very high z-index), scrolls internally on the y-axis.

   Column flex so the help/restart footer can be pushed to the bottom edge on
   short steps (see .mlsimport-wizard-footer margin-top:auto) instead of ending
   mid-screen with blank space under it. Flex items keep min-height:auto, so
   tall steps still grow past the viewport and scroll normally. */
.mlsimport-wizard-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--background-white);
    z-index: 999999;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
    line-height: 1.5;
}


.mlsimport-wizard-header-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px;
    background: var(--background-soft);
}


.mlsimport-wizard-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    border-radius: 50%;
}

.mlsimport-wizard-close:hover {
    background-color: var(--background-light);
    color: var(--error-color);
}





/* Suppress stray wp-admin notices while the wizard is active.
   NOTE: despite the "Hide" label these declarations set display:inline-block
   (not none), so the effect here is cosmetic layout rather than true hiding. */
body.mlsimport-wizard-active .notice,
body.mlsimport-wizard-active .update-nag,
body.mlsimport-wizard-active #message,
body.mlsimport-wizard-active .updated,
body.mlsimport-wizard-active .error,
body.mlsimport-wizard-active .is-dismissible {
    display: inline-block;
    font-weight: 500;
    margin-right: 0.5rem;
}

/* Import config styling */
.mlsimport-filter-group {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}


.mlsimport-config-intro,
.mlsimport-test-intro {
    font-size: 0.938rem;
    margin-bottom: 1.5rem;
}

.mlsimport-import-summary {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.mlsimport-import-summary p {
    margin: 0.375rem 0;
}

.mlsimport-config-note {
    background-color: rgba(28, 25, 23, 0.05);
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin-top: 1.25rem;
    border-radius: 10px;
}

.mlsimport-config-note p {
    margin: 0;
    color: var(--text-secondary);
}

/* Status indicators */
.mlsimport-status-success {
    color: var(--success-deep);
    font-weight: 600;
}

.mlsimport-status-progress {
    color: var(--warning-color);
    font-weight: 600;
}

.mlsimport-status-pending {
    color: var(--text-light);
    font-weight: 600;
}

/* Success page specific */
.mlsimport-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
}

.mlsimport-summary-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
    background-color: var(--background-white);
    border-radius: var(--radius-card);
    padding: 1rem;
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.05), 0 5px 22px rgba(28, 25, 23, 0.05);
}

.mlsimport-summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.mlsimport-summary-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.mlsimport-next-steps {
    margin: 2rem 0;
}

.mlsimport-steps-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mlsimport-next-step {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background-color: var(--background-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.05), 0 5px 22px rgba(28, 25, 23, 0.05);
}

.mlsimport-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    margin-right: 1rem;
    flex-shrink: 0;
}

.mlsimport-step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.mlsimport-step-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mlsimport-finish-actions {
    text-align: center;
    margin-top: 2rem;
}

/* The closing CTA is the same pill, one size up on padding only - it is the
   single action on that step, so it may sit wider, but not on a different
   type scale than every other button in the plugin. */
.mlsimport-finish-button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
    padding: 11px 32px !important;
    border-radius: var(--radius-pill, 999px) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    font-weight: 500 !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: all var(--transition-speed) ease !important;
}

.mlsimport-finish-button:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45) !important;
}

/* Error handling */
.mlsimport-error-notice {
    background-color: var(--error-soft);
    border-left: 4px solid var(--error-color);
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
}

.mlsimport-error-notice p {
    margin: 0;
    color: var(--error-color);
}

/* Responsive adjustments */
@media (max-width: 782px) {
    .mlsimport-wizard-step-title {
        display: none;
    }
    
    .mlsimport-wizard-content {
        padding: 1rem;
    }
    
    .mlsimport-content-body .form-table th {
        padding-bottom: 0;
    }

    .mlsimport-links-grid,
    .mlsimport-resources-grid,
    .mlsimport-summary-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
    

    .mlsimport-quick-link,
    .mlsimport-resource-link,
    .mlsimport-summary-item {
        min-width: auto;
    }
    
    .mlsimport-price-fields {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mlsimport-wizard-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mlsimport-wizard-next,
    .mlsimport-wizard-submit {
        width: 100%;
        text-align: center;
    }
}


/* Header bar styling */
.mlsimport-wizard-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
    background-color: var(--background-white);
    box-shadow: var(--shadow-sm);
}



/* Progress bar and step indicators */
.mlsimport-wizard-header {
    padding: 15px 30px;
    background-color: var(--background-white);
    border-bottom: 1px solid var(--border-color);
}

.mlsimport-wizard-progress-bar {
    height: 6px;
    background-color: var(--background-light);
    margin-bottom: 24px;
    border-radius: 10px;
    overflow: hidden;
}

.mlsimport-wizard-progress-bar-inner {
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.mlsimport-wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

/* Step indicators with connecting lines */
.mlsimport-wizard-steps::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--border-color);
    z-index: 1;
}

.mlsimport-wizard-step {
    text-align: center;
    position: relative;
    flex: 1;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    z-index: 2;
}

.mlsimport-wizard-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: var(--background-light);
    color: var(--text-light);
    font-weight: 600;
    position: relative;
    z-index: 2;
    border: 2px solid var(--border-color);
    transition: all var(--transition-speed) ease;
}

.mlsimport-wizard-step.active .mlsimport-wizard-step-number {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgb(232 93 60 / 13%);
}

/* Mint surface with deep-green text, the portal's success pattern. The saturated
   --success-color is a dot/glyph accent there, never a filled surface. */
.mlsimport-wizard-step.completed .mlsimport-wizard-step-number {
    background: var(--success-soft);
    color: var(--success-deep);
    border-color: var(--success-soft);
}

/* Create checkmark for completed steps */
.mlsimport-wizard-step.completed .mlsimport-wizard-step-number::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.mlsimport-wizard-step.completed .mlsimport-wizard-step-number {
    font-size: 0;
}

.mlsimport-wizard-step-title {
    font-size: 0.75rem;
    color: var(--text-light);
    max-width: 170px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    transition: all var(--transition-speed) ease;
}

.mlsimport-wizard-step.active .mlsimport-wizard-step-title {
    color: var(--accent-color);
    font-weight: 600;
}

.mlsimport-wizard-step.completed .mlsimport-wizard-step-title {
    color: var(--success-deep);
}

.mlsimport-wizard-step:hover .mlsimport-wizard-step-number {
    transform: scale(1.1);
}

/* Content Area — the wrap is a flex column, so this card is a flex item:
   width:100% or it would shrink-to-fit its text instead of filling out to
   max-width, and flex-grow:0 to cancel the grow it inherits from
   .mlsimport_2025_card (otherwise the card swallows the space that must go
   under it to push the footer down). */
.mlsimport-wizard-content {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 0;
    max-width: 900px;
    margin: 0 auto;
}

.mlsimport-wizard-content-30margin{
    box-sizing: border-box;
    margin: 30px auto;
}

.mlsimport-wizard-content-field-mapping{
    width: 100%;
    max-width: unset;
    margin: 30px 0px;
}

.mlsimport-wizard-content-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.mlsimport-wizard-content-header h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mlsimport-wizard-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0;
}

/* Form Styling */
.mlsimport-wizard-title{
    font-size: 25px;
}
.mlsimport-wizard-content-body .form-table {
    margin-top: 0;
}

.mlsimport-wizard-content-body .form-table th {
    width: 30%;
    font-weight: 500;
    color: var(--text-primary);
}

.mlsimport-wizard-content-body input[type="text"],
.mlsimport-wizard-content-body input[type="password"],
.mlsimport-wizard-content-body select {
    width: 90%;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--background-white);
    color: var(--text-primary);
    transition: all var(--transition-speed) ease;
}

.mlsimport-wizard-content-body input[type="text"],
.mlsimport-wizard-content-body input[type="password"] {
    padding: 0.5rem 0.75rem!important;
}

/* The dropdown cannot share the inputs' 8px vertical padding. wp-admin core
   gives every select `line-height: 2.71429` - a 38px line box at 14px - inside
   a 40px border-box control, so 8px top and bottom left the text only 22px to
   sit in and the option label was clipped by the bottom border. Zero vertical
   padding lets the 38px line box centre itself in the 38px content box; the
   right padding keeps the chevron clear of the text. Multi-selects are
   excluded - they size to their rows. */
.mlsimport-wizard-content-body select:not([multiple]) {
    height: 40px;
    min-height: 40px;
    line-height: 38px;
    padding: 0 2rem 0 0.75rem!important;
}

.mlsimport-wizard-content-body input[type="text"]:focus,
.mlsimport-wizard-content-body input[type="password"]:focus,
.mlsimport-wizard-content-body select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(232, 93, 60, 0.2);
}

.mlsimport-wizard-field-group {
    margin-bottom: 1.25rem;
}

.mlsimport-wizard-field-label {
    font-weight: 500;
    margin-bottom: 0.375rem;
    display: block;
    color: var(--text-primary);
}

.mlsimport-wizard-field-help {
    color: var(--text-light);
    font-size: 0.813rem;
    margin-top: 0.375rem;
}

/* Action Buttons */
.mlsimport-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1.875rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.mlsimport-wizard-next,
.mlsimport-wizard-submit {
    padding: 0.5rem 1.25rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 999px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.mlsimport-wizard-next:hover,
.mlsimport-wizard-submit:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}

/* Footer — last flex child of the wrap. margin-top:auto eats the leftover
   vertical space, so on short steps the bar sits on the bottom edge of the
   viewport, and on tall steps it simply follows the content. */
.mlsimport-wizard-footer {
    margin-top: auto;
    padding: 1rem 1.5rem;
    background-color: var(--background-light);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
    font-size: 0.813rem;
}

.mlsimport-wizard-restart {
    color: var(--error-color);
    font-size: 0.75rem;
}

.mlsimport-restart-link {
    color: var(--error-color);
    text-decoration: none;
}

.mlsimport-restart-link:hover {
    text-decoration: underline;
}

/* Step-specific Styling */
.mlsimport-connection-test {
    margin: 1.25rem 0;
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--background-light);
    border-left: 4px solid rgba(28, 25, 23, 0.18);
}

.mlsimport-connection-test.success {
    border-color: var(--success-deep);
    background-color: var(--success-soft);
}

.mlsimport-connection-test.error {
    border-color: var(--error-color);
    background-color: var(--error-soft);
}

.mlsimport-connection-test p {
    margin: 0;
}

.mlsimport-test-button {
    margin-top: 0.625rem !important;
}

/* Log Display */
.mlsimport-log-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 1rem 0;
}

.mlsimport-log-entry {
    margin-bottom: 0.313rem;
    padding-bottom: 0.313rem;
    border-bottom: 1px dotted var(--border-color);
}

.mlsimport-log-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mlsimport-log-success {
    color: var(--success-deep);
}

.mlsimport-log-error {
    color: var(--error-color);
}

.mlsimport-log-warning {
    color: var(--warning-color);
}

/* Loading Spinner */
.mlsimport-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 0.625rem;
    border: 2px solid rgba(28, 25, 23, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: mlsimport-spin 1s linear infinite;
}

@keyframes mlsimport-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Card Styling */
.mlsimport-card {
    background-color: var(--background-white);
    border-radius: var(--radius-card);
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.05), 0 5px 22px rgba(28, 25, 23, 0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.mlsimport-card-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.mlsimport-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Notification messages */
.mlsimport-message {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.mlsimport-message-success {
    background-color: var(--success-soft);
    border-left: 4px solid var(--success-deep);
    color: var(--success-deep);
}

.mlsimport-message-error {
    background-color: var(--error-soft);
    border-left: 4px solid var(--error-color);
    color: var(--error-color);
}

.mlsimport-message-warning {
    background-color: var(--warning-soft);
    border-left: 4px solid var(--warning-color);
    color: var(--warning-color);
}

.mlsimport-message-info {
    background-color: rgba(28, 25, 23, 0.1);
    border-left: 4px solid var(--primary-color);
    color: var(--primary-color);
}

/* Autocomplete menu styling */
.mlsimport-autocomplete-menu {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background-color: var(--background-white);
    z-index: 999999;
}

.ui-menu-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--transition-speed) ease;
}

.ui-menu-item:hover {
    background-color: var(--background-light);
}

.ui-menu-item.ui-state-focus {
    background-color: var(--accent-soft);
    color: var(--accent-color);
    margin: 0;
}

/* Welcome page styling */


.mlsimport-welcome-intro {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.mlsimport-welcome-note {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.mlsimport-requirements-check {
    margin-top: 2rem;
}

.mlsimport-requirements-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.mlsimport-requirements-table th {
    background-color: var(--background-light);
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.mlsimport-requirements-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.mlsimport-requirements-table tr:last-child td {
    border-bottom: none;
}

.mlsimport-requirement-status.success {
    color: var(--success-deep);
}

.mlsimport-requirement-status.error {
    color: var(--error-color);
}

.mlsimport-warning-message {
    background-color: var(--warning-soft);
    border-left: 4px solid var(--warning-color);
    padding: 1rem;
    margin: 1.25rem 0;
    border-radius: 10px;
}

.mlsimport-success-message {
    background-color: var(--success-soft);
    border-left: 4px solid var(--success-deep);
    padding: 1rem;
    margin: 1.25rem 0;
    border-radius: 10px;
}

/* Success page styling */
.mlsimport-success-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    background-color: var(--success-soft);
    padding: 1.5rem;
    border-radius: var(--radius-card);
}

.mlsimport-success-icon {
    margin-right: 1.25rem;
}

.mlsimport-success-icon .dashicons {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    color: var(--success-deep);
}

.mlsimport-links-grid,
.mlsimport-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mlsimport-quick-link,
.mlsimport-resource-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius-card);
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
    transition: all var(--transition-speed) ease;
    color: var(--text-primary);
}

.mlsimport-quick-link:hover,
.mlsimport-resource-link:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(28, 25, 23, 0.05), 0 5px 22px rgba(28, 25, 23, 0.05);
}

.mlsimport-quick-link-icon .dashicons,
.mlsimport-resource-icon .dashicons {
    color: var(--accent-color);
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}

/* Test import page styling */
.mlsimport-status-message {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.25rem;
}

.mlsimport-status-message.success {
    background-color: var(--success-soft);
    border-left: 4px solid var(--success-deep);
}

.mlsimport-status-message.error {
    background-color: var(--error-soft);
    border-left: 4px solid var(--error-color);
}

.mlsimport-status-message.warning {
    background-color: var(--warning-soft);
    border-left: 4px solid var(--warning-color);
}

.mlsimport-status-message.progress {
    background-color: rgba(28, 25, 23, 0.1);
    border-left: 4px solid var(--primary-color);
}

.mlsimport-progress-bar {
    height: 8px;
    background-color: var(--background-light);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.75rem;
    margin-bottom: 15px;
}

.mlsimport-progress-bar-inner {
    height: 100%;
    background-color: var(--accent-color);
    width: 0;
    transition: width 0.3s ease;
}

/* Field mapping styling */
.mlsimport-mapping-intro {
    font-size: 0.938rem;
    margin-bottom: 1.5rem;
}

.mlsimport-section-inner {
    margin-bottom: 2rem;
}

.mlsimport-section-inner h3 {
    margin-top: 0;
    padding-bottom: 0.625rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.mlsimport-mapping-tips {
    background-color: rgba(28, 25, 23, 0.05);
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin-top: 1.25rem;
    border-radius: 10px;
}

.mlsimport-mapping-tips h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    border-bottom: none;
    padding-bottom: 0;
}

/* Field selection interface */
.mlsimport-field-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mlsimport-field-filters .button {
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 999px;
    transition: all var(--transition-speed) ease;
}

.mlsimport-field-filters .button:hover {
    background-color: var(--background-soft);
}

.mlsimport-field-filters .button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.mlsimport-field-search {
    margin-bottom: 1rem;
}

.mlsimport-field-search input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.mlsimport-field-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.mlsimport-field-table th {
    background-color: var(--background-light);
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.mlsimport-field-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.mlsimport-field-table tr:last-child td {
    border-bottom: none;
}

.mlsimport-field-table input[type="checkbox"] {
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.mlsimport-field-table input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Account verification styling */
.mlsimport_warning {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--error-soft);
    border-left: 4px solid var(--error-color);
    color: var(--text-primary);
}

.mlsimport_warning.mlsimport_validated {
    background-color: var(--success-soft);
    border-left: 4px solid var(--success-deep);
}

.mlsimport-fieldset {
    margin-bottom: 1.25rem;
}


.mlsimport-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: all var(--transition-speed) ease;
}

.mlsimport-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(232, 93, 60, 0.2);
}

/* Same pill as .button.mlsimport_button everywhere else in the plugin. These
   buttons only carried .button.button-primary, so they kept wp-admin core's
   13px text and 38px line-height and rendered 54px tall - 13px taller than the
   Back / Continue pills in this wizard's own footer. Geometry (14px text, 1.5
   line-height, 9px 24px padding, 1px border, hairline shadow) is copied from
   the portal standard so the two match exactly. */
.mlsimport-save-account,
.mlsimport-create-account,
.mlsimport-save-mls-data {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
    padding: 9px 24px !important;
    border-radius: var(--radius-pill, 999px) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    font-weight: 500 !important;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: all var(--transition-speed) ease !important;
    margin-top: 0.5rem !important;
}

.mlsimport-save-account:hover,
.mlsimport-create-account:hover,
.mlsimport-save-mls-data:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45) !important;
}

/* Import configuration styling */
.mlsimport-price-fields {
    display: flex;
    gap: 1rem;
}

.mlsimport-min-price,
.mlsimport-max-price {
    flex: 1;
}



/* Legacy welcome/requirements overrides — a second pass of rules (plain hex,
   collapsed table borders) that re-declare selectors already styled above with
   design tokens. Later source order means these win where they overlap. */
.mlsimport-welcome-intro {
    font-size: 16px;
    line-height: 1.5;
}

.mlsimport-welcome-features {
    margin: 20px 0;
}

.mlsimport-welcome-features ul {
    margin-left: 20px;
}

.mlsimport-welcome-features li {
    margin-bottom: 10px;
    list-style: circle;
}

.mlsimport-requirements-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.mlsimport-requirements-table th {
    text-align: left;
    padding: 10px;
}

.mlsimport-requirements-table td {
    padding: 10px;
}

.mlsimport-requirement-status.success {
    color: var(--success-deep);
}

.mlsimport-requirement-status.error {
    color: var(--error-color);
}

.mlsimport-requirement-help td {
    background-color: var(--background-soft);
    font-style: italic;
    padding-top: 0;
}

.mlsimport-warning-message {
    background-color: var(--warning-soft);
    border-left: 4px solid var(--warning-color);
    padding: 12px;
    margin: 20px 0;
}

.mlsimport-success-message {
    background-color: var(--success-soft);
    border-left: 4px solid var(--success-deep);
    padding: 12px;
    margin: 20px 0;
}

.mlsimport-welcome-note {
    margin-top: 30px;
    background-color: var(--background-soft);
    padding: 15px;
    border-radius: 10px;
}

.mlsimport-welcome-note ul {
    margin-left: 20px;
}

.mlsimport-welcome-note li {
    margin-bottom: 5px;
    list-style: disc;
}

```