/* /discord-bot-hosting: web-hosting's order builder plus a language picker and
   a drawn console in the header. */
.bh-hero { background:
  radial-gradient(900px 420px at 85% 30%, rgba(88,101,242,.18), transparent 70%),
  radial-gradient(700px 380px at 10% 0%, rgba(245,197,24,.08), transparent 70%); }

.bh-term { flex: none; width: 440px; background: #101118; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); transform: rotate(1.5deg); }
.bh-term .wh-bar span.bh-title::before { content: ""; }
.bh-term pre { margin: 0; padding: 20px 22px 24px; font: 500 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfd2e0; white-space: pre-wrap; }
.bh-term .c-dim { color: #f5c518; }
.bh-term .c-ok { color: #3ccf6e; }

.bh-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bh-lang { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; background: var(--card-2); border: 2px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; }
.bh-lang input { position: absolute; opacity: 0; pointer-events: none; }
.bh-lang.is-on { border-color: var(--yellow); }
.bh-lang .bh-ico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 15px/1 ui-monospace, Menlo, monospace; color: #fff; }
.bh-lang .bh-ico.node { background: #3c873a; }
.bh-lang .bh-ico.python { background: #3670a0; }
.bh-lang b { font-size: 18px; color: #fff; }
.bh-lang small { grid-column: 2; color: var(--text-2); font-size: 14px; }
.bh-lang .radio { grid-column: 3; grid-row: 1 / span 2; }

@media (max-width: 1100px) { .bh-term { display: none; } }
@media (max-width: 760px) { .bh-langs { grid-template-columns: 1fr; } }