/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Signup Wizard Styles - Mobile First === */

/* ===== CONTAINER ===== */
.signup-container {
  max-width: 600px;
  padding: 2rem 1rem;
  margin: 0 auto;
}

.wizard-progress + .signup-container {
  padding-top: 0;
}

/* ===== HEADINGS ===== */

/* User selection page heading - mobile */
.user-selection-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.user-selection-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
}

.user-selection-header p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.login-link {
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-top: 1rem;
}

.login-link + .login-link {
  margin-top: 0.5rem;
}

/* ===== PROGRESS BAR ===== */

.wizard-progress {
  padding-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Visual step indicator - responsive sizing (compact on mobile, larger on desktop) */
.wizard-progress__steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem;
}

.wizard-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

/* Connecting line between steps */
.wizard-progress__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 12px);
  width: calc(1rem);
  height: 1.5px;
  background: var(--color-border);
  z-index: 0;
}

/* Completed step connecting line */
.wizard-progress__step--completed:not(:last-child)::after {
  background: color-mix(in srgb, var(--color-pink) 30%, var(--color-border));
}

.wizard-progress__circle {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
  transition: all var(--transition-smooth);
}

/* Completed step circle */
.wizard-progress__step--completed .wizard-progress__circle {
  background: color-mix(in srgb, var(--color-pink) 8%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-pink) 50%, var(--color-border));
  color: var(--color-pink);
}

/* Current step circle */
.wizard-progress__step--current .wizard-progress__circle {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
}

.wizard-progress__label {
  display: none;
}

/* ===== WIZARD FORM STRUCTURE ===== */
.wizard-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: 2rem;
}

/* ===== SEMANTIC FORM FIELD CLASSES ===== */

/* Standard form field wrapper - replaces mb-4 */
.wizard-field {
  margin-bottom: 0.75rem;
}

/* Larger spacing for major fields - replaces mb-6 */
.wizard-field--large {
  margin-bottom: 1.25rem;
}

/* Major section wrapper - replaces mt-6 mb-6 */
.wizard-section {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Error message - replaces mt-2 */
.wizard-error {
  margin-top: 0.5rem;
}

/* Helper text - unified class for all help text in wizard */
.wizard-form .help-text {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* ===== TYPOGRAPHY HIERARCHY ===== */

.wizard-section__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
}

/* Form labels */
.wizard-form label:not(.radio-label):not(.address-option-label):not(.terms-checkbox-label) {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ===== HIDE BOTTOM NAV ON WIZARD PAGES ===== */
body.signup-wizard-page .header__mobile-nav {
  display: none;
}

/* ===== WIZARD BUTTONS ===== */
.wizard-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  margin: 2rem 0 0 0;
}

.wizard-buttons .terms-checkbox-label {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.wizard-buttons .wizard-error {
  width: 100%;
  text-align: center;
}

.wizard-buttons .button {
  flex: 1;
  max-width: 250px;
  font-size: var(--font-size-base);
}

/* ===== USER TYPE SELECTION CARDS ===== */
.user-type-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin: 1.5rem 0.75rem;
}

.user-type-card {
  background: var(--color-white);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-hover);
  transition: all var(--transition-smooth);
  border: 1px solid var(--color-border);
  cursor: pointer;
  position: relative;
}

.user-type-card:has(input[type="radio"]:checked) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-pink);
  background: color-mix(in srgb, var(--color-pink) 3%, var(--color-white));
}

@media (hover: hover) {
  .user-type-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-pink);
    background: color-mix(in srgb, var(--color-pink) 5%, var(--color-white));
  }
}

a.user-type-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.user-type-card input[type="radio"] {
  /* Visually hidden but keyboard accessible */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.card-icon-wrap {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--color-pink) 8%, var(--color-white));
  border-radius: var(--radius-full);
  color: var(--color-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
}

.card-header h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 0.75rem 0;
  color: var(--color-text-primary);
}

.card-description {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

/* Active/press */
.user-type-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Entrance animation */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .user-selection-header {
    animation: card-enter 0.4s ease-out both;
  }

  .user-type-card:first-child {
    animation: card-enter 0.4s ease-out 0.1s both;
  }

  .user-type-card:nth-child(2) {
    animation: card-enter 0.4s ease-out 0.2s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-type-card {
    transition: none;
  }
}

/* ===== NAME FIELDS LAYOUT ===== */
.name-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ===== RADIO BUTTON GROUPS ===== */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-base);
  transition: background-color var(--transition-smooth);
}

@media (hover: hover) {
  .radio-label:hover {
    background-color: color-mix(in srgb, var(--color-pink) 5%, transparent);
  }
}

.radio-label input[type="radio"] {
  cursor: pointer;
  width: 20px;
  height: 20px;
  accent-color: var(--color-pink);
  margin: 0;
  flex-shrink: 0;
}

.radio-label span {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.radio-label:has(input[type="radio"]:checked) {
  background-color: color-mix(in srgb, var(--color-pink) 8%, transparent);
}

.radio-label:has(input[type="radio"]:checked) span {
  font-weight: var(--font-weight-medium);
}

/* ===== TERMS CHECKBOX ===== */
.terms-checkbox-label {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
}

.terms-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  flex-shrink: 0;
  align-self: center;
}

.terms-checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

.terms-checkbox-label span {
  color: var(--color-text-primary);
}


/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 821px) {
  /* Container: centered with max-width */
  .signup-container {
    max-width: 900px;
    padding: 2rem;
  }

  /* Progress bar: desktop enhancements */
  .wizard-progress {
    padding-top: 0.5rem;
    margin-bottom: 1rem;
  }

  .wizard-progress__step {
    flex: 1;
    max-width: 120px;
  }

  /* Connecting line between steps - full width on desktop */
  .wizard-progress__step:not(:last-child)::after {
    top: 14px;
    width: 100%;
  }

  .wizard-progress__circle {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
  }

  .wizard-progress__label {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: center;
  }

  /* Current and completed step labels */
  .wizard-progress__step--current .wizard-progress__label,
  .wizard-progress__step--completed .wizard-progress__label {
    color: var(--color-pink);
  }

  .wizard-progress__step--current .wizard-progress__label {
    font-weight: var(--font-weight-semibold);
  }

  /* Form: enhanced spacing on desktop */
  .wizard-form {
    padding: 2rem 3rem;
  }

  /* Increased spacing for desktop */
  .wizard-field {
    margin-bottom: 1rem;
  }

  .wizard-field--large {
    margin-bottom: 1.5rem;
  }

  .wizard-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* User type cards: 2-column grid with larger spacing */
  .user-type-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 0 0 1.5rem 0;
  }

  .user-type-card {
    padding: 2rem;
  }

  .card-icon-wrap {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }

  /* Name fields: horizontal row */
  .name-row {
    flex-direction: row;
    gap: 1rem;
  }

  .name-row > div {
    flex: 1;
  }

  /* Short-format input fields: constrained width */
  .wizard-form input[type="tel"],
  .wizard-form .postcode-input-wrapper {
    max-width: 49%;
  }

  /* Radio groups: horizontal row on desktop (except vertical modifier) */
  .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .radio-label {
    padding: 0.625rem 0.75rem;
  }

}