@use '../styles/variables' as *;

@mixin control {
  width: 100%;
  padding: $spacing-3 $spacing-4;
  background: var(--clr-surface-raised, #{$gray-50});
  border: 1px solid var(--clr-border);
  border-radius: $radius-base;
  font-size: $font-size-sm;
  font-family: $font-family-base;
  color: var(--clr-text);
  outline: none;
  transition: border-color $transition-fast, box-shadow $transition-fast;

  &:focus {
    border-color: $primary-400;
    box-shadow: 0 0 0 3px rgba($primary-400, 0.18);
  }
}

// ── Block ─────────────────────────────────────────────────────────────────────
.wizard {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: $radius-xl;
  box-shadow: $shadow-md;
  overflow: hidden;

  // ── Progress ──────────────────────────────────────────────────────────────
  &__progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: $spacing-6 $spacing-8;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
  }

  &__progress-track {
    position: absolute;
    top: 50%;
    left: $spacing-8;
    right: $spacing-8;
    height: 2px;
    background: var(--clr-border);
    transform: translateY(-50%);
    z-index: 0;
    margin-top: -10px;
  }

  &__progress-fill {
    height: 100%;
    background: var(--clr-primary);
    transition: width $transition-slow;
    border-radius: $radius-full;
  }

  &__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-2;
  }

  &__step-dot {
    width: 30px;
    height: 30px;
    border-radius: $radius-full;
    border: 2px solid var(--clr-border);
    background: var(--clr-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    color: var(--clr-text-muted);
    transition: background $transition-base, border-color $transition-base, color $transition-base;

    .wizard__step--active & {
      border-color: var(--clr-primary);
      background: var(--clr-primary);
      color: #fff;
    }

    .wizard__step--done & {
      border-color: $accent-500;
      background: $accent-500;
      color: #fff;
    }
  }

  &__step-label {
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    color: var(--clr-text-muted);
    white-space: nowrap;

    .wizard__step--active & { color: var(--clr-primary); font-weight: $font-weight-semibold; }
    .wizard__step--done &   { color: $accent-600; }
  }

  // ── Body ──────────────────────────────────────────────────────────────────
  &__body {
    padding: $spacing-8;
    min-height: 320px;
  }

  &__step-title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    margin-bottom: $spacing-6;
  }

  &__msg {
    font-size: $font-size-sm;
    color: var(--clr-text-muted);
  }

  // ── Service grid (step 1) ──────────────────────────────────────────────────
  &__service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-4;

    @media (max-width: $bp-sm) { grid-template-columns: 1fr; }
  }

  &__service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
    padding: $spacing-5;
    border: 2px solid var(--clr-border);
    border-radius: $radius-lg;
    cursor: pointer;
    transition: border-color $transition-fast, box-shadow $transition-fast, background $transition-fast;

    &:hover { border-color: $primary-300; box-shadow: $shadow-base; }

    &--selected {
      border-color: var(--clr-primary);
      background: $primary-50;
      box-shadow: $shadow-base;
    }
  }

  &__radio { position: absolute; opacity: 0; width: 0; height: 0; }

  &__service-name {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
  }

  &__service-desc {
    font-size: $font-size-xs;
    color: var(--clr-text-secondary);
    line-height: $line-height-relaxed;
    flex: 1;
  }

  &__service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: $spacing-3;
    padding-top: $spacing-3;
    border-top: 1px solid var(--clr-border);
  }

  &__service-price {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: var(--clr-primary);
  }

  &__service-duration {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    background: var(--clr-surface-raised, #{$gray-100});
    padding: $spacing-1 $spacing-2;
    border-radius: $radius-full;
  }

  // ── Date/time (step 2) ────────────────────────────────────────────────────
  &__service-pill {
    display: inline-flex;
    padding: $spacing-2 $spacing-4;
    background: $primary-50;
    border: 1px solid $primary-200;
    border-radius: $radius-full;
    font-size: $font-size-sm;
    color: $primary-700;
    margin-bottom: $spacing-6;
  }

  &__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-5;

    @media (max-width: $bp-sm) { grid-template-columns: 1fr; }
  }

  &__field {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
  }

  &__label {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
  }

  &__input {
    @include control;

    &--error {
      border-color: $color-error;
      &:focus { border-color: $color-error; box-shadow: 0 0 0 3px rgba($color-error, 0.18); }
    }
  }

  &__hint {
    font-size: $font-size-xs;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: $radius-base;
    padding: $spacing-2 $spacing-3;
  }

  &__error { font-size: $font-size-xs; color: $color-error; }

  // ── Requirements (step 3) ─────────────────────────────────────────────────
  &__textarea {
    @include control;
    resize: vertical;
    min-height: 130px;
    line-height: $line-height-relaxed;
  }

  &__char-count {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    text-align: right;
  }

  &__optional {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    margin-left: $spacing-2;
    font-weight: $font-weight-normal;
  }

  &__additional {
    margin-top: $spacing-5;
    padding: $spacing-4;
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px dashed var(--clr-border);
    border-radius: $radius-lg;
  }

  &__additional-title {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: var(--clr-text);
    margin-bottom: $spacing-2;
  }

  &__additional-note {
    font-size: $font-size-xs;
    color: var(--clr-text-secondary);
    line-height: $line-height-relaxed;
  }

  // ── Summary (step 4) ──────────────────────────────────────────────────────
  &__summary {
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-lg;
    overflow: hidden;
    margin-bottom: $spacing-4;
  }

  &__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: $spacing-4;
    padding: $spacing-3 $spacing-5;

    & + & { border-top: 1px solid var(--clr-border); }

    dt {
      font-size: $font-size-sm;
      color: var(--clr-text-secondary);
      flex-shrink: 0;
    }

    dd {
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      color: var(--clr-text);
      text-align: right;
    }

    &--total {
      background: var(--clr-surface);

      dt { font-weight: $font-weight-semibold; color: var(--clr-text); font-size: $font-size-base; }
      dd { font-size: $font-size-lg; color: var(--clr-primary); font-weight: $font-weight-bold; }
    }
  }

  &__deposit { color: $accent-600; font-weight: $font-weight-semibold; }

  &__summary-note {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    line-height: $line-height-relaxed;
  }

  // ── Navigation ────────────────────────────────────────────────────────────
  &__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-5 $spacing-8;
    border-top: 1px solid var(--clr-border);
  }

  &__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-6;
    background: var(--clr-primary);
    color: #fff;
    border: 1px solid var(--clr-primary);
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast;

    &:hover:not(:disabled) { background: var(--clr-primary-hover); }
    &:disabled { opacity: 0.55; cursor: not-allowed; }
  }

  &__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-5;
    background: transparent;
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast, color $transition-fast;

    &:hover { background: var(--clr-surface-raised); color: var(--clr-text); }
  }

  &__spinner { animation: wizard-spin 0.8s linear infinite; }

  // ── Done / receipt ────────────────────────────────────────────────────────
  &__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: $spacing-4;
    padding: $spacing-12 $spacing-8;
  }

  &__success-icon { color: $accent-500; }

  &__success-title {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    color: var(--clr-text);
  }

  &__success-sub {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary);
  }

  &__receipt {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: $spacing-2 $spacing-6;
    width: 100%;
    max-width: 360px;
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-lg;
    padding: $spacing-5;
    text-align: left;

    dt {
      font-size: $font-size-xs;
      font-weight: $font-weight-medium;
      color: var(--clr-text-secondary);
    }

    dd {
      font-size: $font-size-xs;
      color: var(--clr-text);
      font-family: $font-family-mono;
      text-align: right;
    }
  }

  &__receipt-actions {
    display: flex;
    gap: $spacing-3;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: $spacing-2;
  }
}

@keyframes wizard-spin { to { transform: rotate(360deg); } }
