:root {
    --primary-color: #d32f2f;
    --text-dark: #333;
    --text-light: #fff;
    --bg-light: #f8f9fa;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--text-dark);
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

button, a {
    touch-action: manipulation;
}

/* Google Places Autocomplete Custom Styling */
.pac-container {
    background-color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid #e5e7eb; /* gray-200 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    font-family: 'Inter', sans-serif;
    margin-top: 5px;
    z-index: 9999 !important; /* Ensure it stays on top */
    width: auto !important; /* Allow JS to control width if needed, but usually we match input */
    /* Try to match the input width via JS or enforce max-width relative to screen */
    /* Google sets inline width, but we can override if we want it to be 100% of something, 
       but typically it attaches to body. 
       Best practice: Let Google set position, but we can try to constrain it. 
       Actually, Google Maps API sets width equal to input by default. 
       If it's overflowing or too small, it's often because the input container is flexible.
       Let's ensure it doesn't overflow mobile screen. */
    max-width: 90vw; /* Prevent overflow on mobile */
}

/* Force pac-container to respect input width more strictly if needed, 
   but usually Google handles this. If the user says "it should be input width",
   Google does that by default. If it's looking weird (like full screen width), 
   it might be because of how it's appended. 
   
   However, since the user explicitly asked for "input width", and Google DOES that by default,
   maybe the issue is that it's getting wider than the input because of long addresses?
   
   Let's add a JS snippet to force sync width on resize/open if CSS isn't enough, 
   but let's start by ensuring it doesn't break layout.
*/
.pac-container::after {
    /* Hide 'powered by Google' if strictly needed for design, but terms require it. 
       So we keep it but style it small. */
    padding: 5px;
}

.pac-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #374151; /* gray-700 */
    border-top: 1px solid #f3f4f6; /* gray-100 */
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover {
    background-color: #f9fafb; /* gray-50 */
}

.pac-item-query {
    font-size: 14px;
    color: #111827; /* gray-900 */
    font-weight: 600;
}

.pac-icon {
    display: none; /* Hide default icons for cleaner look */
}