/* ═══════════════════════════════════════════════════════════
   Приём денег — одно окно на всю программу
   ═══════════════════════════════════════════════════════════
   Оно открывается поверх карточки брони и поверх продажи, не закрывая
   их: из-за чего берут деньги, должно остаться видно. Родительское окно
   при этом отодвигается назад, а не прячется.

   Устроено сверху вниз так, как идёт разговор у стойки: кому и сколько
   должен → сколько берём → чем → принять.               */

.dlg-pay{
  width:min(468px,calc(100vw - 32px));max-height:min(88dvh,720px);
  display:flex;flex-direction:column;overflow:hidden;
}
/* Родительское окно отодвигается назад: оно не исчезает — оно перестаёт
   быть тем, с чем сейчас работают.

   Только открытое. Закрытая боковая панель спрятана собственным сдвигом
   (`transform:translateX(100%)`), и правило без `.open` перебивало его —
   все закрытые панели выезжали на экран белым полотном справа. Сдвиг,
   которым элемент спрятан, чужими правилами не трогают. */
body.has-over .dlg.open:not(.dlg-over){
  transform:translate(-50%,-50%) scale(.982);transition:transform .28s var(--ease);
}
body.has-over .sheet.open{transform:scale(.99);transition:transform .28s var(--ease)}
@media (prefers-reduced-motion:reduce){
  body.has-over .dlg.open:not(.dlg-over),
  body.has-over .sheet.open{transform:none;transition:none}
}

/* ── шапка ── */
.pay-head{
  display:flex;align-items:center;gap:12px;padding:15px 14px 14px 20px;flex-shrink:0;
  border-bottom:1px solid var(--rule);background:var(--card);
}
.pay-head-t{flex:1;min-width:0}
.pay-head-t b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.035em}
.pay-head-t span{
  display:block;margin-top:2px;font-size:12px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── табло ──
   Прибор, а не тёмный прямоугольник. Что делает его прибором:

   · **стекло.** Панель утоплена, по верхнему краю — светлая нить: так
     свет ложится на настоящее стекло, и поверхность перестаёт быть
     заливкой (Apple HIG: bright top edge = light catching the material);
   · **разряд.** Сумма набрана крупно табличными цифрами, по правому краю —
     её сверяют с деньгами в руке через стойку;
   · **шкала.** Сколько уже закрыто — вопрос отдельный от «сколько
     осталось», и виден он только полосой;
   · **лампа.** Состояние названо и цветом, и словом: цвет читается
     мгновенно, слово — точно.                                        */
.pay-screen{flex-shrink:0;padding:14px 14px 15px;background:var(--accent)}
.pay-glass{
  position:relative;padding:15px 17px 16px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--glass-1) 0%,var(--glass-2) 62%,var(--glass-3) 100%);
  box-shadow:inset 0 1px 0 rgba(237,234,227,.13), inset 0 0 34px rgba(0,0,0,.5),
    0 1px 0 rgba(237,234,227,.05);
}

.pay-owe{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pay-owe span,.pay-entry>span{
  font-size:11px;font-weight:500;
  color:var(--band-ink-2);flex-shrink:0;
}
.pay-owe b{
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--band-ink-2);font-variant-numeric:tabular-nums;
}

/* Строка набора. Подпись видна всегда: поле без подписи опознают по
   подсказке внутри, а подсказка исчезает, едва начали набирать. */
.pay-entry{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:11px}
.pay-digits{display:flex;align-items:baseline;gap:4px;min-width:0}
.pay-entry input{
  min-width:0;width:100%;max-width:230px;border:0;background:none;padding:0;text-align:right;
  font-size:38px;font-weight:600;letter-spacing:-.02em;
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.pay-entry input:focus{outline:none}
.pay-entry input::placeholder{color:var(--band-ink-3)}
.pay-entry em{font-size:20px;font-style:normal;color:var(--band-ink-2)}
/* Курсор-брусок — единственное, что на табло живёт само: у терминала он
   мигает, и по нему видно, где ждут набор. */
.pay-caret{
  width:2px;height:28px;align-self:center;background:var(--accent-ink);opacity:0;
  animation:payCaret 1.06s steps(1, end) infinite;
}
.pay-entry:focus-within .pay-caret{opacity:1}
@keyframes payCaret{0%,55%{opacity:1}56%,100%{opacity:0}}

/* Шкала закрытого. Заливка едет плавно: набирая сумму, видно, как долг
   закрывается — это и есть ответ, ради которого сюда пришли. */
.pay-scale{
  height:3px;margin-top:13px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(237,234,227,.12);
}
.pay-scale i{
  display:block;height:100%;width:var(--covered, 0%);border-radius:2px;
  background:linear-gradient(90deg, rgba(143,211,180,.55), rgba(143,211,180,.9));
  transition:width .42s var(--ease);
}

/* Лампа состояния — плоская точка, без ореола: неоновое свечение вокруг
   точек и цифр делало табло похожим на сгенерированный пульт, а цвет и
   так виден на тёмном стекле. Цвет читается мгновенно, слово — точно; одного цвета
   мало (цветом одним смысл не передают), одного слова — медленно. */
.pay-status{display:flex;align-items:center;gap:8px;margin-top:11px}
.pay-status i{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--band-ink-3);
  transition:background-color .2s var(--ease);
}
/* Это главная фраза табло, а не подпись под ним: её читают вслух гостю.
   Прописными в восемь с половиной пикселей она была надписью на корпусе. */
.pay-status b{
  font-size:12px;font-weight:500;letter-spacing:0;
  color:var(--band-ink-2);transition:color .2s var(--ease);
}
.pay-status.settled i{background:var(--plate-ok)}
.pay-status.settled b{color:var(--plate-ok)}
.pay-status.rest i{background:var(--plate-wait)}
.pay-status.rest b{color:var(--accent-ink)}
.pay-status.change i{background:var(--plate-wait)}
.pay-status.change b{color:var(--plate-wait)}

/* ── тело ── */
.pay-body{flex:1;min-height:0;overflow-y:auto;padding:15px 20px 18px}
.pay-sec h3{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.pay-sec h3::after{content:"";flex:1;height:1px;background:var(--rule-2)}

.pay-quick{display:flex;gap:7px;margin-bottom:17px;flex-wrap:wrap}
.pay-chip{
  flex:1 1 auto;min-height:46px;padding:8px 12px;text-align:left;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
  font-size:11.5px;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,transform;
}
.pay-chip u{
  display:block;margin-top:2px;font-size:12.5px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
}
@media (hover:hover) and (pointer:fine){
  .pay-chip:hover{border-color:var(--ink-3);background:var(--sunk)}
}
.pay-chip:active{transform:scale(.97)}
.pay-chip.on{background:var(--accent);border-color:var(--accent);color:var(--band-ink-2)}
.pay-chip.on u{color:var(--accent-ink)}
.pay-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pay-method{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:60px;padding:10px 7px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,transform;
}
.pay-method i{display:flex;color:var(--ink-2);transition:color .13s var(--ease)}
.pay-method span{
  font-size:11px;line-height:1.15;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
@media (hover:hover) and (pointer:fine){
  .pay-method:hover{border-color:var(--ink-3);background:var(--sunk);color:var(--ink)}
  .pay-method:hover i{color:var(--ink)}
}
.pay-method:active{transform:scale(.97)}
.pay-method.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pay-method.on i{color:var(--accent-ink)}
.pay-method:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Время и примечание — уровнем ниже: у них есть верные значения по
   умолчанию, и спрашивать их у каждого платежа значит красть время. */
/* Разбивка между юрлицами: строка — юрлицо, его остаток и доля платежа.
   Сумма справа табличными цифрами — сверяют столбиком с платежом. */
.pay-split{margin-top:16px}
.pay-split-rows{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.pay-split-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px}
.pay-split-row+.pay-split-row{border-top:1px solid var(--rule-2)}
.pay-split-row b{display:block;font-size:12.5px;font-weight:550;color:var(--ink)}
.pay-split-row small{display:block;font-size:11px;color:var(--ink-3)}
.pay-split-sum{display:inline-flex;align-items:center;gap:5px}
.pay-split-sum .inp{width:104px;padding:6px 9px;text-align:right;font-size:13px;font-weight:550;font-variant-numeric:tabular-nums}
.pay-split-sum em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.pay-split-say{margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.pay-split-say.off{color:var(--late)}
.pay-more{margin-top:16px;border-top:1px solid var(--rule-2);padding-top:12px}
.pay-more summary{
  display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:12px;color:var(--ink-2);
}
.pay-more summary::-webkit-details-marker{display:none}
.pay-more summary::before{
  content:"";width:6px;height:6px;border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .16s var(--ease);
}
.pay-more[open] summary::before{transform:rotate(45deg)}
.pay-more summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-xs)}
.pay-more-in{display:grid;gap:11px;margin-top:11px}
.pay-when span,.pay-note span{
  display:block;margin-bottom:5px;font-size:11.5px;color:var(--ink-3);
}
.pay-when input,.pay-note textarea{width:100%}
.pay-note textarea{font-family:var(--font);font-size:13px;line-height:1.45;resize:vertical}

/* ── выбор: сейчас или в счёт ── */
.pay-ask{padding:18px 20px 4px;display:grid;gap:9px}
.pay-way{
  display:grid;grid-template-columns:auto 1fr;gap:2px 13px;align-items:center;
  padding:14px 16px;text-align:left;min-height:64px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:background-color,border-color,transform;
}
.pay-way i{grid-row:1 / span 2;display:flex;color:var(--ink-2)}
.pay-way b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pay-way span{font-size:11.5px;line-height:1.4;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .pay-way:hover{border-color:var(--ink);background:var(--sunk)}
  .pay-way:hover i{color:var(--ink)}
}
.pay-way:active{transform:scale(.99)}
.pay-way:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pay-ask-why{
  margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--ink-3);
}
.pay-ask-why b{font-weight:600;color:var(--ink-2)}

/* ── подвал ── */
.pay-foot{
  flex-shrink:0;display:flex;gap:8px;padding:14px 20px 17px;
  border-top:1px solid var(--rule);background:var(--paper);
}
/* Кнопки подвала — главное действие окна, и мельчить им нельзя: 39 px
   давала общая `.btn-lg`, а норма для основной цели — 44. Правило здесь,
   а не в общей кнопке: менять её высоту во всей программе ради одного
   окна значит чинить не там, где болит. */
/* Отказ занимает своё слово, а действие — всё остальное: подпись
   действия длиннее («Вернуть 29 000 ₽ · наличные») и переносом на две
   строки читается как сломанная кнопка. */
.pay-foot .btn{flex:1 1 auto;min-height:44px;white-space:nowrap}
.pay-foot .btn-ghost{flex:0 1 auto}
.pay-foot.ask{border-top:0;background:none;padding-top:16px}
.pay-foot .btn:disabled{opacity:.4;pointer-events:none}

@media (max-width:520px){
  .pay-methods{grid-template-columns:repeat(2,1fr)}
  .pay-band{flex-direction:column;gap:1px}
}

/* ═══ появление ═══
   Терминал включается, а не выпрыгивает. Порядок тот же, каким его
   читают: сперва просыпается стекло — на нём ответ на главный вопрос, —
   и уже на разогретом табло само набегает число. Следом проступают
   быстрые суммы и способы.

   Отскока нет нигде: касса — прибор, и десятый платёж за смену не должен
   отличаться от первого. Каскад уложен в четверть секунды. */
@keyframes payWake{
  0%  {opacity:0;transform:scaleY(.94);filter:brightness(.4)}
  55% {opacity:1;filter:brightness(1.06)}
  100%{opacity:1;transform:scaleY(1);filter:brightness(1)}
}
@keyframes payRise{from{opacity:0;transform:translateY(7px)}}
@keyframes payShow{from{opacity:0}}

.dlg-pay.open .pay-glass{animation:payWake .34s var(--ease) both;transform-origin:top center}
.dlg-pay.open .pay-entry input{animation:payShow .3s var(--ease) both .1s}
/* Шкала наливается от нуля — это и есть «прибор включился». Числу такого
   разгона не дают: пока оно бежит, в поле стоит сумма, которой нет. */
.dlg-pay.open .pay-scale i{animation:payFill .5s var(--ease) both .12s}
@keyframes payFill{from{width:0}}
.dlg-pay.open .pay-quick{animation:payRise .26s var(--ease) both .1s}
.dlg-pay.open .pay-sec{animation:payRise .26s var(--ease) both .14s}
.dlg-pay.open .pay-more,.dlg-pay.open .pay-foot{animation:payRise .26s var(--ease) both .18s}
/* Вопрос «сейчас или в счёт» — тот же порядок: сперва табло, потом выбор. */
.dlg-pay.open .pay-way{animation:payRise .26s var(--ease) both .1s}
.dlg-pay.open .pay-way:nth-child(2){animation-delay:.16s}
.dlg-pay.open .pay-ask-why{animation:payRise .24s var(--ease) both .22s}

/* Набранное изменилось — стекло коротко подсвечивает разряд. Это
   единственная вспышка в окне, и она отвечает ровно на один вопрос:
   «знак принят». */
.pay-glass.hit{animation:payHit .26s var(--ease)}
@keyframes payHit{
  0%  {box-shadow:inset 0 1px 0 rgba(237,234,227,.4), inset 0 0 34px rgba(0,0,0,.34)}
  100%{box-shadow:inset 0 1px 0 rgba(237,234,227,.13), inset 0 0 34px rgba(0,0,0,.5)}
}

@media (prefers-reduced-motion:reduce){
  .dlg-pay.open .pay-glass,.dlg-pay.open .pay-entry input,.dlg-pay.open .pay-quick,
  .dlg-pay.open .pay-sec,.dlg-pay.open .pay-more,.dlg-pay.open .pay-foot,
  .dlg-pay.open .pay-way,.dlg-pay.open .pay-ask-why,.dlg-pay.open .pay-scale i{
    animation:payFade .18s ease both;animation-delay:0s;
  }
  @keyframes payFade{from{opacity:0}}
  .pay-caret{animation:none;opacity:1}
  .pay-glass.hit{animation:none}
  .pay-scale i{transition:none}
  .pay-method:active,.pay-chip:active{transform:none}
}


/* ── возврат: тот же прибор, другое направление ──────────────
   Табло материала не меняет: тёмная плита остаётся тёмной, иначе окно
   читается как чужое и уже не кассовое. Направление несут четыре знака
   сразу, потому что спутать его дорого: штамп на плите, минус перед
   набранным, шкала, идущая назад, и подпись кнопки. Цветом одним такое
   не говорят (§8.3). */

/* Штамп — тот же приём, что печать «ОПЛАЧЕНО» на чеке продажи: оттиск
   поверх бумаги, слегка повёрнутый, без заливки. Он не кнопка и не
   плашка состояния, поэтому и выглядит оттиском, а не элементом. */
.pay-stamp{
  margin:0 auto;padding:2px 7px;
  border:1.5px solid rgba(232,198,138,.5);border-radius:var(--r-xs);
  font-size:9px;font-weight:600;font-style:normal;
  letter-spacing:.08em;color:var(--plate-wait);
  transform:rotate(-4deg);
  animation:payStamp 220ms cubic-bezier(.2,.8,.3,1) both;
}
@keyframes payStamp{from{opacity:0;transform:rotate(-4deg) scale(1.12)}}
/* Минус живёт с цифрами одной строкой и одним кеглем: он часть числа,
   а не значок рядом с ним. */
.pay-minus{
  font-size:26px;font-style:normal;font-weight:600;
  letter-spacing:-.02em;color:var(--plate-wait);
}
/* В возврате поле сжимается до набранного, и вся группа «минус, число,
   рубль» стоит справа одним куском: знак принадлежит числу, а не строке. */
.pay-screen.back .pay-digits{flex:0 1 auto;gap:2px}
.pay-screen.back .pay-entry input{width:auto;max-width:200px;color:var(--plate-wait)}
.pay-screen.back .pay-scale i{background:var(--plate-wait)}
/* Сверх принятого — запрет, и он звучит как запрет: тон тревоги и
   тот же кружок, что у остальных состояний. */
.pay-status.over i{background:var(--late)}
.pay-status.over b{color:var(--plate-late)}

/* Причина стоит полем на бумаге, а не в свёртке: у ушедших денег это
   единственное объяснение. */
.pay-why{display:block;margin-top:16px}
.pay-why>span{
  display:block;margin-bottom:6px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.pay-why input{width:100%}

/* Дверь между направлениями — тихая строка, а не кнопка: она не
   действие, а переход, и стоять рядом с «Принять» ей нельзя. */
.pay-door{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  padding:6px 9px;margin-left:-9px;border-radius:var(--r-sm);
  font-size:12px;color:var(--ink-3);
  transition:background-color var(--t-tap) var(--ease), color var(--t-tap) var(--ease);
}
.pay-door svg{width:14px;height:14px;opacity:.8}
@media (hover:hover) and (pointer:fine){
  .pay-door:hover{background:var(--sunk);color:var(--ink)}
}
.pay-door:active{transform:scale(.98)}
.pay-door:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* Подтверждение спрашивает сама кнопка. Вопрос и оба ответа стоят на
   месте кнопки, «нет» так же близко, как «да», и третьего слоя поверх
   второго не появляется. */
.pay-sure{display:flex;align-items:center;gap:8px;animation:paySure 160ms var(--ease) both}
.pay-sure b{
  margin-right:2px;font-size:12.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;
}
.pay-sure{flex:1 1 auto;justify-content:flex-end}
.pay-sure .btn{flex:0 0 auto;padding-left:16px;padding-right:16px}
@keyframes paySure{from{opacity:0;transform:translateY(3px)}}

@media (prefers-reduced-motion:reduce){
  .pay-stamp,.pay-sure{animation:none}
  .pay-door:active{transform:none}
}