/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a090f;
}
::-webkit-scrollbar-thumb {
    background-color: #A367FF;
    border-radius: 20px;
}

/* Plan Builder Specific Styles */
.plan-step {
    display: none; /* Hidden by default, controlled by JS */
}
.plan-step.active {
    display: block;
}

/* Custom radio/checkbox card styles */
.plan-card {
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(255, 255, 255, 0.02);
}
.plan-card:hover {
    border-color: #A367FF;
    transform: translateY(-4px);
}
input:checked + .plan-card {
    border-color: #CB99FF;
    background-color: rgba(203, 153, 255, 0.1);
    box-shadow: 0 0 20px rgba(203, 153, 255, 0.2);
}
input:checked + .plan-card .checkmark {
    opacity: 1;
    transform: scale(1);
}
.checkmark {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    background-color: #CB99FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}
.checkmark svg {
    color: #040308;
}

/* Step Indicator */
.step-indicator-item .step-icon {
    transition: all 0.4s ease;
}
.step-indicator-item.active .step-icon {
    background-color: #A367FF;
    border-color: #CB99FF;
    color: #040308;
    transform: scale(1.1);
}
.step-indicator-item.completed .step-icon {
    background-color: #A367FF;
    border-color: #A367FF;
}
#step-indicator-progress {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Summary Panel Animation */
#summary-panel {
    will-change: transform, opacity;
}

/* Button Styles */
.primary-btn {
    background-image: linear-gradient(to right, #CB99FF, #A367FF);
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(203, 153, 255, 0.5);
}
.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(203, 153, 255, 0.8);
}
.secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Summary Bar */
#mobile-summary-bar {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}