.ssmp-map-component {
    --ssmp-dedicated: #184f34;
    --ssmp-contact: #8fb89c;
    --ssmp-inactive: #d9dfdc;
    --ssmp-hover: #ff7800;
    width: 100%;
}
.ssmp-map-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.ssmp-map-stage svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.ssmp-map-stage svg path,
.ssmp-map-stage svg polygon,
.ssmp-map-stage svg g[id] {
    transition: fill .18s ease, opacity .18s ease, transform .18s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.ssmp-map-stage .ssmp-state {
    fill: var(--ssmp-inactive) !important;
    stroke: #fff !important;
    stroke-width: 1.35 !important;
    cursor: default;
    outline: none;
}
.ssmp-map-stage .ssmp-state.is-dedicated {
    fill: var(--ssmp-dedicated) !important;
    cursor: pointer;
}
.ssmp-map-stage .ssmp-state.is-contact {
    fill: var(--ssmp-contact) !important;
    cursor: pointer;
}
.ssmp-map-stage .ssmp-state.is-inactive {
    fill: var(--ssmp-inactive) !important;
}
.ssmp-map-stage .ssmp-state.is-clickable:hover,
.ssmp-map-stage .ssmp-state.is-clickable:focus {
    fill: var(--ssmp-hover) !important;
    opacity: .96;
}
.ssmp-tooltip {
    position: absolute;
    z-index: 4;
    min-width: 150px;
    padding: 10px 13px;
    border-radius: 8px;
    background: #18211d;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    font: 600 13px/1.3 Arial, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -120%);
    transition: opacity .15s ease;
}
.ssmp-tooltip.is-visible { opacity: 1; }
.ssmp-tooltip small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 400;
}
.ssmp-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 22px;
    color: #37413c;
    font-size: 14px;
}
.ssmp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ssmp-legend i {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 4px;
}
.ssmp-legend .is-dedicated { background: var(--ssmp-dedicated); }
.ssmp-legend .is-contact { background: var(--ssmp-contact); }
.ssmp-legend .is-inactive { background: var(--ssmp-inactive); }
@media (max-width: 640px) {
    .ssmp-legend { justify-content: flex-start; }
    .ssmp-tooltip { display: none; }
}

/* v0.7.0 premium map presentation */
.ssmp-map-component{
    --ssmp-dedicated:#36563f;
    --ssmp-contact:#9a6537;
    --ssmp-inactive:#e9e1d6;
    --ssmp-hover:#223c2c;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:34px 34px 26px;
    background:linear-gradient(180deg,#fff 0%,#fbf8f3 100%);
    border:1px solid #e5dbcf;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(56,39,29,.10);
}
.ssmp-map-stage{
    width:min(960px,100%);
    max-width:none;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ssmp-map-stage svg{
    width:100%;
    max-width:940px;
    margin:0 auto;
    filter:drop-shadow(0 10px 22px rgba(56,39,29,.08));
}
.ssmp-map-stage .ssmp-state{
    stroke:#fffaf3!important;
    stroke-width:1.6!important;
}
.ssmp-map-stage .ssmp-state.is-dedicated{
    fill:var(--ssmp-dedicated)!important;
}
.ssmp-map-stage .ssmp-state.is-contact{
    fill:var(--ssmp-contact)!important;
}
.ssmp-map-stage .ssmp-state.is-inactive{
    fill:var(--ssmp-inactive)!important;
}
.ssmp-map-stage .ssmp-state.is-clickable:hover,
.ssmp-map-stage .ssmp-state.is-clickable:focus{
    fill:var(--ssmp-hover)!important;
    opacity:1;
    transform:translateY(-1px) scale(1.015);
}
.ssmp-tooltip{
    min-width:176px;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:#241a15;
    box-shadow:0 18px 44px rgba(0,0,0,.22);
    font:600 13px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ssmp-tooltip small{color:rgba(255,255,255,.68)}
.ssmp-legend{
    justify-content:center;
    gap:10px;
    margin:24px auto 0;
    color:#4f453e;
    font-size:13px;
}
.ssmp-legend span{
    gap:9px;
    padding:8px 12px;
    background:#fff;
    border:1px solid #e7ddd2;
    border-radius:999px;
    box-shadow:0 5px 16px rgba(56,39,29,.045);
}
.ssmp-legend i{
    width:11px;
    height:11px;
    border-radius:3px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.ssmp-map-component.is-admin-preview{
    max-width:1060px;
    box-shadow:none;
}
@media(max-width:700px){
    .ssmp-map-component{padding:20px 14px 18px;border-radius:14px}
    .ssmp-map-stage{width:100%}
    .ssmp-legend{justify-content:flex-start;gap:8px}
    .ssmp-legend span{width:100%;justify-content:flex-start}
}


/* v0.7.1 map refinement: larger, borderless, centered, brown hover */
.ssmp-map-component{
    --ssmp-hover:#6f4527;
    width:100%;
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
    padding:18px 0 10px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.ssmp-map-stage{
    width:100%;
    max-width:1320px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ssmp-map-stage svg{
    display:block;
    width:min(1260px, 100%);
    max-width:1260px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    filter:none;
}
.ssmp-map-stage .ssmp-state.is-clickable:hover,
.ssmp-map-stage .ssmp-state.is-clickable:focus{
    fill:#6f4527!important;
    opacity:1;
    transform:translateY(-1px) scale(1.012);
}
.ssmp-map-component.is-admin-preview{
    max-width:1320px;
    box-shadow:none;
    border:0;
    background:transparent;
}
@media(max-width:900px){
    .ssmp-map-component{padding:14px 0 8px}
    .ssmp-map-stage{max-width:100%}
    .ssmp-map-stage svg{width:100%;max-width:none}
}


/* v0.7.2 optical centering: the source SVG has asymmetric geographic weight
   (Alaska/Hawaii and inset spacing), so center the visible map rather than only
   the SVG viewBox. This keeps the legend mathematically centered while the map
   itself is visually centered in the page. */
.ssmp-map-component{
    overflow:visible;
}
.ssmp-map-stage{
    overflow:visible;
    justify-content:center;
}
.ssmp-map-stage svg{
    width:104%;
    max-width:1360px;
    flex:0 0 104%;
    transform:translateX(-3.8%);
    transform-origin:center center;
}
.ssmp-map-stage .ssmp-state.is-contact{
    fill:#9a6537!important;
}
.ssmp-map-stage .ssmp-state.is-clickable:hover,
.ssmp-map-stage .ssmp-state.is-clickable:focus{
    fill:#6f4527!important;
}
@media(max-width:900px){
    .ssmp-map-stage svg{
        width:100%;
        max-width:none;
        flex:0 0 100%;
        transform:none;
    }
}

/* v0.7.3 viewport centering: center the complete map experience on the actual page,
   then compensate for the asymmetric source SVG so the visible continental map
   has equal visual breathing room on the left and right. */
.ssmp-map-component{
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:clamp(18px,2.5vw,42px);
    padding-right:clamp(18px,2.5vw,42px);
    box-sizing:border-box;
}
.ssmp-map-stage{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    overflow:visible;
}
.ssmp-map-stage svg{
    width:106%;
    max-width:1400px;
    flex:0 0 106%;
    transform:translateX(-6.7%);
    transform-origin:center center;
}
.ssmp-legend{
    width:100%;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
}
@media(max-width:900px){
    .ssmp-map-component{
        width:100%;
        margin-left:auto;
        margin-right:auto;
        padding-left:12px;
        padding-right:12px;
    }
    .ssmp-map-stage svg{
        width:100%;
        max-width:none;
        flex:0 0 100%;
        transform:none;
    }
}

/* v0.7.5 state abbreviation labels — visible over the source SVG's fill:none */
.ssmp-state-label-layer {
    pointer-events: none !important;
}
.ssmp-state-label {
    pointer-events: none !important;
    user-select: none;
    fill: #fffaf3 !important;
    stroke: rgba(36,26,21,.82) !important;
    stroke-width: 2.6px;
    paint-order: stroke fill;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ssmp-state-label.is-small { font-size: 10px; stroke-width: 2px; }
.ssmp-state-label.is-tiny { font-size: 7px; stroke-width: 1.5px; }
.ssmp-state-label-ct { transform: translate(2px, 0); }
.ssmp-state-label-ri { transform: translate(5px, 2px); }
.ssmp-state-label-de { transform: translate(4px, 2px); }
.ssmp-state-label-md { transform: translate(4px, 3px); }
.ssmp-state-label-nj { transform: translate(3px, 1px); }
.ssmp-state-label-ma { transform: translate(3px, -1px); }
.ssmp-state-label-vt { transform: translate(-1px, 0); }
.ssmp-state-label-nh { transform: translate(2px, 0); }
@media (max-width:700px) {
    .ssmp-state-label { font-size: 12px; stroke-width: 2px; }
    .ssmp-state-label.is-small { font-size: 8px; stroke-width: 1.6px; }
    .ssmp-state-label.is-tiny { font-size: 6px; stroke-width: 1.2px; }
}

/* v0.7.6 baked-in labels: part of the SVG itself so caching/defer/optimizer behavior cannot suppress them */
#ssmp-baked-state-labels { pointer-events:none !important; }
#ssmp-baked-state-labels .ssmp-baked-state-label {
    pointer-events:none !important;
    user-select:none;
    fill:#fffaf3 !important;
    stroke:rgba(36,26,21,.88) !important;
    stroke-width:2.2px !important;
    paint-order:stroke fill;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.02em;
}
#ssmp-baked-state-labels .ssmp-baked-state-label.is-small {font-size:9px !important;stroke-width:1.6px !important;}
@media(max-width:700px){
 #ssmp-baked-state-labels .ssmp-baked-state-label{font-size:11px !important;stroke-width:1.8px !important;}
 #ssmp-baked-state-labels .ssmp-baked-state-label.is-small{font-size:7px !important;stroke-width:1.2px !important;}
}


/* v0.7.7 robust HTML state labels.
   Labels live outside the SVG so Colibri/theme SVG rules and sanitizers cannot hide them. */
.ssmp-map-stage{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ssmp-map-canvas{
    position:relative;
    width:106%;
    max-width:1400px;
    flex:0 0 106%;
    transform:translateX(-6.7%);
    transform-origin:center center;
}
.ssmp-map-canvas > svg{
    display:block;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    flex:none !important;
}
/* Hide earlier SVG text labels; HTML labels are the canonical visible layer now. */
#ssmp-baked-state-labels,
.ssmp-state-label-layer{
    display:none !important;
}
.ssmp-html-state-labels{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    overflow:visible;
}
.ssmp-html-state-label{
    position:absolute;
    transform:translate(-50%,-50%);
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fffaf3 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    text-align:center;
    white-space:nowrap;
    text-shadow:
        -1px -1px 0 rgba(36,26,21,.72),
         1px -1px 0 rgba(36,26,21,.72),
        -1px  1px 0 rgba(36,26,21,.72),
         1px  1px 0 rgba(36,26,21,.72);
}
.ssmp-html-state-label.is-small{font-size:10px !important;}
/* Tiny Northeast optical nudges */
.ssmp-html-state-label-ct{margin-left:4px;}
.ssmp-html-state-label-ri{margin-left:8px;margin-top:3px;}
.ssmp-html-state-label-de{margin-left:7px;margin-top:3px;}
.ssmp-html-state-label-md{margin-left:7px;margin-top:5px;}
.ssmp-html-state-label-nj{margin-left:5px;margin-top:2px;}
.ssmp-html-state-label-ma{margin-left:5px;margin-top:-2px;}
.ssmp-html-state-label-vt{margin-left:-2px;}
.ssmp-html-state-label-nh{margin-left:3px;}
@media(max-width:900px){
    .ssmp-map-canvas{
        width:100%;
        max-width:none;
        flex:0 0 100%;
        transform:none;
    }
    .ssmp-html-state-label{font-size:12px !important;}
    .ssmp-html-state-label.is-small{font-size:7px !important;}
}
@media(max-width:560px){
    .ssmp-html-state-label{font-size:9px !important;}
    .ssmp-html-state-label.is-small{font-size:6px !important;}
}