/* CoolAir HVAC - Shared Styles */

/* Base styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Material icons settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Filled icons variant */
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Sticky sidebar utility */
.sticky-sidebar {
    top: 6rem;
}

/* Mobile menu styles */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Active navigation link */
.nav-link.active {
    color: #136dec;
    border-bottom: 2px solid #136dec;
}

/* Form focus animations */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(19, 109, 236, 0.1);
}

/* Button hover effects */
.btn-primary {
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(19, 109, 236, 0.3);
}

/* Card hover effects */
.service-card {
    transition: all 0.3s ease-in-out;
}

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

/* Calendar day hover */
.calendar-day:hover:not(.disabled):not(.selected) {
    background-color: rgba(19, 109, 236, 0.1);
}

/* Time slot selection animation */
.time-slot {
    transition: all 0.2s ease-in-out;
}

.time-slot:hover {
    border-color: #136dec;
}

/* Testimonial card animation */
.testimonial-card {
    transition: transform 0.3s ease-in-out;
}

.testimonial-card:hover {
    transform: scale(1.02);
}

/* Footer link hover */
footer a {
    transition: color 0.2s ease-in-out;
}

/* Loading spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse animation for availability badge */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}