/* ==========================================================================
   ONBOARDING STYLES - La Citta Fatta Per Me
   Extracted from inline styles for better maintainability
   ========================================================================== */

/* ==========================================================================
   1. BACKGROUND & LAYOUT
   ========================================================================== */

.onboarding-bg {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.onboarding-bg::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 80%, rgba(38, 123, 192, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59, 142, 217, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(38, 123, 192, 0.08) 0%, transparent 40%);
  animation: float 25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}

/* ==========================================================================
   2. GLASSMORPHISM CARDS
   ========================================================================== */

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(38, 123, 192, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Review card variant - less blur for performance */
.review-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   3. FORM INPUTS (inside glass cards)
   ========================================================================== */

.glass-input {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(38, 123, 192, 0.2) !important;
  transition: all 0.3s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(38, 123, 192, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(38, 123, 192, 0.1), 0 4px 12px rgba(38, 123, 192, 0.1) !important;
}

/* Auto-apply glass styles to form elements inside glass-card */
.glass-card input[type="text"],
.glass-card input[type="email"],
.glass-card input[type="tel"],
.glass-card input[type="number"],
.glass-card select,
.glass-card textarea {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(38, 123, 192, 0.2) !important;
  transition: all 0.3s ease;
  border-radius: 0.75rem;
}

/* Custom arrow for select dropdowns */
.onboarding-bg select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 1l5 5 5-5" stroke="%236b7280" fill="none" stroke-width="1.5" stroke-linecap="round"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.glass-card input[type="text"]:focus,
.glass-card input[type="email"]:focus,
.glass-card input[type="tel"]:focus,
.glass-card input[type="number"]:focus,
.glass-card select:focus,
.glass-card textarea:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(38, 123, 192, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(38, 123, 192, 0.1), 0 4px 12px rgba(38, 123, 192, 0.1) !important;
  outline: none !important;
  --tw-ring-color: transparent !important;
}

/* ==========================================================================
   4. SECTION ICONS
   ========================================================================== */

.section-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #267BC0 0%, #3B8ED9 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(38, 123, 192, 0.3);
  flex-shrink: 0;
}

/* Smaller variant for mobile */
@media (max-width: 640px) {
  .section-icon-sm {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn-primary-blue {
  background: linear-gradient(135deg, #267BC0 0%, #3B8ED9 100%) !important;
  box-shadow: 0 4px 14px rgba(38, 123, 192, 0.4);
  transition: all 0.3s ease;
  border: none !important;
}

.btn-primary-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(38, 123, 192, 0.5);
}

.btn-primary-blue:active {
  transform: translateY(0);
}

.btn-primary-blue:disabled {
  background: #9ca3af !important; /* WCAG 1.4.11: contrasto non-testo 3:1+ */
  color: #d1d5db !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

/* Outline button */
.btn-outline-blue {
  border: 2px solid rgba(38, 123, 192, 0.3);
  color: #267BC0;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.btn-outline-blue:hover:not(:disabled) {
  border-color: #267BC0;
  background: rgba(38, 123, 192, 0.1);
}

/* ==========================================================================
   6. STEP PROGRESS CIRCLES
   ========================================================================== */

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Desktop: larger circles */
@media (min-width: 640px) {
  .step-circle {
    width: 44px;
    height: 44px;
  }
}

.step-circle--active {
  background: linear-gradient(135deg, #267BC0 0%, #3B8ED9 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(38, 123, 192, 0.4);
}

.step-circle--completed {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.step-circle--inactive {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(38, 123, 192, 0.25);
  color: #9ca3af;
}

/* Legacy class names for backwards compatibility */
.step-circle-blue.active {
  background: linear-gradient(135deg, #267BC0 0%, #3B8ED9 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(38, 123, 192, 0.4);
}

.step-circle-blue.completed {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
}

/* Step connector lines */
.step-line {
  height: 3px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.step-line--completed {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.step-line--inactive {
  background: rgba(38, 123, 192, 0.15);
}

/* Mini step circles (for internal wizards) */
.mini-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 0.75rem;
  font-weight: 600;
}

.mini-step-circle.active {
  background: linear-gradient(135deg, #267BC0 0%, #3B8ED9 100%);
  color: white;
  box-shadow: 0 3px 10px rgba(38, 123, 192, 0.3);
}

.mini-step-circle.completed {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
}

.mini-step-circle.inactive {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(38, 123, 192, 0.2);
  color: #9ca3af;
}

.mini-step-line {
  width: 40px;
  height: 2px;
  border-radius: 1px;
}

/* ==========================================================================
   7. CHECKBOX TAGS (Pill-style checkboxes)
   ========================================================================== */

.checkbox-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  user-select: none;
}

/* Touch-friendly on mobile */
@media (max-width: 640px) {
  .checkbox-tag {
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    justify-content: center;
  }
}

/* Color variants — class-only selectors (no :has(:checked) to avoid Turbo reflow collapse) */

/* Blue */
.checkbox-tag--blue:hover { border-color: #93c5fd; background: rgba(59, 130, 246, 0.05); }
.checkbox-tag--blue.checkbox-tag--active { background: #eff6ff; border-color: #60a5fa; color: #1d4ed8; }

/* Green */
.checkbox-tag--green:hover { border-color: #86efac; background: rgba(34, 197, 94, 0.05); }
.checkbox-tag--green.checkbox-tag--active { background: #f0fdf4; border-color: #4ade80; color: #15803d; }

/* Amber */
.checkbox-tag--amber:hover { border-color: #fcd34d; background: rgba(245, 158, 11, 0.05); }
.checkbox-tag--amber.checkbox-tag--active { background: #fffbeb; border-color: #fbbf24; color: #b45309; }

/* Purple */
.checkbox-tag--purple:hover { border-color: #c4b5fd; background: rgba(139, 92, 246, 0.05); }
.checkbox-tag--purple.checkbox-tag--active { background: #faf5ff; border-color: #a78bfa; color: #7c3aed; }

/* Rose */
.checkbox-tag--rose:hover { border-color: #fda4af; background: rgba(244, 63, 94, 0.05); }
.checkbox-tag--rose.checkbox-tag--active { background: #fff1f2; border-color: #fb7185; color: #be123c; }

/* Violet */
.checkbox-tag--violet:hover { border-color: #c4b5fd; background: rgba(139, 92, 246, 0.05); }
.checkbox-tag--violet.checkbox-tag--active { background: #f5f3ff; border-color: #a78bfa; color: #6d28d9; }

/* Teal */
.checkbox-tag--teal:hover { border-color: #5eead4; background: rgba(20, 184, 166, 0.05); }
.checkbox-tag--teal.checkbox-tag--active { background: #f0fdfa; border-color: #2dd4bf; color: #0f766e; }

/* ==========================================================================
   7b. LABEL-CHECK (Full-width checkbox labels, toggled by checkbox-tag controller)
   ========================================================================== */

.label-check--amber.checkbox-tag--active { background: #fffbeb; border-color: #fcd34d; }
.label-check--purple.checkbox-tag--active { background: #faf5ff; border-color: #d8b4fe; }

/* ==========================================================================
   8. COLOR UTILITIES
   ========================================================================== */

.text-primary-blue { color: #267BC0; }
.ring-primary-blue { --tw-ring-color: #267BC0; }
.bg-primary-blue { background-color: #267BC0; }
.border-primary-blue { border-color: #267BC0; }

/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */

/* Shake animation for validation errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .onboarding-bg::before,
  .step-circle,
  .checkbox-tag,
  .btn-primary-blue,
  .btn-outline-blue {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   10. WINDOWS HIGH CONTRAST MODE
   ========================================================================== */

@supports (forced-colors: active) {
  .glass-card {
    border: 2px solid ButtonText;
    background: Canvas;
  }

  .glass-input,
  .glass-card input[type="text"],
  .glass-card input[type="email"],
  .glass-card input[type="tel"],
  .glass-card input[type="number"],
  .glass-card select,
  .glass-card textarea {
    border: 1px solid ButtonText !important;
    background: Field !important;
  }

  .step-circle--active {
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .step-circle--completed {
    border: 2px solid ButtonText;
    background: ButtonText;
    color: ButtonFace;
  }

  .step-circle--inactive {
    border: 2px solid GrayText;
    color: GrayText;
  }

  .btn-primary-blue {
    border: 2px solid ButtonText !important;
  }

  .btn-primary-blue:disabled {
    border: 2px solid GrayText !important;
    color: GrayText !important;
  }
}