.elementor-9970 .elementor-element.elementor-element-63b5739:not(.elementor-motion-effects-element-type-background), .elementor-9970 .elementor-element.elementor-element-63b5739 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-f991eb1 );}.elementor-9970 .elementor-element.elementor-element-63b5739{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-9970 .elementor-element.elementor-element-63b5739 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9970 .elementor-element.elementor-element-7ab5b2d > .elementor-element-populated{padding:50px 50px 50px 50px;}.elementor-9970 .elementor-element.elementor-element-45b1e78 .current-progress{background-color:var( --e-global-color-primary );}.elementor-9970 .elementor-element.elementor-element-45b1e78 .elementor-scrolling-tracker-horizontal{background-color:var( --e-global-color-secondary );}.elementor-9970 .elementor-element.elementor-element-45b1e78{--percentage-color:var( --e-global-color-accent );--horizontal-progress-border:none;--progress-border-radius:50px 50px 50px 50px;--horizontal-height:40px;--horizontal-border-style:none;--border-radius:30px 30px 30px 30px;}.elementor-9970 .elementor-element.elementor-element-0ebd488{text-align:center;}/* Start custom CSS *//*
========================================
Clarity Accord CSS for Directorist v4.2
THE "CLARITY CARD" DEFINITIVE EDITION
========================================
*/

/* --- 1. GLOBAL FORM & LAYOUT CONTROL --- */

/* Reset the form to create a counter for our steps */
#directorist-add-listing-form {
    counter-reset: section-counter;
}

/* Hide all the plugin's native navigation and clutter */
.multistep-wizard__nav,
.multistep-wizard__count,
.multistep-wizard__progressbar,
.multistep-wizard__btn--prev {
    /* CHANGE: We have removed .default-add-listing-bottom from this list to ensure the final submit button container is visible. */
    display: none !important;
}

/* Center the main form content on the page */
.multistep-wizard__content {
    width: 100% !important;
    max-width: 850px !important;
    margin: 40px auto !important;
    padding: 0 !important;
}


/* --- 2. THE "CLARITY CARD" STYLING --- */

section.directorist-form-section {
    background: #FFFFFF;
    border: 1px solid var(--color-border-light, #E9ECEF);
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 40px !important;
    margin-bottom: 50px;
}

/* --- 3. THE DYNAMIC STEP-COUNTER HEADERS --- */

header.directorist-content-module__title {
    border-bottom: none !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

header.directorist-content-module__title h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: var(--color-text-dark, #2C3140) !important;
    line-height: 1.3 !important;
}

header.directorist-content-module__title h2::before {
    counter-increment: section-counter;
    content: 'Step ' counter(section-counter) ' of 5';
    display: block;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--color-accent-green, #24847C);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- 4. THE GUARANTEED STRONG INPUT FIELDS --- */

.directorist-form-group label.directorist-form-label {
    font-weight: 500 !important;
    text-align: left;
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
    display: inline-block;
}

#directorist-add-listing-form .directorist-form-element,
#directorist-add-listing-form .select2-selection--multiple {
    border: 2px solid #dde1e6 !important;
    background: var(--color-background-offwhite, #F8F9FA) !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
}

#directorist-add-listing-form .directorist-form-element:focus,
#directorist-add-listing-form .select2-container--open .select2-selection--multiple {
    border-color: var(--color-accent-green, #24847C) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(36, 132, 124, 0.2) !important;
}


/* --- 5. THE CLEAN BOTTOM NAVIGATION --- */
.multistep-wizard__bottom,
/* CHANGE: Apply the same flexbox logic to the final submit button container */
.default-add-listing-bottom .directorist-form-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding-top: 20px !important; /* Added some top padding for separation */
    margin-top: 0 !important;
    border-top: 1px solid var(--color-border-light, #E9ECEF) !important;
}

/* Primary "Next" and "Submit" buttons */
.multistep-wizard__btn--next,
.multistep-wizard__btn--save-preview,
/* CHANGE: Added the body.elementor-page-9970 for the final submit button to give it the same primary style */
.directorist-form-submit-btn button {
    background-color: var(--color-accent-green, #24847C) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    order: 2;
}
.multistep-wizard__btn--next:hover,
.multistep-wizard__btn--save-preview:hover,
.directorist-form-submit-btn button:hover {
    background-color: var(--color-text-dark, #2C3140) !important;
    transform: translateY(-2px);
}

/* Secondary "Save & Preview" button */
.multistep-wizard__btn--skip-preview {
    background-color: transparent !important;
    color: var(--color-accent-green, #24847C) !important;
    border: 2px solid var(--color-accent-green, #24847C) !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    order: 1;
}
.multistep-wizard__btn--skip-preview:hover {
    background-color: var(--color-accent-green, #24847C) !important;
    color: white !important;
    transform: translateY(-2px);
}/* End custom CSS */