/* Oplink blended pricing theme — dark site canvas with bright product cards.
   Loaded after plans.css so it intentionally controls only the final contrast layer. */

#op-vps-pricing,
#op-ds-pricing,
#op-colo-pricing {
  background:
    radial-gradient(circle at 50% 0%, rgba(31,126,255,.13), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(23,108,214,.08), transparent 26rem),
    linear-gradient(180deg,#06111d 0%,#030a12 100%) !important;
}

/* Keep surrounding controls dark so the white plans become the visual focus. */
#op-vps-pricing .op-vps-category {
  background:linear-gradient(145deg,rgba(11,25,42,.92),rgba(5,12,22,.92)) !important;
  border-color:rgba(135,185,225,.17) !important;
  color:#f5faff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 .8rem 2rem rgba(0,0,0,.18) !important;
}
#op-vps-pricing .op-vps-category:hover {
  border-color:rgba(67,183,255,.42) !important;
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.26) !important;
}
#op-vps-pricing .op-vps-category .op-vps-cat-top { color:#71caff !important; }
#op-vps-pricing .op-vps-category .op-vps-cat-name { color:#f5faff !important; }
#op-vps-pricing .op-vps-category .op-vps-cat-sub { color:#8fa6bb !important; }
#op-vps-pricing .op-vps-category .op-vps-cat-check { border-color:rgba(135,185,225,.25) !important; }
#op-vps-cat-performance:checked ~ .op-vps-shell label[for="op-vps-cat-performance"],
#op-vps-cat-essentials:checked ~ .op-vps-shell label[for="op-vps-cat-essentials"],
#op-vps-cat-dedicated:checked ~ .op-vps-shell label[for="op-vps-cat-dedicated"],
#op-vps-cat-storage:checked ~ .op-vps-shell label[for="op-vps-cat-storage"] {
  background:linear-gradient(145deg,rgba(12,48,78,.98),rgba(7,25,43,.98)) !important;
  border:1px solid rgba(67,183,255,.68) !important;
  box-shadow:0 1rem 2.5rem rgba(0,44,92,.27),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#op-vps-cat-performance:checked ~ .op-vps-shell label[for="op-vps-cat-performance"] .op-vps-cat-check,
#op-vps-cat-essentials:checked ~ .op-vps-shell label[for="op-vps-cat-essentials"] .op-vps-cat-check,
#op-vps-cat-dedicated:checked ~ .op-vps-shell label[for="op-vps-cat-dedicated"] .op-vps-cat-check,
#op-vps-cat-storage:checked ~ .op-vps-shell label[for="op-vps-cat-storage"] .op-vps-cat-check {
  background:#2487ff !important;
  border-color:#2487ff !important;
  color:#fff !important;
}

#op-vps-pricing .op-vps-billing {
  background:rgba(7,20,35,.78) !important;
  border-color:rgba(135,185,225,.17) !important;
}
#op-vps-pricing .op-vps-billing label { color:#9fb3c6 !important; }
#op-vps-billing-monthly:checked ~ .op-vps-shell label[for="op-vps-billing-monthly"],
#op-vps-billing-annual:checked ~ .op-vps-shell label[for="op-vps-billing-annual"] {
  background:#0e3558 !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(67,183,255,.4) !important;
}
#op-vps-pricing .op-vps-billing label span {
  background:rgba(34,197,139,.16) !important;
  color:#71e2b9 !important;
}

/* Benefit strips remain dark/glass for a smoother transition from the hero. */
#op-ds-pricing .op-ds-highlight,
#op-colo-pricing .op-colo-highlight {
  background:rgba(8,25,42,.78) !important;
  border-color:rgba(89,171,255,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 .8rem 2rem rgba(0,0,0,.18) !important;
}
#op-ds-pricing .op-ds-hi-mark,
#op-colo-pricing .op-colo-hi-mark {
  background:rgba(18,174,163,.14) !important;
  color:#5de0c9 !important;
  border:1px solid rgba(93,224,201,.12) !important;
}
#op-ds-pricing .op-ds-highlight strong,
#op-colo-pricing .op-colo-highlight strong { color:#eef7ff !important; }
#op-ds-pricing .op-ds-highlight small,
#op-colo-pricing .op-colo-highlight small { color:#8fa6bb !important; }

/* Product cards: bright, slightly softened white with a restrained blue halo. */
#op-vps-pricing article.op-vps-card,
#op-ds-pricing article.op-ds-card,
#op-colo-pricing article.op-colo-card {
  background:#f8fafc !important;
  background-image:none !important;
  color:#172944 !important;
  border:1px solid rgba(112,166,221,.48) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(62,153,255,.12),
    0 0 35px rgba(28,126,255,.08) !important;
}
#op-vps-pricing article.op-vps-card:hover,
#op-ds-pricing article.op-ds-card:hover,
#op-colo-pricing article.op-colo-card:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(54,143,232,.72) !important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.42),
    0 0 0 1px rgba(62,153,255,.22),
    0 0 42px rgba(28,126,255,.13) !important;
}
#op-vps-pricing article.op-vps-card.is-featured,
#op-ds-pricing article.op-ds-card.op-ds-featured,
#op-colo-pricing article.op-colo-card.op-colo-featured {
  border:2px solid #3988e2 !important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.40),
    0 0 0 1px rgba(57,136,226,.14),
    0 0 42px rgba(28,126,255,.13) !important;
}

/* Dark/navy card caps physically tie the white cards back to the site. */
#op-vps-pricing .op-vps-card-ribbon,
#op-ds-pricing .op-ds-ribbon,
#op-colo-pricing .op-colo-ribbon {
  background:linear-gradient(90deg,#0b3156,#126dc2) !important;
  color:#fff !important;
}
#op-ds-pricing .op-ds-ribbon-alt,
#op-colo-pricing .op-colo-ribbon:not(.op-colo-ribbon-gpu) {
  background:linear-gradient(90deg,#26384d,#425e78) !important;
}
#op-colo-pricing .op-colo-ribbon-gpu {
  background:linear-gradient(90deg,#0a3f7e,#0d84cf) !important;
}

/* White-card typography. */
#op-vps-pricing .op-vps-plan-kicker,
#op-ds-pricing .op-ds-plan-kicker,
#op-colo-pricing .op-colo-plan-kicker { color:#6681a6 !important; }
#op-vps-pricing .op-vps-plan-name,
#op-ds-pricing .op-ds-plan-name,
#op-colo-pricing .op-colo-plan-name { color:#172944 !important; }
#op-vps-pricing .op-vps-plan-summary,
#op-ds-pricing .op-ds-plan-summary,
#op-colo-pricing .op-colo-plan-summary { color:#6e7b8e !important; }

/* Soft blue price areas inside white cards. */
#op-vps-pricing .op-vps-pricebox,
#op-ds-pricing .op-ds-pricebox,
#op-colo-pricing .op-colo-pricebox {
  background:#eef5fd !important;
  background-image:none !important;
  border-color:#dbe8f6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}
#op-colo-pricing .op-colo-gpu-pricebox {
  background:#eaf4ff !important;
  border-color:#c8ddf5 !important;
}
#op-vps-pricing .op-vps-amount,
#op-ds-pricing .op-ds-amount,
#op-colo-pricing .op-colo-amount,
#op-colo-pricing .op-colo-custom-price { color:#16335f !important; }
#op-vps-pricing .op-vps-amount span,
#op-ds-pricing .op-ds-amount span,
#op-colo-pricing .op-colo-amount span { color:#566b86 !important; }
#op-ds-pricing .op-ds-price-label,
#op-colo-pricing .op-colo-price-label { color:#6b85a4 !important; }
#op-ds-pricing .op-ds-price-detail,
#op-colo-pricing .op-colo-price-detail { color:#70829b !important; }
#op-vps-pricing .op-vps-savings { background:#dff9e9 !important; color:#0d7251 !important; }

/* Specs stay crisp and readable inside white cards. */
#op-vps-pricing .op-vps-specs li,
#op-ds-pricing .op-ds-specs li,
#op-colo-pricing .op-colo-specs li {
  color:#384b65 !important;
  border-bottom-color:#e7edf4 !important;
}
#op-vps-pricing .op-vps-specs li::before,
#op-ds-pricing .op-ds-specs li::before,
#op-colo-pricing .op-colo-specs li::before { color:#149a8c !important; }
#op-ds-pricing .op-ds-specs strong,
#op-colo-pricing .op-colo-specs strong { color:#273e59 !important; }
#op-ds-pricing .op-ds-order-note { color:#637891 !important; }

/* Saturated blue CTAs bridge the light cards and dark site. */
#op-vps-pricing .op-vps-cta,
#op-ds-pricing .op-ds-cta,
#op-colo-pricing .op-colo-cta,
#op-colo-pricing .op-colo-quote-send {
  background:linear-gradient(110deg,#155fb9,#2387e0) !important;
  border-color:#2d83da !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(27,98,189,.24) !important;
}
#op-vps-pricing .op-vps-card.is-featured .op-vps-cta,
#op-ds-pricing .op-ds-featured .op-ds-cta,
#op-colo-pricing .op-colo-gpu .op-colo-cta {
  background:linear-gradient(115deg,#0d4a94,#0f80ce) !important;
}

/* GPU / AI quote is consultation content, so keep its outer shell dark. */
#op-colo-pricing .op-colo-quote {
  background:
    radial-gradient(circle at 85% 0%,rgba(30,133,255,.14),transparent 45%),
    linear-gradient(135deg,rgba(9,34,59,.96),rgba(3,12,22,.98)) !important;
  border-color:rgba(67,183,255,.38) !important;
  box-shadow:0 22px 52px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#op-colo-pricing .op-colo-quote-badge { color:#71caff !important; }
#op-colo-pricing .op-colo-quote-intro h3 { color:#f4f9ff !important; }
#op-colo-pricing .op-colo-quote-intro p { color:#9bb0c3 !important; }
#op-colo-pricing .op-colo-quote-chips span {
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(135,185,225,.18) !important;
  color:#b6d2e8 !important;
}
#op-colo-pricing .op-colo-power-fieldset legend { color:#dceaf6 !important; }
#op-colo-pricing .op-colo-power-choice {
  background:#f8fafc !important;
  border-color:#c9d9ed !important;
  color:#355372 !important;
  box-shadow:0 .4rem 1rem rgba(0,0,0,.12) !important;
}
#op-colo-power-15:checked ~ label[for="op-colo-power-15"],
#op-colo-power-20:checked ~ label[for="op-colo-power-20"],
#op-colo-power-25:checked ~ label[for="op-colo-power-25"],
#op-colo-power-30:checked ~ label[for="op-colo-power-30"] {
  background:#e3f0ff !important;
  border-color:#216cd2 !important;
  color:#1259b3 !important;
  box-shadow:0 0 0 1px rgba(33,108,210,.08),0 .45rem 1.1rem rgba(0,0,0,.14) !important;
}
#op-colo-pricing .op-colo-email-note,
#op-colo-pricing .op-colo-webform-note { color:#8198ad !important; }
#op-colo-pricing .op-colo-email-note a,
#op-colo-pricing .op-colo-webform-note a { color:#71caff !important; }

@media (prefers-reduced-motion: reduce) {
  #op-vps-pricing article.op-vps-card,
  #op-ds-pricing article.op-ds-card,
  #op-colo-pricing article.op-colo-card { transition:none !important; }
}