/* People's Window Washing : CSS specific to service-area.html */

.region-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 4rem; }
.region-grid .region-card { flex: 1 1 300px; max-width: 340px; }
.region-card { background: var(--color-bg-card); border-radius: var(--radius-md); padding: 2rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-accent-1); transition: var(--transition); }
.region-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.region-card .dept-num { font-family: var(--font-serif); font-size: 1.4rem; color: var(--color-accent-1); font-weight: bold; line-height: 1; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.region-card h3 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--color-text-main); margin-bottom: 1rem; }
.region-card ul { list-style: none; }
.region-card ul li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--color-text-light); font-size: 0.95rem; }

.city-search { max-width: 520px; margin: 0 auto 3.5rem auto; position: relative; z-index: 10; }
.city-search-box { display: flex; align-items: center; gap: 12px; background: var(--color-white); border: 2px solid var(--color-bg-darker); border-radius: 50px; padding: 14px 22px; transition: var(--transition-fast); }
.city-search-box:focus-within { border-color: var(--color-accent-1); box-shadow: var(--shadow-sm); }
.city-search-box svg { color: var(--color-text-light); flex-shrink: 0; }
.city-search-box input { border: none; outline: none; flex: 1; font-family: var(--font-sans, inherit); font-size: 1rem; color: var(--color-text-main); background: transparent; }
.city-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin-top: 8px; max-height: 260px; overflow-y: auto; z-index: 50; display: none; }
.city-suggestions.active { display: block; }
.city-suggestion-item { padding: 12px 22px; cursor: pointer; font-size: 0.95rem; border-bottom: 1px solid var(--color-bg-darker); }
.city-suggestion-item:last-child { border-bottom: none; }
.city-suggestion-item:hover, .city-suggestion-item:focus { background: var(--color-bg-main); color: var(--color-accent-1); outline: none; }
.city-suggestion-item .county-tag { color: var(--color-text-light); font-size: 0.85rem; margin-left: 6px; }
.city-result { margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius-md); text-align: center; display: none; }
.city-result.show { display: block; }
.city-result.found { background: #E8F5E9; border: 1px solid #4CAF50; }
.city-result.unsure { background: var(--color-bg-darker); border: 1px solid var(--color-accent-light); }
.city-result h4 { font-family: var(--font-serif); margin-bottom: 0.5rem; color: var(--color-text-main); }
.city-result p { color: var(--color-text-light); margin-bottom: 1rem; }

.map-section { background: var(--color-bg-darker); border-radius: var(--radius-lg); padding: 3rem; text-align: center; }
.map-icon { width: 80px; height: 80px; background: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; box-shadow: var(--shadow-md); }
.map-icon svg { width: 40px; height: 40px; color: var(--color-accent-1); }
.map-section h3 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 1rem; color: var(--color-text-main); }
.map-section p { font-size: 1.1rem; color: var(--color-text-light); max-width: 600px; margin: 0 auto; }