/* ═══════════════════════════════════════════════════════════════
   theme.css — Єдиний дизайн-шар  «Цитрус — магазини»
   Підключається після bootstrap.min.css на кожній сторінці
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS-змінні Bootstrap 5 (перевизначаємо) ─────────────────── */
:root {
  /* Brand */
  /* Мережа зветься «Цитрус», тож і колір цитрусовий.
     Темніший відтінок — там, де по ньому йде білий текст: на світлішому
     помаранчевому білі літери вже погано читаються. */
  --cs-brand:      #ce5a08;
  --cs-brand-soft: #e8720e;

  /* Перевизначення Bootstrap */
  --bs-body-bg:           #f2f5f8;
  --bs-body-color:        #2d3748;

  --bs-border-radius:     8px;
  --bs-border-radius-sm:  6px;
  --bs-border-radius-lg:  12px;
  --bs-border-radius-xl:  16px;

  --bs-primary:        #3a6ea8;
  --bs-primary-rgb:    58, 110, 168;
  --bs-success:        #4a9068;
  --bs-success-rgb:    74, 144, 104;
  --bs-danger:         #c44a4d;
  --bs-danger-rgb:     196, 74, 77;
  --bs-warning:        #e09820;
  --bs-warning-rgb:    224, 152, 32;
  --bs-info:           #3a8fa8;
  --bs-info-rgb:       58, 143, 168;
  --bs-secondary:      #6b7a8d;
  --bs-secondary-rgb:  107, 122, 141;
  --bs-dark:           #2d3748;
  --bs-dark-rgb:       45, 55, 72;
}

/* ── Body ─────────────────────────────────────────────────────── */
body {
  background: #f2f5f8;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #2d3748;
}

/* ── Navbar ───────────────────────────────────────────────────── */
/* ⚠️ ГРАДІЄНТ ЖИВЕ НА ПІДКЛАДЦІ (::before), А НЕ НА САМІЙ ШАПЦІ.
   Телефон накриває верх сторінки власним скляним серпанком під
   годинником. Поки градієнт малювався на тому самому шарі, що й напис
   із кнопками, вони розмивались разом із ним. Тепер градієнт — окремий
   шар знизу, а рядок із кнопками лежить поверх нього й лишається чітким.
   Не переносити градієнт назад у background самої шапки.

   Тіні під шапкою теж немає: разом із серпанком системи виходила друга
   мутна смуга. Замість неї чітка лінія в один піксель. */
.navbar-custom {
  background: #ce5a08 !important;   /* рівна підкладка, якщо ::before не намалюється */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0,0,0,.16);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  /* Висота = як шапка дашборду (.hdr, 50px): Bootstrap-дефолт .5rem давав 56px */
  padding-top: .3125rem !important;
  padding-bottom: .3125rem !important;
}
/* ⚠️ Свій колір шапки (чужий магазин, колір користувача) задається фоном
   самого <nav>, а градієнт малюється ПОВЕРХ нього окремим шаром. Без цього
   правила червона шапка лишалась помаранчевою — колір просто не було видно. */
.navbar-custom.hdr-solid::before { display: none; }
.navbar-custom::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #ce5a08 0%, #e8720e 100%);
}
/* Рядок шапки — позиціонований, тож малюється ПОВЕРХ підкладки */
.navbar-custom > * { position: relative; }
/* Компенсація висоти фіксованої шапки: тримати в парі з padding шапки */
body { padding-top: 50px; }

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn {
  border-radius: 8px !important;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .08s;
}
.btn:hover  { box-shadow: 0 2px 8px rgba(0,0,0,.13); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-sm  { border-radius: 6px  !important; font-size: .8rem; }
.btn-lg  { border-radius: 10px !important; }

/* ── Навігаційні кнопки шапки: колір шапки + світла рамка; «Головна» — біла ── */
.btn-nav  { background:#234a6b; color:#fff !important; border:1px solid rgba(255,255,255,.45) !important; }
.btn-nav:hover, .btn-nav:focus { background:#2f5d86; color:#fff !important; border-color:#fff !important; }
.btn-home { background:#fff; color:#ce5a08 !important; border:1px solid #fff !important; font-weight:600; }
.btn-home:hover, .btn-home:focus { background:#e9eef3; color:#ce5a08 !important; }
/* Кнопки шапки — ЗАВЖДИ в один рядок. На телефоні підпис ламався («Оф. реалізація»
   у 3 рядки), шапка росла втричі, а бічна прокрутка групи не вмикалась — кнопки
   «вміщались», стиснувшись у висоту. Дублюється в topnav.js (він групує кнопки),
   але тут правило не залежить від кешу JS: theme.css бʼється за filemtime. */
.btn-nav, .btn-home, .lke-rnav, .lke-tnb, .lke-tnb-group > .btn { white-space: nowrap; }

/* Primary */
.btn-primary               { background: #3a6ea8; border-color: #3a6ea8; }
.btn-primary:hover,
.btn-primary:focus         { background: #2d5a90; border-color: #2d5a90; }
.btn-outline-primary       { border-color: #3a6ea8; color: #3a6ea8; }
.btn-outline-primary:hover { background: #3a6ea8; color: #fff; border-color: #3a6ea8; }

/* Success */
.btn-success               { background: #4a9068; border-color: #4a9068; }
.btn-success:hover         { background: #3d7858; border-color: #3d7858; }
.btn-outline-success       { border-color: #4a9068; color: #4a9068; }
.btn-outline-success:hover { background: #4a9068; color: #fff; border-color: #4a9068; }

/* Danger */
.btn-danger                { background: #c44a4d; border-color: #c44a4d; }
.btn-danger:hover          { background: #a83c3f; border-color: #a83c3f; }
.btn-outline-danger        { border-color: #c44a4d; color: #c44a4d; }
.btn-outline-danger:hover  { background: #c44a4d; color: #fff; border-color: #c44a4d; }

/* Warning */
.btn-warning               { background: #e09820; border-color: #e09820; color: #2d3748; }
.btn-warning:hover         { background: #c8861a; border-color: #c8861a; color: #fff; }
.btn-outline-warning       { border-color: #d4900a; color: #a87008; }
.btn-outline-warning:hover { background: #e09820; color: #fff; border-color: #e09820; }

/* Info */
.btn-info                  { background: #3a8fa8; border-color: #3a8fa8; color: #fff; }
.btn-info:hover            { background: #2d7a91; border-color: #2d7a91; color: #fff; }
.btn-outline-info          { border-color: #3a8fa8; color: #3a8fa8; }
.btn-outline-info:hover    { background: #3a8fa8; color: #fff; }

/* Secondary */
.btn-secondary               { background: #6b7a8d; border-color: #6b7a8d; }
.btn-secondary:hover         { background: #5a6878; border-color: #5a6878; }
.btn-outline-secondary       { border-color: #b0bcc8; color: #5a6878; }
.btn-outline-secondary:hover { background: #6b7a8d; color: #fff; border-color: #6b7a8d; }

/* Dark */
.btn-dark        { background: #2d3748; border-color: #2d3748; }
.btn-dark:hover  { background: #1f2937; border-color: #1f2937; }
.btn-outline-dark       { border-color: #2d3748; color: #2d3748; }
.btn-outline-dark:hover { background: #2d3748; color: #fff; }
.btn-outline-light       { border-color: rgba(255,255,255,.55); color: rgba(255,255,255,.9); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.75); }
/* Кнопки шапки — прозорі, з чіткою білою рамкою. Раніше тут була щільна
   заливка через скляний серпанок системи, але відколи ми не малюємо під
   годинником, серпанку немає й потреби в ній теж. */
.navbar-custom .btn-outline-light {
  background: transparent; border-color: rgba(255,255,255,.85);
  color: #fff; font-weight: 600;
}
.navbar-custom .btn-outline-light:hover,
.navbar-custom .btn-outline-light:active {
  background: rgba(255,255,255,.18); border-color: #fff; color: #fff;
}
/* Назва магазину в шапці — для продавця, у якого перемикача немає */
.wp-nav-store { color: #fff; font-weight: 800; text-transform: uppercase;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Фірмова кнопка (login) */
.btn-custom               { background: var(--cs-brand-soft); border-color: var(--cs-brand-soft); color: #fff; }
.btn-custom:hover         { background: var(--cs-brand); border-color: var(--cs-brand); color: #fff; }

/* ── Поля форм ────────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: 8px !important;
  border-color: #cdd6e0;
  background: #fafcff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control-sm,
.form-select-sm { border-radius: 6px !important; }
.form-control:focus,
.form-select:focus {
  border-color: #3a6ea8;
  box-shadow: 0 0 0 3px rgba(58,110,168,.14);
  background: #fff;
}

/* ── Картки ───────────────────────────────────────────────────── */
.card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
}
.card-header {
  background: #f5f8fc;
  border-bottom: 1px solid #e5edf4 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: .65rem 1rem;
}
/* Кольорові card-header за класом */
.card-header.bg-primary,
.card-header[class*="bg-primary"]   { background: #3a6ea8 !important; color: #fff; border-bottom: none !important; }
.card-header.bg-success             { background: #4a9068 !important; color: #fff; border-bottom: none !important; }
.card-header.bg-danger              { background: #c44a4d !important; color: #fff; border-bottom: none !important; }
.card-header.bg-warning             { background: #e09820 !important; border-bottom: none !important; }
.card-header.bg-secondary           { background: #6b7a8d !important; color: #fff; border-bottom: none !important; }
.card-header.bg-dark                { background: #2d3748 !important; color: #fff; border-bottom: none !important; }
.card-header.bg-info                { background: #3a8fa8 !important; color: #fff; border-bottom: none !important; }

/* Фірмова шапка картки (login) */
.card-header-custom {
  background: linear-gradient(135deg, #ce5a08, #e8720e) !important;
  border-radius: 12px 12px 0 0 !important;
  color: #fff !important;
  padding: 1.1rem 1.4rem;
}

/* Hover-ефект для меню-карток */
.card-menu {
  transition: transform .22s ease, box-shadow .22s ease !important;
  border-radius: 14px !important;
}
.card-menu:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* ── Значки (badges) ──────────────────────────────────────────── */
.badge {
  border-radius: 6px !important;
  font-weight: 500;
  font-size: .74em;
}
.badge.bg-primary   { background: #3a6ea8 !important; }
.badge.bg-success   { background: #4a9068 !important; }
.badge.bg-danger    { background: #c44a4d !important; }
.badge.bg-warning   { background: #e09820 !important; }
.badge.bg-info      { background: #3a8fa8 !important; }
.badge.bg-secondary { background: #6b7a8d !important; }
.badge.bg-dark      { background: #2d3748 !important; }

/* ── Сповіщення ───────────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: 10px !important;
}
.alert-success { background: #edf7f2; color: #2a6049; }
.alert-danger  { background: #fdf0f0; color: #8b2a2d; }
.alert-warning { background: #fdf6e4; color: #7a5200; }
.alert-info    { background: #e6f3f7; color: #1a5566; }

/* ── Таблиці ──────────────────────────────────────────────────── */
.table { border-color: #e4eaf0; }

.table > thead > tr > th {
  background: #f5f8fc !important;
  color: #4a5568 !important;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-color: #dde5ee !important;
  white-space: nowrap;
}
/* Темна шапка таблиці (contracts_list) */
.table-dark th,
thead.table-dark th,
.table > thead.table-dark > tr > th {
  background: #2d4a68 !important;
  border-color: #3a5878 !important;
  color: #e8f0f8 !important;
}
@media (hover: hover) {   /* на тач-екрані :hover залипає після дотику — не підсвічуємо */
  .table-hover:not(.no-row-hover) > tbody > tr:hover > td,
  .table-hover:not(.no-row-hover) > tbody > tr:hover > th {
    background: #eef4fb !important;
  }
}
/* ВАЖЛИВО: Bootstrap малює підсвітку рядка НЕ фоном, а внутрішньою тінню
   (box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)). Тому background:transparent
   її НЕ прибирає. На тач-екрані :hover залипає після дотику, і на карткових розкладках
   ця тінь лягає на кожну клітинку окремо — виглядає як сірі блоки на тексті.
   Гасимо і змінну, з якої тінь береться, і саму тінь. */
@media (hover: none), (pointer: coarse) {
  .table-hover > tbody > tr:hover > td,
  .table-hover > tbody > tr:hover > th,
  .table > tbody > tr:hover > td,
  .table > tbody > tr:hover > th {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state:  transparent;
    box-shadow: none !important;
  }
}
.table-bordered { border-color: #dde5ee !important; }
.table-bordered td, .table-bordered th { border-color: #dde5ee !important; }

/* ── Вкладки ──────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid #d0dae8;
}
.nav-tabs .nav-link {
  border-radius: 8px 8px 0 0 !important;
  color: #5a6d80;
  font-size: .875rem;
  border-color: transparent !important;
  padding: .45rem 1rem;
}
.nav-tabs .nav-link:hover {
  color: #e8720e;
  background: #eef3f9;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  color: #ce5a08;
  font-weight: 600;
  background: #fff;
  border-color: #d0dae8 #d0dae8 #fff !important;
}

/* ── Фіксовані нижні панелі ───────────────────────────────────── */
#stickyFooter,
#batchBar {
  background: linear-gradient(120deg, #ce5a08 0%, #e8720e 100%) !important;
  box-shadow: 0 -3px 14px rgba(0,0,0,.2) !important;
}

/* ── Рядки таблиці: стани ─────────────────────────────────────── */
.overdue-row td { background: #fdf4ec !important; }
.frozen-row  td { background: #edf5fa !important; }
/* Підсвітка рядка — ЛИШЕ там, де є справжня мишка. На тач-екрані :hover
   «залипає» після дотику: рядок лишається підсвіченим, а на карткових
   розкладках це виглядає як сірі блоки на тексті. Див. і .table-hover вище. */
@media (hover: hover) {
  /* .no-row-hover — таблиці, де колір комірки несе зміст (проба, «редаговано»),
     тож підсвітка рядка їх перекривала б; там рядок позначається рамкою. */
  table:not(.no-row-hover) tr:hover td { background: #eef4fb !important; }
}

/* ── Різне ────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 5px rgba(0,0,0,.07) !important; }
.shadow    { box-shadow: 0 2px 10px rgba(0,0,0,.10) !important; }

.filter-card { border: none !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; border-radius: 10px !important; }

/* Collapse / accordion */
.accordion-button:not(.collapsed) { background: #eef4fb; color: #ce5a08; box-shadow: none; }
.accordion-button:focus            { box-shadow: 0 0 0 3px rgba(58,110,168,.15); }

/* Плаваючі підписи (form-floating): підказка МАЄ бути прозорою, інакше службовий
   placeholder ("p"/" ") наїжджає на підпис. topnav.js фарбує ::placeholder сірим
   із !important — тут перебиваємо вищою специфічністю (form-floating). */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder { color: transparent !important; }

/* Підказка в полі — сіра, а не така сама, як набраний текст: чорний
   placeholder читається як «поле вже заповнене». */
::placeholder { color: #9aa5b4 !important; opacity: 1; }

/* Scrollbar (Chrome/Edge) */
::-webkit-scrollbar        { width: 7px; height: 7px; }
::-webkit-scrollbar-track  { background: #f0f4f8; }
::-webkit-scrollbar-thumb  { background: #b0bcc8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8a99a8; }

/* ── Кнопки-переходи обмінного блоку (Обмін / Курси / Тайгер) ────────────────
   Стоять по центру шапки: навбар — flex зі space-between, тож середню групу
   ставимо абсолютно, інакше вона з'їжджає до правого краю. На вузькому екрані
   повертаємо в звичайний потік окремим рядком, щоб не налазила на заголовок. */
/* position тут НЕ чіпаємо: шапка вище вже position:fixed, і саме на це
   спирається topnav.js, рахуючи відступ зверху. Перебивши на relative,
   ми отримували порожню смугу над шапкою. Для центрування вистачає
   того, що fixed-елемент і так є системою координат. */
.lke-navmid {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; gap: .5rem; align-items: center;
}
@media (max-width: 900px) {
    .lke-navmid { position: static; transform: none; order: 3; width: 100%;
                  justify-content: center; margin-top: .35rem; }
}
/* Колір закріплений за сторінкою: зелений — обмін, синій — курси, оранжевий — Тайгер */
.btn-obmin  { background:#198754; border-color:#198754; color:#fff; }
.btn-obmin:hover,  .btn-obmin:focus  { background:#157347; border-color:#146c43; color:#fff; }
.btn-kursy  { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.btn-kursy:hover,  .btn-kursy:focus  { background:#0b5ed7; border-color:#0a58ca; color:#fff; }
.btn-tigerx { background:#e08a1e; border-color:#e08a1e; color:#fff; }
.btn-tigerx:hover, .btn-tigerx:focus { background:#c9791a; border-color:#bd7218; color:#fff; }

/* ── Вказівник миші над полями ───────────────────────────────────────────────
   На частині ПК браузер малює текстову «паличку» білою, і на світлому полі її
   просто не видно. Ставимо свою: чорну з тонким білим обведенням — помітна і
   на світлому, і на темному. Запасний варіант — звичайний text. */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]),
textarea,
[contenteditable="true"] {
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='22'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='2.2'%3E%3Cpath%20d='M6%203V19M3%203h6M3%2019h6'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1'%3E%3Cpath%20d='M6%203V19M3%203h6M3%2019h6'/%3E%3C/g%3E%3C/svg%3E") 6 11, text;
}

/* ═══════════════════════════════════════════════════════════════
   Телефон — спільні правила для всіх сторінок «Цитрус»
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Поле дрібнішим за 16px iOS зустрічає автоматичним зумом сторінки,
       після якого верстка «поїхала» і назад не повертається. */
    .form-control, .form-select, input, select, textarea { font-size: 16px; }

    .container, .container-fluid { padding-left: .6rem; padding-right: .6rem; }
    .card-body { padding: .75rem; }
    .table > :not(caption) > * > * { padding: .4rem .45rem; }
    h4 { font-size: 1.2rem; }
    h5 { font-size: 1.05rem; }

    /* Кнопки в рядку заголовка не тиснуться, а переносяться */
    .btn-sm { padding: .3rem .6rem; }
}

/* Дрібний рядок під назвою: на телефоні заміняє приховані колонки таблиці */
.mob-sub { display: none; }
@media (max-width: 767.98px) {
    .mob-sub { display: block; font-size: .76rem; color: #6b7a8d; line-height: 1.25; margin-top: .1rem; }
}

/* ── Сховані суми (дохід) ─────────────────────────────────────── */
/* Клац — і сума видно пʼять секунд. Поки схована, місце під неї вже
   зайняте, щоб таблиця не сіпалась при показі. */
.hide-money {
  cursor: pointer; user-select: none; letter-spacing: .18em;
  color: #9aa7b4; min-width: 3.5rem; display: inline-block; text-align: inherit;
}
.hide-money:hover  { color: #6b7a8d; }
.hide-money:focus  { outline: 2px solid #cfd8e3; outline-offset: 2px; }
.hide-money.on     { letter-spacing: normal; color: inherit; }

/* ── Встановлений застосунок ──────────────────────────────────── */
/* Відколи ми прибрали viewport-fit=cover, система сама тримає смуги під
   годинником і під жестами, тож env(safe-area-*) тут віддає нулі й правила
   нижче нічого не змінюють. Лишаємо їх свідомо: якщо колись знову захочемо
   малювати під годинник — усе вже на місці. Але тоді повернеться й скляний
   серпанок системи, який розмиває шапку. */
@media (display-mode: standalone) {
  .navbar-custom { padding-top: calc(.3125rem + env(safe-area-inset-top)) !important; }
  body { padding-top: calc(50px + env(safe-area-inset-top));
         padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Де працюєш: магазин і місце ВЕЛИКИМИ ─────────────────────── */
/* Касир сідає за чужий ПК — і має з першого погляду бачити, куди підуть чеки.
   Тому не дрібний підпис, а два помітні рядки: магазин і «КАСА №1» / «СЕРВЕР». */
.wp-badge { line-height: 1.15; min-width: 0; }
.wp-badge .wp-store { font-size: 1.5rem; font-weight: 800; text-transform: uppercase;
                      letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-badge .wp-place { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: #ce5a08; }
.wp-badge.wp-lg .wp-store { font-size: 1.9rem; }
.wp-badge.wp-lg .wp-place { font-size: 1.45rem; }
/* У шапці — в один рядок, білим, на всіх екранах (раніше на телефоні ховалось) */
.wp-badge.wp-nav { display: flex; gap: .55rem; align-items: baseline; color: #fff; white-space: nowrap; }
/* У шапці — лише місце: назва магазину й так стоїть великими на сторінці.
   ⚠️ Кегль тут більший за звичайний, але висота шапки НЕ росте: її задає
   значок мережі (40 px), і поки середина нижча за нього, шапка лишається
   тією самою. Тому щільний міжрядковий інтервал і нульові відступи —
   збільшуючи кегль далі, перевіряйте висоту, а не тільки вигляд. */
.wp-badge.wp-nav .wp-place { font-size: 1.4rem; line-height: 1.1; color: #fff; }
.wp-nav-store { font-size: 1.4rem; line-height: 1.1; }
.navbar-custom .wp-mid .navbar-text {
  font-size: 1.05rem; line-height: 1.15; padding-top: 0; padding-bottom: 0;
}
.navbar-custom .wp-mid .form-select {
  font-size: 1.15rem; line-height: 1.2; padding-top: .1rem; padding-bottom: .1rem;
}
@media (max-width: 575.98px) {
  .wp-badge.wp-nav .wp-place, .wp-nav-store { font-size: 1.05rem; }
  .navbar-custom .wp-mid .form-select { font-size: 1rem; max-width: 62vw; }

  /* Телефон: увесь застосунок приблизно на п'яту частину дрібніший.
     Так попросив власник, віддаливши екран пальцями: у звичайному масштабі
     на телефон влазило надто мало. Розміри в Bootstrap і в нас — у rem, тож
     досить змінити основу. ⚠️ Поля лишаються 16 px (правило вище): дрібніший
     шрифт у полі iOS зустрічає автоматичним зумом сторінки. */
  html { font-size: 13px; }
  .navbar-custom .wp-mid .form-select { font-size: 16px; }

  /* ⚠️ На телефоні шапка — у ДВА рядки: зверху дії, знизу «де я».
     В один рядок усе не влазить, а середина вміє стискатись (min-width:0),
     тож кнопки праворуч лягали просто на назву магазину й «КАСА №1». */
  .navbar-custom .container-fluid { flex-wrap: wrap !important; row-gap: .3rem; }
  .navbar-custom .wp-mid { order: 10; flex: 1 0 100%; margin: 0 !important;
                           justify-content: space-between; }
  .navbar-custom .hdr-right { margin-left: auto; }
}

/* ── Потягнути вниз — оновити (застосунок на телефоні) ────────── */
#ptr { position: fixed; left: 50%; top: calc(var(--hdr-h, 50px) + 8px); z-index: 1040;
       width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #ce5a08;
       box-shadow: 0 2px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center;
       font-size: 22px; font-weight: 700; opacity: 0; pointer-events: none;
       transform: translate(-50%, 0); transition: opacity .12s; }
#ptr.ready { background: #ce5a08; color: #fff; }      /* відпустіть — оновиться */
#ptr.spin  { opacity: 1; animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { from { transform: translate(-50%, 60px) rotate(0); }
                      to   { transform: translate(-50%, 60px) rotate(360deg); } }

/* ── «Не ваш магазин»: смужка під шапкою ─────────────────────── */
/* Тонка навмисно: вона висить на кожній сторінці, поки обрано чужу точку,
   тож не має з'їдати екран — досить того, що вона впадає в око кольором. */
.foreign-bar {
  background: #b02a37; color: #fff; text-align: center;
  padding: .2rem .6rem; font-size: .82rem; line-height: 1.3;
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.foreign-bar b { font-weight: 700; }
.foreign-bar a { color: #fff; text-decoration: underline; white-space: nowrap; }
.foreign-bar a:hover { color: #ffe1c4; }

/* ── Малі іконки замість емодзі (icons.js) ──────────────────────────────────
   Розмір — від шрифту довкола (1.1 em), колір — від тексту; жовтий/зелений/червоний — лише для ⚠ ✅ ❌. */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
.ic-warn { color: #d99a00; } .ic-ok { color: #2e9e5b; } .ic-bad { color: #dc3545; } .ic-mute { color: #9aa5b1; }
.ic-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: currentColor; vertical-align: .02em; flex: none; }