/* Jobs in Psychedelics — Auth Page Styling (Light Theme) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Body & Background ─────────────────────────── */
#auth-body {
  font-family: 'Inter', sans-serif;
  background: #f9fafb !important;
}

/* ── Container ─────────────────────────────────── */
#auth-container {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

@media (min-width: 640px) {
  #auth-container {
    border-radius: 1rem !important;
    border-width: 1px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  }
}

/* ── Heading & Logo ────────────────────────────── */
#auth-heading-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #1c1b5a !important;
  padding-top: 8px;
}

#auth-heading-description {
  color: rgba(28, 27, 90, 0.5) !important;
}

#auth-heading-container svg {
  color: #059669 !important;
}

/* ── Inputs ────────────────────────────────────── */
.auth-component-input {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1c1b5a !important;
  font-family: 'Inter', sans-serif;
}

.auth-component-input::placeholder {
  color: rgba(28, 27, 90, 0.35) !important;
}

.auth-component-input:focus {
  border-color: rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1) !important;
  background-color: #ffffff !important;
}

/* Input labels (floating) */
label.auth-component-input {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #6b7280 !important;
}

.auth-component-input-label-focused {
  color: #059669 !important;
}

.auth-component-input-container {
  box-shadow: none !important;
}

/* ── Buttons ───────────────────────────────────── */
.auth-component-button {
  font-family: 'Inter', sans-serif;
  font-weight: 600 !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s ease !important;
}

.auth-component-button:hover {
  background-color: #10b981 !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2) !important;
  transform: translateY(-1px);
}

.auth-component-button:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(5, 150, 105, 0.5) !important;
}

/* ── Links & Text ──────────────────────────────── */
#auth-container a:not(.auth-component-button) {
  color: #059669 !important;
  transition: color 0.2s ease;
}

#auth-container a:not(.auth-component-button):hover {
  color: #10b981 !important;
}

/* "Don't have an account?" / "Already have an account?" text */
#auth-container p,
#auth-container span {
  color: #6b7280;
}

/* ── Social Buttons ────────────────────────────── */
#auth-container a[href*="auth/"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
}

#auth-container a[href*="auth/"]:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #1c1b5a !important;
}

/* ── Checkbox (Remember me) ────────────────────── */
#auth-container input[type="checkbox"] {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
}

#auth-container input[type="checkbox"]:checked {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

/* ── Divider / "or" separator ──────────────────── */
#auth-container hr,
#auth-container [class*="border-"] {
  border-color: #e5e7eb !important;
}

/* ── Error messages ────────────────────────────── */
#auth-container .text-red-600 {
  color: #dc2626 !important;
}

/* ── Selection color ───────────────────────────── */
#auth-container ::selection {
  background-color: rgba(5, 150, 105, 0.15);
  color: #1c1b5a;
}

/* ── DevDojo branding bar ──────────────────────── */
a[href*="devdojo.com/auth"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
}