/* Heat-pump quote form wizard styling — same look as the solar form (copied). */
/* Class names and rules are app-agnostic; see solar-quotes/v6/quotes.css. */
.hero-section {
  background-color: var(--dark-bg);
  color: var(--white);
  padding: 60px 20px;
  text-align: center;
}

.hero-content {
  max-width: 700px;
  margin: 0 auto;
}

.hero-section h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: var(--white);
}

#logo {
  display: block;
  margin: 0 auto;
}

.hero-section p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.form-section {
  max-width: 700px;
  margin: 40px auto;
  background-color: var(--white);
  padding: 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  position: relative;
}

.progress-bar {
  width: 100%;
  background-color: var(--grey-border);
  border-radius: var(--radius-sm);
  height: 8px;
  margin-bottom: 30px;
  overflow: hidden;
}

.progress {
  height: 8px;
  background-color: var(--kw-green);
  width: 0;
  transition: width 0.3s ease;
}

.form-steps-container {
  position: relative;
  min-height: 225px;
}

.form-step {
  display: none;
  opacity: 0;
}

.form-step.active {
  display: block;
  opacity: 1;
}

.form-step h2 {
  margin-bottom: 20px;
  color: var(--dark-bg);
}

.radio-group {
  margin-bottom: 20px;
}

.radio-group label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px 16px;
}

.radio-grid label {
  margin-bottom: 0;
}

input[type="radio"] {
  margin-right: var(--space-sm);
}

/* Form input styles removed – using global .kw-input, .kw-select, .kw-textarea from 30-components.css */

textarea {
  resize: vertical;
}

.required {
  color: var(--kw-red);
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

/* Button styles removed – using global .kw-btn .kw-btn--primary from 30-components.css */

/* Error styles removed — using global .kw-error-message and .kw-input-error from /css/30-components.css */

/* Make this page's error messages 80% larger (colour inherited from global rule).
.kw-error-message {
  font-size: 1.8em;
}*/

/* Informational notices are 20% smaller than the error messages above. */
.kw-error-message.kw-input-notice {
  font-size: 1.44em;
}

/* Off-screen and unreachable by tab, so no real visitor ever sees or fills
   the fields inside. What they are actually for is documented in the PHP
   comment above the corresponding markup in index.php — deliberately not
   here, and deliberately not in the class name: this stylesheet is public,
   and a descriptive name or comment would hand the game to the automated
   traffic the fields exist to catch. */
.kw-aux-group {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Early availability gate: shown in place of the form when the
   SMS-verification breaker is tripped (see request-quotes.js). Rendered
   server-side when the render-time snapshot says the service is down. Vague
   on purpose — never says WHY, just that the service is down. */
.kw-service-unavailable {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.kw-service-unavailable h2 {
  color: var(--dark-bg);
  margin-bottom: var(--space-sm);
}

.kw-service-unavailable p {
  color: var(--grey-text);
  margin: 0 auto;
  max-width: 480px;
}

/* OTP verification step */
.otp-intro {
  margin-bottom: var(--space-md);
}

.otp-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.otp-actions .kw-btn {
  padding: 0.5em 1em;
  font-size: 0.9em;
}

#Otp_Code {
  font-size: 1.4em;
  letter-spacing: 0.3em;
  text-align: center;
}