/* ============================================
   C P A N E L   S E R V E R S — Light Mode CSS
   Scoped to <cpanel-server> so nothing leaks
   ============================================ */

/* Palette & tokens (scoped, not global) */
cpanel-server {
  --cpanel-orange: #FF6C2C;
  --cpanel-bg-light: #E9F6FC;
  --cpanel-dark: #293A4A;
  --cpanel-green: #85B655;
  --cpanel-gray-text: #4A5568;

  --cs-border: #e5e7eb;
  --cs-muted: #6b7280;
  --cs-danger: #b0000a;
  --cs-primary-700: #d74100;   /* hover/depth on orange */
  --cs-primary-800: #b83600;
  --cs-link: #1d4ed8;

  display: block;
  color: var(--cpanel-dark);
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Make custom tags behave as blocks */
cpanel-main,
cpanel-container,
cpanel-billing-toggle,
cpanel-grid,
cpanel-card,
cpanel-compare,
cpanel-extensions,
cpanel-ext-card,
cpanel-faq,
cpanel-faq-item,
cpanel-partner { display: block; }

/* Layout */
cpanel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

/* Headings */
cpanel-server h1,
cpanel-server h2,
cpanel-server h3,
cpanel-server h4,
cpanel-server h5 {
  font-weight: 600;
  color: var(--cpanel-dark);
  margin: 0 0 .5rem;
}

cpanel-server .cs-title {
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}

cpanel-server .cs-section-title {
  text-align: center;
  font-size: 1.8rem;
  margin: 3rem 0 1.5rem;
}

/* Buttons */
cpanel-server .cs-btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: .7rem 1.1rem;
  border-radius: .6rem;
  font-weight: 600;
  text-align: center;
  color: var(--cpanel-dark);
  background: #e9ecef;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
}

cpanel-server .cs-btn:hover { transform: translateY(-1px); }

cpanel-server .cs-btn-primary {
  border-color: var(--cpanel-orange);
  color: var(--cpanel-orange);
  background: #fff;
}

cpanel-server .cs-btn-primary.cs-active,
cpanel-server .cs-btn-primary:hover {
  background: var(--cs-primary-700);
  color: #fff;
  border-color: var(--cs-primary-700);
}

cpanel-server .cs-btn-accent {
  background: var(--cs-primary-700);
  color: #fff;
  border-color: var(--cs-primary-700);
}

cpanel-server .cs-btn-accent:hover {
  background: var(--cs-primary-800);
  border-color: var(--cs-primary-800);
}

cpanel-server .cs-btn-block { width: 100%; }
cpanel-server .cs-btn-small { padding: .5rem .9rem; font-size: .95rem; }

/* Billing toggle */
cpanel-billing-toggle { text-align: center; margin-bottom: 2rem; }
cpanel-server .cs-toggle .cs-btn + .cs-btn { margin-left: .5rem; }

/* Cards grid */
cpanel-server .cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

cpanel-server .cs-card {
  border: 1px solid var(--cs-border);
  border-radius: 14px;
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

cpanel-server .cs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border-color: #dee2e6;
}

cpanel-server .cs-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

cpanel-server .cs-card-title {
  text-align: center;
  margin: .25rem 0 1rem;
  font-size: 1.25rem;
  color: var(--cs-primary-700);
}

/* Pricing block */
cpanel-server .cs-price-wrap { text-align: center; margin: .5rem 0 1rem; }
cpanel-server .cs-price-new {
  font-size: 2rem;
  margin: .25rem 0;
  color: var(--cs-primary-700);
  font-weight: 700;
}
cpanel-server .cs-price-new sup { font-size: .6em; top: -.6em; position: relative; }

cpanel-server .cs-price-old {
  font-size: .95rem;
  color: var(--cs-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

cpanel-server .cs-strike { text-decoration: line-through; color: var(--cs-danger); opacity: .9; }
cpanel-server .cs-off { font-weight: 700; color: var(--cs-danger); }

/* Descriptions & list */
cpanel-server .cs-strong { font-weight: 700; }
cpanel-server .cs-muted { color: var(--cpanel-gray-text); }
cpanel-server .cs-desc { margin: 1rem 0; }

cpanel-server .cs-list { list-style: none; padding: 0; margin: 1rem 0 0; }
cpanel-server .cs-list li {
  padding: .35rem 0;
  font-size: 1rem;
  color: var(--cpanel-dark);
}


/* Compare table */
cpanel-server .cs-compare { margin-top: 1rem; }
cpanel-server .cs-legend {
  display: flex; gap: .75rem; justify-content: center; align-items: center;
  margin: 0 auto 1rem; flex-wrap: wrap;
}

cpanel-server .cs-badge {
  display: inline-block; padding: .25rem .5rem; border-radius: .5rem;
  font-size: .85rem; border: 1px solid var(--cs-border);
}

cpanel-server .cs-badge-yes { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
cpanel-server .cs-badge-no  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
cpanel-server .cs-badge-opt { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

cpanel-server .cs-table-wrap { width: 100%; overflow: auto; border-radius: 10px; border: 1px solid var(--cs-border); }
cpanel-server .cs-table { width: 100%; border-collapse: collapse; }
cpanel-server .cs-table th,
cpanel-server .cs-table td {
  padding: .9rem; border-bottom: 1px solid #f1f5f9; text-align: center;
}
cpanel-server .cs-table thead th { background: #f8fafc; position: sticky; top: 0; z-index: 1; }
cpanel-server .cs-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); }

cpanel-server .cs-cell-yes { color: #047857; font-weight: 700; }
cpanel-server .cs-cell-opt { color: #1d4ed8; font-weight: 700; }

/* Extensions / add-ons */
cpanel-server .cs-extensions { margin-top: 2rem; }
cpanel-server .cs-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
cpanel-server .cs-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: .75rem; }
cpanel-server .cs-card-subtitle { font-size: 1.1rem; margin: .25rem 0 .5rem; }

cpanel-server .cs-link { color: var(--cs-link); text-decoration: none; margin: .5rem 0 1rem; display: inline-block; }
cpanel-server .cs-link:hover { text-decoration: underline; }

cpanel-server .cs-ext-bottom { margin-top: auto; display: flex; align-items: end; justify-content: space-between; }
cpanel-server .cs-ext-price { font-size: 1.25rem; margin: 0; }
cpanel-server .cs-small { font-size: .85rem; color: var(--cpanel-gray-text); }
cpanel-server .cs-plus { font-size: 1.8rem; line-height: 1; text-decoration: none; }

/* FAQ (accordion) */
cpanel-server .cs-faq { margin-top: 2rem; background: var(--cpanel-bg-light); padding: 1.25rem; border-radius: 12px; }
cpanel-server .cs-accordion { border: 1px solid var(--cs-border); border-radius: 10px; background: #fff; margin-bottom: .75rem; overflow: hidden; }
cpanel-server .cs-accordion-head {
  width: 100%; text-align: left; background: #fff; border: 0; padding: 1rem 1.1rem;
  cursor: pointer; font-weight: 600;
}
cpanel-server .cs-accordion-head:hover { background: #f3f4f6; }
cpanel-server .cs-accordion-body { display: none; padding: 0 1.1rem 1rem; color: #374151; }
cpanel-server .cs-accordion.cs-open .cs-accordion-body { display: block; }

/* Partner section */
cpanel-server .cs-partner { text-align: center; padding: 2.5rem 1rem; }
cpanel-server .cs-lead {
  max-width: 800px; margin: 0 auto 1.25rem; font-size: 1.125rem; color: #374151;
}

/* Links */
cpanel-server a { color: var(--cs-link); }
cpanel-server a:hover { text-decoration: underline; }

/* Utility background (if you need a light section) */
cpanel-server .bg-light-custom { background: var(--cpanel-bg-light); }

/* Responsive tweaks */
@media (max-width: 480px) {
  cpanel-server .cs-title { font-size: 1.7rem; }
  cpanel-server .cs-price-new { font-size: 1.7rem; }
}
/* End  of Cpanel Servers Design section - lightmode */


/* ===== Data Center Reliability Section ===== */
:root {
  --dc-bg: #0b1220;
  --dc-card: #111a2b;
  --dc-border: #1e2a44;
  --dc-text: #e8eefc;
  --dc-dim: #b7c3e0;
  --dc-accent: #7aa2ff;
  --dc-focus: 0 0 0 3px rgba(122,162,255,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --dc-bg: #f7f9ff;
    --dc-card: #ffffff;
    --dc-border: #e6ecff;
    --dc-text: #0b1220;
    --dc-dim: #4d5e80;
    --dc-accent: #335cff;
    --dc-focus: 0 0 0 3px rgba(51,92,255,.25);
  }
}

#dc-reliability {
  background: radial-gradient(80% 120% at 50% 0%, rgba(122,162,255,.18), transparent 50%) , var(--dc-bg);
  color: var(--dc-text);
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-radius: 24px;
}

#dc-reliability .section-header {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

#dc-reliability h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
}

#dc-reliability .section-subtitle {
  margin: 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: var(--dc-dim);
}

/* Grid */
#dc-reliability .features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  #dc-reliability .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  #dc-reliability .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* Cards */
#dc-reliability .feature {
  background: linear-gradient(180deg, var(--dc-card), color-mix(in oklab, var(--dc-card) 85%, black));
  border: 1px solid var(--dc-border);
  border-radius: 16px;
  padding: 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}

#dc-reliability .feature:hover,
#dc-reliability .feature:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--dc-accent) 30%, var(--dc-border));
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
}

#dc-reliability .feature:focus-within {
  box-shadow: var(--dc-focus);
}

/* Icon */
#dc-reliability .feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: .75rem;
  background: color-mix(in oklab, var(--dc-accent) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--dc-accent) 35%, var(--dc-border));
  color: var(--dc-accent);
}
#dc-reliability .feature-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Text */
#dc-reliability .feature-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#dc-reliability .feature-text {
  margin: 0;
  color: var(--dc-dim);
  font-size: .98rem;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #dc-reliability .feature {
    transition: none;
  }
}


/* ===== Reliability GIF Banner ===== */
#dc-reliability .reliability-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--dc-border);
  background: radial-gradient(circle at 50% 50%, rgba(122,162,255,.12), transparent 70%);
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
}

#dc-reliability .banner-gif {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  animation: fadeIn 1.6s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}



/* ===== VPS Deployments (Tabs) ===== */
:root {
  /* inherits from your previous block if present */
  --dc-bg: #0b1220;
  --dc-card: #111a2b;
  --dc-border: #1e2a44;
  --dc-text: #e8eefc;
  --dc-dim: #b7c3e0;
  --dc-accent: #7aa2ff;
  --dc-focus: 0 0 0 3px rgba(122,162,255,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --dc-bg: #f7f9ff;
    --dc-card: #ffffff;
    --dc-border: #e6ecff;
    --dc-text: #0b1220;
    --dc-dim: #4d5e80;
    --dc-accent: #335cff;
    --dc-focus: 0 0 0 3px rgba(51,92,255,.25);
  }
}

#vps-deployments {
  background: radial-gradient(80% 120% at 50% 0%, rgba(122,162,255,.12), transparent 52%), var(--dc-bg);
  color: var(--dc-text);
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-radius: 24px;
}

#vps-deployments .section-header {
  max-width: 900px;
  margin: 0 auto 2rem;
  text-align: center;
}
#vps-deployments h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}
#vps-deployments .section-subtitle {
  margin: 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: var(--dc-dim);
}

/* Tabs core */
#vps-deployments .tabs {
  max-width: 1100px;
  margin: 0 auto;
}

#vps-deployments .tab-input { display: none; }

#vps-deployments .tablist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  background: color-mix(in oklab, var(--dc-card) 92%, black);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  padding: .5rem;
  margin-bottom: 1rem;
}

#vps-deployments .tab {
  text-align: center;
  padding: .75rem;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--dc-dim);
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  outline: none;
}
#vps-deployments .tab:focus-visible {
  box-shadow: var(--dc-focus);
}
#vps-deployments .tab:hover {
  color: var(--dc-text);
  border-color: color-mix(in oklab, var(--dc-accent) 30%, var(--dc-border));
  transform: translateY(-1px);
}

/* Checked states (CSS only) */
#tab-os:checked ~ .tablist label[for="tab-os"],
#tab-apps:checked ~ .tablist label[for="tab-apps"],
#tab-custom:checked ~ .tablist label[for="tab-custom"],
#tab-blockchain:checked ~ .tablist label[for="tab-blockchain"] {
  color: var(--dc-text);
  background: linear-gradient(180deg, var(--dc-card), color-mix(in oklab, var(--dc-card) 85%, black));
  border: 1px solid color-mix(in oklab, var(--dc-accent) 35%, var(--dc-border));
}

/* Panels */
#vps-deployments .panels {
  position: relative;
  background: linear-gradient(180deg, var(--dc-card), color-mix(in oklab, var(--dc-card) 88%, black));
  border: 1px solid var(--dc-border);
  border-radius: 16px;
  padding: 1.25rem;
}

#vps-deployments .panel { display: none; }
#tab-os:checked ~ .panels #panel-os,
#tab-apps:checked ~ .panels #panel-apps,
#tab-custom:checked ~ .panels #panel-custom,
#tab-blockchain:checked ~ .panels #panel-blockchain {
  display: block;
}

/* Grid of items inside a panel */
#vps-deployments .item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 640px) {
  #vps-deployments .item-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #vps-deployments .item-grid { grid-template-columns: repeat(3, 1fr); }
}

#vps-deployments .item {
  background: color-mix(in oklab, var(--dc-card) 94%, black);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  padding: .9rem;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
#vps-deployments .item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--dc-accent) 25%, var(--dc-border));
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}

#vps-deployments .item-badge {
  display: inline-block;
  font-weight: 700;
  font-size: .95rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--dc-accent) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--dc-accent) 35%, var(--dc-border));
  color: var(--dc-text);
  margin-bottom: .35rem;
}
#vps-deployments .item-text {
  margin: 0;
  color: var(--dc-dim);
  font-size: .95rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #vps-deployments .tab:hover,
  #vps-deployments .item:hover {
    transform: none;
    transition: none;
  }
}