/* ZyroDevv Store V2.4.21.3 — forced panel server variant card UI */
#panelOrderForm .panel-server-variant-title{
  margin-top:30px !important;
  margin-bottom:12px !important;
}
#panelOrderForm .panel-server-variant-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
}
#panelOrderForm .panel-server-variant-card{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  min-height:152px !important;
  margin:0 !important;
  padding:18px 16px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  background:var(--card) !important;
  color:var(--text) !important;
  font:inherit !important;
  text-align:left !important;
  box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
  cursor:pointer !important;
  overflow:hidden !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
}
#panelOrderForm .panel-server-variant-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:4px !important;
  background:linear-gradient(90deg,#14b8a6,#3b82f6) !important;
  opacity:.55 !important;
}
#panelOrderForm .panel-server-variant-card.tier-high::before{
  background:linear-gradient(90deg,#2563eb,#7c3aed) !important;
}
#panelOrderForm .panel-server-variant-card.tier-ultra::before{
  background:linear-gradient(90deg,#7c3aed,#ec4899) !important;
}
#panelOrderForm .panel-server-variant-card.active{
  border:2px solid #0f8f99 !important;
  background:linear-gradient(145deg,rgba(20,184,166,.105),rgba(255,255,255,.98)) !important;
  box-shadow:0 16px 36px rgba(15,143,153,.14) !important;
}
#panelOrderForm .panel-server-variant-card.tier-high.active{
  border-color:#2563eb !important;
  background:linear-gradient(145deg,rgba(37,99,235,.11),rgba(255,255,255,.98)) !important;
}
#panelOrderForm .panel-server-variant-card.tier-ultra.active{
  border-color:#7c3aed !important;
  background:linear-gradient(145deg,rgba(124,58,237,.11),rgba(255,255,255,.98)) !important;
}
#panelOrderForm .panel-server-variant-card.active::after{
  content:"✓" !important;
  position:absolute !important;
  right:12px !important;
  top:12px !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#0f8f99 !important;
  color:#fff !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}
#panelOrderForm .panel-server-variant-card.tier-high.active::after{background:#2563eb !important}
#panelOrderForm .panel-server-variant-card.tier-ultra.active::after{background:#7c3aed !important}
#panelOrderForm .panel-server-variant-icon{
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:4px !important;
  padding:9px !important;
  border-radius:15px !important;
  background:rgba(15,143,153,.09) !important;
  margin:0 0 14px !important;
  box-sizing:border-box !important;
}
#panelOrderForm .panel-server-variant-card.tier-high .panel-server-variant-icon{background:rgba(37,99,235,.09) !important}
#panelOrderForm .panel-server-variant-card.tier-ultra .panel-server-variant-icon{background:rgba(124,58,237,.09) !important}
#panelOrderForm .panel-server-variant-icon i{
  display:block !important;
  width:5px !important;
  border-radius:5px !important;
  background:#0f8f99 !important;
}
#panelOrderForm .panel-server-variant-icon i:nth-child(1){height:9px !important}
#panelOrderForm .panel-server-variant-icon i:nth-child(2){height:16px !important}
#panelOrderForm .panel-server-variant-icon i:nth-child(3){height:23px !important}
#panelOrderForm .panel-server-variant-card.tier-high .panel-server-variant-icon i{background:#2563eb !important}
#panelOrderForm .panel-server-variant-card.tier-ultra .panel-server-variant-icon i{background:#7c3aed !important}
#panelOrderForm .panel-server-variant-card>div{
  min-width:0 !important;
}
#panelOrderForm .panel-server-variant-card>div>b{
  display:block !important;
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.25 !important;
  color:var(--text) !important;
}
#panelOrderForm .panel-server-variant-card>div>small{
  display:block !important;
  margin-top:5px !important;
  min-height:31px !important;
  color:var(--muted) !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}
#panelOrderForm .panel-server-variant-card>strong{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:12px !important;
  padding:6px 9px !important;
  border-radius:999px !important;
  background:rgba(15,143,153,.09) !important;
  color:#0f8f99 !important;
  font-size:.69rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#panelOrderForm .panel-server-variant-card.tier-high>strong{
  background:rgba(37,99,235,.09) !important;
  color:#2563eb !important;
}
#panelOrderForm .panel-server-variant-card.tier-ultra>strong{
  background:rgba(124,58,237,.09) !important;
  color:#7c3aed !important;
}
#panelOrderForm .panel-server-recommended{
  position:absolute !important;
  right:10px !important;
  bottom:10px !important;
  padding:5px 7px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#2563eb,#7c3aed) !important;
  color:#fff !important;
  font-size:.52rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
}
#panelOrderForm .panel-server-variant-note{
  margin:10px 2px 0 !important;
  color:var(--muted) !important;
  font-size:.76rem !important;
}
@media (hover:hover){
  #panelOrderForm .panel-server-variant-card:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(37,99,235,.28) !important;
    box-shadow:0 16px 34px rgba(15,23,42,.09) !important;
  }
}
@media(max-width:640px){
  #panelOrderForm .panel-server-variant-grid{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }
  #panelOrderForm .panel-server-variant-card{
    min-height:108px !important;
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:12px !important;
    padding:16px !important;
  }
  #panelOrderForm .panel-server-variant-icon{
    width:46px !important;
    height:46px !important;
    margin:0 !important;
  }
  #panelOrderForm .panel-server-variant-card>div>small{
    min-height:0 !important;
    padding-right:2px !important;
  }
  #panelOrderForm .panel-server-variant-card>strong{
    margin:0 !important;
    padding:6px 8px !important;
    align-self:center !important;
  }
  #panelOrderForm .panel-server-recommended{
    right:12px !important;
    bottom:8px !important;
  }
  #panelOrderForm .panel-server-variant-card.active::after{
    right:10px !important;
    top:9px !important;
    width:21px !important;
    height:21px !important;
  }
}
@media(max-width:420px){
  #panelOrderForm .panel-server-variant-card{
    grid-template-columns:44px minmax(0,1fr) !important;
    row-gap:7px !important;
  }
  #panelOrderForm .panel-server-variant-card>strong{
    grid-column:2 !important;
    justify-self:start !important;
  }
  #panelOrderForm .panel-server-recommended{
    top:10px !important;
    right:42px !important;
    bottom:auto !important;
  }
}
html[data-theme="dark"] #panelOrderForm .panel-server-variant-card{
  background:rgba(20,27,51,.96) !important;
}
html[data-theme="dark"] #panelOrderForm .panel-server-variant-card.active{
  background:linear-gradient(145deg,rgba(20,184,166,.17),rgba(20,27,51,.96)) !important;
}
html[data-theme="dark"] #panelOrderForm .panel-server-variant-card.tier-high.active{
  background:linear-gradient(145deg,rgba(37,99,235,.18),rgba(20,27,51,.96)) !important;
}
html[data-theme="dark"] #panelOrderForm .panel-server-variant-card.tier-ultra.active{
  background:linear-gradient(145deg,rgba(124,58,237,.18),rgba(20,27,51,.96)) !important;
}

/* V2.4.21.4 — compact horizontal rail, no zero-price label */
#panelOrderForm .panel-server-variant-card>strong:empty,
#panelOrderForm .panel-server-variant-note:empty{display:none !important}

@media(max-width:640px){
  #panelOrderForm .panel-server-variant-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(172px,72vw) !important;
    grid-template-columns:none !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
    padding:3px 2px 10px !important;
    margin-right:-2px !important;
  }
  #panelOrderForm .panel-server-variant-grid::-webkit-scrollbar{display:none !important}
  #panelOrderForm .panel-server-variant-card{
    scroll-snap-align:start !important;
    min-height:126px !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    grid-template-rows:auto 1fr !important;
    align-items:start !important;
    column-gap:10px !important;
    row-gap:5px !important;
    padding:15px 14px !important;
    border-radius:22px !important;
  }
  #panelOrderForm .panel-server-variant-icon{
    grid-row:1 / span 2 !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
  }
  #panelOrderForm .panel-server-variant-card>div>b{
    padding-right:22px !important;
    font-size:.95rem !important;
  }
  #panelOrderForm .panel-server-variant-card>div>small{
    min-height:0 !important;
    margin-top:4px !important;
    padding:0 !important;
    font-size:.68rem !important;
    line-height:1.38 !important;
  }
  #panelOrderForm .panel-server-variant-card>strong{
    grid-column:2 !important;
    margin:2px 0 0 !important;
    justify-self:start !important;
  }
  #panelOrderForm .panel-server-recommended{
    top:auto !important;
    right:10px !important;
    bottom:9px !important;
    font-size:.48rem !important;
  }
  #panelOrderForm .panel-server-variant-card.active::after{
    right:9px !important;
    top:9px !important;
    width:20px !important;
    height:20px !important;
  }
  #panelOrderForm .panel-server-variant-note{
    margin-top:2px !important;
  }
}

@media(max-width:390px){
  #panelOrderForm .panel-server-variant-grid{
    grid-auto-columns:minmax(164px,78vw) !important;
  }
}