/*
 * Premier Property Organizer — account pages, forms, the account modal, and
 * the favorite heart on every connector card.
 *
 * Scoped under .mxb-pml-organizer so nothing leaks into the theme. Typography,
 * page chrome and colours come from the active Premier/Agent Image theme; only
 * layout, spacing and states are set here. No Bootstrap or vendor classes.
 */

.mxb-pml-organizer {
    box-sizing: border-box;
    color: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.mxb-pml-organizer *,
.mxb-pml-organizer *::before,
.mxb-pml-organizer *::after {
    box-sizing: inherit;
}

/* Strong, consistent focus indicators. */
.mxb-pml-organizer a:focus-visible,
.mxb-pml-organizer button:focus-visible,
.mxb-pml-organizer input:focus-visible,
.mxb-pml-organizer select:focus-visible,
.mxb-pml-organizer textarea:focus-visible,
.mxb-pml-organizer [tabindex]:focus-visible,
.mxb-pml-card-favorite:focus-visible,
.mxb-pml-organizer-cta:focus-visible {
    outline: 3px solid #1a5fb4;
    outline-offset: 2px;
}

.mxb-pml-organizer__intro {
    margin: 0 0 20px;
}

.mxb-pml-organizer__notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 3px solid #8d8d8d;
    background: #f4f4f4;
}

.mxb-pml-organizer__section-heading {
    margin: 25px 0 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* ---- Signed-in account bar ------------------------------------------------ */

.mxb-pml-organizer__account-bar {
    margin: 0 0 10px;
}

.mxb-pml-organizer__utility {
    margin: 0 0 10px;
    font-size: 14px;
    text-align: right;
}

.mxb-pml-organizer__utility a {
    color: inherit;
}

.mxb-pml-organizer__utility-sep {
    margin: 0 6px;
}

.mxb-pml-organizer__tab-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.mxb-pml-organizer__tab-item {
    margin: 0;
    padding: 0;
}

.mxb-pml-organizer__tab {
    display: block;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid #222;
    background: #222;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.mxb-pml-organizer__tab-item + .mxb-pml-organizer__tab-item .mxb-pml-organizer__tab {
    border-left-color: #555;
}

.mxb-pml-organizer__tab:hover,
.mxb-pml-organizer__tab:focus {
    background: #555;
    color: #fff;
}

.mxb-pml-organizer__tab.is-active {
    background: #fff;
    color: #222;
    box-shadow: inset 0 -3px 0 #222;
}

/* ---- Forms ---------------------------------------------------------------- */

.mxb-pml-organizer__form {
    margin: 0 0 24px;
}

.mxb-pml-organizer__field {
    margin: 0 0 16px;
}

.mxb-pml-organizer__field label,
.mxb-pml-organizer__row-label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
}

.mxb-pml-organizer input[type="text"],
.mxb-pml-organizer input[type="email"],
.mxb-pml-organizer input[type="tel"],
.mxb-pml-organizer select,
.mxb-pml-organizer textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #cbd0d6;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font: inherit;
}

.mxb-pml-organizer textarea {
    min-height: 64px;
    resize: vertical;
}

.mxb-pml-organizer [aria-invalid="true"] {
    border-color: #b3261e;
}

.mxb-pml-organizer__field--check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mxb-pml-organizer__field--check label {
    display: inline;
    margin: 0;
}

.mxb-pml-organizer__field-error,
.mxb-pml-organizer__form-status.is-error {
    display: block;
    margin-top: 4px;
    color: #b3261e;
    font-size: 13px;
}

.mxb-pml-organizer__form-status:empty {
    display: none;
}

.mxb-pml-organizer__form-status {
    margin: 0 0 12px;
    font-size: 14px;
}

.mxb-pml-organizer__error-summary {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 2px solid #b3261e;
    color: #b3261e;
}

.mxb-pml-organizer__error-summary ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.mxb-pml-organizer__hint {
    display: block;
    margin: 4px 0 14px;
    color: #555;
    font-size: 13px;
}

.mxb-pml-organizer__hint--center,
.mxb-pml-organizer__actions--center {
    justify-content: center;
    text-align: center;
}

.mxb-pml-organizer__captcha {
    min-height: 78px;
}

.mxb-pml-organizer__field--captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mxb-pml-organizer__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.mxb-pml-organizer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 12px;
}

/* The Premier primary-button treatment. */
.mxb-pml-organizer__button {
    display: inline-block;
    min-height: 44px;
    padding: 11px 26px;
    border: 0;
    border-radius: 0;
    background: #222;
    color: #fff;
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.mxb-pml-organizer__button:hover,
.mxb-pml-organizer__button:focus {
    background: #555;
    color: #fff;
}

.mxb-pml-organizer__button[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.mxb-pml-organizer__button--wide {
    min-width: min(100%, 280px);
    padding: 16px 32px;
    font-size: 18px;
}

.mxb-pml-organizer__button--secondary {
    border: 1px solid #222;
    background: transparent;
    color: #222;
}

.mxb-pml-organizer__button--small {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 12px;
}

.mxb-pml-organizer__button--danger {
    background: #8a1c16;
}

.mxb-pml-organizer__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.mxb-pml-organizer__link--danger {
    color: #8a1c16;
}

.mxb-pml-organizer__danger {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

/* ---- Horizontal forms (Profile, saved-search editor): ~3/9 columns ---------- */

.mxb-pml-organizer__row {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
    margin: 0 0 14px;
}

.mxb-pml-organizer__row-label {
    margin: 0;
    padding-top: 9px;
    font-weight: 600;
    text-align: right;
}

.mxb-pml-organizer__row--offset {
    display: block;
    margin-left: calc(25% + 24px);
}

.mxb-pml-organizer__disclosure {
    color: #555;
    font-size: 13px;
}

.mxb-pml-organizer__disclosure p {
    margin: 0 0 10px;
}

.mxb-pml-organizer__delete {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

/* ---- Account forms (sign-in page and modal) ---------------------------------- */

.mxb-pml-organizer__account-section {
    max-width: 740px;
    margin: 0 auto 36px;
}

.mxb-pml-organizer__account-heading {
    margin: 0 0 22px;
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.mxb-pml-organizer__account-section input[type="text"],
.mxb-pml-organizer__account-section input[type="email"],
.mxb-pml-organizer__account-section input[type="tel"] {
    padding-left: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    border-color: #555;
    background: transparent;
}

/* ---- Account forms, page layout (the production Alerts page composition) ---------- */

/* Registered Users: a grey panel; heading, address + Remember Me, button side by side.
   New Users: heading and description on the left, bordered placeholder fields on the
   right. Labels stay in the DOM for assistive technology; the placeholders carry the
   visible label, as the production page did. */
.mxb-pml-organizer__account--page {
    font-size: 14px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section {
    max-width: none;
    margin: 25px 0 0;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    gap: 0 30px;
    align-items: start;
    padding: 9px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #f5f5f5;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__form,
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__pair--contact {
    display: contents;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-heading {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    text-transform: none;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field,
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field--check,
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__hint,
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__form-status {
    grid-column: 2;
    margin: 0;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field--check {
    margin-top: 5px;
    gap: 5px;
    font-size: 12px;
    line-height: 1.4;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field--check > label {
    font-size: 12px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__hint {
    margin: 6px 0 0;
    font-size: 12px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__form-status:not(:empty) {
    margin-top: 6px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-start;
    margin: 0;
}

/* The modal (Save to Favorites / Save Search) uses the same placeholder-labelled
   fields, so its labels are hidden the same way; a visible label above a placeholder
   with the same text read as every field twice. */
.mxb-pml-organizer__account--page .mxb-pml-organizer__field label:not(.mxb-pml-organizer__field--check label),
.mxb-pml-organizer__account--page .mxb-pml-organizer__field > label,
.mxb-pml-organizer__account--modal .mxb-pml-organizer__field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__field--check > label,
.mxb-pml-organizer__account--modal .mxb-pml-organizer__field--check > label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section input[type="text"],
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section input[type="email"],
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section input[type="tel"] {
    height: 34px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 14px;
    line-height: 20px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section input::placeholder {
    color: #999;
    opacity: 1;
}

/* Buttons: the production page's default (white) sign-in and grey sign-up. */
.mxb-pml-organizer__account--page .mxb-pml-organizer__button {
    min-height: 34px;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    text-transform: none;
    white-space: nowrap;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__button:hover,
.mxb-pml-organizer__account--page .mxb-pml-organizer__button:focus {
    background: #e6e6e6;
    color: #333;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 0 30px;
    align-items: start;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__account-heading {
    grid-column: 1;
    font-weight: 700;
    line-height: 20px;
}

.mxb-pml-organizer__account-blurb {
    grid-column: 1;
    margin: 0;
    line-height: 20px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__form {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__pair--contact {
    display: grid;
}

/* Email spans the row; Phone takes the left half, as on the production page. */
.mxb-pml-organizer__account--page .mxb-pml-organizer__pair--contact > .mxb-pml-organizer__field:first-child {
    grid-column: 1 / -1;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__field {
    margin: 0 0 15px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__field--captcha {
    align-items: flex-start;
    margin: 0 0 15px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__hint {
    margin: 0 0 15px;
    font-size: 12px;
    text-align: left;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__actions {
    justify-content: flex-start;
    margin: 0 0 24px;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__button {
    width: calc(50% - 15px);
    border-color: #777;
    background: #999;
    color: #fff;
}

.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__button:hover,
.mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__button:focus {
    background: #7f7f7f;
}

.mxb-pml-organizer--sign-in .mxb-pml-organizer__help-link {
    margin: 12px 0 24px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__pair {
        grid-template-columns: 1fr;
    }

    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin > *,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field--check,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__hint,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__form-status,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__actions,
    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__form {
        grid-column: 1;
        grid-row: auto;
    }

    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__field {
        margin-top: 8px;
    }

    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signin .mxb-pml-organizer__actions {
        margin-top: 10px;
    }

    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__form {
        margin-top: 15px;
    }

    .mxb-pml-organizer__account--page .mxb-pml-organizer__account-section--signup .mxb-pml-organizer__button {
        width: 100%;
    }
}

/* ---- Dashboard ------------------------------------------------------------------ */

.mxb-pml-organizer__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.mxb-pml-organizer__card a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 88px;
    padding: 20px;
    border: 1px solid #ddd;
    color: inherit;
    text-decoration: none;
}

.mxb-pml-organizer__card a:hover,
.mxb-pml-organizer__card a:focus {
    border-color: #222;
}

/* ---- Saved properties / searches -------------------------------------------------- */

/* Production's list head: "4 Saved Listings" above the map, and on My Searches the
   count at the left with "Create New" at the right. */
.mxb-pml-organizer__list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 24px 0 12px;
    font-size: 15px;
}

/* The map of saved properties, production's size, and desktop-only as its is: on a phone
   the rows themselves are the list, and a 300px map would push them off the screen. */
.mxb-pml-organizer__map {
    height: 300px;
    margin: 0 0 24px;
    background: #e9edf0;
}

.mxb-pml-organizer__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
}

.mxb-pml-organizer__sort select {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
}

.mxb-pml-organizer__map-pin-wrap {
    border: 0;
    background: transparent;
}

.mxb-pml-organizer__map-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #8d8d8d;
    color: #fff;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

/* The number stays upright inside the rotated pin. */
.mxb-pml-organizer__map-pin b {
    font-weight: 500;
    transform: rotate(45deg);
}

@media (max-width: 767px) {
    .mxb-pml-organizer__map {
        display: none;
    }
}

/* One numbered row per favorite: photo, facts, the visitor's own controls. */
.mxb-pml-organizer__saved-rows {
    margin: 0;
    padding: 0;
}

.mxb-pml-organizer__saved-item {
    padding: 18px 0;
    border-top: 1px solid #e5e5e5;
}

.mxb-pml-organizer__saved-item.is-map-selected {
    background: #fbf7f1;
}

.mxb-pml-organizer__saved-address {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--font-family-title, 'Tenor Sans', serif);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mxb-pml-organizer__saved-address a {
    color: #337ab7;
    text-decoration: none;
}

.mxb-pml-organizer__saved-address a:hover,
.mxb-pml-organizer__saved-address a:focus {
    text-decoration: underline;
}

.mxb-pml-organizer__saved-number {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 3px;
    background: #8d8d8d;
    color: #fff;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    text-align: center;
}

.mxb-pml-organizer__saved-body {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.mxb-pml-organizer__saved-photo {
    flex: 0 0 240px;
    max-width: 240px;
}

.mxb-pml-organizer__saved-photo img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    object-position: 50% 50%;
}

.mxb-pml-organizer__saved-facts {
    flex: 1 1 320px;
    min-width: 0;
}

.mxb-pml-organizer__saved-facts p,
.mxb-pml-organizer__saved-facts .mxb-pml-organizer__saved-actions {
    margin: 0 0 8px;
}

.mxb-pml-organizer__saved-price {
    font-size: 22px;
    font-weight: 400;
}

.mxb-pml-organizer__saved-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: #555;
    font-size: 14px;
}

.mxb-pml-organizer__saved-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

/* Comments and Delete sit on one line, as production's do. */
.mxb-pml-organizer__saved-actions .mxb-pml-organizer__inline-form {
    display: inline-flex;
    gap: 8px;
}

.mxb-pml-organizer__saved-rating .mxb-pml-organizer__stars {
    color: #333;
    letter-spacing: 2px;
}

.mxb-pml-organizer__saved-mls,
.mxb-pml-organizer__saved-rating {
    color: #555;
    font-size: 13px;
}

@media (max-width: 575px) {
    .mxb-pml-organizer__saved-photo {
        flex-basis: 100%;
        max-width: none;
    }
}

.mxb-pml-organizer__note {
    margin: 12px 0 0;
}

.mxb-pml-organizer__unavailable {
    margin: 32px 0;
}

.mxb-pml-organizer__unavailable-list,
.mxb-pml-organizer__searches {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mxb-pml-organizer__unavailable-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.mxb-pml-organizer__private-note {
    display: block;
    color: #555;
    font-size: 13px;
}

.mxb-pml-organizer__inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
}

/* Production's saved search is a Bootstrap panel: a bordered white card with the
   primary action at the left, Edit | Delete at the right and one compact criteria
   line underneath. */
.mxb-pml-organizer__search {
    margin: 0 0 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.mxb-pml-organizer__search-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.mxb-pml-organizer__search-actions {
    gap: 8px;
}

.mxb-pml-organizer__search-sep {
    color: #ccc;
}

.mxb-pml-organizer__search-name {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.mxb-pml-organizer__criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.7;
}

.mxb-pml-organizer__help h2 {
    margin: 24px 0 6px;
    font-size: 16px;
}

/* ---- Favorite heart on every connector card ----------------------------------------- */

.listings-entry > .mxb-pml-card-favorite,
.mxb-pml-card > .mxb-pml-card-favorite {
    position: absolute;
    top: 8px;
    right: 9px;
    z-index: 4;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
    cursor: pointer;
}

.listings-entry {
    position: relative;
}

.mxb-pml-card-favorite[aria-busy="true"],
.mxb-pml-organizer-cta[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

/* ---- Save Search on the New York results page -------------------------------------- */

/* The split (Florida) search page styles its own Save Search button; the New York
   results page has only the theme's title wrap, so its button is dressed here in the
   same grey the split page uses. */
.mxb-pml-results-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

.mxb-pml-organizer-save-search {
    display: inline-block;
    min-width: 102px;
    height: 35px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #999;
    color: #fff;
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mxb-pml-organizer-save-search:hover,
.mxb-pml-organizer-save-search:focus {
    border-color: #7f7f7f;
    background: #7f7f7f;
    color: #fff;
}

/* ---- Modal -------------------------------------------------------------------------- */

.mxb-pml-organizer-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.mxb-pml-organizer-modal[hidden] {
    display: none;
}

.mxb-pml-organizer-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.mxb-pml-organizer-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 885px;
    padding: 24px 72px 16px;
    background: #fff;
    color: #111;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.mxb-pml-organizer-modal__dialog:focus {
    outline: none;
}

.mxb-pml-organizer-modal__title {
    margin: 0 0 30px;
    font-size: 42px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.mxb-pml-organizer-modal__close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 32px;
    line-height: 40px;
    cursor: pointer;
}

html.mxb-pml-organizer-modal-open,
html.mxb-pml-organizer-modal-open body {
    overflow: hidden;
}

.mxb-pml-organizer-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ---- Mobile ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    .mxb-pml-organizer__pair,
    .mxb-pml-organizer__row {
        grid-template-columns: 1fr;
    }

    .mxb-pml-organizer__row-label {
        padding-top: 0;
        margin-bottom: 4px;
        text-align: left;
    }

    .mxb-pml-organizer__row--offset {
        margin-left: 0;
    }

    .mxb-pml-organizer__tab {
        padding: 10px 4px;
        font-size: 12px;
    }

    .mxb-pml-organizer-modal {
        padding: 0;
    }

    .mxb-pml-organizer-modal__dialog {
        min-height: 100%;
        padding: 48px 16px 12px;
    }

    .mxb-pml-organizer-modal__title {
        font-size: 28px;
    }

    .mxb-pml-organizer__account-heading {
        font-size: 20px;
    }

    .mxb-pml-organizer__criteria {
        gap: 2px 16px;
    }
}

/* ---- Production button, tab and link chrome --------------------------------------- */

/*
 * Production's organizer is plain Bootstrap 3 and the business asked for the same look,
 * so these override the connector's house style (dark, uppercase, 44px) for the organizer
 * component ONLY — measured on the live page: filled #999 on a #777 border, outline
 * #fff/#ccc with #333 text, link #428bca, all 14px, 4px radius, 6px/12px padding, no
 * uppercase and no letter-spacing. Nothing outside .mxb-pml-organizer* is touched.
 */
.mxb-pml-organizer .mxb-pml-organizer__button,
.mxb-pml-organizer-modal .mxb-pml-organizer__button {
    min-height: 0;
    padding: 6px 12px;
    border: 1px solid #777;
    border-radius: 4px;
    background: #999;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 20px;
    text-transform: none;
}

.mxb-pml-organizer .mxb-pml-organizer__button:hover,
.mxb-pml-organizer .mxb-pml-organizer__button:focus,
.mxb-pml-organizer-modal .mxb-pml-organizer__button:hover,
.mxb-pml-organizer-modal .mxb-pml-organizer__button:focus {
    border-color: #555;
    background: #777;
    color: #fff;
}

/* The outline button: production's "Sign in" and "Create New". */
.mxb-pml-organizer .mxb-pml-organizer__button--outline,
.mxb-pml-organizer-modal .mxb-pml-organizer__button--outline {
    border-color: #ccc;
    background: #fff;
    color: #333;
}

.mxb-pml-organizer .mxb-pml-organizer__button--outline:hover,
.mxb-pml-organizer .mxb-pml-organizer__button--outline:focus,
.mxb-pml-organizer-modal .mxb-pml-organizer__button--outline:hover,
.mxb-pml-organizer-modal .mxb-pml-organizer__button--outline:focus {
    border-color: #adadad;
    background: #e6e6e6;
    color: #333;
}

/* Production's tabs are the same button, in a joined group. */
.mxb-pml-organizer .mxb-pml-organizer__tab,
.mxb-pml-organizer-modal .mxb-pml-organizer__tab {
    padding: 6px 12px;
    border: 1px solid #777;
    background: #999;
    font-size: 14px;
    letter-spacing: normal;
    line-height: 20px;
    text-transform: none;
}

.mxb-pml-organizer .mxb-pml-organizer__tab-item:first-child .mxb-pml-organizer__tab {
    border-radius: 4px 0 0 4px;
}

.mxb-pml-organizer .mxb-pml-organizer__tab-item:last-child .mxb-pml-organizer__tab {
    border-radius: 0 4px 4px 0;
}

.mxb-pml-organizer .mxb-pml-organizer__tab.is-active,
.mxb-pml-organizer .mxb-pml-organizer__tab:hover,
.mxb-pml-organizer .mxb-pml-organizer__tab:focus {
    border-color: #555;
    background: #777;
}

/* Production's inline actions (Edit, Delete, Comments) are Bootstrap link buttons. */
.mxb-pml-organizer .mxb-pml-organizer__link,
.mxb-pml-organizer-modal .mxb-pml-organizer__link {
    color: #428bca;
    text-decoration: none;
}

.mxb-pml-organizer .mxb-pml-organizer__link:hover,
.mxb-pml-organizer .mxb-pml-organizer__link:focus,
.mxb-pml-organizer-modal .mxb-pml-organizer__link:hover,
.mxb-pml-organizer-modal .mxb-pml-organizer__link:focus {
    color: #2a6496;
    text-decoration: underline;
}

.mxb-pml-organizer .mxb-pml-organizer__link--danger,
.mxb-pml-organizer-modal .mxb-pml-organizer__link--danger {
    color: #a94442;
}

/* ---- Theme link-colour guard ------------------------------------------------------ */

/*
 * The active theme colours EVERY link with `a, a:hover, a:link, a:active, a:focus
 * { color: var(--body-font-color) }`. `a:link` carries a pseudo-class, so it outranks a
 * single class of ours whatever the load order: the account tabs and every button that
 * happens to be a link lost their white text and read as dark-on-dark. These re-assert
 * the component's own colours with two classes, which outranks it — and nothing else,
 * so the theme keeps styling ordinary links inside the organizer.
 */
.mxb-pml-organizer .mxb-pml-organizer__tab,
.mxb-pml-organizer-modal .mxb-pml-organizer__tab,
.mxb-pml-organizer .mxb-pml-organizer__tab.is-active {
    color: #fff;
}

.mxb-pml-organizer a.mxb-pml-organizer__button,
.mxb-pml-organizer-modal a.mxb-pml-organizer__button {
    color: #fff;
}

.mxb-pml-organizer a.mxb-pml-organizer__button--outline,
.mxb-pml-organizer-modal a.mxb-pml-organizer__button--outline {
    color: #333;
}

.mxb-pml-organizer a.mxb-pml-organizer__link,
.mxb-pml-organizer .mxb-pml-organizer__saved-address a {
    color: #428bca;
}

/* ---- hidden wins ------------------------------------------------------------------ */

/*
 * `hidden` must beat every display rule in this file — the script hides the no-script
 * "Sort" button, and a bare [hidden] ties with a class selector, so whichever came last
 * won. Last in the file, and specific enough to settle it either way.
 */
.mxb-pml-organizer [hidden],
.mxb-pml-organizer-modal [hidden],
.mxb-pml-organizer .mxb-pml-organizer__button[hidden] {
    display: none;
}
