.city-selection-dialog {
  box-sizing: border-box; width: min(480px, calc(100% - 24px)); max-height: min(720px, calc(100dvh - 24px));
  max-width: none; margin: auto; padding: 24px; border: 1px solid var(--border-color); border-radius: 24px;
  color: var(--text-primary); background: var(--surface-color); overflow: auto; font: inherit;
}
.city-selection-dialog::backdrop { background: var(--backdrop-color, var(--text-secondary)); }
body:has(.city-selection-dialog[open]) { overflow: hidden; }
.city-selection-dialog [hidden] { display: none; }
.city-selection-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.city-selection-heading h2 { flex: 1; font-size: 22px; line-height: 1.25; margin: 0; }
.city-selection-dialog button { min-height: 48px; box-sizing: border-box; font: inherit; cursor: pointer; color: inherit; }
.city-selection-heading button { flex: 0 0 44px; min-height: 44px; border: 0; border-radius: 50%; padding: 0; font-size: 28px; background: transparent; }
.city-selection-note, .city-selection-status { margin: 0 0 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.city-selection-status:empty { display: none; }
.city-selection-search { display: grid; gap: 8px; font-size: 14px; margin: 16px 0; }
.city-selection-search input { width: 100%; box-sizing: border-box; min-height: 48px; border: 1px solid var(--border-color); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; color: inherit; background: var(--bg-color); }
.city-selection-list { display: flex; flex-direction: column; max-height: 45dvh; overflow-y: auto; overscroll-behavior: contain; }
.city-selection-list button { flex-shrink: 0; width: 100%; padding: 12px 8px; text-align: left; border: 0; border-bottom: 1px solid var(--border-color); background: transparent; }
.city-selection-list button[aria-pressed="true"] { color: var(--primary-color); font-weight: 600; }
.city-selection-list button[aria-pressed="true"]::after { content: '✓'; float: right; }
.city-selection-dialog :is(.city-selection-primary, .city-selection-other, .city-selection-geolocate) { display: block; width: 100%; margin-top: 10px; border: 1px solid var(--border-color); border-radius: 14px; padding: 12px 16px; background: var(--bg-color); }
.city-selection-dialog .city-selection-primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--bg-color); font-weight: 600; }
.city-selection-dialog :is(button, input):focus-visible, .price-destination:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.city-selection-dialog button:disabled { opacity: .55; cursor: wait; }
button.price-destination { appearance: none; border: 0; padding: 4px 0; margin: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 768px) {
  .city-selection-dialog { width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 90dvh; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .city-selection-dialog[open] { animation: city-sheet-in .2s ease-out; }
  @keyframes city-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
}