/* Oplink brand-red accents — deliberate, limited replacement for blue-filled controls.
   Official SVG red: #ff1f2d. CTA surface uses a darker shade for white-text contrast.
   Keep photographic hero CSS, navy backgrounds, links, and blue informational icons intact. */
:root {
  --oplink-logo-red: #ff1f2d;
  --oplink-cta-red: #e31223;
  --oplink-cta-dark: #c41425;
}

/* Homepage only: approved headline accent and the four infrastructure figures. */
.page--home .photo-hero__accent,
.page--home .metric-grid .metric > strong { color: var(--oplink-logo-red); }

/* Main buttons: header Contact Us, hero, footer CTA, quotes and service CTAs. */
.button.button--primary,
body.site-refresh .button--primary {
  background: linear-gradient(125deg, #c91224, var(--oplink-cta-red) 55%, #c41425);
  border-color: var(--oplink-logo-red);
  color: #fff;
  box-shadow: 0 .8rem 2rem rgba(209,16,36,.24), inset 0 1px 0 rgba(255,255,255,.2);
}
.button.button--primary:hover,
body.site-refresh .button--primary:hover {
  background: linear-gradient(125deg, #b70d20, #ce1123 55%, #aa0b1d);
  border-color: #ff5762;
  box-shadow: 0 1rem 2.4rem rgba(209,16,36,.32), inset 0 1px 0 rgba(255,255,255,.15);
}
.button.button--primary:focus-visible,
body.site-refresh .button--primary:focus-visible,
body.site-refresh :is(.op-vps-cta,.op-ds-cta,.op-colo-cta,.op-colo-quote-send,.wh-plan-cta,.network-transit-plan__action):focus-visible {
  outline: 3px solid #ff7d86;
  outline-offset: 3px;
}

/* Dedicated server, VPS and colocation white-card order / quote buttons. */
#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,
#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(120deg,#c31224,#e31223) !important;
  border-color: var(--oplink-logo-red) !important;
  color: #fff !important;
  box-shadow: 0 .65rem 1.5rem rgba(202,15,34,.2) !important;
}
#op-vps-pricing .op-vps-cta:hover,
#op-ds-pricing .op-ds-cta:hover,
#op-colo-pricing .op-colo-cta:hover,
#op-colo-pricing .op-colo-quote-send:hover,
#op-vps-pricing .op-vps-card.is-featured .op-vps-cta:hover,
#op-ds-pricing .op-ds-featured .op-ds-cta:hover,
#op-colo-pricing .op-colo-gpu .op-colo-cta:hover {
  background: linear-gradient(120deg,#ae0d1c,#cf1021) !important;
  border-color: #ff5762 !important;
}

/* WordPress / cPanel hosting and IP Transit purchase or quote buttons. */
.page--web-hosting .wh-plan-cta,
.network-transit-plan__action,
.faq-article__actions .faq-article__copy {
  background: linear-gradient(120deg,#c31224,#e31223);
  border-color: var(--oplink-logo-red);
  color: #fff !important;
  box-shadow: 0 .65rem 1.5rem rgba(202,15,34,.2);
}
.page--web-hosting .wh-plan-cta:hover,
.network-transit-plan__action:hover,
.faq-article__actions .faq-article__copy:hover {
  background: linear-gradient(120deg,#ae0d1c,#cf1021);
  border-color: #ff5762;
  color: #fff !important;
}

/* Smaller buttons: active VPS selector controls and pale share/copy icons. */
#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: rgba(205,19,38,.3);
  box-shadow: inset 0 0 0 1px rgba(255,31,45,.55);
}
#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"] {
  border-color: rgba(255,31,45,.68);
  background: linear-gradient(145deg,rgba(74,22,35,.83),rgba(15,15,28,.92));
  box-shadow: 0 .8rem 2rem rgba(120,12,25,.16);
}
#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: #df1427;
  border-color: var(--oplink-logo-red);
}
#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: #fff0f1 !important;
  border-color: #e31b2d !important;
  color: #8f1521 !important;
  box-shadow: 0 0 0 1px rgba(227,27,45,.1) !important;
}
.op-plan-share-btn,
.network-transit-plan .op-plan-share-btn {
  background: #fff0f1;
  border-color: #f3a7ac;
  color: #a91726;
}
.op-plan-share-btn:hover,
.network-transit-plan .op-plan-share-btn:hover {
  background: #ffe0e3;
  border-color: var(--oplink-logo-red);
  color: #8b1120;
}
#op-vps-pricing .op-vps-platform-copy:hover,
#op-vps-pricing .op-vps-platform-copy:focus-visible {
  border-color: var(--oplink-logo-red);
  background: rgba(189,20,41,.56);
}