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

.login-section {
  @include flex-center;
  min-height: calc(100vh - 80px);
  background: $sky-gradient;
  padding: $spacing-xl;
}

.login-card {
  @include card-style;
  width: 100%;
  max-width: 400px;
  padding: $spacing-2xl;
  text-align: center;
}

.login-header {
  margin-bottom: $spacing-lg;

  h1 {
    font-family: $font-heading;
    color: $primary-blue;
    margin: $spacing-sm 0 $spacing-xs;
    font-size: 1.75rem;
  }

  p {
    color: $neutral-medium;
    font-size: 0.9rem;
  }
}

.login-flower {
  width: 48px;
  height: 48px;
  margin-bottom: $spacing-sm;
}

.login-form {
  text-align: left;
}

.form-group {
  margin-bottom: $spacing-md;

  label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: $neutral-dark;
    margin-bottom: $spacing-xs;
  }

  input {
    width: 100%;
    padding: $spacing-sm $spacing-md;
    border: 1px solid $neutral-light;
    border-radius: $radius-md;
    font-size: 1rem;
    transition: border-color $transition-fast;
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: $primary-blue;
      box-shadow: 0 0 0 3px rgba($primary-blue, 0.15);
    }
  }
}

.login-error {
  background: rgba($danger-red, 0.1);
  color: $danger-red;
  padding: $spacing-sm $spacing-md;
  border-radius: $radius-md;
  font-size: 0.875rem;
  margin-bottom: $spacing-md;
  text-align: center;
}

.btn-login {
  @include button-style($primary-blue, $neutral-white, $primary-blue-light);
  width: 100%;
  padding: $spacing-sm $spacing-lg;
  margin-top: $spacing-sm;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}