/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light gray background */
}
/* Custom style for the logo text to use Montserrat */
.logo-font {
    font-family: 'Montserrat', sans-serif;
}

/* Modal and Overlay Base Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Delay visibility change */
    display: flex; /* Always flex for centering */
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s; /* No delay when active */
}

.modal-content {
    transform: translateY(-20px); /* Start slightly above for animation */
    transition: transform 0.3s ease-in-out;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}


/* Custom slider styling for better appearance */
input[type="range"] {
    -webkit-appearance: none; /* Hides the slider track in Chrome/Safari/Opera */
    width: 100%; /* Full-width */
    height: 8px; /* Specify a height */
    background: #ddd; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for hover effect) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Hides the slider thumb in Chrome/Safari/Opera */
    appearance: none;
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #F97316; /* Orange background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%; /* Make it round */
    border: 2px solid #fff; /* White border */
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 20px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #F97316; /* Orange background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%; /* Make it round */
    border: 2px solid #fff; /* White border */
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Mobile Menu Specific Styles */
/* These styles control the mobile menu's appearance and transitions */
#mobile-menu-overlay {
    /* Inherits general modal-overlay styles (opacity, visibility, transition) */
    z-index: 40; /* Lower z-index than the menu itself */
}

#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 64%; /* Adjust width as needed, e.g., 80% or fixed px */
    max-width: 300px; /* Max width for larger mobile devices */
    background-color: #fff;
    height: 100%;
    box-shadow: -4px 0 10px rgba(0,0,0,0.2);
    z-index: 50;
    transform: translateX(100%); /* Start off-screen to the right */
    transition: transform 0.3s ease-in-out;
    /* The 'hidden' class in HTML provides display:none initially.
       When 'active' is added by JS, transform brings it into view. */
}

#mobile-menu.active {
    transform: translateX(0); /* Slide in */
}

/* Ensure body doesn't scroll when menu is open */
body.overflow-hidden {
    overflow: hidden;
}

/* Removed the @media (min-width: 768px) block that was setting display:none !important
   for #mobile-menu and #mobile-menu-overlay, as per user's request for hamburger
   to be visible and functional on all screen sizes. */