/**
 * @file
 * Vendor onboarding styles.
 *
 * Mobile-first, accessible, aligned with MyEventLane design system.
 */

/* ==========================================================================
   Onboarding Wrapper
   ========================================================================== */
.mel-onboard-wrapper {
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
  background: #faf7fb;
}

@media (min-width: 768px) {
  .mel-onboard-wrapper {
    padding: 3rem 2rem 5rem;
  }
}

.mel-container--onboard {
  max-width: 42rem;
  margin: 0 auto;
}

/* ==========================================================================
   Progress Indicator
   ========================================================================== */
.mel-onboard-progress {
  position: relative;
  margin-bottom: 3rem;
}

.mel-onboard-progress-bar {
  position: absolute;
  top: 1.25rem;
  left: 0;
  height: 3px;
  background: #ff6f61;
  border-radius: 2px;
  transition: width 0.3s ease;
  z-index: 1;
}

.mel-onboard-progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.mel-onboard-progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e5e5e5;
  border: 3px solid #e5e5e5;
  transition: all 0.3s ease;
}

.mel-onboard-progress-step-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
}

.mel-onboard-progress-step--active {
  background: #ff6f61;
  border-color: #ff6f61;
}

.mel-onboard-progress-step--active .mel-onboard-progress-step-number {
  color: white;
}

.mel-onboard-progress-step--current {
  border-color: #ff6f61;
  box-shadow: 0 0 0 4px rgba(255, 111, 97, 0.15);
}

/* ==========================================================================
   Step Header
   ========================================================================== */
.mel-onboard-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.mel-onboard-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 1rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .mel-onboard-title {
    font-size: 2.25rem;
  }
}

.mel-onboard-description {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .mel-onboard-description {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Step Content
   ========================================================================== */
.mel-onboard-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .mel-onboard-content {
    padding: 3rem;
  }
}

/* Account step */
.mel-onboard-account {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .mel-onboard-account {
    flex-direction: row;
    justify-content: center;
  }
}

/* Profile form */
.mel-onboard-profile-form {
  max-width: 100%;
}

.mel-onboard-profile-form .form-item {
  margin-bottom: 1.5rem;
}

.mel-onboard-profile-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1a1a2e;
}

.mel-onboard-profile-form input[type="text"],
.mel-onboard-profile-form input[type="email"],
.mel-onboard-profile-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

.mel-onboard-profile-form input:focus,
.mel-onboard-profile-form textarea:focus {
  outline: none;
  border-color: #ff6f61;
  box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.1);
}

/* Stripe step */
.mel-onboard-stripe-intro {
  margin-bottom: 1.5rem;
}

.mel-onboard-stripe-benefits {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
}

.mel-onboard-stripe-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mel-onboard-stripe-benefits li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.mel-onboard-stripe-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4caf50;
  font-weight: 600;
}

.mel-onboard-stripe-skip-note {
  margin-top: 1rem;
  text-align: center;
}

/* First event step */
.mel-onboard-first-event-intro {
  margin-bottom: 1.5rem;
}

.mel-onboard-first-event-tips {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
}

.mel-onboard-first-event-tips h3 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  color: #1a1a2e;
}

.mel-onboard-first-event-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mel-onboard-first-event-tips li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.mel-onboard-first-event-tips li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff6f61;
  font-weight: 600;
}

.mel-onboard-first-event-skip-note {
  margin-top: 1rem;
  text-align: center;
}

/* Complete step */
.mel-onboard-complete-success {
  text-align: center;
  margin-bottom: 2rem;
}

.mel-onboard-complete-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4caf50;
  color: white;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
}

.mel-onboard-complete-success h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 1rem;
}

.mel-onboard-complete-features {
  margin: 2rem 0;
  text-align: left;
}

.mel-onboard-complete-features h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 1rem;
}

.mel-onboard-complete-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mel-onboard-complete-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.mel-onboard-complete-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4caf50;
  font-weight: 600;
}

.mel-onboard-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .mel-onboard-complete-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.mel-onboard-nav {
  margin-top: 2rem;
  text-align: center;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.mel-alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.mel-alert-success {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  color: #1a1a2e;
}

.mel-alert-success p {
  margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.mel-btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */
.mel-text-muted {
  color: #6b7280;
  font-size: 0.875rem;
}