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

.reg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, $primary-800 0%, $primary-600 50%, $accent-600 100%);
  padding: $spacing-4;

  &__card {
    width: 100%;
    max-width: 440px;
    background: var(--clr-surface, #{$color-surface});
    border-radius: $radius-xl;
    box-shadow: $shadow-xl;
    padding: $spacing-10 $spacing-8;

    &--wide { max-width: 560px; }
  }

  &__header {
    text-align: center;
    margin-bottom: $spacing-8;
  }

  &__mail-icon {
    color: $primary-600;
    margin-bottom: $spacing-3;
  }

  &__title {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    color: $primary-700;
    margin-bottom: $spacing-1;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});

    strong { color: var(--clr-text, #{$color-text-primary}); }
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: $spacing-5;
  }

  &__alert {
    padding: $spacing-3 $spacing-4;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: $radius-base;
    color: #991b1b;
    font-size: $font-size-sm;
  }

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

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

  &__input {
    width: 100%;
    padding: $spacing-3 $spacing-4;
    border: 1px solid var(--clr-border, #{$color-border});
    border-radius: $radius-base;
    font-size: $font-size-base;
    color: var(--clr-text, #{$color-text-primary});
    background: var(--clr-surface, #{$color-surface});
    transition: border-color $transition-fast, box-shadow $transition-fast;
    outline: none;

    &::placeholder { color: var(--clr-text-muted, #{$color-text-muted}); }

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

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

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

  &__submit {
    margin-top: $spacing-2;
    width: 100%;
    padding: $spacing-3 $spacing-4;
    background: var(--clr-primary, #{$color-primary});
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-2;
    transition: background $transition-fast, opacity $transition-fast;

    &:hover:not(:disabled) { background: var(--clr-primary-hover, #{$color-primary-hover}); }
    &:disabled { opacity: 0.6; cursor: not-allowed; }
  }

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

  &__signin-link {
    margin-top: $spacing-6;
    text-align: center;
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
  }

  &__link {
    color: var(--clr-primary, #{$color-primary});
    font-weight: $font-weight-medium;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  &__link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--clr-primary, #{$color-primary});
    font-weight: $font-weight-medium;
    font-size: $font-size-sm;
    cursor: pointer;

    &:hover { text-decoration: underline; }
  }

  // ── Email preview ─────────────────────────────────────────────────────────────

  &__email-preview {
    border: 1px solid var(--clr-border, #{$color-border});
    border-radius: $radius-xl;
    overflow: hidden;
    margin-bottom: $spacing-6;
    box-shadow: $shadow-sm;
  }

  &__email-bar {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-4;
    background: var(--clr-surface-raised, #{$gray-100});
    border-bottom: 1px solid var(--clr-border, #{$color-border});
  }

  &__email-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: $gray-300;

    &:nth-child(1) { background: #fc5f5a; }
    &:nth-child(2) { background: #fdbe2c; }
    &:nth-child(3) { background: #27c840; }
  }

  &__email-bar-label {
    margin-left: auto;
    font-size: $font-size-xs;
    color: var(--clr-text-muted, #{$color-text-muted});
    letter-spacing: 0.03em;
  }

  &__email-meta {
    padding: $spacing-3 $spacing-5;
    background: var(--clr-surface-raised, #{$gray-50});
    border-bottom: 1px solid var(--clr-border, #{$color-border});
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
  }

  &__email-row {
    display: flex;
    gap: $spacing-3;
    font-size: $font-size-xs;
  }

  &__email-key {
    color: var(--clr-text-muted, #{$color-text-muted});
    font-weight: $font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 52px;
    flex-shrink: 0;
  }

  &__email-val {
    color: var(--clr-text-secondary, #{$color-text-secondary});
  }

  &__email-body {
    padding: $spacing-6 $spacing-6 $spacing-5;
    display: flex;
    flex-direction: column;
    gap: $spacing-4;
  }

  &__email-greeting {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: var(--clr-text, #{$color-text-primary});
  }

  &__email-text {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
    line-height: $line-height-relaxed;
  }

  &__email-cta {
    align-self: center;
    padding: $spacing-3 $spacing-8;
    background: var(--clr-primary, #{$color-primary});
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: $spacing-2;
    transition: background $transition-fast;

    &:hover:not(:disabled) { background: var(--clr-primary-hover, #{$color-primary-hover}); }
    &:disabled { opacity: 0.6; cursor: not-allowed; }
  }

  &__email-footer {
    font-size: $font-size-xs;
    color: var(--clr-text-muted, #{$color-text-muted});
    text-align: center;
    border-top: 1px solid var(--clr-border, #{$color-border});
    padding-top: $spacing-4;
    margin-top: $spacing-2;
  }

  &__server-error {
    font-size: $font-size-sm;
    color: $color-error;
    text-align: center;
  }

  &__resend {
    text-align: center;
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
  }

  // ── Success state ─────────────────────────────────────────────────────────────

  &__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-4;
    padding: $spacing-6 0;
    text-align: center;
  }

  &__success-icon { color: #16a34a; }

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

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

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