.signup-section {
/* Scoped signup styles only - do not affect global styles
  All rules are scoped under the .signup-section wrapper */

  /* design tokens scoped to the signup section */
  --card: #f1f5f9;
  --card-foreground: #374151;
  --primary: #059669;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #374151;
  --muted: #f1f5f9;
  --muted-foreground: #475569;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e5e7eb;
  --input: #ffffff;
  --ring: rgba(5, 150, 105, 0.12);
  --radius: 0.5rem;
  --foreground: #111827;

  font-family: "Source Sans Pro", sans-serif;
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* occupy at least the viewport height and center the card when space allows.
    If the card is taller than the viewport, the section grows and the page scrolls.
    Use stretch so the container can fill the available height (no internal scroll).
  */
  min-height: 100vh;
  display: flex;
  align-items: stretch; /* allow .signup-container to stretch vertically */
  justify-content: center; /* center horizontally */
  padding: 1rem 0.9rem; /* vertical breathing room; horizontal handled by container width */
  overflow-x: hidden; /* prevent accidental horizontal scroll from wide children */
}

.signup-section .signup-container {
  background: var(--input);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.06);
  padding: 1.25rem 1rem;
  /* wide on small screens (95%), but capped so it doesn't get huge */
  width: min(95%, 420px);
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--border);
  animation: slideUp 420ms ease-out;
  /* allow the card to grow and push content below it instead of scrolling internally */
  /* Make the container fill the section height when possible but stay flexible.
    This avoids internal scrolling: when content exceeds viewport the document scrolls. */
  box-sizing: border-box;
  align-self: center; /* center horizontally when stretched vertically */
  display: flex;
  flex-direction: column;
  justify-content: center; /* center inner content when there's extra space */
  min-height: calc(100vh - 2rem); /* account for section vertical padding */
  max-height: none;
  overflow: visible;
 }

.signup-section .signup-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.signup-section .signup-title {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.signup-section .signup-subtitle {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  font-weight: 400;
}

/* Form Layout (mobile-first: stacked fields)
   - name fields stack vertically by default
   - switch to multi-column at larger breakpoints */
.signup-section .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.signup-section .form-group {
  display: flex;
  flex-direction: column;
}

.signup-section .form-group:not(.form-row .form-group) {
  margin-bottom: 1rem;
}

.signup-section .form-label {
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
}

.signup-section .form-input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--input);
  color: var(--foreground);
  font-size: 1rem;
  transition: box-shadow 160ms ease, border-color 160ms ease;
  outline: none;
  font-family: inherit;
  min-height: 44px; /* touch target */
}

.signup-section .form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

.signup-section .form-input:hover {
  border-color: #c7e9dd;
}

.signup-section .form-input.error {
  border-color: var(--destructive);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
}

.signup-section .error-message {
  color: var(--destructive);
  font-size: 0.875rem;
  margin-top: 0.45rem;
  font-weight: 500;
  min-height: 1.25rem;
}

.signup-section .password-strength {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.signup-section .strength-bar {
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  margin: 0.25rem 0 0.35rem;
  overflow: hidden;
}

.signup-section .strength-fill {
  height: 100%;
  transition: width 260ms ease, background 260ms ease;
  border-radius: 2px;
}

.signup-section .recaptcha-container {
  margin: 1.25rem 0;
  display: flex;
  justify-content: center;
}

.signup-section .submit-button {
  width: 100%;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 0.9rem 1rem;
  border-radius: calc(var(--radius) * 1.05);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-section .submit-button:hover:not(:disabled) {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.12);
}

.signup-section .submit-button:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.signup-section .submit-button .loading-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
}

.signup-section .submit-button.loading .loading-spinner {
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

.signup-section .message {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  text-align: center;
}

.signup-section .message.success {
  background: rgba(16, 185, 129, 0.08);
  color: var(--accent);
  border: 1px solid rgba(16, 185, 129, 0.12);
}

.signup-section .message.error {
  background: rgba(220, 38, 38, 0.06);
  color: var(--destructive);
  border: 1px solid rgba(220, 38, 38, 0.12);
}

.signup-section .login-link {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.signup-section .login-link a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

/* Tablet (min-width: 600px) - two-column for name fields, slightly wider form */
@media (min-width: 600px) {
  .signup-section .signup-container {
    padding: 2rem;
  /* tablet: slightly narrower max width than before to keep comfortable line length */
  width: 100%;
  max-width: 560px;
  }

  .signup-section .signup-title { font-size: 1.9rem; }

  .signup-section .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1rem;
  }

  .signup-section .form-input { padding: 0.9rem 1rem; }
}

/* Desktop (min-width: 900px) - increase horizontal breathing room and typography */
@media (min-width: 900px) {
  .signup-section .signup-container {
  padding: 2.25rem 2.25rem;
  width: 100%;
  /* desktop: reduce width for improved focus and UX */
  max-width: 620px;
  }

  .signup-section .signup-header { margin-bottom: 2rem; }

  .signup-section .signup-title { font-size: 2.25rem; }

  .signup-section .form-row { gap: 1.25rem 1.5rem; }
}

/* Large screens (min-width: 1200px) - comfortable wide layout */
@media (min-width: 1200px) {
  .signup-section .signup-container {
  /* large screens: keep card relatively narrow */
  max-width: 560px;
  padding: 2.5rem 3rem;
  width: 100%;
  }

  .signup-section .signup-title { font-size: 2.5rem; }
}

/* Focus visible for accessibility (scoped) */
.signup-section .form-input:focus-visible,
.signup-section .submit-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Animation for form appearance (scoped) */
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* High contrast mode support (scoped) */
@media (prefers-contrast: high) {
  .signup-section .form-input { border-width: 3px; }
  .signup-section .submit-button { border: 2px solid var(--primary); }
}

/* Reduced motion support (scoped) */
@media (prefers-reduced-motion: reduce) {
  .signup-section .signup-container { animation: none; }
  .signup-section .form-input, .signup-section .submit-button { transition: none; }
}