/* assets/google_autocomplete.css Google Places Autocomplete — LIGHT/BLUE THEME (harmonised with site) - Preserves your original behaviors (z-index, :empty guard, hide-on-select). - Matches site typography and colours. */ /* ————————————————————————————————— Input (now light theme; matches site inputs) ————————————————————————————————— */ #full-address-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #cfe8fb; /* light blue border */ background: #ffffff; /* white input bg */ color: #0288d1; /* dark blue text */ font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size: 15px; line-height: 1.35; outline: none; } /* Subtle focus ring (light blue) */ #full-address-input:focus-visible { border-color: #4fc3f7; box-shadow: 0 0 0 3px rgba(79,195,247,0.25); } /* Placeholder style, unified with site */ #full-address-input::placeholder { color: #8fb3cf; } /* ————————————————————————————————— Google dropdown container ————————————————————————————————— */ .pac-container { z-index: 2147483647 !important; /* stay above modals/cards */ background: #ffffff !important; /* white menu */ border: 1px solid #cfe8fb !important; border-radius: 10px !important; box-shadow: 0 10px 22px rgba(2,136,209,0.12) !important; /* soft blue glow */ color: #0288d1 !important; /* default text colour */ overflow: hidden !important; margin-top: 6px !important; background-clip: padding-box !important; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important; } /* Prevent flicker if Google leaves it empty */ .pac-container:empty { display: none !important; } /* ————————————————————————————————— Items ————————————————————————————————— */ .pac-item { padding: 10px 12px !important; border-top: 1px solid rgba(207, 232, 251, 0.7) !important; /* soft divider */ cursor: pointer !important; color: #0288d1 !important; line-height: 1.35 !important; background: #ffffff !important; } .pac-item:first-child { border-top: none !important; } .pac-item:hover, .pac-item:focus, .pac-item.pac-item-selected { background: #eef7ff !important; /* very light blue hover/selected */ color: #0288d1 !important; } /* Main query line */ .pac-item .pac-item-query { color: #0288d1 !important; font-weight: 600 !important; } /* Secondary text (e.g., suburb/state) */ .pac-item > span { color: #4d89b3 !important; /* muted blue for secondary info */ } /* Matched character styling */ .pac-matched { color: #006aa1 !important; /* deeper blue emphasis */ font-weight: 700 !important; } /* Optional: keep Google’s pin icon natural on white (no invert) */ .pac-icon { filter: none !important; } /* ————————————————————————————————— Hide dropdown after a selection (JS toggles .ac-place-selected on — preserved) ————————————————————————————————— */ body.ac-place-selected .pac-container { display: none !important; } /* ————————————————————————————————— Scrollbar (WebKit) to match theme ————————————————————————————————— */ .pac-container::-webkit-scrollbar { width: 10px; } .pac-container::-webkit-scrollbar-track { background: #ffffff; border-radius: 10px; } .pac-container::-webkit-scrollbar-thumb { background: #cfe8fb; border-radius: 10px; } .pac-container::-webkit-scrollbar-thumb:hover { background: #b9ddfa; } /* ————————————————————————————————— Mobile tweaks ————————————————————————————————— */ @media (max-width: 600px) { .pac-container { width: 100% !important; max-height: 50vh !important; } .pac-item { padding: 12px 14px !important; } }