/**
 * Simple Dealer Map — Figma node 11121:38428.
 *
 * A focused map widget: heading, white panel, search row, province chips,
 * Leaflet map and one row of three dealer cards. Deliberately separate from
 * widget-dealer-locator.css, which carries several layouts this design does
 * not use.
 *
 * Figma values are used as-is where the theme has no token for them, and via
 * the token where one already carries the identical value — #2d5a27 is
 * --zs-primary, #c48c33 is --zs-accent, #eef4df is --zs-green-soft,
 * rgba(0,0,0,0.08) is --zs-border, and 92px is --zs-section-padding.
 */

.zs-simple-dealer-map {
    /* Figma: rgba(241, 237, 229, 0.2) — --zs-warm-deep at 20%. */
    padding: var(--zs-section-padding, 92px) 20px;
    background-color: rgba(241, 237, 229, 0.2);
}

/*
 * The Figma frame is full-bleed 1440 with 160px side padding, i.e. a 1120px
 * measure. That was written as `padding: 92px 160px`, which is only correct
 * when the widget spans the viewport — dropped inside Elementor's boxed
 * container it subtracted 320px from an already-constrained ~1140px, leaving
 * ~820px and collapsing the results grid to two columns at 1440.
 *
 * A centred max-width reproduces the same 1120px measure and holds whether the
 * section is full-bleed or boxed.
 */
.zs-simple-dealer-map__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 58px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.zs-simple-dealer-map__heading {
    width: 100%;
    margin: 0;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 48px;
    font-weight: 700;
    line-height: 57.12px;
    text-align: center;
}

/* ==========================================================================
   Panel
   ========================================================================== */

.zs-simple-dealer-map__panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
    width: 100%;
    padding: 41px;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 20px;
    background-color: var(--zs-card, #ffffff);
    box-shadow: 0 18px 25px rgba(45, 90, 39, 0.12);
}

.zs-simple-dealer-map__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin: 0;
}

.zs-simple-dealer-map__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.zs-simple-dealer-map__title {
    margin: 0;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 25.6px;
}

.zs-simple-dealer-map__description {
    margin: 0;
    color: var(--zs-muted, #555555);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
}

/* ==========================================================================
   Search row
   ========================================================================== */

.zs-simple-dealer-map__search {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
}

/*
 * The input, button and chips are scoped through the section class rather than
 * written as bare BEM selectors. Elementor's global kit ships
 * `.elementor-kit-<id> button { background-color: var(--e-global-color-primary) }`
 * at specificity (0,1,1), which outranks a single class and repainted the
 * chips and the Search button in the kit's green. Two classes (0,2,0) wins
 * without resorting to !important.
 */
.zs-simple-dealer-map .zs-simple-dealer-map__input {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 50px;
    padding: 15px 23px;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background-color: var(--zs-card, #ffffff);
    color: var(--zs-text, #1c1c1c);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
}

.zs-simple-dealer-map .zs-simple-dealer-map__input::placeholder {
    color: #757575;
    opacity: 1;
}

.zs-simple-dealer-map__input:focus-visible,
.zs-simple-dealer-map__button:focus-visible,
.zs-simple-dealer-map__chip:focus-visible,
.zs-simple-dealer-map__card a:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-simple-dealer-map .zs-simple-dealer-map__button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 16px 30px;
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: var(--zs-accent, #c48c33);
    color: #ffffff;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
}

.zs-simple-dealer-map .zs-simple-dealer-map__button:hover {
    background-color: #b07d2c;
}

.zs-simple-dealer-map__button-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Province chips
   ========================================================================== */

.zs-simple-dealer-map__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zs-simple-dealer-map .zs-simple-dealer-map__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    /* Figma splits the vertical padding 7.35 / 7.65 to centre the 20.8px
       line box inside the 36px pill. */
    padding: 7.35px 15px 7.65px;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    background-color: var(--zs-green-soft, #eef4df);
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 20.8px;
    text-align: center;
    cursor: pointer;
}

.zs-simple-dealer-map .zs-simple-dealer-map__chip[aria-pressed="true"] {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

/* ==========================================================================
   Map
   ========================================================================== */

.zs-simple-dealer-map__map-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.zs-simple-dealer-map__map {
    width: 100%;
    height: 462px;
    background-color: #000000;
}

/* Leaflet paints its own stacking context; keep it under the Elementor
   editor's overlays so the panel handles stay clickable. */
.zs-simple-dealer-map__map.leaflet-container {
    z-index: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
}

/* The marker SVG paints from currentColor — see buildIcon() in the script for
   why this is the accent token and not the design's raw retired orange. */
.zs-simple-dealer-map__marker {
    display: block;
    border: 0;
    background: none;
    color: var(--zs-accent, #c48c33);
    cursor: pointer;
}

.zs-simple-dealer-map__marker:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-simple-dealer-map__popup-name {
    display: block;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 700;
}

.zs-simple-dealer-map__popup-line {
    display: block;
    color: var(--zs-text, #1c1c1c);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
}

/* ==========================================================================
   Results
   ========================================================================== */

.zs-simple-dealer-map__results {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.zs-simple-dealer-map__results-heading {
    margin: 0;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 25.6px;
}

/*
 * auto-fit with a min() floor: three tracks at desktop, and the tracks
 * collapse on their own when the panel is too narrow for a readable card
 * rather than being forced to three by a fixed repeat(3, …).
 *
 * 260px, not 280px, and the difference is measured rather than guessed: at a
 * 768px viewport the grid box is 579px, and two 280px tracks plus the 20px
 * column gap need 580px — one pixel short, which silently dropped tablet to a
 * single column. 260px gives 390 -> 1, 768 -> 2, 1024 -> 2, 1200 -> 3,
 * 1440 -> 3, which is the ladder the design calls for.
 */
.zs-simple-dealer-map__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px 20px;
    width: 100%;
}

.zs-simple-dealer-map__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    align-self: start;
    padding: 21px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background-color: var(--zs-card, #ffffff);
}

.zs-simple-dealer-map__card-name {
    /* Long dealer names must wrap inside the card, never spill out of it. */
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 25.6px;
}

.zs-simple-dealer-map__card-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

.zs-simple-dealer-map__card-row {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--zs-text, #1c1c1c);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
}

.zs-simple-dealer-map__card-label {
    font-weight: 700;
}

.zs-simple-dealer-map__card-row a {
    color: inherit;
}

/* ==========================================================================
   Region summary, count and View More
   ========================================================================== */

.zs-simple-dealer-map__region-summary {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 14px 18px;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    background-color: var(--zs-green-soft, #eef4df);
}

.zs-simple-dealer-map__region-summary[hidden] {
    display: none;
}

.zs-simple-dealer-map__region-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zs-simple-dealer-map__region-name {
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 800;
    line-height: 22px;
}

.zs-simple-dealer-map__region-count {
    color: var(--zs-muted, #555555);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 20px;
}

/* Scoped past the Elementor kit's bare `button` rule, same as the chips. */
.zs-simple-dealer-map .zs-simple-dealer-map__region-clear,
.zs-simple-dealer-map .zs-simple-dealer-map__view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 20px;
    border: 1px solid var(--zs-primary, #2d5a27);
    border-radius: 999px;
    background-color: transparent;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
}

.zs-simple-dealer-map .zs-simple-dealer-map__region-clear:hover,
.zs-simple-dealer-map .zs-simple-dealer-map__view-more:hover {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-simple-dealer-map__region-clear:focus-visible,
.zs-simple-dealer-map__view-more:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-simple-dealer-map__view-more {
    align-self: center;
}

.zs-simple-dealer-map__view-more[hidden] {
    display: none;
}

.zs-simple-dealer-map__count {
    margin: 0;
    color: var(--zs-muted, #555555);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 20px;
}

.zs-simple-dealer-map__count:empty {
    display: none;
}

.zs-simple-dealer-map__empty {
    margin: 0;
    color: var(--zs-muted, #555555);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 15px;
    line-height: 22.4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .zs-simple-dealer-map__heading {
        font-size: 40px;
        line-height: 1.19;
    }

    .zs-simple-dealer-map__inner {
        gap: 40px;
    }

    .zs-simple-dealer-map__panel {
        padding: 32px;
    }
}

@media (max-width: 767px) {
    .zs-simple-dealer-map {
        padding: var(--zs-section-padding-mobile, 68px) 20px;
    }

    .zs-simple-dealer-map__heading {
        font-size: 30px;
        line-height: 1.2;
    }

    .zs-simple-dealer-map__inner {
        gap: 28px;
    }

    .zs-simple-dealer-map__panel {
        padding: 20px;
        border-radius: 16px;
    }

    /* Input and button stack, and the button spans the panel. */
    .zs-simple-dealer-map__search {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-simple-dealer-map__button {
        width: 100%;
    }

    .zs-simple-dealer-map__map {
        height: 320px;
    }
}