/* Secure-VPN v5.3.2 — city/location detail cards on mobile */
@media (max-width:760px){
  .destination-shell{padding-left:10px!important;padding-right:10px!important}
  .destination-table-card{overflow:visible!important}
  .destination-table-scroll{overflow:visible!important}

  #city-detail-table{display:block;width:100%;min-width:0!important;border-collapse:separate;border-spacing:0}
  #city-detail-table thead{display:none}
  #city-detail-table tbody{display:grid;gap:12px;padding:0 10px 12px}
  #city-detail-table tr{display:block;width:100%;padding:14px 14px 12px;border:1px solid rgba(109,159,202,.18);border-radius:14px;background:linear-gradient(180deg,rgba(16,39,60,.94),rgba(10,28,45,.94));box-shadow:0 8px 24px rgba(0,0,0,.12)}
  #city-detail-table td{display:grid;width:100%;grid-template-columns:minmax(104px,36%) minmax(0,1fr);gap:12px;align-items:start;padding:7px 0!important;border:0!important;text-align:right!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
  #city-detail-table td::before{font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:#7891ad;text-align:left;content:""}
  #city-detail-table td:first-child{display:block;text-align:left!important;padding:0 0 11px!important;margin-bottom:5px;border-bottom:1px solid rgba(109,159,202,.15)!important;font-size:17px}
  #city-detail-table td:first-child::before{display:none}
  #city-detail-table td:nth-child(2)::before{content:"Provider"}
  #city-detail-table td:nth-child(3)::before{content:"Protocol"}
  #city-detail-table td:nth-child(4)::before{content:"Observed node(s)"}
  #city-detail-table td:nth-child(5)::before{content:"Samples"}
  #city-detail-table td:nth-child(6)::before{content:"Median speed"}
  #city-detail-table td:nth-child(7)::before{content:"Retention"}
  #city-detail-table td:nth-child(8)::before{content:"Latency"}
  #city-detail-table td:nth-child(9)::before{content:"Loss"}
  #city-detail-table td:nth-child(10)::before{content:"Last test"}

  #city-detail-table .source-tag{margin-top:2px}
  #city-detail-table .node-compact{max-width:none;min-width:0;justify-items:end}
  #city-detail-table .node-current{justify-content:flex-end;min-width:0}
  #city-detail-table .node-label{font-size:10px}
  #city-detail-table .node-host{max-width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;text-align:left;font-size:10px}
  #city-detail-table .node-details{text-align:right;font-size:10px}
  #city-detail-table .node-expanded{justify-content:flex-end}
  #city-detail-table .muted-cell{font-size:12px}
}