/* Minimal styling for speedtest popup (fits modal - no outer scroll) */
/* Palette:
   Dark Blue:   #1D242B
   Converge:    #0077C0
   Light Blue:  #C7EEFF
   Off White:   #FAFAFA
*/
.speedtest-popup { display:none; position:fixed; inset:0; z-index:9996; }
.speedtest-popup .speedtest-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* outer content: header fixed, body grows */
.speedtest-popup .speedtest-content {
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(0.95);
  z-index:9999;
  width:min(1000px,94%);
  max-width:1000px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border-radius:16px;
  overflow:visible;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.1);
  border: 1px solid #e0e7ff;
  font-family:inherit;
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUp {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* header (fixed) */
.speedtest-content .header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  background: linear-gradient(135deg, #0077C0 0%, #0055A0 100%);
  color:#ffffff;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.speedtest-content .header h3 { 
  margin:0; font-size:20px; font-weight:700; display:flex; gap:10px; align-items:center; color:#ffffff;
  letter-spacing: 0.3px;
}
.speedtest-close-btn { 
  background:rgba(255,255,255,0.2);
  border:none;
  width:36px;
  height:36px;
  border-radius:8px;
  font-size:20px;
  color:#ffffff;
  cursor:pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speedtest-close-btn:hover {
  background:rgba(255,255,255,0.3);
  transform: scale(1.1);
}

/* body: grows and contains iframe wrapper; no outer modal scrollbar */
.speedtest-content .body {
  padding:24px;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1 1 auto;
  overflow:hidden;
}

/* controls */
#start-speedtest-btn {
  background: linear-gradient(135deg, #0077C0 0%, #0055A0 100%);
  color:#fff;
  border: 2px solid transparent;
  padding:12px 28px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,119,192,0.3);
}
#start-speedtest-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,119,192,0.4);
}
#start-speedtest-btn[disabled]{ 
  opacity:0.6;
  cursor:not-allowed;
  transform: none;
}
#speedtest-loader { 
  display:inline-block; margin-left:8px; color:#0077C0; font-size:13px; font-weight:600;
}

/* frame area takes remaining height and prevents modal scrollbar */
#speedtest-frame-wrap {
  flex:1 1 auto;
  min-height:240px;
  height:100%;
  max-height: calc(85vh - 180px);
  background:#f8fbff;
  border:1px solid #e0e7ff;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ensure iframe fills wrapper */
#speedtest-frame-wrap iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* results block */
#speedtest-result {
  white-space:pre-wrap;
  margin-top:8px;
  background: linear-gradient(135deg, #E8F7FF 0%, #F0FAFF 100%);
  border:1px solid #B3E5FF;
  padding:16px;
  border-radius:8px;
  display:none;
  color:#0055A0;
  font-size:13px;
  font-weight:600;
}

/* responsive tweaks */
@media (max-width:700px){
  .speedtest-content { 
    width:96%;
    max-height:90vh;
    border-radius: 12px;
  }
  #speedtest-frame-wrap { 
    max-height:calc(90vh - 200px);
  }
  .speedtest-content .header h3 { 
    font-size:16px;
  }
  .speedtest-content .body {
    padding: 16px;
  }
}