/* ===============================
   VPS Pricing Slider Styles
   Extracted from backup.html (slider/interactive only)
   =============================== */

/* Container */
.pricing-interactive{background:var(--bg-secondary);border-radius:30px;padding:3rem 2rem;margin-top:4rem;position:relative;overflow:hidden}
.pricing-interactive::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(249,109,0,.05) 0%,transparent 70%);pointer-events:none}

/* OS Switcher */
.os-wrap{display:flex;justify-content:center;margin:12px 0 10px}
.os-toggle{display:flex;gap:10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03)}
.os-btn{border:0;background:transparent;color:var(--text-secondary);padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:800;display:flex;gap:8px;align-items:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.os-btn.active{background:linear-gradient(135deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));color:#fff;box-shadow:0 8px 25px rgba(237,99,7,.3);transform:translateY(-1px)}

/* Tabs */
.tabs{max-width:1200px;margin:0 auto;border-radius:18px 18px 0 0;overflow:hidden;border:1px solid var(--border-color);background:var(--rackzar-medium);display:flex;flex-wrap:wrap;box-shadow:0 18px 60px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03)}
.tab{flex:1;min-width:0;text-align:center;padding:14px 8px;cursor:pointer;color:var(--text-secondary);font-weight:800;display:flex;gap:4px;align-items:center;justify-content:center;background:var(--rackzar-dark);transition:transform .2s ease,background .2s ease,box-shadow .2s ease;position:relative;font-size:.85rem}
.tab:not(:last-child){border-right:1px solid var(--border-color)}
.tab:hover{background:var(--rackzar-medium);transform:translateY(-1px)}
.tab.active{background:linear-gradient(135deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));color:#fff;box-shadow:0 10px 30px rgba(237,99,7,.32) inset,0 12px 30px rgba(237,99,7,.28)}
.tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;transition:background .3s ease}
.tab.active::after{background:var(--white)}

/* Hero */
.hero{max-width:1200px;margin:0 auto;background:linear-gradient(135deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));padding:22px;text-align:center;position:relative;overflow:hidden}
.hero:before{content:'';position:absolute;inset:0;opacity:.15;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3) 0 2px,transparent 3px) 0 0/50px 50px}
.hero h2{margin:0 0 6px;font-size:23px;font-weight:900;letter-spacing:.1px}
.hero p{margin:0;opacity:.96}

/* Shell */
.wrap{max-width:1200px;margin:14px auto;padding:0 10px}

/* Selector / Slider */
.selector{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:0 0 16px 16px;padding:18px;margin-top:14px;box-shadow:0 10px 35px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03)}
.selector h4{margin:0 0 8px;font-weight:800}
.selector .helper{text-align:justify;color:var(--rackzar-orange-bright);font-size:14px;line-height:1.35;margin:4px auto 16px;max-width:auto}
.slider-box{position:relative;background:var(--rackzar-dark);border:1px solid var(--border-color);border-radius:0;padding:32px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.slider-labels{display:flex;justify-content:space-between;margin-top:.1rem;font-size:.95rem;color:var(--rackzar-orange-dark);font-weight:700;opacity:.9}
.track{position:relative;height:16px;background:#3b424e;border-radius:0;cursor:pointer;box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));box-shadow:0 2px 10px rgba(237,99,7,.28),inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none}
.ticks{position:absolute;inset:0;height:100%;pointer-events:none}
.tick{position:absolute;top:2px;bottom:2px;width:2px;background:rgba(255,255,255,.14);transform:translateX(-50%);border-radius:0;cursor:pointer;pointer-events:auto}
.tick.done{background:rgba(255,179,128,.9)}
.bubble{position:absolute;top:-40px;transform:translateX(-50%);background:linear-gradient(135deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));color:#fff;padding:6px 10px;border-radius:10px;font-weight:900;font-size:12px;white-space:nowrap;box-shadow:0 6px 16px rgba(237,99,7,.35)}
.bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--rackzar-orange-bright)}
.range{position:absolute;left:0;right:0;top:0;height:16px;opacity:0;appearance:none;cursor:pointer}

/* Plan */
.plan{background:var(--bg-secondary);border:1px solid var(--border-color);padding:16px;margin-top:14px;position:relative;box-shadow:0 15px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03)}
.plan:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));opacity:.9;border-radius:12px 12px 0 0}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.head-left h3{margin:0 0 6px;font-size:22px;font-weight:900;color:#ffd7c4}
.price{display:flex;gap:4px;align-items:baseline}
.price .cur{opacity:.9}.price .val{font-size:32px;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.head-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Interactive Badge & Promo Badges */
.interactive-badge{display:inline-block;background:linear-gradient(135deg,rgba(237,99,7,.15),rgba(249,109,0,.15));border:1px solid rgba(249,109,0,.3);border-radius:50px;padding:8px 16px;margin-bottom:1.5rem;font-size:.85rem;font-weight:600;color:var(--rackzar-orange-bright);text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(10px)}
.badge{display:none;border-radius:999px;padding:8px 16px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;position:relative;animation:pulse-glow 2s infinite}
.badge.on{display:inline-flex;align-items:center;gap:4px}
.badge.popular{background:linear-gradient(135deg,var(--success),#20c05a);color:#fff;box-shadow:0 8px 25px rgba(39,174,96,.4),0 0 20px rgba(39,174,96,.2)}
.badge.popular::before {
    font: var(--fa-font-solid);
    content: "\f005";
    font-size: 10px;
    margin-right: 2px;
}
.badge.promo{background:linear-gradient(135deg,var(--warning),#F39C12);color:red;box-shadow:0 8px 25px rgba(243,156,18,.4),0 0 20px rgba(243,156,18,.2);animation:promo-pulse 1.5s infinite}
.badge.promo::before{
    font: var(--fa-font-solid);  /* uses whatever FA solid font is loaded */
    content: "\f06d";
    color: #E74C3C;
    font-size: 20px;
    margin-right: 2px;
}

@keyframes pulse-glow{0%,100%{transform:scale(1);box-shadow:0 8px 25px rgba(39,174,96,.4),0 0 20px rgba(39,174,96,.2)}50%{transform:scale(1.05);box-shadow:0 12px 35px rgba(39,174,96,.6),0 0 30px rgba(39,174,96,.4)}}
@keyframes promo-pulse{0%,100%{transform:scale(1);box-shadow:0 8px 25px rgba(243,156,18,.4),0 0 20px rgba(243,156,18,.2)}50%{transform:scale(1.08);box-shadow:0 15px 40px rgba(243,156,18,.6),0 0 35px rgba(243,156,18,.5)}}

/* Order button */
.order{background:linear-gradient(135deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));color:#fff;text-decoration:none;border-radius:12px;padding:10px 14px;font-weight:900;display:inline-flex;gap:8px;align-items:center;box-shadow:0 10px 28px rgba(237,99,7,.35);text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden}
.order:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.order:hover:before{left:100%;transition:left .6s}
.order:hover{transform:translateY(-2px);text-decoration:none;color:#fff}

/* Specs tiles */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.spec{position:relative;background:linear-gradient(145deg,#232933,#1d222a);border:1px solid var(--border-color);border-radius:12px;text-align:center;padding:10px;box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.spec::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--rackzar-orange-dark),var(--rackzar-orange-bright));transform:scaleX(0);transition:transform .3s ease;border-radius:12px 12px 0 0}
.spec:hover::before{transform:scaleX(1)}
.spec:hover{transform:translateY(-8px);border-color:rgba(237,99,7,.22);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(237,99,7,.12) inset;background:#222a34}
.spec .i{font-size:2rem;color:var(--rackzar-orange-dark);margin-bottom:.75rem;transition:all .3s ease}
.spec:hover .i{transform:scale(1.1) rotate(5deg);color:var(--rackzar-orange-bright)}
.spec .k{font-size:.8rem;color:#aab1bd;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;line-height:1.2}
.spec .v{font-size:1.25rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem;line-height:1}
.spec .u{font-size:.75rem;color:#aab1bd;font-weight:500;line-height:1}

/* Features accordion (within plan) */
.features{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:14px;margin-top:16px;box-shadow:0 10px 35px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03)}
.f-head{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px;user-select:none}
.f-toggle{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px dashed #4c5360;border-radius:999px;background:rgba(0,0,0,.1);cursor:pointer;font-weight:800;font-size:12px;color:#e8ebf0;transition:color .2s ease,transform .2s ease}
.f-toggle:hover{color:var(--rackzar-orange-dark)}
.f-toggle .hint{font-size:10px;color:#ffb185;background:#3a2a22;border:1px solid rgba(237,99,7,.27);padding:2px 6px;border-radius:999px;margin-left:6px}
.f-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.f-toggle i{transition:transform .25s ease;color:var(--rackzar-orange-dark)}
.f-toggle i.expanded{transform:rotate(180deg);color:var(--rackzar-orange-dark)}
.f-sub{text-align:center;color:var(--text-secondary);font-size:.9rem;margin:4px 0 .25rem}
.features-preview{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;margin-bottom:.8rem;justify-content:center}
.features-preview span{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;background:#1f252e;color:#e7edf6;border:1px solid var(--border-color);box-shadow:0 8px 18px rgba(0,0,0,.28);padding:.25rem .5rem;border-radius:999px;transition:all .3s ease}
.features-preview span i{color:var(--rackzar-orange-dark)}
.features-preview span:hover{background:#222a34;border-color:rgba(237,99,7,.30);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.35)}

/* CPU chart and scores */
.cpu-box{background:var(--rackzar-dark);border:1px solid var(--border-color);border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.cpu-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cpu-head i{color:#ffb185}
.chart-wrap{position:relative;height:180px}
.scores{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.score{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;text-align:center;padding:.75rem 1rem;box-shadow:0 6px 14px rgba(0,0,0,.35);color:var(--text-primary);transition:transform .2s ease,box-shadow .2s ease;border-left:3px solid var(--rackzar-orange-dark)}
.score .num{font-size:1.5rem;font-weight:700;color:var(--rackzar-orange-dark)}
.score .lbl{margin-top:.25rem;font-size:.85rem;text-transform:uppercase;color:var(--text-muted)}
.benchmark-link{text-align:center;margin-top:1rem}
.benchmark-link a{color:var(--rackzar-orange-dark);text-decoration:none;font-size:.8rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s ease}
.benchmark-link a:hover{color:var(--rackzar-orange-bright);text-decoration:underline}
.benchmark-link i{font-size:.75rem}

/* Feature tiles in grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.tile{position:relative;display:flex;align-items:center;gap:.75rem;background:#1f252e;border:1px solid var(--border-color);border-radius:10px;padding:12px;box-shadow:0 10px 20px rgba(0,0,0,.25);transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;cursor:help;border-left:2px solid transparent}
.tile i{font-size:1rem;color:#ff8c43;min-width:16px;text-align:center;transition:transform .15s ease,color .15s ease}
.tile strong{color:var(--text-primary);font-weight:600;font-size:.85rem;line-height:1.2}
.tile .muted{color:#aab1bd;font-size:.75rem;line-height:1.2}
.tile:hover{transform:translateY(-3px);border-color:rgba(237,99,7,.30);border-left-color:var(--rackzar-orange-dark);background:#222a34;box-shadow:0 4px 12px rgba(34,40,49,.08),0 10px 20px rgba(0,0,0,.25)}
.tile:hover i{transform:scale(1.05) rotate(3deg);color:#ff9e63}
.tile:hover strong{color:#ffffff}.tile:hover .muted{color:#d5dbe3}

/* Tooltips */
.tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--rackzar-dark);color:var(--white);padding:.5rem .75rem;border-radius:6px;font-size:.75rem;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000;margin-bottom:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:480px;min-width:280px;white-space:normal;text-align:left;pointer-events:none;color:var(--rackzar-orange-dark)}
.tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--rackzar-dark)}
.tile:hover .tooltip{opacity:1;visibility:visible}
.f-body.open{overflow:visible !important}
.features:hover .f-body{overflow:hidden}
.tile[data-tip-align="left"] .tooltip{left:0;transform:translateX(0)}
.tile[data-tip-align="left"] .tooltip::after{left:16px;transform:none}
.tile[data-tip-align="right"] .tooltip{left:auto;right:0;transform:translateX(0)}
.tile[data-tip-align="right"] .tooltip::after{left:auto;right:16px;transform:none}

/* Latency */
.lat{margin-top:12px;background:var(--rackzar-dark);border:1px solid var(--border-color);border-radius:12px;padding:12px}
.lat h5{margin:0 0 8px;text-align:center}
.lat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lat-item{display:flex;justify-content:space-between;align-items:center;background:#181d24;border:1px solid var(--border-color);border-radius:10px;padding:10px 12px;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.lat-left{display:flex;gap:3px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%}
.ms{font-weight:900;color:#ff9a5a}
.lat-item.excellent .dot{background:linear-gradient(135deg,var(--success),#27AE60);box-shadow:0 0 10px rgba(39,174,96,.4)}
.lat-item.good .dot{background:linear-gradient(135deg,var(--warning),#F39C12);box-shadow:0 0 10px rgba(243,156,18,.4)}
.lat-item.poor .dot{background:linear-gradient(135deg,var(--danger),#E74C3C);box-shadow:0 0 10px rgba(231,76,60,.4)}
.lat-item.excellent{box-shadow:0 0 0 1px rgba(46,204,113,.25) inset}
.lat-item.good{box-shadow:0 0 0 1px rgba(240,194,123,.25) inset}
.lat-item.poor{box-shadow:0 0 0 1px rgba(255,107,107,.25) inset}

/* Coming Soon pane + rocket */
.pane-frame{--rz-pane-h:360px;min-height:var(--rz-pane-h)}
#soon.soon{display:none;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:40px;text-align:center;margin-top:14px;box-shadow:0 15px 45px rgba(0,0,0,.28);position:relative;overflow:hidden}
#soon.soon h3{margin:0 0 16px;font-weight:900;font-size:24px;color:var(--text-primary)}
#soon.soon p{color:var(--text-muted);font-size:16px}
#soon.soon .rz-rocket-wrap{display:flex;align-items:flex-end;justify-content:center;position:relative;width:100%;height:calc(var(--rz-pane-h) - 80px);margin-top:18px}
#soon.soon .rz-rocket{position:relative;width:auto;height:140px;max-height:100%;transform:translate3d(0,0,0);filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));will-change:transform,opacity;object-fit:contain}
#soon.soon.go .rz-rocket{animation:rz-bounce 1.2s ease-in-out forwards}
#soon.soon .rz-smoke{position:absolute;bottom:22px;left:50%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(242,242,242,.35) 60%,transparent 70%);opacity:0;transform:translateX(-50%) scale(.8);filter:blur(.3px)}
#soon.soon.go .rz-smoke{animation:rz-smoke 1s ease-out forwards}
#soon.soon.go .rz-smoke.s2{animation-delay:.10s}#soon.soon.go .rz-smoke.s3{animation-delay:.20s}
@keyframes rz-bounce{0%{transform:translateY(0)}18%{transform:translateY(6px)}40%{transform:translateY(-28px)}60%{transform:translateY(0)}78%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes rz-smoke{0%{opacity:0;transform:translate(-50%,0) scale(.8)}15%{opacity:.45}100%{opacity:0;transform:translate(calc(-50% - 16px),18px) scale(1.6)}}
@media (max-width:640px){.pane-frame{--rz-pane-h:300px}#soon.soon .rz-rocket{height:110px}}
@media (prefers-reduced-motion:reduce){#soon.soon.go .rz-rocket,#soon.soon.go .rz-smoke{animation:none}}

/* Rocket heartbeat mode (no launch) */
#soon.soon .rz-rocket{height:350px !important;animation:rz-heartbeat 2.2s ease-in-out infinite !important;transform-origin:50% 60%}
#soon.soon .rz-smoke{display:none !important}
#soon.soon.go .rz-rocket{animation:rz-heartbeat 2.2s ease-in-out infinite !important}
@keyframes rz-heartbeat{0%{transform:scale(1)}10%{transform:scale(1.03)}20%{transform:scale(1)}30%{transform:scale(1.04)}40%{transform:scale(1)}100%{transform:scale(1)}}

/* Responsive tweaks */
@media (max-width:768px){
  .tabs{flex-direction:column;border-radius:18px}
  .tab{padding:12px 8px;font-size:.8rem;border-right:none !important;border-bottom:1px solid var(--border-color)}
  .tab:last-child{border-bottom:none}
}
@media (max-width:480px){
  .tabs{margin:0 -10px;border-radius:0}
  .tab{padding:10px 6px;font-size:.75rem}.tab i{display:none}
}