.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
  min-height: 100dvh;
}

/* Consistent step progress (all wizard pages) */
.signup-progress {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.signup-progress .signup-progress-bar {
  min-width: 0;
}

.focused-input:focus {
  border-color: #33297a !important;
  box-shadow: 0 0 0 3px rgba(51, 41, 122, 0.15);
}

.input-glow:focus {
  outline: none;
  border-color: #33297a;
  box-shadow: 0 0 0 4px rgba(51, 41, 122, 0.1);
}

.focus-glow:focus {
  box-shadow: 0 0 0 4px rgba(51, 41, 122, 0.15);
}

.username-radio:checked + .username-content {
  border-color: #33297a;
  background-color: #e4dfff;
}

.username-radio:checked + .username-content .check-icon {
  display: block;
}

.username-card-selected {
  border-color: #33297a !important;
  background-color: #f7f9ff;
  box-shadow: 0 8px 30px rgba(51, 41, 122, 0.08);
}

.username-card-selected .radio-dot {
  transform: scale(1);
}

.username-card-selected .radio-ring {
  border-color: #33297a;
}

/* Password complexity checklist — met state */
.requirement-met {
  color: #16a34a;
}

.requirement-met .material-symbols-outlined {
  color: #16a34a;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.requirement-met .req-label {
  color: #16a34a;
  font-weight: 500;
}

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* Modern Input States */
.input-wrapper:has(input:focus) {
  border-color: #33297a !important;
  box-shadow: 0 0 0 3px rgba(51, 41, 122, 0.15);
  background-color: #ffffff;
}

/* Validation styling using :has and :user-invalid */
.field-group:has(:user-invalid) .input-wrapper {
  border-color: #ba1a1a !important;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.15);
}

.field-group:has(:user-invalid) .field-icon {
  color: #ba1a1a !important;
}

.field-group:has(:user-invalid) .error-message {
  display: block;
}

.error-message {
  display: none;
  color: #ba1a1a;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Custom Checkbox Animation */
.custom-checkbox-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="checkbox"]:checked + div .custom-checkbox-path {
  stroke-dashoffset: 0;
}

input[type="checkbox"]:checked + div {
  background-color: #33297a;
  border-color: #33297a;
}

.celebration-bg {
  background-image: radial-gradient(circle at 2px 2px, #33297a 1px, transparent 0);
  background-size: 40px 40px;
  opacity: 0.03;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.btn-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* Premium Flatpickr Overrides */
.flatpickr-calendar {
  font-family: 'Inter', sans-serif !important;
  border-radius: 1.5rem !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(51, 41, 122, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  padding: 1.25rem !important;
}

/* Hide arrow for a clean floating card look */
.flatpickr-calendar:before, .flatpickr-calendar:after {
  display: none !important;
}

/* Month and Year navigation */
.flatpickr-months .flatpickr-month {
  color: #33297a !important;
  fill: #33297a !important;
  margin-bottom: 0.5rem;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 1.2rem !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg, 
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #33297a !important;
}

/* Day Headers */
span.flatpickr-weekday {
  color: #878c9e !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* Days */
.flatpickr-day {
  border-radius: 0.75rem !important;
  color: #1f2937 !important;
  transition: all 0.2s ease !important;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background: #e4dfff !important;
  border-color: #e4dfff !important;
  color: #33297a !important;
  transform: scale(1.05);
}
.flatpickr-day.selected, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover {
  background: #33297a !important;
  border-color: #33297a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(51, 41, 122, 0.3) !important;
  transform: scale(1.05);
  font-weight: 600;
}
.flatpickr-day.today {
  border-color: #33297a !important;
}