/* Royal Server VPS product cards v4.0 - Linux + Windows */
.vps-products{--vps-accent:#25c9ff;--vps-accent2:#4169ff;--vps-rgb:37,201,255}
.vps-products .cpu-plan-group{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  max-width:1260px!important;
  margin:0 auto 54px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.vps-products .cpu-plan-group:before,.vps-products .cpu-plan-group:after{display:none!important}
.vps-products .cpu-plan-group .vps-card{
  --card-accent:var(--vps-accent);
  --card-accent2:var(--vps-accent2);
  --card-rgb:var(--vps-rgb);
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(var(--card-rgb),.34)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% -10%,rgba(var(--card-rgb),.18),transparent 34%),
    linear-gradient(155deg,rgba(8,24,43,.98),rgba(4,12,25,.99))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045)!important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
.vps-products .cpu-plan-group .vps-card:before{
  content:""!important;display:block!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:3px!important;inset:auto auto 0 0!important;
  background:linear-gradient(180deg,var(--card-accent),var(--card-accent2))!important;
  box-shadow:0 0 20px rgba(var(--card-rgb),.50)!important;pointer-events:none!important;z-index:1!important
}
.vps-products .cpu-plan-group .vps-card:after{
  content:""!important;display:block!important;position:absolute!important;right:-70px!important;top:-85px!important;width:185px!important;height:185px!important;border-radius:50%!important;
  background:radial-gradient(circle,rgba(var(--card-rgb),.16),transparent 68%)!important;pointer-events:none!important;z-index:0!important
}
.vps-products .cpu-plan-group .vps-card>*{position:relative;z-index:2}
.vps-products .cpu-plan-group .vps-card:hover{transform:translateY(-5px)!important;border-color:rgba(var(--card-rgb),.64)!important;box-shadow:0 26px 68px rgba(0,0,0,.40),0 0 36px rgba(var(--card-rgb),.09)!important}

/* family themes */
.vps-products .i9-plan-group .vps-card{--card-accent:#24c7ff;--card-accent2:#376dff;--card-rgb:36,199,255}
.vps-products .xeon-plan-group .vps-card{--card-accent:#ad7cff;--card-accent2:#6954ff;--card-rgb:151,105,255}
.vps-products .amd-plan-group .vps-card,.vps-products .ryzen-plan-group .vps-card{--card-accent:#ff744d;--card-accent2:#ff3d46;--card-rgb:255,91,71;background:radial-gradient(circle at 92% -10%,rgba(255,78,57,.17),transparent 34%),linear-gradient(155deg,rgba(38,15,18,.98),rgba(14,8,13,.99))!important}

/* product header */
.vps-products .cpu-plan-group .vps-name{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  padding:0 74px 13px 0!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
.vps-products .cpu-plan-group .vps-icon{
  width:54px!important;height:54px!important;min-width:54px!important;
  border-radius:15px!important;display:grid!important;place-items:center!important;
  border:1px solid rgba(var(--card-rgb),.38)!important;
  background:linear-gradient(145deg,rgba(var(--card-rgb),.16),rgba(var(--card-rgb),.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(var(--card-rgb),.09)!important;
}
.vps-products .cpu-plan-group .linux-vps-icon{font-size:25px!important}
.vps-products .cpu-plan-group .windows-vps-icon{grid-template-columns:repeat(2,12px)!important;grid-template-rows:repeat(2,12px)!important;gap:3px!important}
.vps-products .cpu-plan-group .windows-vps-icon span{width:12px!important;height:12px!important;border-radius:2px!important;background:linear-gradient(135deg,var(--card-accent),var(--card-accent2))!important;box-shadow:0 0 10px rgba(var(--card-rgb),.22)!important}
.vps-products .cpu-plan-group .vps-name h3{margin:0 0 5px!important;color:#f7fbff!important;font-family:Inter,Arial,sans-serif!important;font-size:17px!important;line-height:1.18!important;font-weight:900!important;letter-spacing:-.025em!important;overflow-wrap:anywhere!important}
.vps-products .cpu-plan-group .vps-name span{display:block!important;color:#8298b1!important;font-size:11px!important;line-height:1.45!important;font-weight:650!important;overflow-wrap:anywhere!important}

/* specification rail */
.vps-products .cpu-plan-group .vps-spec{
  grid-column:span 2!important;
  min-width:0!important;min-height:66px!important;
  padding:10px 7px!important;border-radius:13px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  background:linear-gradient(180deg,rgba(5,17,31,.82),rgba(3,11,22,.70))!important;
  border:1px solid rgba(var(--card-rgb),.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.vps-products .cpu-plan-group .vps-spec small{display:block!important;margin:0 0 5px!important;color:var(--card-accent)!important;font-size:8px!important;line-height:1!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.10em!important;white-space:nowrap!important}
.vps-products .cpu-plan-group .vps-spec strong{display:block!important;max-width:100%!important;color:#f5f9ff!important;font-size:12px!important;line-height:1.2!important;font-weight:900!important;white-space:normal!important;overflow-wrap:anywhere!important}

/* price + order command bar */
.vps-products .cpu-plan-group .vps-price{
  grid-column:1/4!important;
  min-width:0!important;height:52px!important;
  display:flex!important;align-items:center!important;gap:5px!important;
  padding:0 12px!important;border-radius:14px!important;
  background:rgba(2,9,18,.58)!important;border:1px solid rgba(var(--card-rgb),.16)!important;
  color:var(--card-accent)!important;font-family:Orbitron,Inter,sans-serif!important;font-size:25px!important;line-height:1!important;font-weight:950!important;white-space:nowrap!important;text-align:left!important;
}
.vps-products .cpu-plan-group .vps-price span{display:inline!important;margin:4px 0 0!important;color:#7f94ad!important;font-family:Inter,Arial,sans-serif!important;font-size:9px!important;font-weight:800!important;white-space:nowrap!important}
.vps-products .cpu-plan-group .vps-btn{
  grid-column:4/-1!important;
  width:100%!important;height:52px!important;min-width:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.05)!important;border-radius:14px!important;
  background:linear-gradient(90deg,var(--card-accent2),var(--card-accent))!important;
  color:#fff!important;text-decoration:none!important;font-family:Inter,Arial,sans-serif!important;font-size:11px!important;font-weight:950!important;
  box-shadow:0 12px 28px rgba(var(--card-rgb),.18)!important;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease!important
}
.vps-products .cpu-plan-group .vps-btn:after{content:"  →";margin-left:7px;font-size:14px}
.vps-products .cpu-plan-group .vps-btn:hover{transform:translateY(-2px)!important;filter:brightness(1.08)!important;box-shadow:0 16px 34px rgba(var(--card-rgb),.27)!important}

.vps-products .cpu-plan-group .popular{
  position:absolute!important;right:14px!important;top:14px!important;z-index:5!important;
  padding:6px 9px!important;border-radius:999px!important;
  border:1px solid rgba(var(--card-rgb),.30)!important;background:linear-gradient(90deg,var(--card-accent2),var(--card-accent))!important;
  color:#fff!important;font-size:8px!important;line-height:1!important;font-weight:950!important;letter-spacing:.04em!important;
  box-shadow:0 8px 22px rgba(var(--card-rgb),.18)!important
}
.vps-products .cpu-plan-group .vps-card.popular-row{border-color:rgba(var(--card-rgb),.62)!important;box-shadow:0 22px 62px rgba(0,0,0,.34),0 0 30px rgba(var(--card-rgb),.10)!important}

@media(max-width:1050px){
  .vps-products .cpu-plan-group{grid-template-columns:1fr!important;max-width:760px!important}
}
@media(max-width:620px){
  .vps-products .cpu-plan-group .vps-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:15px!important;gap:8px!important}
  .vps-products .cpu-plan-group .vps-name{grid-column:1/-1!important;padding-right:58px!important;grid-template-columns:48px minmax(0,1fr)!important}
  .vps-products .cpu-plan-group .vps-icon{width:48px!important;height:48px!important;min-width:48px!important}
  .vps-products .cpu-plan-group .vps-spec{grid-column:span 1!important;min-height:60px!important}
  .vps-products .cpu-plan-group .vps-spec:nth-of-type(6){grid-column:1/-1!important}
  .vps-products .cpu-plan-group .vps-price{grid-column:1/-1!important;height:48px!important;justify-content:center!important;font-size:24px!important}
  .vps-products .cpu-plan-group .vps-btn{grid-column:1/-1!important;height:48px!important}
}