/* ============================================================
   Canada Shipping Map — assets/shipping-map.css
   Part of the jdm-stuff plugin.
   ============================================================ */

.csm-wrapper {
    --csm-orange: #e8621a;
    --csm-glow:   rgba(232, 98, 26, 0.38);
    --csm-panel-bg:   rgba(250, 248, 244, 0.95);
    --csm-panel-text: #1a1a1a;
    --csm-panel-sub:  #777;
    max-width: 100%;
    font-family: inherit;
	margin-left: auto;
	margin-right: auto;
}

html[data-theme="dark"] .csm-wrapper {
	--csm-panel-bg:   rgba(22, 21, 18, 0.95);
	--csm-panel-text: #e4e2dc;
	--csm-panel-sub:  #888;
}


/* ── Map container ── */
.csm-map-container {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}

.csm-svg-wrap        { width: 100%; }
.csm-svg-wrap > svg  { width: 100%; height: auto; display: block; }

/* ── City dots ──────────────────────────────────────────────────────────────
   .csm-hover  → lighter transient preview while the mouse is over a city
   .csm-pinned → steady highlight for the clicked/tapped city; stays lit even
                 while a different city is being hover-previewed              */
.csm-dot { fill: var(--csm-orange); cursor: pointer; transition: fill .12s ease, filter .12s ease; }

.csm-dot.csm-hover {
    fill: #f0873f;
    filter: drop-shadow(0 0 500px rgba(232, 98, 26, 0.22));
}

.csm-dot.csm-pinned {
    fill: #ff7530;
    filter: drop-shadow(0 0 500px var(--csm-glow));
}

/* ── Info panel (top-right) ── */
.csm-panel {
    position: absolute; top: 3%; right: 2%;
    width: clamp(140px, 21%, 205px);
    background: var(--csm-panel-bg);
    color: var(--csm-panel-text);
    border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 1px 10px rgba(0,0,0,.10);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: .79rem; line-height: 1.45;
    pointer-events: none; z-index: 10;
}
.csm-panel-default   { color: var(--csm-panel-sub); font-style: italic; font-size: .74rem; }
.csm-panel-name      { font-size: .95rem; font-weight: 700; margin-bottom: 1px; }
.csm-panel-province  { color: var(--csm-panel-sub); font-size: .71rem; margin-bottom: 8px; }
.csm-panel-shipping-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 4px; margin-bottom: 3px;
}
.csm-panel-shipping-label { color: var(--csm-panel-sub); font-size: .69rem; flex: 1; }
.csm-panel-shipping-value { font-weight: 700; font-size: .90rem; color: var(--csm-orange); white-space: nowrap; }
.csm-panel-disclaimer     { font-size: .64rem; color: var(--csm-panel-sub); font-style: italic; margin-top: 3px; }
.csm-panel-default[hidden], .csm-panel-city[hidden]   { display: none !important; }

/* ── Shipping visibility — toggled by data-shipping attr on wrapper ── */
.csm-wrapper[data-shipping="false"] .csm-panel-shipping-row,
.csm-wrapper[data-shipping="false"] .csm-panel-disclaimer,
.csm-wrapper[data-shipping="false"] .csm-city-ship { display: none; }

/* ── City list ── */
.csm-city-list {
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	font-variation-settings: 'wdth' 75 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.05em !important;
	font-style: normal !important;
    list-style: none;
	margin: 0;
	padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--csm-cols, 1), 1fr);
    gap: 0px 12px;
}
.csm-city-item {
    display: flex;
	align-items: center;
	gap: 4px;
    padding: 2px 4px;
	border-radius: 2px;
    cursor: pointer;
	font-size: 14px;
    transition: background .12s;
	line-height: 16px;
}

.csm-city-item:hover,
.csm-city-item:focus,
.csm-city-item.csm-hover  { background: rgba(232,98,26,.10); outline: none; }
.csm-city-item.csm-pinned { background: rgba(232,98,26,.18); }

.csm-city-dot-inline {
    display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--csm-orange);
    flex-shrink: 0; transition: box-shadow .12s;
}
.csm-city-item:hover      .csm-city-dot-inline,
.csm-city-item.csm-hover  .csm-city-dot-inline { box-shadow: 0 0 0 3px var(--csm-glow); }
.csm-city-item.csm-pinned .csm-city-dot-inline { box-shadow: 0 0 0 3px var(--csm-glow), 0 0 0 1px var(--csm-orange); }

.csm-city-name { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csm-city-prov {
	font-size: 14px;
	line-height: 16px;
	color: var(--csm-panel-sub);
	min-width: 22px;
}
.csm-city-ship { font-size: .74rem; font-weight: 600; color: var(--csm-orange); white-space: nowrap; }
/* hide shipping rates from main city list */
.csm-city-ship { display: none; }

.csm-disclaimer { margin: 10px 0 20px 0; font-size: .68rem; color: var(--csm-panel-sub); font-style: italic; line-height: 1.5; }

@media (max-width: 768px) {
    .csm-city-list { grid-template-columns: repeat(2, 1fr); }
    .csm-panel     { width: clamp(150px, 28%, 165px); }
}