/* ── Wrapper: 2-column grid (map | small-states), extras span full width) */
.us-map-wrapper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto; /* row1=map+badges, row2=intro, row3=tabs */
    column-gap: 12px;
}

/* ── SVG container ── row 1, col 1 ──────────────────────────────── */
.us-map-svg-container {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    line-height: 0;
    min-width: 0;
    margin-bottom: 90px;
}

.us-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Default state style (overridden by JS) */
.us-map-svg .usmap-fill {
    transition: fill 0.2s ease;
}

/* Border overlay – never captures pointer events */
.us-map-svg .usmap-border {
    pointer-events: none;
}

/* ── Markers container ───────────────────────────────────────────── */
.us-map-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Single marker ───────────────────────────────────────────────── */
.usmap-marker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 8px 8px;
    border-radius: 999px;
    text-decoration: none;
    pointer-events: all;
    cursor: pointer;
    white-space: nowrap;

    /* Centre the marker on the state centroid */
    transform: translate(-50%, -100%);
    margin-top: -6px;

    /* Subtle shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.usmap-marker:hover {
    transform: translate(-50%, -100%) scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* ── Icon circle (user drops their icon inside via Elementor) ────── */
.usmap-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    /* Size and colors are set inline by JS from widget settings */
}

/* Icon SVG size is controlled inline by JS (markerIconSvgSize setting) */
.usmap-marker-icon > svg {
    flex-shrink: 0;
}

/* ── Label text ──────────────────────────────────────────────────── */
.usmap-marker-label {
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    /* Color, font-size and font-family set inline by JS */
}

/* ── Tab intro text ── row 2, spans both columns ─────────────────── */
.us-map-tab-intro {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    padding: 24px 0 16px;
    line-height: normal;
}

.us-map-tab-intro__heading {
    font-size: 22px;
    font-weight: 600;
    color: #1a2b2b;
    margin: 0 0 8px;
    line-height: 1.3;
}

.us-map-tab-intro__desc {
    font-size: 15px;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* ── Tabs bar ── row 3, spans both columns ───────────────────────── */
.us-map-tabs-bar {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 0;
    line-height: normal;
    list-style: none;
    margin: 0;
}

.usmap-tab {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 15px 16px 20px;
    border-radius: 12px;
    background: #e2e6df;
    color: #1a2b2b;
    text-decoration: none;
    cursor: pointer;
    flex: 1 1 calc(20% - 7px);
    max-width: calc(20% - 7px);
    min-width: 140px;
    transition: background 0.2s ease, color 0.2s ease;
}

.usmap-tab:hover {
    background: var(--usmap-tab-hover-bg, #163f3f) !important;
    color: var(--usmap-tab-hover-text-color, #ffffff) !important;
}

.usmap-tab-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

/* Arrow icon SVG */
.usmap-tab-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.usmap-tab:hover .usmap-tab-arrow {
    transform: rotate(-45deg);
}

.usmap-tab-arrow-circle {
    fill: var(--usmap-tab-icon-bg, #163f3f);
    transition: fill 0.2s ease;
}

.usmap-tab:hover .usmap-tab-arrow-circle {
    fill: var(--usmap-tab-hover-icon-bg, #c8b86a);
}

.usmap-tab-arrow-path {
    stroke: var(--usmap-tab-arrow-color, #ffffff);
    transition: stroke 0.2s ease;
}

.usmap-tab:hover .usmap-tab-arrow-path {
    stroke: var(--usmap-tab-arrow-hover-color, #163f3f);
}

/* ── Small-states panel ── row 1, col 2 ─────────────────────────── */
.us-map-small-states {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
    align-self: start;
    padding-top: 16px;
    line-height: normal;
}

.usmap-small-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    min-width: 40px;
    cursor: default;
    transition: background 0.2s ease;
    line-height: 1;
}

.usmap-small-badge.is-active {
    cursor: pointer;
}

/* ── Mobile: hide state labels on the SVG map ───────────────────── */
@media (max-width: 767px) {
    .usmap-state-label {
        display: none;
    }
}

/* ── Mobile: icon-only mode ──────────────────────────────────────── */
@media (max-width: 767px) {
    .usmap-marker {
        padding: 0;
        background-color: rgba(0,0,0,0) !important;
        box-shadow: none;
        /* Centre the icon on the state centroid so it stays inside the shape */
        transform: translate(-50%, -50%);
        margin-top: 0;
    }

    .usmap-marker:hover {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: none;
    }

    .usmap-marker-icon {
        background-color: rgba(0,0,0,0) !important;
        /* Mobile icon color is set via CSS variable from JS */
        color: var(--usmap-mobile-icon-color) !important;
    }

    .usmap-marker-label {
        display: none;
    }
}

/* ── < 575 px: single-column stacked layout ──────────────────────── */
@media (max-width: 575px) {
    .us-map-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        column-gap: 0;
    }

    /* Map fills full width, small bottom gap before badges */
    .us-map-svg-container {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 12px;
    }

    /* Small-states panel moves below the map, wraps into as many columns as fit */
    .us-map-small-states {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        padding-top: 0;
       margin-bottom: 30px;
    }

    /* Intro text: row 3 */
    .us-map-tab-intro {
        grid-column: 1;
        grid-row: 3;
    }

    /* Tabs: row 4, full-width column */
    .us-map-tabs-bar {
        grid-column: 1;
        grid-row: 4;
        flex-direction: column;
        flex-wrap: nowrap;
		margin-bottom: 45px;
    }

    .usmap-tab {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        flex: none;
        box-sizing: border-box;
    }

    /* State 2-letter codes hidden on small screens */
    .usmap-state-label {
        display: none;
    }
}