/* ============ ГОРОД ПОКУПАТЕЛЯ (06.10.2026) ============
   Полоска над шапкой, окно выбора, строка доставки на карточке товара, вопрос после подписки,
   кнопка в кабинете, поле на экране VK ID и на странице из письма. Разметку рисует PHP
   (models/ClientCity::barHtml, cardLine, cabinetAsk; views/city/_field.php), скрипт — city-2026.js.
   Отдельный файл и свой бандл (assets/AppAssetCity): chaster-2026.css правят несколько сессий сразу.
   Окно выбора стоит на классах окна подписки (.watch-modal, .watch-box, .watch-x, .watch-sub,
   html.watch-open) из chaster-2026.css — выглядит так же и блокирует прокрутку тем же способом. */

/* ---- полоска над шапкой. Стоит ДО <header> и не липнет: шапка остаётся 64 px, отступы липких
   блоков и меню-бургера (position:fixed; top:64px) не меняются. Пока меню открыто, полоска убрана —
   иначе в самом верху страницы шапка стояла бы ниже, чем ждёт меню. ---- */
.city-bar{background:var(--bg-alt);border-bottom:1px solid var(--line);font-size:var(--t-s);color:var(--ink-2)}
.city-bar-in{display:flex;align-items:center;gap:var(--s2);min-height:36px}
html.menu-locked .city-bar{display:none}
.city-pin{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.city-bar-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:var(--t-s);font-weight:500;color:var(--ink);text-align:left}
.city-bar-btn:hover{color:var(--accent)}
.city-bar-down{width:14px;height:14px;flex-shrink:0;color:var(--ink-3)}
.city-bar-q{display:inline-flex;align-items:center;gap:6px;color:var(--ink);margin-right:var(--s1)}
.city-bar-q b{font-weight:600}
.city-bar-yes,.city-bar-no{min-height:28px;padding:0 var(--s3);border-radius:var(--r2);font-size:var(--t-s);font-weight:600;border:1px solid transparent;transition:background var(--tr),border-color var(--tr),color var(--tr)}
.city-bar-yes{background:var(--accent);color:#fff}
.city-bar-yes:hover{background:var(--accent-deep)}
.city-bar-no{border-color:var(--line-strong);color:var(--ink);background:var(--bg)}
.city-bar-no:hover{border-color:var(--accent);color:var(--accent)}
.city-bar [disabled]{opacity:.5;cursor:default}

/* ---- ссылка-кнопка «изменить / другой город / Укажите город» ---- */
.city-link{font-size:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;padding:0}
.city-link:hover{color:var(--accent-deep)}

/* ---- строка доставки на карточке товара: между кнопками и плитками преимуществ ---- */
.city-dlv{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r2);font-size:var(--t-s);line-height:1.45;color:var(--ink)}
.city-dlv .city-pin{width:18px;height:18px;margin-top:1px}
.city-dlv-in{min-width:0}
.city-dlv-top b{font-weight:600}
.city-dlv-sub{margin-top:2px;font-size:var(--t-xs);color:var(--ink-2)}

/* ---- поле с подсказками. Подсказки — списком под полем, а не выпадашкой: на телефоне выпадашку
   закрывает клавиатура. 16 px в поле — иначе iOS увеличивает страницу при фокусе. ---- */
.city-field input{width:100%;height:48px;border:1px solid var(--line-strong);border-radius:var(--r2);background:#fff;padding:0 var(--s4);font:inherit;font-size:16px;color:var(--ink)}
.city-field input:focus{outline:none;border-color:var(--accent)}
.city-sug{max-height:264px;overflow-y:auto}
.city-sug:not(:empty){margin-top:var(--s2);border:1px solid var(--line);border-radius:var(--r2)}
.city-sug button{display:block;width:100%;text-align:left;padding:10px var(--s3);font-size:var(--t-base);line-height:1.35;border-bottom:1px solid var(--line)}
.city-sug button:last-child{border-bottom:none}
.city-sug button span{display:block;font-size:var(--t-xs);color:var(--ink-3)}
.city-sug button:hover,.city-sug button.on{background:var(--bg-alt)}
.city-sug p{padding:10px var(--s3);font-size:var(--t-s);color:var(--ink-2)}
.city-err{font-family:var(--mono);font-size:var(--t-xs);color:var(--red);margin-top:var(--s2)}
.city-err[hidden]{display:none}

/* ---- окно выбора: прижато к верху, чтобы поле не уезжало под клавиатуру ---- */
.city-modal{align-items:flex-start}
.city-modal .city-box{margin-top:min(12vh,96px)}

/* ---- вопрос после подписки: карточка внизу экрана, поверх страницы, прокрутку не блокирует ---- */
.city-ask{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:305;width:min(420px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:0 12px 32px rgba(16,20,24,.18);padding:var(--s5) var(--s5) var(--s4)}
.city-ask b{display:block;font-size:var(--t-m);font-weight:700;padding-right:var(--s6)}
.city-ask-sub{display:block;font-size:var(--t-s);color:var(--ink-2);margin:2px 0 var(--s3);line-height:1.45}
.city-ask-btns{display:flex;gap:var(--s2);flex-wrap:wrap}
.city-ask-btns .btn{flex:1 1 140px;min-height:44px;padding:0 var(--s4)}
.city-ask-done{font-size:var(--t-s);color:var(--ink)}

/* ---- кабинет: кнопка в сайдбаре на всех разделах, кроме «Главной» (там плашка) ---- */
.city-cab{display:block;width:100%;text-align:left;margin-bottom:var(--s3);padding:var(--s4) var(--s5);border:1px solid var(--accent);border-radius:var(--r2);background:var(--accent-tint);transition:background var(--tr)}
.city-cab:hover{background:#E4E9F6}
.city-cab b{display:block;font-size:var(--t-s);font-weight:700;color:var(--ink)}
.city-cab span{display:block;margin-top:2px;font-size:var(--t-xs);line-height:1.45;color:var(--ink-2)}

/* ---- поле прямо на странице: экран VK ID, страница из письма ---- */
.city-inline{margin-bottom:var(--s5)}
.city-inline .label{display:block;margin-bottom:var(--s2)}
.city-inline .label span{text-transform:none;letter-spacing:0;color:var(--ink-3)}
.city-inline-ok{margin-top:var(--s2);font-size:var(--t-s);color:var(--ink)}
.city-inline-ok[hidden]{display:none}
.city-inline-ok b{font-weight:600}

@media (max-width:640px){
  .city-bar-in{min-height:40px}
  .city-bar-btn{min-height:40px}
  .city-bar-yes,.city-bar-no{min-height:32px}
  .city-ask{bottom:12px;padding:var(--s4)}
}