/* Colocation page — uses the site's own variables (style.css) */
.cl-kinds{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px}
.cl-kind,.cl-city{font:inherit;font-weight:600;font-size:15px;padding:11px 22px;border-radius:999px;border:1.5px solid var(--border);background:#fff;color:var(--text);cursor:pointer;transition:.15s}
.cl-kind:hover,.cl-city:hover{border-color:var(--accent);color:var(--accent)}
.cl-kind.active,.cl-city.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cl-cities{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.cl-city{padding:8px 18px;font-size:14px}
.cl-view{display:flex;flex-direction:column;gap:22px}
.cl-msg{text-align:center;color:var(--text-2);padding:36px 0;margin:0}

/* a switch card: white, thin rounded blue frame */
.cl-switch{background:#fff;border:1.5px solid var(--accent);border-radius:var(--radius);padding:20px 22px 18px;box-shadow:0 6px 24px rgba(11,92,255,.06)}
.cl-sw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.cl-sw-title h3{margin:0 0 4px;font-size:20px}
.cl-loc{margin:0;color:var(--text-2);font-size:14px}
.cl-map{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}.cl-map:hover{text-decoration:underline}
.cl-live{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding:6px 12px;border-radius:999px;background:var(--accent-soft)}
.cl-live b{color:var(--accent);letter-spacing:.06em}
.cl-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:cl-pulse 1.6s infinite}
.cl-switch.lost .cl-dot{background:#9ca3af;animation:none}.cl-switch.lost .cl-live b{color:var(--text-2)}
@keyframes cl-pulse{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.cl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--text-2);margin:0 0 12px}
.cl-lg{display:inline-flex;align-items:center}
i.cl-sw{display:inline-block;width:18px;height:12px;border-radius:2px;margin-right:6px;background:#0b0e12;border:2px solid #98a2ae;box-sizing:border-box}
i.cl-sw.up,i.cl-sw.active{background:#14532d;box-shadow:inset 0 0 6px rgba(74,222,128,.8)}
i.cl-sw.active{animation:cl-glow 1s steps(2,jump-none) infinite}
i.cl-sw.other{background:#78350f;box-shadow:inset 0 0 6px rgba(245,158,11,.8)}
i.cl-sw.r-available{outline:2px solid #0d9488;outline-offset:1px}i.cl-sw.r-reserved{outline:2px solid #f59e0b;outline-offset:1px}i.cl-sw.r-rented{outline:2px solid #94a3b8;outline-offset:1px}

/* the front panel on a white background */
.cl-box{overflow:hidden}
.cl-front{display:flex;align-items:stretch;gap:18px;min-width:max-content;padding:12px 16px 10px 12px;border-radius:10px;
  background:linear-gradient(#f7f9fb,#e9edf2 14%,#dde2e9 88%,#d0d6de);border:1px solid #c1c9d3;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(15,20,25,.12)}
.cl-plate{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:100px;max-width:150px;padding:8px 10px;border-radius:6px;background:#fff;border:1px solid #c1c9d3;color:var(--text)}
.cl-plate b{font-size:12px;line-height:1.25;word-break:break-word}
.cl-sys{display:flex;gap:4px}.cl-sys i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e}.cl-sys i+i{background:#b8c1cc;box-shadow:none}
.cl-ports{display:flex;gap:24px;align-items:flex-start;flex-wrap:nowrap}
.cl-group{display:flex;gap:5px}
.cl-group.rows2{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:6px 5px}
.cl-port{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 3px 1px;border-radius:5px;border:0;background:transparent;font:inherit;cursor:default;position:relative;flex:0 0 auto}
.cl-port .leds{display:flex;gap:3px;height:5px}
.cl-port .leds i{width:6px;height:4px;border-radius:1px;background:#2a323c;box-shadow:inset 0 0 0 1px #0a0d11}
.cl-port .jack{display:block;position:relative;background:#0b0e12;border:2px solid #8b95a2;border-top-color:#b7bfca;box-sizing:border-box}
.cl-port[data-k=rj45] .jack{width:30px;height:23px;border-radius:2px 2px 3px 3px}
.cl-port[data-k=rj45] .jack::before{content:"";position:absolute;left:50%;top:-2px;width:12px;height:5px;margin-left:-6px;background:#dde2e9;border-radius:0 0 2px 2px}
.cl-port[data-k=rj45] .jack::after{content:"";position:absolute;left:4px;right:4px;bottom:1px;height:5px;background:repeating-linear-gradient(90deg,#c9a24a 0 1px,transparent 1px 3px)}
.cl-port[data-k=sfp] .jack{width:36px;height:17px;border-radius:2px;border-color:#9aa4b0}
.cl-port[data-k=sfp] .jack::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1px;background:#2a323c;border-radius:1px}
.cl-port .num{font-style:normal;font-size:9px;line-height:1;font-weight:700;color:#56606b;white-space:nowrap;font-variant-numeric:tabular-nums;margin-top:1px}
.cl-port.up .leds i:first-child,.cl-port.active .leds i:first-child{background:#4ade80;box-shadow:0 0 5px #4ade80}
.cl-port.up .jack,.cl-port.active .jack{box-shadow:inset 0 0 7px rgba(74,222,128,.6)}
.cl-port.active .leds i:last-child{background:#fbbf24;box-shadow:0 0 5px #fbbf24;animation:cl-blink 1s steps(2,jump-none) infinite}
.cl-port.active .jack{animation:cl-glow 1s steps(2,jump-none) infinite}
.cl-port.other .leds i:first-child{background:#f59e0b;box-shadow:0 0 5px #f59e0b}
.cl-port.other .jack{box-shadow:inset 0 0 7px rgba(245,158,11,.55)}
.cl-port.r-available{box-shadow:0 0 0 2px #0d9488;cursor:pointer;background:rgba(13,148,136,.10)}
.cl-port.r-available:hover,.cl-port.r-available:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px #0d9488,0 6px 12px rgba(13,148,136,.3);outline:none}
.cl-port.r-reserved{box-shadow:0 0 0 2px #f59e0b}
.cl-port.r-rented{box-shadow:0 0 0 2px #94a3b8}
@keyframes cl-blink{0%{opacity:1}50%{opacity:.25}}
@keyframes cl-glow{0%{filter:brightness(1)}50%{filter:brightness(1.6)}}
@media (prefers-reduced-motion:reduce){.cl-port.active .leds i:last-child,.cl-port.active .jack,.cl-dot,i.cl-sw.active{animation:none}}
.cl-foot{margin:10px 0 0;font-size:13.5px;color:var(--text-2)}
.cl-ts{font-variant-numeric:tabular-nums}

/* other offers */
.cl-offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.cl-offer{background:#fff;border:1.5px solid var(--accent);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px}
.cl-offer h3{margin:0;font-size:18px}
.cl-meta{list-style:none;margin:0;padding:0;color:var(--text-2);font-size:14px}
.cl-meta li{padding:2px 0}
.cl-onote{margin:0;font-size:14px;color:var(--text-2)}
.cl-price{margin:6px 0 0;font-size:26px;font-weight:700}.cl-price span{font-size:14px;font-weight:500;color:var(--text-2)}
.cl-sub{margin:0 0 8px;font-size:13px;color:var(--text-2)}
.cl-offer .btn-primary{margin-top:auto;align-self:flex-start}
.cl-badge{align-self:flex-start;margin-top:auto;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;background:#f1f5f9;color:var(--text-2)}
.cl-badge.reserved{background:#fef3c7;color:#b45309}
.cl-os{margin:0 0 20px;padding:18px 22px;border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--border)}
.cl-os h3{margin:0 0 10px;font-size:16px}
.cl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cl-chips li{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:14px;font-weight:600}

/* how to rent */
.cl-how{padding-top:10px}
.cl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.cl-steps li{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:relative}
.cl-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;margin-bottom:10px}
.cl-steps h3{margin:0 0 6px;font-size:17px}.cl-steps p{margin:0;color:var(--text-2);font-size:14.5px}
.cl-note{margin:20px 0 0;text-align:center;color:var(--text-2);font-size:14px}
@media (max-width:640px){.cl-switch{padding:16px 14px}.cl-kind{padding:10px 16px;font-size:14px}}