/* Custom styles for MindClear AI Clone */

/* Improved range input styling */
input[type="range"] {
    -webkit-appearance: none;
    height: 8px;
    border-radius: 5px;
    background: #e2e8f0;
    outline: none;
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4299e1;
    cursor: pointer;
    transition: all 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #3182ce;
    transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4299e1;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    background: #3182ce;
    transform: scale(1.1);
}

/* Animation for results section */
#results {
    transition: all 0.5s ease;
}

#results:not(.hidden) {
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wellness score visualization */
#wellness-score {
    display: inline-block;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wellness level colors */
.level-excellent {
    color: #38a169; /* green-600 */
}

.level-good {
    color: #68d391; /* green-400 */
}

.level-fair {
    color: #f6e05e; /* yellow-400 */
}

.level-poor {
    color: #ed8936; /* orange-500 */
}

.level-critical {
    color: #e53e3e; /* red-600 */
}

/* Button styles */
button[type="submit"] {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

button[type="submit"]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

button[type="submit"]:active:after {
    transform: translate(-50%, -50%) scale(20);
    opacity: 1;
    transition: 0s;
}

/* Responsive improvements */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* Focus styles for accessibility */
button:focus, a:focus, input:focus {
    outline: 2px solid #4299e1;
    outline-offset: 2px;
}

/* Footer link hover effect */
footer a {
    transition: all 0.2s ease;
}

footer a:hover {
    color: #90cdf4; /* blue-300 */
}