/* =========================================
   Signup Form Styles
   Mobile-friendly and responsive design
   ========================================= */

/* CSS Variables */
:root {
  /* Signup Primary Colors (3 max) */
  --signup-primary: 219, 39, 119;
  --signup-primary-light: 236, 72, 153;
  --signup-primary-lighter: 251, 207, 232;
  --signup-danger: #dc2626;
  --signup-purple: #8b5cf6;
  --signup-purple-hover: rgba(139, 92, 246, 0.05);
  
  /* Logo Sizes */
  --logo-size: 80px;
  --logo-icon-size: 40px;
  
  /* Logo Gradients */
  --logo-gradient-start: rgba(219, 39, 119, 0.8);
  --logo-gradient-mid: rgba(236, 72, 153, 0.6);
  --logo-gradient-end: rgba(251, 207, 232, 0.4);
  --logo-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
  
  /* Form Section Borders */
  --section-border-width: 4px;
  --section-required-color: var(--signup-danger);
  --section-optional-color: var(--signup-purple);
  
  /* Transitions */
  --signup-transition: all 0.2s ease;
  --signup-transition-form: all 0.3s ease;
}

/* Logo and Branding */
.logo-container {
  width: var(--logo-size);
  height: var(--logo-size);
  margin: 0 auto;
  overflow: visible !important;
  padding: 15px;
  contain: none !important;
}

/* Prevent logo clipping on signup page */
section .logo-container {
  overflow: visible !important;
  contain: none !important;
  position: relative;
  z-index: 1;
}

.logo-circle {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, 
    var(--logo-gradient-start) 0%, 
    var(--logo-gradient-mid) 50%, 
    var(--logo-gradient-end) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--logo-shadow);
  overflow: visible !important;
  position: relative;
}

/* Ensure pseudo-elements don't get clipped */
section .logo-circle::before,
section .logo-circle::after {
  overflow: visible !important;
}

/* Override custom.css overflow: hidden for signup page */
section .logo-circle {
  overflow: visible !important;
}

/* Ensure parent containers don't clip */
section[class*="min-h-screen"],
section[class*="min-h-screen"] > div {
  overflow: visible !important;
}

.logo-account {
  width: var(--logo-icon-size);
  height: var(--logo-icon-size);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') center/contain no-repeat;
}

/* Form Sections */
.section-required {
  border-left: var(--section-border-width) solid var(--section-required-color);
}

.section-optional {
  border-left: var(--section-border-width) solid var(--section-optional-color);
  cursor: pointer;
  transition: var(--signup-transition);
}

.section-optional:hover {
  background-color: var(--signup-purple-hover);
}

/* Modal styles */
.modal-overlay {
    backdrop-filter: blur(2px);
}

.modal-overlay .bg-white {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Form Toggle Animation */
#form-content {
  transition: var(--signup-transition-form);
}

#toggle-form-btn.rotate-90 {
  transform: rotate(90deg);
}

/* Input Focus States */
input:focus, 
select:focus, 
textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Phone Validation Styles */
#phone-exists-warning {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Paste Signup Styles */
.paste-signup-section {
  position: relative;
  overflow: hidden;
}

.paste-signup-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1) 0%, 
    rgba(147, 51, 234, 0.05) 100%);
  pointer-events: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .logo-container {
        transform: scale(0.7);
    }

    .section-required,
    .section-optional {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0.5rem;
        border-left-width: 3px;
    }

    /* Stack grid items on mobile */
    .grid.grid-cols-1.md\\:grid-cols-2 > div {
        margin-bottom: 0.75rem;
    }

    /* Larger touch targets */
    button, input[type="radio"], input[type="checkbox"] {
        min-height: 44px;
    }

    /* Modal adjustments */
    .modal-overlay > div > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
}

/* Loading states */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* CSS Variables for States */
:root {
  --signup-success: #10b981;
  --signup-success-bg: rgba(16, 185, 129, 0.05);
  --signup-error: #ef4444;
  --signup-error-bg: rgba(239, 68, 68, 0.05);
  --signup-progress-bg: #e5e7eb;
  --signup-progress-gradient-start: #3b82f6;
  --signup-progress-gradient-end: #8b5cf6;
  --signup-progress-height: 4px;
  --signup-progress-transition: width 0.3s ease;
}

/* Success/Error States */
.form-success {
  border-color: var(--signup-success);
  background-color: var(--signup-success-bg);
}

.form-error {
  border-color: var(--signup-error);
  background-color: var(--signup-error-bg);
}

/* Progress Indicators */
.progress-bar {
  width: 100%;
  height: var(--signup-progress-height);
  background-color: var(--signup-progress-bg);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    var(--signup-progress-gradient-start), 
    var(--signup-progress-gradient-end));
  border-radius: 2px;
  transition: var(--signup-progress-transition);
}

/* Toast notifications */
.toast {
    animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .section-required {
        border-left-color: #000;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .section-optional {
        border-left-color: #000;
        background-color: rgba(0, 0, 0, 0.03);
    }
}

/* Print styles */
@media print {
    .modal-overlay,
    button[type="submit"]:not(:disabled) {
        display: none !important;
    }

    .form-signup-section {
        box-shadow: none;
        border: 1px solid #000;
    }
}