/*
 * File: css/conf/03-pages/12.userui.css
 * Logic: User Interface Styles (Auth Pages, Profile, Account Layouts).
 */

/* ==========================================================================
   1. AUTH & ACCOUNT PAGES (Login, Register, Password Reset)
   ========================================================================== */
.wsdt-auth-page .wsdt-main-content {
  padding: var(--space-xl) 0;
  background-color: var(--bg-gray-lighter);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.wsdt-auth-container,
.wsdt-path-user-edit .wsdt-content-area form {
  max-width: var(--container-text-width-sm);
  background-color: var(--surface-bg);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  margin: 0 auto;
}

.wsdt-auth-container h1 {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.wsdt-auth-container .form-item,
.wsdt-path-user-edit .form-item {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
}

.wsdt-auth-container .description,
.wsdt-path-user-edit .description {
  font-size: 11px;
  color: var(--base-primary);
  opacity: 0.6;
  margin-top: var(--space-xs);
}

/* 2. FORM ACTIONS (Buttons) */
.wsdt-auth-container .form-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.wsdt-auth-container .form-actions .button {
  width: 100%;
  max-width: 450px;
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: normal !important; /* Επιτρέπουμε την αλλαγή γραμμής */
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
  padding: 14px 20px;
  height: auto;
  min-height: 48px;
  font-size: clamp(0.85rem, 4vw, 1rem); /* Δυναμικό μέγεθος γραμματοσειράς */
  /* Force primary styling */
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: var(--btn-border-w) solid transparent;
}

.wsdt-auth-container .form-actions .button:hover {
  background-color: var(--btn-text);
  color: var(--color-secondary);
}