/* /web-hosting: the game page's order builder (game.css) plus an address box,
   PHP picker and a drawn browser window in the header. */
.wh-hero { padding-bottom: 70px; background:
  radial-gradient(900px 420px at 85% 30%, rgba(245,197,24,.10), transparent 70%),
  radial-gradient(700px 380px at 10% 0%, rgba(90,110,255,.10), transparent 70%); }
.wh-hero .gp-head { align-items: center; justify-content: space-between; }
.wh-hero .gp-intro { max-width: 760px; }

.wh-browser { flex: none; width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); transform: rotate(1.5deg); }
.wh-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); }
.wh-bar i { width: 11px; height: 11px; border-radius: 50%; background: #4a4a5e; }
.wh-bar i:first-child { background: #ef6b6b; } .wh-bar i:nth-child(2) { background: #f5c518; } .wh-bar i:nth-child(3) { background: #3ccf6e; }
.wh-bar span { margin-left: 10px; flex: 1; background: var(--bg-2); border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-bar span::before { content: "\1F512  "; font-size: 11px; }
.wh-page { padding: 26px 24px 30px; display: grid; gap: 12px; }
.wh-line { display: block; height: 12px; border-radius: 6px; background: #30303f; }
.wh-line.w60 { width: 60%; height: 20px; background: #3d3a28; } .wh-line.w85 { width: 85%; } .wh-line.w40 { width: 40%; }
.wh-line.w75 { width: 75%; } .wh-line.w50 { width: 50%; }
.wh-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0; }
.wh-blocks span { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(160deg, #2c2c3c, #23232f); border: 1px solid var(--line); }

.wh-addr { display: flex; align-items: stretch; }
.wh-addr .field { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.wh-zone { display: flex; align-items: center; padding: 0 16px; background: var(--card-2); border: 2px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; color: var(--text-2); font-size: 17px; white-space: nowrap; }
.wh-addr .field.ok { border-color: var(--ok); }
.wh-addr .field.bad { border-color: #f87171; }
#wh-addr-note.ok { color: var(--ok); }
#wh-addr-note.bad { color: #f87171; }

.wh-php { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wh-php .opt { padding: 14px 16px; }

.plan-specs.wh-specs { display: grid; grid-template-columns: 1fr; gap: 8px; }

@media (max-width: 1100px) {
  .wh-browser { display: none; }
}
@media (max-width: 760px) {
  .wh-php { grid-template-columns: 1fr 1fr; }
  .wh-zone { font-size: 15px; padding: 0 10px; }
}