/* Secure-VPN Heatmap V23.5 — canonical component layout.
   Replaces the body of the existing V23.2 CSS file, NOT another stylesheet.
   Native select IDs and dynamic options are owned by the existing V23.2 JS.
*/
body.heatmap-page #heatmap .svpn-control-panel,
body.heatmap-page #heatmap .svpn-control-panel *{box-sizing:border-box;}
body.heatmap-page #heatmap .svpn-control-panel{
 --svp-ink:#173c47;--svp-green:#087c5b;--svp-line:#d9e7e3;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:0;min-width:0;width:100%;margin:0;
 color:var(--svp-ink);background:#fff;border:1px solid var(--svp-line);
 border-radius:15px;overflow:hidden;box-shadow:0 8px 24px rgba(19,62,61,.055);
 font-family:inherit;
}
body.heatmap-page #heatmap .svpn-panel-head{
 grid-column:1/-1;margin:0;padding:13px 15px;
 color:#fff !important;background:linear-gradient(120deg,#12535c,#0e7a60);
}
body.heatmap-page #heatmap .svpn-panel-eyebrow{
 display:block;margin:0 0 2px;font-size:10px;font-weight:800;
 line-height:1.2;letter-spacing:.7px;text-transform:uppercase;color:#b8f0db;
}
body.heatmap-page #heatmap .svpn-panel-title{
 display:block;margin:0 !important;color:#fff !important;
 font-size:17px !important;font-weight:800 !important;line-height:1.25;-webkit-text-fill-color:#fff !important;
}
body.heatmap-page.svpn-v2 #heatmap .svpn-top-stage > aside.sidebar.card .svpn-panel-head .svpn-panel-title,
body.heatmap-page.svpn-v2 #heatmap .svpn-top-stage > aside.sidebar.card .svpn-panel-head .svpn-panel-subtitle{color:#fff !important;-webkit-text-fill-color:#fff !important;}
body.heatmap-page #heatmap .svpn-panel-subtitle{
 display:block;margin:4px 0 0;font-size:11px !important;line-height:1.3;color:#e0f5ee;
}
body.heatmap-page #heatmap .svpn-filter-section{
 min-width:0;margin:0;padding:12px 11px 13px;
 background:#fff;border-bottom:1px solid #e7efec;
}
body.heatmap-page #heatmap .svpn-filter-section--worker{
 grid-column:1;grid-row:2;border-right:1px solid #e7efec;
 background:#f8fcfa;
}
body.heatmap-page #heatmap .svpn-filter-section--provider{
 grid-column:2;grid-row:2;
}
body.heatmap-page #heatmap .svpn-filter-section--protocol{
 grid-column:1/-1;grid-row:3;padding:12px 14px 13px;
}
body.heatmap-page #heatmap .svpn-section-label{
 display:flex;align-items:flex-start;gap:7px;min-width:0;
 margin:0 0 9px;color:#193d47;
}
body.heatmap-page #heatmap .svpn-section-index{
 display:inline-flex;flex:0 0 22px;align-items:center;justify-content:center;
 height:22px;border-radius:7px;background:#e2f3eb;
 color:#0c7655;font-size:10px;line-height:1;font-weight:800;
}
body.heatmap-page #heatmap .svpn-section-heading{min-width:0;flex:1;}
body.heatmap-page #heatmap .svpn-section-title{
 display:block;margin:0 !important;color:#153a45 !important;
 font-size:13px !important;line-height:1.2;font-weight:800 !important;
}
body.heatmap-page #heatmap .svpn-section-note{
 display:block;margin:3px 0 0;color:#5d7c82;
 font-size:10px;line-height:1.25;font-weight:500;
}
body.heatmap-page #heatmap .svpn-options{
 display:none;min-width:0;flex-wrap:wrap;gap:6px;
}
body.heatmap-page #heatmap .svpn-filter-ready .svpn-options{display:flex;}
body.heatmap-page #heatmap .svpn-filter-ready .svpn-options--locations,
body.heatmap-page #heatmap .svpn-filter-ready .svpn-options--protocol,
body.heatmap-page #heatmap .svpn-filter-ready .svpn-options--segment{display:grid;}
body.heatmap-page #heatmap .svpn-options[hidden],
body.heatmap-page #heatmap .svpn-option[hidden],
body.heatmap-page #heatmap .svpn-provider-search[hidden],
body.heatmap-page #heatmap .svpn-option-empty[hidden]{display:none !important;}
body.heatmap-page #heatmap .svpn-option{
 display:inline-flex;align-items:center;justify-content:center;
 gap:5px;min-width:0;min-height:34px;padding:7px 9px;
 border:1px solid #d2e4dd;border-radius:8px;background:#fff;
 font:inherit;font-size:12px !important;line-height:1.25;font-weight:700;
 color:#315766;cursor:pointer;box-shadow:none;text-align:center;
 white-space:normal !important;max-width:100%;overflow-wrap:anywhere;
 transition:background-color .12s,border-color .12s,color .12s;
}
body.heatmap-page #heatmap .svpn-option:hover:not(:disabled){background:#f0faf5;border-color:#5eae91;}
body.heatmap-page #heatmap .svpn-option:focus-visible{outline:2px solid #2baa7b;outline-offset:2px;}
body.heatmap-page #heatmap .svpn-option[aria-pressed=true]{
 background:#e6f6ed;border-color:#0d9065;color:#086046;
 box-shadow:inset 0 0 0 1px rgba(8,133,92,.14);
}
body.heatmap-page #heatmap .svpn-option:disabled{opacity:.48;cursor:not-allowed;}
body.heatmap-page #heatmap .svpn-option-text{min-width:0;max-width:100%;white-space:normal !important;overflow-wrap:anywhere;word-break:normal;}
body.heatmap-page #heatmap .svpn-options--locations{
 grid-template-columns:minmax(0,1fr);gap:5px;
 max-height:245px;overflow-y:auto;padding:1px;
 scrollbar-width:thin;scrollbar-color:#a5cfc2 transparent;
}
body.heatmap-page #heatmap .svpn-options--locations .svpn-option{
 justify-content:flex-start;text-align:left;min-height:35px;padding:7px 8px;
}
body.heatmap-page #heatmap .svpn-options--locations .svpn-option::before{
 content:"";flex:0 0 11px;width:11px;height:11px;border-radius:50%;
 border:1.5px solid #94aea5;background:white;
}
body.heatmap-page #heatmap .svpn-options--locations .svpn-option[aria-pressed=true]::before{
 background:#0b956b;box-shadow:inset 0 0 0 2px white;border-color:#0b956b;
}
body.heatmap-page #heatmap .svpn-options--provider{
 gap:5px;max-height:245px;overflow-y:auto;padding:1px;
 scrollbar-width:thin;scrollbar-color:#a5cfc2 transparent;
}
body.heatmap-page #heatmap .svpn-options--provider .svpn-option{
 flex:1 1 auto;max-width:100%;padding:7px 8px;
}
body.heatmap-page #heatmap .svpn-provider-search{
 display:flex;align-items:center;min-width:0;height:34px;margin:0 0 9px;
 padding:0 9px;border:1px solid #d5e4df;border-radius:8px;background:#fbfdfc;
}
body.heatmap-page #heatmap .svpn-provider-search::before{content:"⌕";color:#568478;font-size:17px;}
body.heatmap-page #heatmap .svpn-provider-search input{
 width:100%;min-width:0;height:30px;padding:0 0 0 5px;
 border:0;outline:0;background:transparent;font:inherit;font-size:11px;color:#244653;
 box-shadow:none;
}
body.heatmap-page #heatmap .svpn-provider-search:focus-within{
 border-color:#26936e;box-shadow:0 0 0 2px rgba(38,147,110,.12);
}
body.heatmap-page #heatmap .svpn-option-empty{margin:7px 0;font-size:11px;color:#68818b;}
body.heatmap-page #heatmap .svpn-options--protocol{
 grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
}
body.heatmap-page #heatmap .svpn-options--protocol .svpn-option{min-height:37px;}
body.heatmap-page #heatmap .svpn-settings{
 grid-column:1/-1;grid-row:4;display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;
 padding:11px 13px 13px;background:#f7faf9;
}
body.heatmap-page #heatmap .svpn-settings-heading{
 grid-column:1/-1;display:flex;justify-content:space-between;
 align-items:center;margin:0 0 8px;color:#315662;
 font-size:10px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;
}
body.heatmap-page #heatmap .svpn-settings-icon{font-size:13px;color:#68958a;}
body.heatmap-page #heatmap .svpn-settings .svpn-filter-section--compact{
 padding:0;border:0;background:transparent;
}
body.heatmap-page #heatmap .svpn-settings .svpn-filter-section--compact + .svpn-filter-section--compact{margin:0;}
body.heatmap-page #heatmap .svpn-compact-label{
 display:block;margin:0 0 6px;color:#456772;font-size:11px;font-weight:800;
}
body.heatmap-page #heatmap .svpn-options--segment{
 grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;
 padding:3px;border:1px solid #e0eae6;border-radius:8px;background:#e9f1ee;
}
body.heatmap-page #heatmap .svpn-options--segment.svpn-options--triple{
 grid-template-columns:repeat(3,minmax(0,1fr));
}
body.heatmap-page #heatmap .svpn-options--segment .svpn-option{
 min-height:39px;padding:6px 3px;border:1px solid transparent;
 border-radius:6px;background:transparent;box-shadow:none;
 font-size:10px;line-height:1.15;color:#5d777d;
}
body.heatmap-page #heatmap .svpn-options--segment .svpn-option[aria-pressed=true]{
 background:#fff;border-color:#d2e5dc;color:#0b7858;
 box-shadow:0 1px 5px rgba(15,91,69,.08);
}
/* Non-JS fallback: retain ordinary and visible native selects. */
body.heatmap-page #heatmap .svpn-native select{
 display:block;width:100%;min-width:0;min-height:38px;padding:8px;
 border:1px solid #bcd9ce;border-radius:8px;background:#fff;color:#234c56;
 font:inherit;font-size:12px;
}
body.heatmap-page #heatmap .svpn-filter-ready .svpn-native{
 position:absolute !important;overflow:hidden !important;clip-path:inset(50%) !important;
 width:1px !important;height:1px !important;padding:0 !important;white-space:nowrap !important;
}
body.heatmap-page #heatmap .svpn-top-stage > aside.sidebar.card > #update-btn{
 display:block;width:100%;min-height:41px;margin:10px 0 0 !important;
 border:0 !important;border-radius:9px !important;
 background:#087e60 !important;color:#fff !important;font-size:13px !important;
 font-weight:800;cursor:pointer;
}
@media(max-width:1120px){
 body.heatmap-page #heatmap .svpn-options--locations{grid-template-columns:repeat(2,minmax(0,1fr));max-height:215px;}
 body.heatmap-page #heatmap .svpn-options--provider{max-height:215px;}
}
@media(max-width:620px){
 body.heatmap-page #heatmap .svpn-control-panel{grid-template-columns:minmax(0,1fr);}
 body.heatmap-page #heatmap .svpn-filter-section--worker{grid-column:1;grid-row:2;border-right:0;}
 body.heatmap-page #heatmap .svpn-filter-section--provider{grid-column:1;grid-row:3;}
 body.heatmap-page #heatmap .svpn-filter-section--protocol{grid-column:1;grid-row:4;}
 body.heatmap-page #heatmap .svpn-settings{grid-column:1;grid-row:5;}
 body.heatmap-page #heatmap .svpn-options--locations{grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible;}
 body.heatmap-page #heatmap .svpn-options--protocol{grid-template-columns:repeat(2,minmax(0,1fr));}
 body.heatmap-page #heatmap .svpn-options--provider{max-height:245px;}
}
@media(max-width:370px){
 body.heatmap-page #heatmap .svpn-settings{grid-template-columns:minmax(0,1fr);row-gap:13px;}
}
@media(prefers-reduced-motion:reduce){body.heatmap-page #heatmap .svpn-option{transition:none;}}