/* SelfHostOS branding for a WHMCS Twenty-One child theme. */
:root {
  --selfhostos-ink: #2c2c2c;
  --selfhostos-paper: #f2f3f5;
  --selfhostos-line: #e2dcd3;
  --selfhostos-accent: #ff9b63;
}
body.primary-bg-color {
  background: var(--selfhostos-paper);
  color: var(--selfhostos-ink);
}
header.header .navbar-brand {
  display: block;
  position: relative;
  overflow: hidden;
  width: 250px;
  height: 72.53px;
  min-width: 0;
  font-size: 0;
  line-height: 0;
}
header.header .navbar-brand::after {
  content: "";
  position: absolute;
  width: 119.8766%;
  aspect-ratio: 1942 / 809;
  left: -11.7284%;
  top: -32.9787%;
  background: url("https://selfhostos.com/selfhostos-logo-orange.svg?v=20261017") center / contain no-repeat;
  mix-blend-mode: darken;
  pointer-events: none;
}
header.header .navbar-brand > img { visibility: hidden; }
header.header .topbar {
  background: var(--selfhostos-ink);
  color: #edeae7;
}
header.header .topbar .btn,
header.header .topbar a { color: #edeae7; }
header.header .navbar,
header.header { background-color: var(--selfhostos-paper); }
header.header .btn.nav-link {
  color: var(--selfhostos-ink);
  border-color: #c9bfb3;
}
header.header .btn.nav-link:hover,
header.header .btn.nav-link:focus {
  color: var(--selfhostos-ink);
  background: #f8f4ed;
}
.breadcrumb { background: #edebe9; }
.btn-primary {
  background-color: var(--selfhostos-ink);
  border-color: var(--selfhostos-ink);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #413a33;
  border-color: #413a33;
}
.btn-primary:focus-visible,
header.header a:focus-visible {
  outline: 3px solid #b43c08;
  outline-offset: 3px;
}
footer.footer { background: var(--selfhostos-ink); }
@media (max-width: 575px) {
  header.header .navbar-brand {
    width: 205px;
    height: 59.48px;
  }
}

/* Match the orange, charcoal, and light-gray website palette. */
:root{--selfhostos-brand:#cf470c;--selfhostos-hover:#a93607}
body.primary-bg-color{background:#f2f3f5;color:#2c2c2c}
header.header{background:#fff;border-top:4px solid #cf470c}
header.header .navbar{background:#fff}
header.header .navbar-brand{flex-shrink:0}
header.header .nav-link:hover{color:#b43c08}
header.header .btn.nav-link{border-color:#d3c6b9}
header.header .btn.nav-link:hover{background:#f9e5d9}
.breadcrumb{background:#eeeae3}
.btn-primary,.btn-success{background:#cf470c;border-color:#cf470c;color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus{background:#a93607;border-color:#a93607;color:#fff}
.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active,.btn-success:active,.btn-success:not(:disabled):not(.disabled):active{background:#892d07;border-color:#892d07}
.btn-info{background:#f9e5d9;border-color:#eac1a9;color:#9b3207}
.btn-info:hover,.btn-info:focus{background:#f3d6c5;border-color:#dba385;color:#762906}
.list-group-item.active{background:#2c2c2c;border-color:#2c2c2c;color:#fff}
.list-group-item.active:hover{color:#fff}
footer.footer{background:#2c2c2c;color:#f8f4ed}
footer.footer a{color:#f8f4ed}

/* A mobile shortcut, revealed only after the visitor scrolls. */
.back-to-top{display:none}
@media(max-width:760px){
 .back-to-top:not([hidden]){display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px;padding:0;z-index:100;border:1px solid #cf470c;border-radius:50%;background:#cf470c;color:#fff;box-shadow:0 4px 16px #2c2c2c24;cursor:pointer;touch-action:manipulation;text-decoration:none}
 .back-to-top:hover{background:#a93607;border-color:#a93607}
 .back-to-top:focus-visible{outline:3px solid #2c2c2c;outline-offset:4px}
}

/* Keep order pages focused on the selected plan and its required details. */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed{display:none!important}
#order-standard_cart .cart-body{width:100%;max-width:100%;flex:1 1 100%}

/* Confirm the selected hosting package before customers enter their domain. */
.shos-plan-summary{background:#fff;border:1px solid #d9dde2;border-left:3px solid #cf470c;border-radius:4px;padding:22px 26px;margin:0 0 28px;color:#2c2c2c}
.shos-plan-label{font-size:12px;font-weight:600;line-height:1.4;color:#5d5d5d;margin:0 0 10px}
.shos-plan-summary-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.shos-plan-choice{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 24px;margin:0;min-width:0}
.shos-plan-name{font-size:26px;font-weight:650;line-height:1.25}
.shos-plan-price{font-size:23px;font-weight:600;line-height:1.4;white-space:normal}
.shos-plan-price>span{font-size:14px;font-weight:400;color:#5d5d5d;white-space:nowrap}
.shos-plan-note{font-size:13px;color:#5d5d5d;margin:10px 0 0;line-height:1.5}
.shos-change-plan{font-size:14px;color:#b43c08;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.shos-change-plan:hover{color:#892d07}
.shos-change-plan:focus-visible{outline:3px solid #b43c08;outline-offset:4px}
@media(max-width:575px){.shos-plan-summary{padding:18px 20px;margin-bottom:22px}.shos-plan-summary-row{align-items:flex-start}.shos-plan-choice{display:block;width:100%}.shos-plan-name{display:block;font-size:24px;margin-bottom:6px}.shos-plan-price{font-size:23px}.shos-change-plan{min-height:44px}.shos-plan-summary-row{gap:2px}.shos-plan-note{margin-top:2px}}

/* Optional setup choice on the first order step; prices and quotas stay native. */
.shos-setup-choice{border-top:1px solid #e2e4e7;margin-top:18px;padding-top:18px}
.shos-setup-choice>p:first-child{font-size:14px;font-weight:600;margin:0 0 10px}
.shos-setup-choice>p>span{font-size:12px;font-weight:400;color:#5d5d5d;margin-left:8px}
.shos-setup-links{display:flex;gap:10px;flex-wrap:wrap}
.shos-setup-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #c9ced4;border-radius:4px;color:#2c2c2c;font-size:13px;text-decoration:none;line-height:1.5}
.shos-setup-links a[aria-current="page"]{border-color:#cf470c;background:#fff3ed;box-shadow:inset 0 0 0 1px #cf470c;color:#9b3308}
.shos-setup-links a:focus-visible{outline:3px solid #b43c08;outline-offset:3px}
.shos-setup-choice .shos-setup-note{font-size:12px;color:#5d5d5d;line-height:1.6;margin:12px 0 0}
@media(max-width:575px){.shos-setup-links{flex-direction:column}.shos-setup-links a{width:100%}.shos-setup-choice>p>span{display:block;margin:4px 0 0}}