/* ================================================
   ACERO SHOP V2 - BUYER LOGIN STYLES
   ================================================ */

.login-container {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16);
}

@media (min-width: 768px) {
  .login-container { padding: var(--space-40) var(--space-24); }
}

@media (min-width: 1024px) {
  .login-container {
    padding: var(--space-48) var(--space-32);
    background-color: var(--color-card-background);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-medium);
    margin-top: var(--space-32);
    margin-bottom: var(--space-40);
  }
}

.login-header { text-align: center; margin-bottom: var(--space-32); }
.login-logo { font-size: 56px; margin-bottom: var(--space-12); }
.login-header h2 { font-size: var(--font-size-heading-2); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-8); }
.login-header p { font-size: var(--font-size-description); color: var(--color-text-secondary); margin: 0; }

.login-form { width: 100%; }
.login-form .form-group { margin-bottom: var(--space-20); }
.login-form .btn { margin-top: var(--space-4); }

.form-divider {
  display: flex; align-items: center; gap: var(--space-12);
  margin: var(--space-24) 0;
}
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background-color: var(--color-border); }
.form-divider span { font-size: var(--font-size-small); color: var(--color-text-muted); white-space: nowrap; }

.login-error {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background-color: #FFF0F0; border: 1px solid #FFCDD2;
  border-radius: var(--radius-button); margin-bottom: var(--space-16);
  font-size: var(--font-size-description); color: var(--color-danger);
}
.login-error .error-icon { font-size: 18px; flex-shrink: 0; }

.form-group.error input { border-color: var(--color-danger); }
.form-group.error .form-error { display: block; }
.form-error { display: none; font-size: var(--font-size-small); color: var(--color-danger); margin-top: var(--space-4); }

@media (min-width: 768px) { .login-logo { font-size: 64px; } }
@media (min-width: 1024px) { .login-logo { font-size: 72px; } }