/* loanDepot Directory — branch map. Self-contained, brand-aligned. */

.ld-index--branches { max-width: 1140px; margin: 0 auto 3rem; padding: 0 1rem; }

.ldmap {
    /* purple01 for the solid brand marks, purple03 for the "View More" link. */
    --ld-purple: #501283;
    --ld-purple-vivid: #7a3ff6;
    --ld-green: #afe321;
    --ld-ink: #1c1230;
    --ld-muted: #6b6478;
    --ld-line: #e9e6ef;
    --ld-radius: 14px;
    position: relative;
    display: grid;
    /* Design splits the screen 45 / 55 between the panel and the map. */
    grid-template-columns: 45fr 55fr;
    column-gap: 2.5rem;
    /* Results layout: search on its own row, 21px above the card list. */
    row-gap: 21px;
    align-items: start;
    height: auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    color: var(--ld-ink);
    font-family: inherit;
}

/* ---- Intro state --------------------------------------------------------
   Before the first search the panel is a hero (headline + copy + search) and
   the list stays out of the way; searching hands the screen to map + list. */
/* ---- Grid placement per state -------------------------------------------
   Results (default): search alone on row 1, list + map on row 2.
   Initial: headline on row 1 and the search under it, both in the left
   column, with the map spanning the full height beside them. */
.ldmap-search  { grid-column: 1; grid-row: 1; }
.ldmap-panel   { grid-column: 1; grid-row: 2; height: 528px; }
.ldmap-canvas  { grid-column: 2; grid-row: 2; height: 528px; }
.ldmap-intro   { display: none; }

/* The third row soaks up whatever height the 528px map adds, so the headline,
   copy and search stay 29px apart at the top instead of being spread out. */
.ldmap.is-initial {
    grid-template-rows: auto auto 1fr;
    row-gap: 29px;
}
.ldmap.is-initial .ldmap-intro {
    display: flex;
    flex-direction: column;
    gap: 29px;
    grid-column: 1;
    grid-row: 1;
}
.ldmap.is-initial .ldmap-search { grid-row: 2; }
.ldmap.is-initial .ldmap-canvas { grid-row: 1 / span 3; align-self: stretch; }
.ldmap.is-initial .ldmap-panel { display: none; }

.ldmap-intro__title {
    margin: 0;
    font-family: Poppins, inherit, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 120%;
    color: #000;
    max-width: 12ch;
}

.ldmap-intro__text {
    margin: 0;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    color: #000;
}

/* ---- Left panel ---------------------------------------------------------- */
.ldmap-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 0;
    background: transparent;
}

.ldmap-search {
    position: relative;
    padding: 0 0 1.25rem;
    border-bottom: 0;
}

.ldmap-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 370px;
}

/* Round submit button riding the right edge of the pill. */
.ldmap .ldmap-search-btn,
.ldmap .ldmap-search-btn:hover,
.ldmap .ldmap-search-btn:focus,
.ldmap .ldmap-search-btn:active {
    position: absolute;
    /* 12px inside the pill, so the 48px field leaves a 36px button. */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    aspect-ratio: 1 / 1;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ld-purple-vivid) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    transition: background .15s ease;
}

.ldmap .ldmap-search-btn:hover,
.ldmap .ldmap-search-btn:focus { background: var(--ld-purple) !important; }

.ldmap-search-btn svg { display: block; }

/* High specificity (+ !important on padding) so the theme's input styles
   cannot override the room reserved for the search icon. */
.ldmap .ldmap-search .ldmap-input {
    width: 100%;
    margin: 0;
    height: 48px !important;
    /* 12px inset all round; the right side also clears the round button. */
    padding: 12px 60px 12px 12px !important;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #333;
    border: 1px solid #bfbfbf !important;
    border-radius: 999px !important;
    background: #fff;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ldmap .ldmap-search .ldmap-input::placeholder {
    color: #333;
    opacity: .65;
}

.ldmap .ldmap-search .ldmap-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ld-purple-vivid);
    box-shadow: 0 0 0 4px rgba(122, 63, 240, .12);
}

.ldmap-suggest {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    top: calc(100% - .3rem);
    z-index: 20;
    background: #fff;
    border: 1px solid var(--ld-line);
    border-radius: 12px;
    box-shadow: 0 20px 44px -20px rgba(28, 18, 48, .5);
    overflow: hidden;
    display: none;
}

.ldmap-suggest.is-open {
    display: block;
}

/* Doubled selector, and every property the kit sets answered — see the same
   block in ld-search.css. Elementor styles every `button` at single-class
   specificity, so radius and weight leak through any property left unset. */
.ldmap .ldmap-suggest button,
.ldmap .ldmap-suggest button:hover,
.ldmap .ldmap-suggest button:focus,
.ldmap .ldmap-suggest button:active {
    display: block;
    width: 100%;
    text-align: left;
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--ld-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    color: var(--ld-ink);
    cursor: pointer;
}

.ldmap .ldmap-suggest button:last-child { border-bottom: 0; }

.ldmap .ldmap-suggest button:hover,
.ldmap .ldmap-suggest button:focus,
.ldmap .ldmap-suggest button.is-active { background: #f4eefb; }

/* Not in the design: announced to screen readers, invisible on screen. */
.ldmap-count {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Cards fill whatever height the map leaves; the rest scrolls (about four
   are visible at the 528px desktop height). */
.ldmap-list {
    flex: 1;
    min-height: 0;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ldmap-listhint {
    padding: 2rem 1.5rem;
    color: var(--ld-muted);
    font-size: .92rem;
    line-height: 1.5;
    text-align: center;
}

/* Result card: numbered badge, name + "View More", round action buttons. */
.ldmap-item {
    display: grid;
    grid-template-columns: 44.259px 1fr auto;
    column-gap: 1.25rem;
    align-items: center;
    margin-bottom: 34px;
    padding: 24px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16.8px 1px rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}

.ldmap-item:last-child { margin-bottom: 0; }

.ldmap-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    color: var(--ld-purple-vivid);
}

.ldmap-more > span {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-underline-position: from-font;
}

.ldmap-more svg { display: block; flex: 0 0 auto; }

.ldmap-item .ldmap-more:link,
.ldmap-item .ldmap-more:visited,
.ldmap-item .ldmap-more:active,
.ldmap-item .ldmap-more:focus,
.ldmap-item .ldmap-more:hover { color: var(--ld-purple-vivid); text-decoration: none; }

.ldmap-item:hover { box-shadow: 0 8px 26px 1px rgba(80, 18, 131, .18); transform: translateY(-2px); }
.ldmap-item.is-active { box-shadow: 0 0 0 2px var(--ld-purple), 0 4px 16.8px 1px rgba(0, 0, 0, .12); }

.ldmap-badge {
    width: 44.259px;
    height: 44.259px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ld-purple);
    color: #fff;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.ldmap-body { min-width: 0; }

/* Desktop/H6 */
.ldmap-body h3 {
    margin: 0 0 6px;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    color: #000;
}

.ldmap-phone {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--ld-purple);
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
}

.ldmap-phone:hover { text-decoration: underline; }

/* Keep link colours across all states (beat the theme's a:active/visited). */
.ldmap-phone:link,
.ldmap-phone:visited,
.ldmap-phone:active,
.ldmap-phone:focus { color: var(--ld-purple); }

.ldmap-addr {
    margin: 0;
    font-size: .85rem;
    color: var(--ld-muted);
    line-height: 1.35;
}

.ldmap-dist {
    margin: .4rem 0 0 !important;
    font-size: .78rem;
    color: var(--ld-purple);
    font-weight: 600;
}

.ldmap-actions {
    display: flex;
    flex-direction: row;
    gap: .6rem;
    align-items: center;
}

.ldmap-act {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ld-purple);
    border-radius: 50%;
    color: var(--ld-purple);
    background: transparent;
    text-decoration: none;
    transition: background .13s, color .13s;
}

.ldmap-act:hover { background: var(--ld-purple); color: #fff; }

/* ---- Map canvas ---------------------------------------------------------- */
.ldmap-canvas {
    position: relative;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16.8px 1px rgba(0, 0, 0, .12);
}
.ldmap-canvas > div { height: 100%; }

.ldmap-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--ld-muted);
}

/* Loading overlay + skeleton list */
.ldmap.is-loading .ldmap-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #f2eef9, #f2eef9 12px, #ece6f6 12px, #ece6f6 24px);
    opacity: .6;
}

.ldmap-skeleton {
    padding: .95rem 1.2rem;
    border-bottom: 1px solid var(--ld-line);
}

.ldmap-skeleton span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: ldmap-sheen 1.3s ease infinite;
    margin-bottom: 8px;
}

.ldmap-skeleton span:nth-child(1) { width: 60%; }
.ldmap-skeleton span:nth-child(2) { width: 90%; }

@keyframes ldmap-sheen {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ---- Custom info window -------------------------------------------------- */
/* Info window: same type scale as the cards, evenly padded. */
/* The padding lives here, not on Google's .gm-style-iw-c: Google measures this
   element to size the bubble, so padding added to its own wrapper afterwards
   shrinks the usable area and the content gets clipped on the right. */
.ldmap-iw {
    box-sizing: border-box;
    font-family: "DM Sans", inherit, sans-serif;
    min-width: 240px;
    max-width: 300px;
    padding: 24px;
}

.ldmap-iw *,
.ldmap-iw *::before,
.ldmap-iw *::after { box-sizing: border-box; }

.ldmap-iw h3 {
    /* Clears the close button parked in the corner. */
    margin: 0 0 8px;
    padding-right: 26px;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
    color: #000;
}

.ldmap-iw p {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    color: #333;
}

.ldmap-iw .ldmap-iw__tel,
.ldmap-iw .ldmap-iw__tel:link,
.ldmap-iw .ldmap-iw__tel:visited { color: #333 !important; text-decoration: none !important; }
.ldmap-iw .ldmap-iw__tel:hover { color: var(--ld-purple) !important; text-decoration: underline !important; }

.ldmap-iw__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.ldmap-iw .ldmap-iw__btn,
.ldmap-iw .ldmap-iw__btn:link,
.ldmap-iw .ldmap-iw__btn:visited,
.ldmap-iw .ldmap-iw__btn:active,
.ldmap-iw .ldmap-iw__btn:focus {
    display: inline-block;
    margin: 0;
    padding: 9px 18px;
    background: var(--ld-purple);
    border: 1.5px solid var(--ld-purple);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-family: "DM Sans", inherit, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}

.ldmap-iw .ldmap-iw__btn:hover { background: var(--ld-purple-vivid); border-color: var(--ld-purple-vivid); }

.ldmap-iw .ldmap-iw__btn--ghost,
.ldmap-iw .ldmap-iw__btn--ghost:link,
.ldmap-iw .ldmap-iw__btn--ghost:visited,
.ldmap-iw .ldmap-iw__btn--ghost:active,
.ldmap-iw .ldmap-iw__btn--ghost:focus {
    background: transparent;
    color: var(--ld-purple) !important;
}

.ldmap-iw .ldmap-iw__btn--ghost:hover { background: var(--ld-purple); color: #fff !important; }

/* Google's own padding is zeroed (it leaves a fat gap at the bottom and
   crowds the title against the close button) — .ldmap-iw supplies it. */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    max-width: none !important;
    border-radius: 16px;
    box-shadow: 0 4px 16.8px 1px rgba(0, 0, 0, .12);
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

/* Close button parked in the corner instead of pushing the heading down. */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    opacity: .55;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover { opacity: 1; }
.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span { margin: 0 !important; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 820px) {
    /* The bubble can never be wider than the map it floats over, so it gives
       up its minimum and the two buttons share whatever row they land on. */
    .ldmap-iw {
        min-width: 0;
        max-width: min(300px, calc(100vw - 5rem));
        padding: 20px;
    }

    .ldmap-iw .ldmap-iw__btn {
        flex: 1 1 auto;
        padding: 9px 12px;
        text-align: center;
        white-space: nowrap;
    }

    /* One column. The explicit grid-column/grid-row placements used for the
       initial-vs-results states must be cleared, or they keep re-creating the
       second column no matter what grid-template-columns says. */
    .ldmap,
    .ldmap.is-initial {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: 1.5rem;
        height: auto;
    }

    .ldmap-intro,
    .ldmap-search,
    .ldmap-panel,
    .ldmap-canvas,
    .ldmap.is-initial .ldmap-intro,
    .ldmap.is-initial .ldmap-search,
    .ldmap.is-initial .ldmap-canvas {
        grid-column: 1;
        grid-row: auto;
        min-width: 0;
    }

    /* Headline, search, then the square map, then the results. */
    .ldmap-intro { order: 1; }
    .ldmap-search { order: 2; padding-bottom: 0; }
    .ldmap-canvas { order: 3; aspect-ratio: 1 / 1; height: auto; border-right: 0; }
    .ldmap-panel { order: 4; height: auto; border-right: 0; border-top: 0; }

    /* Breathing room on the sides. The padding lives on the block itself so it
       applies inside an Elementor template too; the PHP wrapper drops its own
       so the two never stack. */
    .ldmap { padding: 0 1rem; }
    .ld-index--branches { padding-left: 0; padding-right: 0; }

    .ldmap-intro__title { font-size: 34px; max-width: none; }
    .ldmap-intro__text { font-size: 17px; }
    .ldmap-search-field { max-width: none; }
    /* Room for four cards: ~151px each plus the 34px gaps between them. */
    .ldmap-list { max-height: 720px; }
    /* Badge alone in the left column; name, link and buttons stack in the
       right one so everything lines up on the same axis. */
    .ldmap-item { grid-template-columns: 36px minmax(0, 1fr); row-gap: .9rem; padding: 20px; align-items: start; }
    .ldmap-badge { grid-row: 1 / -1; align-self: start; width: 36px; height: 36px; font-size: 17px; }
    .ldmap-actions { grid-column: 2; justify-content: flex-start; margin: 0; }
}

/* Search spinner: same `is-searching` state the shared ld-places module sets
   on the block, mirrored onto the map's own button. */
.ldmap.is-searching .ldmap-search-btn svg { visibility: hidden; }

.ldmap.is-searching .ldmap-search-btn::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ld-search-spin .6s linear infinite;
}

.ldmap-suggest .ld-search__empty {
    margin: 0;
    padding: .7rem 1rem;
    font-size: .92rem;
    color: var(--ld-muted);
}

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