/* =========================================================
   ZYRODEVV STORE V2.4.52 — DESKTOP CONTACT & SERVER POLISH
   Fokus: kontak desktop dibuat ringkas, sejajar, tanpa area
   kosong besar. Mobile tetap menyembunyikan kontak server.
   ========================================================= */

@media (min-width:1024px){
  body.zyro-gridwave #panelOrderForm>.server-live-card{
    grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr)!important;
    grid-template-areas:
      "head bars"
      "terminal metrics"
      "terminal desktopinfo"
      "history details"
      "contacts contacts"!important;
    grid-template-rows:auto auto auto auto auto!important;
    align-items:start!important;
    row-gap:14px!important;
    overflow:visible!important;
  }

  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-live-head{grid-area:head!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.zyro-mini-terminal{grid-area:terminal!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-bars{grid-area:bars!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-metrics{grid-area:metrics!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-desktop-detail-grid{grid-area:desktopinfo!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.history-monitor-link{grid-area:history!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details{
    grid-area:details!important;
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }
  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details[open] .infra-content{
    max-height:340px!important;
    overflow:auto!important;
  }

  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid,
  body.zyro-gridwave .server-contact-grid{
    grid-area:contacts!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
  }

  body.zyro-gridwave .server-contact-grid>a{
    min-height:94px!important;
    height:auto!important;
    padding:15px 16px!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 22px!important;
    gap:13px!important;
    align-items:center!important;
    background:#ffffff!important;
    border:2px solid #17202b!important;
    border-radius:18px!important;
    box-shadow:4px 5px 0 rgba(17,24,39,.10)!important;
    color:#111827!important;
    overflow:hidden!important;
    text-decoration:none!important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  }
  body.zyro-gridwave .server-contact-grid>a:hover{
    transform:translateY(-2px)!important;
    border-color:#2585f5!important;
    box-shadow:5px 7px 0 rgba(37,133,245,.13)!important;
  }
  body.zyro-gridwave .server-contact-icon{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
    color:#ffffff!important;
    background:linear-gradient(145deg,#18bfa8,#367ff4)!important;
    font-size:1.05rem!important;
    font-weight:900!important;
  }
  body.zyro-gridwave .server-contact-grid>a>div{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:3px!important;
  }
  body.zyro-gridwave .server-contact-grid small{
    display:block!important;
    margin:0!important;
    color:#0b8796!important;
    font-size:.64rem!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:.10em!important;
    white-space:nowrap!important;
  }
  body.zyro-gridwave .server-contact-grid b{
    display:block!important;
    margin:0!important;
    color:#17202b!important;
    font-size:.94rem!important;
    line-height:1.25!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.zyro-gridwave .server-contact-grid em{
    display:block!important;
    margin:0!important;
    color:#6b7b8a!important;
    font-size:.72rem!important;
    line-height:1.35!important;
    font-style:normal!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.zyro-gridwave .server-contact-grid>a>i{
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    color:#0b8796!important;
    font-size:1rem!important;
    font-style:normal!important;
    font-weight:950!important;
  }

  /* Hindari ruang kosong akibat elemen dipaksa mengikuti tinggi kolom sebelah. */
  body.zyro-gridwave #panelOrderForm>.server-live-card>.history-monitor-link,
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid{
    align-self:start!important;
  }
}

@media (min-width:1024px) and (max-width:1180px){
  body.zyro-gridwave .server-contact-grid>a{
    grid-template-columns:42px minmax(0,1fr) 18px!important;
    padding:13px!important;
    gap:10px!important;
  }
  body.zyro-gridwave .server-contact-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }
  body.zyro-gridwave .server-contact-grid b{font-size:.82rem!important}
  body.zyro-gridwave .server-contact-grid em{font-size:.66rem!important}
}

@media (max-width:1023px){
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid,
  body.zyro-gridwave .server-contact-grid{
    display:none!important;
  }
}

html[data-theme='dark'] body.zyro-gridwave .server-contact-grid>a{
  background:#111827!important;
  border-color:#334155!important;
  color:#f8fafc!important;
}
html[data-theme='dark'] body.zyro-gridwave .server-contact-grid b{color:#f8fafc!important}
html[data-theme='dark'] body.zyro-gridwave .server-contact-grid em{color:#94a3b8!important}