/* =========================================================
MPR WEBFORMS - SHARED STYLES
========================================================= */


/* =========================================================
Webform Block Heading
========================================================= */

.block-webform-block > h2 {
    margin: 0;
    padding: 10px 15px;
    background: var(--mp-blue);
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    border-radius: 4px 4px 0 0;
}


/* =========================================================
MPR Webform - Progress Tracker
========================================================= */

.mpr-webform .webform-progress {
    max-width: 900px;
    margin: 0 auto 1.5rem;
}

.mpr-webform .progress-tracker {
    margin: 0 auto;
    padding: 1rem 0;
}

/* Completed step */
.mpr-webform .progress-step.is-complete .progress-marker::before,
.mpr-webform .progress-step.is-complete .progress-marker::after {
    background-color: var(--mp-blue);
}

.mpr-webform .progress-step.is-complete .progress-text {
    color: var(--mp-blue);
}

/* Active step */
.mpr-webform .progress-step.is-active .progress-marker::before {
    background-color: var(--mp-blue-light);
}

.mpr-webform .progress-step.is-active .progress-text {
    color: var(--mp-blue-light);
    font-weight: 700;
}

/* Upcoming step */
.mpr-webform .progress-step:not(.is-active):not(.is-complete) .progress-marker::before,
.mpr-webform .progress-step:not(.is-active):not(.is-complete) .progress-marker::after {
    background-color: #b8c2c9;
}

.mpr-webform .progress-step:not(.is-active):not(.is-complete) .progress-text {
    color: #8a949b;
}

/* =========================================================
MPR Webform - Standard Appearance
========================================================= */

.mpr-webform {
    --mpr-form-content-width: 1000px;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    background: #f7f9fb;
    border: 1px solid #d8d8d8;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
}

/* Constrain form content while keeping the outer background full width */
.mpr-webform > * {
    width: 100%;
    max-width: var(--mpr-form-content-width);
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}


/* =========================================================
MPR Webform - Labels & Field Spacing
========================================================= */

.mpr-webform .form-item {
    margin-top: 0;
    margin-bottom: 1.1rem;
}

.mpr-webform label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.mpr-webform legend {
    display: block;
    margin-bottom: 0;
}


/* =========================================================
MPR Webform - Input Fields
========================================================= */

.mpr-webform input[type="text"],
.mpr-webform input[type="email"],
.mpr-webform input[type="tel"],
.mpr-webform input[type="number"],
.mpr-webform input[type="search"],
.mpr-webform input[type="url"],
.mpr-webform textarea,
.mpr-webform select {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0.7rem 0.75rem;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.mpr-webform textarea {
    min-height: 180px;
    resize: vertical;
}

.mpr-webform input:focus,
.mpr-webform textarea:focus,
.mpr-webform select:focus {
    border-color: #00689d;
    outline: 2px solid rgba(0, 104, 157, 0.15);
    outline-offset: 1px;
}

.mpr-webform .mpr-required-note::before {
    content: "*";
    color: #ee0000;
    margin-right: 0.3em;
}

.mpr-webform .mpr-required-note {
    margin: 0;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #444;
}

/* =========================================================
MPR Webform - Buttons / Actions
========================================================= */

.mpr-webform .form-actions {
    margin-top: 1.25rem;
}

.mpr-webform .form-submit {
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: 4px;
    background: #00689d;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}

.mpr-webform .form-submit:hover,
.mpr-webform .form-submit:focus,
.mpr-webform .form-submit:active {
    background: #00557f;
    color: #fff;
}


/* =========================================================
MPR Webform - Shared Field Layouts
========================================================= */

/* 50 / 50 row */
.mpr-webform .mpr-form-row--50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

/* 75 / 25 row */
.mpr-webform .mpr-form-row--75-25 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

/* Responsive */
@media (max-width: 700px) {
    .mpr-webform .mpr-form-row--50-50,
    .mpr-webform .mpr-form-row--75-25 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
MPR Webform - Email Confirm Layout
========================================================= */

.mpr-webform .webform-type-webform-email-confirm .fieldset-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

@media (max-width: 700px) {
    .mpr-webform .webform-type-webform-email-confirm .fieldset-wrapper {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
MPR Webform - Email Confirm Cleanup
========================================================= */

.mpr-webform .webform-type-webform-email-confirm {
    width: 100%;
    max-width: var(--mpr-form-content-width);
    margin: 0 auto 1.2rem;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

.mpr-webform .webform-type-webform-email-confirm > legend {
    border: 0;
    margin: 0;
    padding: 0;
    height: 0;
}


/* =========================================================
MPR Webform - Common Content Elements
========================================================= */

.mpr-webform .form_sub_heading {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}

.mpr-webform .webform_item_headline {
    font-size: 14px;
    font-style: italic;
}

.mpr-webform .mp-heading-2 {
    margin-bottom: 10px;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.mpr-webform hr {
    border-top: 1px solid #a7a7a7;
}

.mpr-webform .mpr-form-note {
    margin: 0.8rem 0 1rem;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #333;
}

/* =========================================================
MPR Webform - Disclaimer
========================================================= */

.mpr-webform .mpr-form-disclaimer {
    margin: 0;
    padding-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.5;
    font-style: italic;
    color: #555;
}