/* ============================================================
   AUTH - Login / Register Form Styles
   Scene Locations Theme
   ============================================================ */

/* ---- Auth Page Layout ---- */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 40px 20px;
}

.auth-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}


/* ---- Auth Card ---- */
.auth-card {
  background: var(--sl-color-secondary);
  border-radius: var(--sl-radius-md);
  padding: 40px 32px;
  border: 1px solid var(--sl-color-border);
}

@media (max-width: 480px) {
  .auth-card {
    padding: 30px 20px;
  }
}


/* ---- Auth Header ---- */
.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: block;
  border-radius: 50%;
}

.auth-title {
  font-family: var(--sl-font-family);
  font-size: 22px;
  font-weight: var(--sl-font-weight-medium);
  color: var(--sl-color-white);
  margin: 0 0 8px 0;
}

.auth-subtitle {
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  color: var(--sl-color-text);
  margin: 0;
}


/* ---- Auth Form ---- */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  font-weight: var(--sl-font-weight-medium);
  color: var(--sl-color-white);
  margin-bottom: 0;
}

.auth-field input {
  padding: 12px 14px;
  background-color: var(--sl-color-accent);
  border: 1px solid var(--sl-color-border);
  border-radius: var(--sl-radius-md);
  color: var(--sl-color-white);
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  transition: border-color var(--sl-transition-fast);
}

.auth-field input:focus {
  border-color: var(--sl-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 80, 255, 0.1);
}

.auth-field input::placeholder {
  color: var(--sl-color-text);
  opacity: 0.5;
}

.auth-field .field-error {
  font-size: var(--sl-font-size-xs);
  color: #e74c3c;
}


/* ---- Auth Options ---- */
.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-xs);
  color: var(--sl-color-text);
  cursor: pointer;
}

.auth-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sl-color-primary);
}

.auth-forgot {
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-xs);
  color: var(--sl-color-primary);
  text-decoration: none;
  transition: color var(--sl-transition-fast);
}

.auth-forgot:hover {
  color: var(--sl-color-white);
}


/* ---- Auth Submit ---- */
.auth-submit {
  width: 100%;
  padding: 14px;
  background-color: var(--sl-color-primary);
  color: var(--sl-color-white);
  border: none;
  border-radius: var(--sl-radius-md);
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-base);
  font-weight: var(--sl-font-weight-medium);
  cursor: pointer;
  transition: all var(--sl-transition-fast);
}

.auth-submit:hover {
  background-color: var(--sl-color-white);
  color: var(--sl-color-primary);
  transform: translateY(-2px);
  box-shadow: var(--sl-shadow-md);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-submit:active {
  transform: translateY(0);
}


/* ---- Auth Divider ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--sl-color-border);
}

.auth-divider span {
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-xs);
  color: var(--sl-color-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ---- Social Login Buttons ---- */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--sl-color-border);
  border-radius: var(--sl-radius-md);
  background: transparent;
  color: var(--sl-color-white);
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  font-weight: var(--sl-font-weight-medium);
  cursor: pointer;
  transition: all var(--sl-transition-fast);
  text-decoration: none;
}

.auth-social-btn:hover {
  background-color: var(--sl-color-accent);
  border-color: var(--sl-color-text);
}

.auth-social-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* ---- Auth Footer ---- */
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  color: var(--sl-color-text);
}

.auth-footer a {
  color: var(--sl-color-primary);
  text-decoration: none;
  font-weight: var(--sl-font-weight-medium);
  transition: color var(--sl-transition-fast);
}

.auth-footer a:hover {
  color: var(--sl-color-white);
}


/* ---- Auth Messages ---- */
.auth-message {
  padding: 12px 16px;
  border-radius: var(--sl-radius-sm);
  font-family: var(--sl-font-family);
  font-size: var(--sl-font-size-sm);
  margin-bottom: 16px;
}

.auth-message--error {
  background-color: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

.auth-message--success {
  background-color: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

.auth-message--info {
  background-color: rgba(76, 80, 255, 0.1);
  border: 1px solid rgba(76, 80, 255, 0.3);
  color: var(--sl-color-primary);
}


/* ---- Password Strength ---- */
.password-strength {
  height: 4px;
  border-radius: 2px;
  background-color: var(--sl-color-border);
  overflow: hidden;
  margin-top: 6px;
}

.password-strength-bar {
  height: 100%;
  border-radius: 2px;
  transition: width var(--sl-transition-normal), background-color var(--sl-transition-normal);
  width: 0;
}

.password-strength-bar.weak {
  width: 33%;
  background-color: #e74c3c;
}

.password-strength-bar.medium {
  width: 66%;
  background-color: #f39c12;
}

.password-strength-bar.strong {
  width: 100%;
  background-color: #2ecc71;
}

.password-strength-text {
  font-size: var(--sl-font-size-xs);
  margin-top: 4px;
  color: var(--sl-color-text);
}