/* STYLES FOR SALUTE ONBOARDING FLOW */

/* --- Onboarding Specific Layout --- */
.onboarding-header {
  padding: calc(var(--spacing-unit) * 3) var(--spacing-unit);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.onboarding-container {
  max-width: 650px;
  width: 90%; /* Ensure it doesn't touch screen edges on mobile */
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 4) 0;
  text-align: center;
}

/* --- Progress Bar --- */
.progress-bar {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-bottom: calc(var(--spacing-unit) * 5);
  position: relative;
}
.progress-bar::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 2px; background-color: var(--color-border); transform: translateY(-50%); z-index: -1;
}
.progress-step {
  width: 30px; height: 30px; border-radius: 50%; background-color: white;
  border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--color-text-secondary); transition: all 0.3s ease;
}
.progress-step.active {
  border-color: var(--color-accent); background-color: var(--color-accent); color: white;
}

/* --- Form Elements --- */
.form-group {
  margin-bottom: calc(var(--spacing-unit) * 3);
  text-align: left;
}
/* Mobile-first: single column grid by default */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 calc(var(--spacing-unit) * 3);
}
.form-group label {
  display: block; font-weight: 600; margin-bottom: var(--spacing-unit); color: var(--color-text-primary);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"] {
  width: 100%;
  height: 48px;
  padding: 0 calc(var(--spacing-unit) * 1.5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 16px;
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
}

.error-message {
    color: #D32F2F;
    font-size: 14px;
    margin-top: var(--spacing-unit);
    display: none;
}

/* --- Option Cards (for radio/checkbox) --- */
/* Mobile-first: single column grid by default */
.option-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--spacing-unit) * 2); }
.option-card {
  padding: calc(var(--spacing-unit) * 2); border: 2px solid var(--color-border);
  border-radius: var(--border-radius); cursor: pointer; transition: var(--transition-fast); text-align: center;
}
.option-card:hover { border-color: var(--color-accent); background-color: #f5f3ff; }
.option-card.active { border-color: var(--color-accent); background-color: var(--color-accent); color: white; font-weight: 600; }
.option-card input { display: none; }

/* --- Unit Toggle Switch Styles --- */
.unit-selector {
    display: flex; justify-content: center; align-items: center;
    gap: calc(var(--spacing-unit) * 2); 
    background-color: var(--color-background-offset); border-radius: var(--border-radius); padding: var(--spacing-unit);
}
.unit-toggle-label { font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
.unit-toggle-label.active { color: var(--color-accent); }
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 28px;
}
.toggle-slider:before {
    position: absolute; content: ""; height: 20px; width: 20px;
    left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .toggle-slider { background-color: var(--color-accent); }
input:checked + .toggle-slider:before { transform: translateX(22px); }

/* --- Navigation --- */
.onboarding-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: calc(var(--spacing-unit) * 6); border-top: 1px solid var(--color-border);
  padding-top: calc(var(--spacing-unit) * 3);
}
.btn-back { background: none; border: none; color: var(--color-text-secondary); font-weight: 600; cursor: pointer; }

/* --- Custom Modal (Pop-up) Styles --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); display: none;
    align-items: center; justify-content: center; z-index: 2000;
}
.modal-content {
    background: white; padding: calc(var(--spacing-unit) * 4); border-radius: var(--border-radius);
    text-align: center; max-width: 90%; width: 400px; box-shadow: var(--shadow-medium);
}
.modal-content h2 {
    font-size: 24px; color: var(--color-accent); margin-bottom: var(--spacing-unit) * 2;
}
.modal-content p {
    font-size: 16px; margin-bottom: calc(var(--spacing-unit) * 4);
}

/* --- Responsive Adjustments --- */

/* Medium screens (Tablets - 600px and up) */
@media (min-width: 600px) {
    /* Change grids back to two columns on larger screens */
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .option-grid {
        grid-template-columns: 1fr 1fr;
    }
}