.city-field{min-width:0}
.city-field>label{display:block;margin:0 0 8px;color:#273057;font-size:.82rem;font-weight:900}
.city-picker{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;min-height:54px;border:1px solid rgba(35,44,87,.14);border-radius:17px;background:linear-gradient(145deg,#fff,#fbfbff);box-shadow:0 10px 24px rgba(26,31,70,.07);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;isolation:isolate}
.city-picker:focus-within,.city-picker.is-open{border-color:rgba(243,145,25,.7);box-shadow:0 0 0 4px rgba(255,166,42,.12),0 15px 34px rgba(26,31,70,.12);transform:translateY(-1px)}
.city-picker__search{grid-column:1;width:20px;height:20px;justify-self:center;fill:none;stroke:#f3921a;stroke-width:2;stroke-linecap:round}
.city-picker__input{grid-column:2;width:100%!important;min-width:0!important;height:52px!important;padding:0 2px!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#151b3d!important;font:800 .94rem/1.2 inherit!important;-webkit-appearance:none;appearance:none}
.city-picker__input::-webkit-search-cancel-button{display:none}
.city-picker__input::placeholder{color:#8b91a8;font-weight:700;opacity:1}
.city-picker__toggle{grid-column:3;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:12px;background:rgba(39,48,87,.055);color:#313961;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.city-picker__toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.city-picker.is-open .city-picker__toggle{background:#fff0dc;color:#e17c00}
.city-picker.is-open .city-picker__toggle svg{transform:rotate(180deg)}
.city-picker__list{grid-column:1/-1;position:relative;z-index:3;margin:4px 7px 8px;padding:5px;max-height:220px;overflow:auto;overscroll-behavior:contain;border-top:1px solid rgba(35,44,87,.09);scrollbar-width:thin;scrollbar-color:#f3a33e transparent}
.city-picker__list[hidden]{display:none!important}
.city-picker__option{width:100%;min-height:48px;padding:9px 12px;border:0;border-radius:12px;background:transparent;color:#202749;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;cursor:pointer;font:800 .9rem/1.3 inherit;transition:background .16s ease,color .16s ease,transform .16s ease}
.city-picker__option+ .city-picker__option{margin-top:2px}
.city-picker__option small{color:#8a90a5;font-size:.72rem;font-weight:700;direction:rtl}
.city-picker__option::after{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#ffae3d;box-shadow:0 0 0 5px rgba(255,174,61,.12);opacity:0;transform:scale(.4);transition:opacity .16s ease,transform .16s ease}
.city-picker__option:is(:hover,.is-active,[aria-selected="true"]){background:linear-gradient(135deg,#fff2df,#fff9f0);color:#d87300;transform:translateX(-2px)}
.city-picker__option:is(.is-active,[aria-selected="true"])::after{opacity:1;transform:scale(1)}
.city-picker__empty{min-height:72px;padding:14px;display:grid;place-items:center;text-align:center;color:#7e849b;font-size:.86rem;font-weight:800}
.city-picker.has-value .city-picker__input{color:#18204b!important}
html[dir="rtl"] .city-picker__option:is(:hover,.is-active,[aria-selected="true"]){transform:translateX(-2px)}
@media(max-width:560px){
  .city-picker{grid-template-columns:40px minmax(0,1fr) 40px;min-height:52px;border-radius:15px}
  .city-picker__input{height:50px!important;font-size:16px!important}
  .city-picker__list{max-height:196px}
  .city-picker__option{min-height:50px;padding:10px}
}
@media(prefers-reduced-motion:reduce){.city-picker,.city-picker__toggle,.city-picker__toggle svg,.city-picker__option,.city-picker__option::after{transition:none!important}}