/* Custom styles for Appliance Trade Craft dark theme */
/* This file is mainly for potential overrides or minor additions not covered by Tailwind */

body {
    /* Ensure the body takes full height for consistent background */
    min-height: 100vh;
}

/* NEW: This class will be added to the body via JavaScript to prevent background scrolling when a modal is open */
body.modal-open {
    overflow: hidden;
}


/* Example: A subtle border for input fields on focus */
input:focus,
textarea:focus {
    outline: none;
    border-color: #38b2ac; /* Tailwind's teal-400 */
    box-shadow: 0 0 0 3px rgba(56, 178, 172, 0.5); /* A subtle teal glow */
}

/* Scrollbar styling for dark theme (optional, browser-specific) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #333; /* Dark track */
}

::-webkit-scrollbar-thumb {
  background: #555; /* Darker thumb */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #777; /* Lighter thumb on hover */
}

/* Style for appliance cards */
.appliance-card { /* Note: This class is not directly used in the *current* HTML, but kept for future content display patterns */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.appliance-card:hover { /* Note: This class is not directly used in the *current* HTML, but kept for future content display patterns */
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(56, 178, 172, 0.5); /* Teal glow on hover */
}

/*
   STYLES FOR MOBILE NAVIGATION
   We use @media queries here to apply styles specifically for certain screen sizes.
   The Tailwind classes in the HTML handle most of this, but this makes the mobile menu behavior cleaner.
*/
@media (max-width: 767px) { /* This targets screens smaller than md breakpoint */
    #mobile-menu.hidden {
        display: none;
    }
    #mobile-menu {
        display: flex; /* This will be toggled by JS */
        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}