/* SecureVPN V16.1 focused correction: Heatmap layout + country protocol headings.
   Loaded after V16. Do not alter the performance colors, data, click targets or API. */

/* Keep the live Heatmap centered at the same editorial width as the site's other tools. */
body.heatmap-page.svpn-v2 .svpn-v2-content {
  width:100%!important;max-width:1240px!important;margin-inline:auto!important;
  padding-inline:clamp(14px,2vw,28px)!important;box-sizing:border-box!important;
}
body.heatmap-page.svpn-v2 #heatmap.page-shell,
body.heatmap-page.svpn-v2 #heatmap .dashboard{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}

/* The detail card is the FOURTH item of a three-column summary grid.
   It must occupy the entire second row, rather than one narrow column. */
body.heatmap-page.svpn-v2 #heatmap .summary-grid.svpn-two-best-grid > .detail-card {
  grid-column:1/-1!important;width:100%!important;max-width:100%!important;
  min-width:0!important;justify-self:stretch!important;box-sizing:border-box!important;
}
body.heatmap-page.svpn-v2 #heatmap .summary-grid.svpn-two-best-grid > .detail-card dl {
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;width:100%!important;max-width:100%!important;
}
body.heatmap-page.svpn-v2 #heatmap .detail-card dl > div {
  min-width:0!important;width:auto!important;overflow-wrap:break-word!important;
}
body.heatmap-page.svpn-v2 #heatmap .detail-card dl > div:has(#detail-exit-ip),
body.heatmap-page.svpn-v2 #heatmap .detail-card dl > div:has(#detail-confidence) {
  grid-column:1/-1!important;
}
body.heatmap-page.svpn-v2 #heatmap .detail-card dd {
  overflow-wrap:anywhere!important;word-break:normal!important;
  font-size:14px!important;line-height:1.5!important;color:#173d4b!important;
  -webkit-text-fill-color:#173d4b!important;
}

/* Header text in the country's protocol comparison: never white on pale mint. */
body.svpn-dest-v15 .destination-shell .protocol-compare-card .protocol-compare-table thead th,
body.svpn-dest-v15 .destination-shell .protocol-compare-card .protocol-compare-table thead th * {
  background-color:#153d46!important;color:#f8fffc!important;
  -webkit-text-fill-color:#f8fffc!important;opacity:1!important;
  font-weight:750!important;
}

@media (min-width:681px) and (max-width:1050px) {
  body.heatmap-page.svpn-v2 #heatmap .summary-grid.svpn-two-best-grid > .detail-card dl {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:680px) {
  /* Native compact cards: eight visible, tappable UTC blocks per destination.
     No 985px table, no sideways swipe. No DOM or JS modification. */
  body.heatmap-page.svpn-v2 #heatmap #heatmap-scroll {
    overflow-x:visible!important;overflow-y:visible!important;
    max-width:100%!important;width:100%!important;min-width:0!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table {
    display:block!important;min-width:0!important;width:100%!important;max-width:100%!important;
    border:0!important;border-spacing:0!important;background:transparent!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table thead {
    position:absolute!important;width:1px!important;height:1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
    width:100%!important;min-width:0!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody tr {
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;box-sizing:border-box!important;
    min-width:0!important;width:100%!important;padding:10px!important;
    border:1px solid #d1e4dc!important;border-radius:13px!important;background:#fff!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.destination {
    display:block!important;grid-column:1/-1!important;position:static!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:auto!important;box-sizing:border-box!important;
    padding:9px 10px!important;margin:0!important;
    border:1px solid #d0e7db!important;border-radius:9px!important;
    white-space:normal!important;z-index:auto!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.destination a {
    display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:5px!important;
    min-width:0!important;font-size:14px!important;line-height:1.35!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell {
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;gap:4px!important;min-width:0!important;
    width:100%!important;height:67px!important;padding:7px 2px!important;
    border:1px solid rgba(0,0,0,.11)!important;border-radius:8px!important;
    font-size:16px!important;font-weight:800!important;line-height:1.1!important;
    touch-action:manipulation!important;box-sizing:border-box!important;cursor:pointer!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell::before {
    content:"UTC";font-size:10px!important;font-weight:700!important;
    letter-spacing:0!important;line-height:1.1!important;opacity:.84!important;
    color:inherit!important;-webkit-text-fill-color:currentColor!important;
  }
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(2)::before{content:"00–02"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(3)::before{content:"03–05"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(4)::before{content:"06–08"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(5)::before{content:"09–11"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(6)::before{content:"12–14"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(7)::before{content:"15–17"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(8)::before{content:"18–20"}
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody td.hm-cell:nth-child(9)::before{content:"21–23"}
  body.heatmap-page.svpn-v2 #heatmap .heatmap-mobile-scroll-note {
    display:none!important;
  }
  body.heatmap-page.svpn-v2 #heatmap .summary-grid.svpn-two-best-grid > .detail-card dl {
    grid-template-columns:minmax(0,1fr)!important;gap:9px!important;
  }
  body.heatmap-page.svpn-v2 #heatmap .summary-grid.svpn-two-best-grid > .detail-card {
    grid-column:1/-1!important;width:100%!important;
  }
}
@media (max-width:345px) {
  body.heatmap-page.svpn-v2 #heatmap table#heatmap-table tbody tr {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}