/* ============================================================
   Доставка продуктов — стили.

   Главный читатель этой страницы — пожилой человек с телефоном
   в руках, часто на солнце и без очков. Отсюда всё остальное:
   крупный шрифт, жирный контраст, кнопки под палец, подписи
   словами вместо значков, никаких серых надписей на сером.
   ============================================================ */

:root{
  --bg:#f6f6f3;
  --card:#fff;
  --ink:#151515;
  --muted:#5f5f5f;          /* темнее обычного: серый на сером не читается */
  --line:#ddddd7;
  --green:#2e7d32;
  --green-d:#1b5e20;
  --green-l:#eaf5ea;
  --amber:#e06b00;
  --red:#c62828;
  --blue:#1565c0;
  --radius:16px;
  --tap:56px;               /* минимальная высота всего кликабельного */
}

*{box-sizing:border-box}
/* Атрибут hidden скрывает элемент правилом браузера [hidden]{display:none},
   но любое НАШЕ правило с display (flex у .empty, inline-flex у .btn) его
   перебивает по специфичности — и скрытое остаётся на виду.
   Поэтому усиливаем явно, иначе hidden работает через раз. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:18px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  padding-bottom:40px;
}
a{color:var(--blue)}
img{max-width:100%}

/* ---------- каркас ---------- */
.top{
  background:var(--green); color:#fff; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:20;
}
.brand{color:#fff; text-decoration:none; font-size:20px; font-weight:700;
       display:flex; align-items:center; gap:10px}
.brand-ico{width:30px; height:30px; flex:none;
           background:#fff; border-radius:8px; padding:2px}
.top a.tlink{color:#fff; text-decoration:none; font-size:16px;
             border:2px solid rgba(255,255,255,.45); border-radius:10px;
             padding:8px 12px; white-space:nowrap}
.wrap{max-width:760px; margin:0 auto; padding:16px}
.foot{max-width:760px; margin:0 auto; padding:8px 16px 24px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:18px; margin-bottom:16px}
h1{font-size:27px; line-height:1.2; margin:0 0 6px}
h2{font-size:22px; margin:0 0 14px; display:flex; align-items:center; gap:10px}
.lead{color:var(--muted); margin:0; font-size:18px}
.muted{color:var(--muted)}
.small{font-size:15px}
.nowrap{white-space:nowrap}
.say{color:var(--muted); font-size:17px; margin:0 0 12px}

/* ---------- приветствие с маскотом ---------- */
.hero{
  display:flex; align-items:center; gap:6px;
  background:var(--green-l); border:2px solid #c9e3ca;
  border-radius:var(--radius); padding:14px 16px; margin-bottom:16px;
}
.hero-mascot{width:132px; flex:none; margin:-8px -6px -12px -8px}
.hero-text h1{font-size:25px}

/* ---------- как это работает ---------- */
.how-steps{list-style:none; margin:0 0 14px; padding:0}
.how-steps li{display:flex; gap:12px; align-items:flex-start; margin-bottom:10px}
.how-steps .n{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.rules-box{background:#fafaf6; border:1px solid var(--line);
           border-radius:12px; padding:12px 14px}
.rules-box div{padding:4px 0}

/* номер шага в заголовке */
.step{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--green); color:#fff; font-weight:800; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- поля ---------- */
label{display:block; font-weight:700; margin:18px 0 8px; font-size:18px}
label .req{color:var(--red); font-weight:600; font-size:15px}
input[type=text], input[type=tel], input[type=number],
input[type=password], textarea, select{
  width:100%; padding:15px 14px; font-size:19px; font-family:inherit;
  border:2px solid #c9c9c2; border-radius:12px; background:#fff; color:var(--ink);
}
input:focus, textarea:focus, select:focus{outline:3px solid #a5d6a7; border-color:var(--green)}
textarea{min-height:120px; resize:vertical; line-height:1.5}
.hint{color:var(--muted); font-size:16px; margin-top:8px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 20px; font-size:18px; font-weight:700;
  border:0; border-radius:12px; background:#e6e6e0; color:var(--ink);
  cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-d)}
.btn-block{display:flex; width:100%}
.btn-lg{min-height:64px; font-size:20px}
.btn-xl{min-height:72px; font-size:23px}
.btn-sm{min-height:46px; font-size:16px; padding:0 14px}
.btn-ghost{background:#fff; border:2px solid #c9c9c2}
.btn-red{background:var(--red); color:#fff}
.btn-amber{background:var(--amber); color:#fff}
.btn-blue{background:var(--blue); color:#fff}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.row{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- список товаров у покупателя ---------- */
.items{list-style:none; margin:0; padding:0}
.item{
  display:flex; align-items:center; gap:12px; padding:14px 10px;
  border-bottom:2px solid #eeeee8; min-height:64px;
}
.item:last-child{border-bottom:0}
.item .nm{flex:1; min-width:0; font-size:19px; font-weight:600;
          word-break:break-word; cursor:pointer}
.item .qt{color:var(--ink); background:#f0f0ea; border-radius:8px;
          padding:6px 10px; white-space:nowrap; font-weight:700; cursor:pointer}
.item .x{
  flex:none; border:2px solid #e5b4b4; background:#fff; color:var(--red);
  font-size:16px; font-weight:700; font-family:inherit;
  min-height:44px; padding:0 14px; border-radius:10px; cursor:pointer;
}
.item .x:hover{background:#fdecea}
.item.editing{background:var(--green-l); flex-wrap:wrap; border-radius:12px}
.edit-row{display:flex; gap:8px; width:100%; flex-wrap:wrap}
.edit-row input[name=n]{flex:1 1 100%}
.edit-row input[name=q]{width:110px}
.edit-row select{width:120px}

.empty{color:var(--muted); text-align:center; padding:18px 10px;
       display:flex; flex-direction:column; align-items:center; gap:10px; font-size:17px}
.empty-mascot{width:110px; opacity:.9}
.preview{background:var(--green-l); border:2px dashed var(--green); border-radius:12px;
         padding:12px 14px; margin-top:12px; font-size:16px}
.preview b{color:var(--green-d)}

/* ---------- подвал с телефоном ---------- */
.callout{display:flex; align-items:center; gap:12px; background:#fff;
         border:2px solid var(--line); border-radius:var(--radius); padding:14px}
.foot-mascot{width:78px; flex:none}
.bigtel{font-size:26px; font-weight:800; text-decoration:none; display:block; margin:2px 0}

/* ---------- внутри мини-приложения ВК ---------- */
/* своя шапка не нужна: сверху уже есть панель ВК */
.in-vk .wrap{padding-top:10px}
.in-vk .foot{padding-bottom:32px}
input.from-vk{border-color:#0077ff}
.vk-nav{display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  margin-bottom:12px; border-radius:999px; background:#e6e6e0; color:var(--ink);
  text-decoration:none; font-weight:700; font-size:16px}

/* ---------- баннер активного заказа на главной ---------- */
.active-order{display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:#fff8e6; border:2px solid var(--amber);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:16px;
  text-decoration:none; color:var(--ink); font-size:17px}
.active-order .ao-arrow{font-size:34px; line-height:1; color:var(--amber); flex:none}

/* ---------- окно «добавьте на экран» ---------- */
.ah-back{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:flex; align-items:flex-end; justify-content:center;
  animation:ah-fade .2s ease-out}
.ah-sheet{background:var(--card); width:100%; max-width:560px;
  border-radius:22px 22px 0 0; padding:22px 20px 26px; text-align:center;
  max-height:92vh; overflow-y:auto; animation:ah-up .28s ease-out}
.ah-mascot{width:96px; margin:0 auto 4px; display:block}
.ah-title{font-size:24px; margin:0 0 8px; display:block}
.ah-p{color:var(--muted); font-size:17px; margin:0 0 16px}
.ah-steps{text-align:left; margin:0 0 18px; padding-left:26px; font-size:17px}
.ah-steps li{margin-bottom:12px; line-height:1.45}
.ah-ico{display:inline-block; font-size:20px; color:var(--blue)}
.ah-btns{display:flex; flex-direction:column; gap:10px}
.ah-never{background:none; border:0; color:var(--muted); font-size:15px;
  font-family:inherit; padding:10px; cursor:pointer; text-decoration:underline}
@keyframes ah-up{from{transform:translateY(100%)} to{transform:translateY(0)}}
@keyframes ah-fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ah-sheet,.ah-back{animation:none}
}
/* в установленном виде окно не нужно вовсе */
@media (display-mode:standalone){ .ah-back{display:none!important} }

/* ---------- ссылка на сообщество ВК ---------- */
.vk-link{display:flex; align-items:center; gap:14px; margin-top:12px;
         background:#fff; border:2px solid var(--line); border-radius:var(--radius);
         padding:14px; text-decoration:none; color:var(--ink)}
.vk-link:hover{border-color:#0077ff}
.vk-ico{flex:none; width:52px; height:52px; border-radius:12px; background:#0077ff;
        color:#fff; font-weight:800; font-size:19px; letter-spacing:.5px;
        display:flex; align-items:center; justify-content:center}

/* ---------- бейджи и статусы ---------- */
.badge{display:inline-block; padding:5px 12px; border-radius:999px;
       font-size:14px; font-weight:700; white-space:nowrap}
.b-new{background:#fff3e0; color:#c85000}
.b-accepted{background:#e3f2fd; color:#0d47a1}
.b-ready{background:#e8f5e9; color:#1b5e20}
.b-delivering{background:#ede7f6; color:#4527a0}
.b-done{background:#eceff1; color:#37474f}
.b-cancelled{background:#ffebee; color:#b71c1c}
.i-pending{background:#efefe9; color:#4a4a4a}
.i-ok{background:#d7f0d8; color:#175d1b}
.i-missing{background:#ffdede; color:#b71c1c}
.i-replaced{background:#ffecd2; color:#b24d00}

/* ---------- полоса статуса заказа ---------- */
.track{display:flex; gap:6px; margin:16px 0}
.track .step{flex:1; height:12px; border-radius:999px; background:var(--line);
             width:auto; color:transparent}
.track .step.on{background:var(--green)}
.statusline{font-size:22px; font-weight:800; margin:8px 0 2px}

/* ---------- панель владельца ---------- */
.counters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.cnt{flex:1; min-width:96px; background:var(--card); border:1px solid var(--line);
     border-radius:var(--radius); padding:14px; text-align:center}
.cnt .n{font-size:30px; font-weight:800; line-height:1.1}
.cnt .t{font-size:14px; color:var(--muted)}
.cnt.hot{border-color:var(--amber); background:#fffaf3}
.cnt.hot .n{color:var(--amber)}

.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.tab{padding:11px 16px; border-radius:999px; background:#e6e6e0; color:var(--ink);
     text-decoration:none; font-size:16px; font-weight:700}
.tab.on{background:var(--green); color:#fff}

.olist{list-style:none; margin:0; padding:0}
.ocard{display:block; background:var(--card); border:1px solid var(--line);
       border-left:6px solid var(--line); border-radius:var(--radius);
       padding:14px 16px; margin-bottom:12px; text-decoration:none; color:var(--ink)}
.ocard:hover{border-color:var(--green)}
.ocard.s-new{border-left-color:var(--amber); background:#fffdf7}
.ocard.s-accepted{border-left-color:var(--blue)}
.ocard.s-ready{border-left-color:var(--green)}
.ocard.s-delivering{border-left-color:#5e35b1}
.ocard.s-done{opacity:.72}
.ocard.s-cancelled{opacity:.55}
.ocard .l1{display:flex; justify-content:space-between; align-items:center; gap:10px}
.ocard .who{font-weight:800; font-size:18px}
.ocard .l2{color:var(--muted); font-size:16px; margin-top:5px}
.ocard .l3{margin-top:8px; font-size:16px}
.warn{color:var(--red); font-weight:700}

/* строка товара в панели сборки */
.prow{border-bottom:2px solid #eeeee8; padding:14px 0; transition:background .25s}
.prow:last-child{border-bottom:0}
.prow .top-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.prow .nm{flex:1; min-width:140px; font-size:19px; font-weight:700}
.prow.done-ok{background:#f4fcf4}
.prow.done-missing{background:#fff5f5}
.prow.done-replaced{background:#fffaf2}
.prow.flash{background:#fff6c2}
.raw{font-size:14px; color:var(--muted); font-style:italic; margin-top:4px}
.repl{color:var(--amber); font-weight:700; margin-top:4px}

/* три кнопки отметки — крупные, в один ряд */
.marks{display:flex; gap:8px; margin-top:12px; align-items:stretch}
.marks form, .marks .mark-det{flex:1; min-width:0; margin:0}
.marks .mark{width:100%; min-height:52px; font-size:17px; padding:0 6px}
/* Селектор намеренно длиннее нужного: у "details.edit summary" ниже
   ровно такая же специфичность (0,1,2), и оно побеждало по порядку —
   кнопка "Замена" красилась как ссылка и ломала ряд из трёх.
   Добавленный ".marks" делает (0,2,3) и снимает спор. */
.marks details.mark-det summary{
  list-style:none; user-select:none;
  color:var(--ink); padding:0 6px; font-size:17px;
}
.marks details.mark-det summary::-webkit-details-marker{display:none}
.marks details.mark-det[open] summary{background:var(--amber); color:#fff}

.left-note{font-size:16px; font-weight:700; white-space:nowrap}
.warn-note{color:var(--amber)}
.ok-note{color:var(--green)}

details.edit{margin-top:10px}
details.edit summary{cursor:pointer; color:var(--blue); font-size:16px; padding:8px 0}
details.edit .box{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
                  background:#f7f7f4; padding:12px; border-radius:12px}
details.edit input[name=name]{flex:1 1 160px}
details.edit input[name=qty]{width:96px}
details.edit input[name=price]{width:110px}
details.edit select{width:110px}

.totals{display:flex; justify-content:space-between; padding:9px 0; font-size:18px}
.totals.grand{font-size:23px; font-weight:800; border-top:2px solid var(--line);
              margin-top:6px; padding-top:14px}

.err{background:#ffebee; border:2px solid #ef9a9a; color:#a01818;
     padding:14px 16px; border-radius:12px; margin-bottom:16px; font-size:18px}
.err ul{margin:8px 0 0 20px; padding:0}
.ok-box{background:#e3f5e4; border:2px solid #a5d6a7; color:#14561a;
        padding:14px 16px; border-radius:12px; margin-bottom:16px; font-size:18px}

.log{list-style:none; margin:0; padding:0; font-size:15px; color:var(--muted)}
.log li{padding:6px 0; border-bottom:1px dashed var(--line)}

@media (max-width:520px){
  body{font-size:17px}
  .wrap{padding:12px}
  .card{padding:15px}
  h1{font-size:24px}
  h2{font-size:20px}
  .hero{padding:10px 12px}
  .hero-mascot{width:112px}
  .hero-text h1{font-size:22px}
  .marks{flex-wrap:wrap}
  .marks .mark{font-size:16px}
}
@media print{
  .top,.foot,.marks,.btn,details.edit{display:none!important}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  .prow{transition:none}
}