/* Got Hot Wheels - Owner Setup Wizard v97 */

html body .ghw97-wrap {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 28px 16px 72px !important;
  color: #fff !important;
}

html body .ghw97-hero,
html body .ghw97-card,
html body .ghw97-warning,
html body .ghw97-success,
html body .ghw97-error {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 164, 0, .42) !important;
  background:
    radial-gradient(circle at top right, rgba(235, 20, 35, .18), transparent 34rem),
    linear-gradient(90deg, rgba(8, 8, 10, .96), rgba(3, 18, 34, .96)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.35) !important;
}

html body .ghw97-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 22px !important;
  padding: 26px !important;
  margin-bottom: 18px !important;
}

html body .ghw97-kicker {
  display: inline-flex !important;
  margin-bottom: 10px !important;
  padding: 8px 13px !important;
  border: 1px solid rgba(235, 20, 35, .62) !important;
  border-radius: 999px !important;
  background: rgba(235, 20, 35, .14) !important;
  color: #ffd34d !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body .ghw97-hero h1,
html body .ghw97-card h2 {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  line-height: .95 !important;
  text-shadow: 4px 4px 0 #000 !important;
}

html body .ghw97-hero h1 {
  font-size: clamp(42px, 5.6vw, 74px) !important;
}

html body .ghw97-card h2 {
  font-size: clamp(28px, 3vw, 40px) !important;
}

html body .ghw97-hero p,
html body .ghw97-card p,
html body .ghw97-steps li,
html body .ghw97-script p {
  color: #dfe7f2 !important;
}

html body .ghw97-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  max-width: 560px !important;
}

html body .ghw97-actions a,
html body .ghw97-card a,
html body .ghw97-card button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 164, 0, .74) !important;
  border-radius: 9px !important;
  background: rgba(0,0,0,.22) !important;
  color: #fff !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

html body .ghw97-card button {
  width: 100% !important;
  background: linear-gradient(180deg, #ff3848, #d80017) !important;
  border-color: rgba(255,255,255,.14) !important;
  margin-top: 16px !important;
}

html body .ghw97-warning,
html body .ghw97-success,
html body .ghw97-error {
  padding: 16px 18px !important;
  margin-bottom: 18px !important;
}

html body .ghw97-warning {
  border-color: rgba(255, 211, 77, .54) !important;
  color: #ffe89a !important;
}

html body .ghw97-success {
  border-color: rgba(66, 220, 118, .54) !important;
  color: #a5ffc0 !important;
}

html body .ghw97-error {
  border-color: rgba(255, 60, 70, .54) !important;
  color: #ffb8bd !important;
}

html body .ghw97-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html body .ghw97-split {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

html body .ghw97-card {
  padding: 22px !important;
}

html body .ghw97-card.full {
  margin-top: 18px !important;
}

html body .ghw97-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 16px !important;
  background: radial-gradient(circle, rgba(255, 176, 0, .28), rgba(0,0,0,.35)) !important;
  border: 1px solid rgba(255, 164, 0, .64) !important;
  box-shadow: 0 0 24px rgba(255, 50, 25, .22) !important;
  font-size: 28px !important;
}

html body .ghw97-state {
  display: inline-flex !important;
  margin-bottom: 12px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 211, 77, .16) !important;
  color: #ffd34d !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body .ghw97-steps {
  margin: 0 !important;
  padding-left: 24px !important;
}

html body .ghw97-steps li {
  margin-bottom: 10px !important;
}

html body .ghw97-checklist {
  display: grid !important;
  gap: 10px !important;
}

html body .ghw97-checklist label {
  display: grid !important;
  grid-template-columns: 22px 34px 1fr !important;
  gap: 10px !important;
  align-items: flex-start !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.22) !important;
  color: #fff !important;
  padding: 12px !important;
}

html body .ghw97-checklist input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px !important;
  accent-color: #ffb000 !important;
}

html body .ghw97-checklist span {
  color: #ffd34d !important;
  font-weight: 1000 !important;
}

html body .ghw97-checklist em {
  color: #dfe7f2 !important;
  font-style: normal !important;
}

html body .ghw97-card label:not(.ghw97-checklist label) {
  display: block !important;
  margin: 14px 0 6px !important;
  color: #ffd34d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body .ghw97-card input,
html body .ghw97-card select,
html body .ghw97-card textarea {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #030916 !important;
  color: #fff !important;
  padding: 11px 13px !important;
}

html body .ghw97-card textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

html body .ghw97-env {
  display: grid !important;
  gap: 10px !important;
}

html body .ghw97-env div {
  display: grid !important;
  grid-template-columns: 86px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.22) !important;
  padding: 12px !important;
}

html body .ghw97-env span {
  border-radius: 999px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

html body .ghw97-env .ok span {
  background: rgba(38,190,92,.18) !important;
  color: #a7ffc0 !important;
}

html body .ghw97-env .missing span {
  background: rgba(255,184,40,.18) !important;
  color: #ffd34d !important;
}

html body .ghw97-env code,
html body .ghw97-card code {
  color: #f4f7fb !important;
  word-break: break-all !important;
}

html body .ghw97-env em {
  color: #aeb8c6 !important;
  font-style: normal !important;
}

html body .ghw97-script {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.22) !important;
  padding: 16px !important;
}

@media (max-width: 900px) {
  html body .ghw97-hero,
  html body .ghw97-split {
    display: block !important;
  }

  html body .ghw97-actions {
    justify-content: flex-start !important;
    max-width: none !important;
    margin-top: 16px !important;
  }

  html body .ghw97-actions a {
    flex: 1 1 calc(50% - 10px) !important;
  }

  html body .ghw97-card {
    margin-bottom: 18px !important;
  }

  html body .ghw97-env div {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  html body .ghw97-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body .ghw97-card,
  html body .ghw97-hero {
    padding: 16px !important;
  }

  html body .ghw97-actions a {
    flex-basis: 100% !important;
  }

  html body .ghw97-checklist label {
    grid-template-columns: 22px 1fr !important;
  }

  html body .ghw97-checklist span {
    display: none !important;
  }
}