:root {
    --primary-purple: #5D3A9B;
    --primary-purple-hover: #4a2f7d;
    --primary-purple-light: rgba(93, 58, 155, 0.2);
}

body {
    background-color: #f8f9fa;
}

/* Override Bootstrap primary color to purple */
.bg-primary {
    background-color: var(--primary-purple) !important;
}

.text-primary {
    color: var(--primary-purple) !important;
}

.btn-primary {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-purple-hover);
    border-color: var(--primary-purple-hover);
}

.border-primary {
    border-color: var(--primary-purple) !important;
}

.alert-primary {
    background-color: var(--primary-purple-light);
    border-color: var(--primary-purple);
    color: var(--primary-purple-hover);
}

.badge.bg-primary {
    background-color: var(--primary-purple) !important;
}

a {
    color: var(--primary-purple);
}

a:hover {
    color: var(--primary-purple-hover);
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}

.progress {
    height: 20px;
    margin-bottom: 0;
}

.table th {
    background-color: #f8f9fa;
}

.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
}

/* Wellness Questionnaire specific styles */
.wellness-form .card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.wellness-form .form-select-lg {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.wellness-form .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.wellness-form .form-label.fw-semibold {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.wellness-form .card.border-primary {
    transition: all 0.3s ease;
}

.wellness-form .card.border-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--primary-purple-light);
}

.wellness-form h4.text-primary {
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.wellness-form .form-check-lg .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
}

.wellness-form .form-check-lg .form-check-label {
    font-size: 1.1rem;
    padding-left: 0.5rem;
}