/* auth-modal.css
 * Scoped styling for the authentication (login/connect) modal only.
 * Utilizes existing design tokens; avoids introducing new typography or button variants.
 */

#auth-modal .modal {
  max-width: 520px;
  width: 100%;
  padding: 0; /* rely on card spacing */
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-gray-50) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

#auth-modal .card { /* elevate appearance */
  background: transparent;
  box-shadow: none;
  border: 0;
}

#auth-modal .card__header {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
}

#auth-modal .card__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
}

#auth-modal .card__body {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

#auth-modal .card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid var(--color-border-light);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
}

/* Steps overview */
#auth-modal #auth-steps-overview {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

#auth-modal #auth-steps-text {
  font-weight: 500;
}

/* Paragraph spacing refinement */
#auth-modal p {
  margin: 0 0 var(--spacing-sm);
  line-height: 1.45;
}

#auth-modal p.text-sm { line-height: 1.4; }

/* Status / feedback area */
#auth-modal #auth-status {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 3px solid var(--color-primary);
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-detail);
}

/* Add subtle animated focus ring on action */
#auth-modal #auth-action-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Overlay blur now provided globally via .modal-overlay */

/* Transition effects */
#auth-modal .modal { transition: transform 0.25s ease, opacity 0.25s ease; }
#auth-modal[style*='display: none'] .modal { opacity: 0; transform: translateY(-8px); }

/* Emphasis for key words */
#auth-modal em { font-style: normal; font-weight: 600; color: var(--color-primary); }

/* Ensure Cancel button appears muted but consistent */
#auth-modal #auth-cancel-btn { opacity: 0.85; }
#auth-modal #auth-cancel-btn:hover { opacity: 1; }