/* Wishwaa HomeCare - Custom Stylesheet */

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.025em;
}

/* Glassmorphism utility card styling */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Custom Scrollbars for on-screen simulator mockups */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Hide scrollbar utility */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* FAQ transitions */
.faq-answer {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
    opacity: 0;
}

.faq-answer.open {
    opacity: 1;
}

/* Float animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Dynamic glow elements for backgrounds */
.gradient-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
}

/* Custom styles for Range inputs (Estimator) */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #e2e8f0;
    height: 8px;
    border-radius: 9999px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #15803d;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #15803d;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}