/* Окно «заказ оплачен» — экран после оплаты фотокниги (Э5).
   Канон: .planning/features/loyalty-club.md §5.5, решения приёмки 26.08.

   ⚠️ Отдельный файл, а не правила в style.css, по одной причине: окно показывается на ДВУХ
   поверхностях, и лендинговый кабинет (fotokniga-kabinet.html) style.css не грузит вовсе —
   там нет ни одного правила .fmodal. Тащить туда 13 784 строки ради окна — тот же плохой
   обмен, из-за которого 23.08 отказались от тоста на этой странице.

   Класс .fmodal НЕ переиспользуется намеренно: на Мастерской он уже определён в style.css,
   и второе определение тех же классов здесь перебивало бы правила окон редактора. Свой
   префикс .opm-* живёт рядом с ними, ничего не задевая.

   Числа — те же, что у fmodal (стандарт модалок 20_Wiki/design-standards/modals-dialogs.md):
   ширина min(560px,100vw-32px), радиус 12, заголовок 22/28, тело 16/24, кнопка 44px,
   карточка 200мс scale .96→1. Подложка прозрачная — как у всех окон редактора. */

.opm {
  position: fixed; inset: 0; z-index: 10040;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.opm__scrim { position: absolute; inset: 0; background: transparent; }
.opm__card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.32);
  overflow: hidden;
  animation: opmCard 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
@keyframes opmCard { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: none } }

.opm__head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 0 24px;
}
/* Значок информационного окна — рисунок оператора. Круглой плашки под ним нет: рисунок сам
   круглый, и кружок давал второй контур вокруг первого (приёмка 26.08). Место 40px совпадает
   с прежним кружком fmodal, поэтому шапка стоит на той же высоте. */
.opm__icon {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.opm__icon img { width: 36px; height: 36px; display: block; }

/* font-family задан ЯВНО: без него заголовок наследует заголовочный шрифт страницы и
   приезжает Playfair — нечитаемый для 40+ и запрещённый в UI-хроме
   (kb/playfair-var-serif-fallback-trap.md). */
.opm__title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: inherit;
  font-size: 22px; line-height: 28px; font-weight: 600; color: #2a201a;
}
/* Крестик 44×44 — тач-цель, крупнее минимума WCAG 24×24 */
.opm__close {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -10px -10px 0 0;
  border: none; background: none; color: #6b5d4a;
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.opm__close:hover { background: #f2ece2; color: #2a201a; }
.opm__close:focus-visible { outline: 3px solid #b8652a; outline-offset: 2px; }

.opm__body {
  padding: 12px 24px 4px;
  overflow-y: auto;
  font-size: 16px; line-height: 24px; color: #3d3427;
}
.opm__body p { margin: 0 0 12px; }
.opm__body p:last-child { margin-bottom: 0; }

/* Плашка нового уровня */
.opm__tier {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 12px; padding: 14px 16px;
  background: #faf4f0;
  border: 1px solid rgba(28,20,16,0.12);
  border-radius: 10px;
}
.opm__tier-badge { flex: 0 0 auto; width: 56px; height: 56px; display: block; }
.opm__tier-text { min-width: 0; }
.opm__tier-kicker {
  margin: 0 0 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #b8652a;
}
.opm__tier-level { margin: 0; font-size: 17px; font-weight: 600; line-height: 22px; color: #2a201a; }
.opm__tier-pct { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: #5c4e3f; }

.opm__track { font-size: 15px; line-height: 22px; color: #5c4e3f; }
.opm__track a { color: #b8652a; }

.opm__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px 20px;
}
.opm__btn {
  font: inherit; font-size: 15px; font-weight: 500;
  min-height: 44px; padding: 0 20px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent;
  background: #b8652a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.opm__btn:hover { background: #a25822; }
.opm__btn:focus-visible { outline: 3px solid #b8652a; outline-offset: 2px; }

@media (max-width: 599px) {
  .opm__head { padding: 16px 16px 0 18px; }
  .opm__body { padding: 10px 18px 4px; }
  .opm__foot { flex-direction: column; padding: 14px 18px 18px; }
  .opm__btn { width: 100%; }
  /* Медальон над текстом: рядом с ним на 360px подпись уровня ломалась бы по слогам */
  .opm__tier { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .opm__card { animation: none; }
}