/* Попъп „Поръчка за печат" — три стъпки: преглед → доставка → плащане.
   Размерът и рамката повтарят попъпа за плащане, за да е един и същ свят. */

.mxp-modal{ position:fixed; inset:0; z-index:99990; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(8,10,14,.74); backdrop-filter:blur(3px); }
.mxp-modal.is-on{ display:flex; }

.mxp-box{ width:min(1160px, 100%); max-height:min(90vh, 900px); display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden; background:#161922; color:#e8ecf3;
  border:1px solid rgba(255,255,255,.10); box-shadow:0 46px 100px -34px rgba(0,0,0,.92); }

.mxp-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.mxp-head h3{ margin:0; font-size:16px; font-weight:900; letter-spacing:.1px; }
.mxp-head .sp{ flex:1 1 auto; }
.mxp-x{ width:32px; height:32px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:#e8ecf3; font-size:17px; line-height:1; }
.mxp-x:hover{ background:rgba(255,255,255,.18); }

/* ── Стъпките ─────────────────────────────────────────────────────────────── */
.mxp-steps{ flex:0 0 auto; display:flex; gap:0; padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.mxp-step{ flex:1 1 0; display:flex; align-items:center; gap:9px; padding:13px 8px;
  font-size:13px; font-weight:700; color:#7d8698; border-bottom:2px solid transparent; }
.mxp-step .n{ width:23px; height:23px; flex:0 0 auto; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:#9aa4b2; font-size:12px; font-weight:900; }
.mxp-step.is-on{ color:#fff; border-bottom-color:#7c5cff; }
.mxp-step.is-on .n{ background:#7c5cff; color:#fff; }
.mxp-step.is-done{ color:#b9c2d4; }
.mxp-step.is-done .n{ background:#4ade80; color:#0f2417; }

.mxp-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:20px; }
.mxp-foot{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.mxp-foot .sp{ flex:1 1 auto; }
.mxp-total{ font-size:14px; font-weight:700; color:#c9d2e0; }
.mxp-total b{ font-size:19px; font-weight:900; color:#fff; margin-left:6px; }

.mxp-btn{ height:42px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7c5cff 0%,#5b8cff 100%);
  box-shadow:0 14px 30px -15px rgba(92,124,255,.95); }
.mxp-btn[disabled]{ opacity:.45; cursor:default; box-shadow:none; }
.mxp-btn-ghost{ height:42px; padding:0 18px; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; cursor:pointer; background:none; color:#c9d2e0;
  font-family:inherit; font-size:14px; font-weight:700; }

/* ── Стъпка 1: преглед ────────────────────────────────────────────────────── */
.mxp-1{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
@media (max-width: 860px){ .mxp-1{ grid-template-columns:1fr; } }

/* Книгата за преглед — ЧИСТА: само страниците, никакви чипове и бутони върху тях. */
.mxp-book{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.mxp-book-host{ position:relative; }
.mxp-book-host.is-plain{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mxp-book-host.is-plain img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:9px; }
.mxp-book-empty{ padding:26px; text-align:center; font-size:13px; color:#8b93a1; }
/* 🔴 БЕЗ position на самия лист: StPageFlip му задава absolute и всяко наше правило тук
   го изважда от него → листът изчезва при прелистване. Котвата е ВЪТРЕШНИЯТ слой. */
.mxp-page{ background:#fffefb; overflow:hidden; }
.mxp-page-in{ position:relative; width:100%; height:100%; }
.mxp-page img{ width:100%; height:100%; object-fit:cover; display:block; }
.mxp-page-in.is-half{ overflow:hidden; }
.mxp-page-in.is-half img{ position:absolute; top:0; width:200%; max-width:none; height:100%; }
.mxp-page-in.is-half-l img{ left:0; }
.mxp-page-in.is-half-r img{ left:-100%; }
.mxp-book-nav{ display:flex; align-items:center; gap:12px; font-size:12.5px; font-weight:700;
  color:#9aa4b2; }
.mxp-nav{ width:32px; height:32px; border:1px solid rgba(255,255,255,.16); border-radius:50%;
  cursor:pointer; background:rgba(255,255,255,.05); color:#e8ecf3; font-size:15px; line-height:1;
  font-family:inherit; }
.mxp-nav:hover{ background:rgba(255,255,255,.12); }

.mxp-sec{ margin-bottom:18px; }
.mxp-sec-t{ font-size:11px; font-weight:900; letter-spacing:.7px; text-transform:uppercase;
  color:#7d8698; margin-bottom:9px; }
.mxp-row{ display:flex; align-items:baseline; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:13.5px; }
.mxp-row:last-child{ border-bottom:0; }
.mxp-row .k{ flex:0 0 auto; min-width:160px; color:#8b93a1; font-weight:600; }
.mxp-row .v{ flex:1 1 auto; color:#eef1f6; font-weight:700; word-break:break-word; }
.mxp-row .v.dim{ color:#9aa4b2; font-weight:600; }
.mxp-hint{ margin-top:12px; font-size:11.5px; line-height:1.6; color:#7d8698; }

/* ── Стъпка 2: доставка — чиста, само изборът ─────────────────────────────── */
.mxp-dlv{ max-width:640px; margin:0 auto; padding-top:6px; }
/* Бутонът и избраното са две отделни неща — не бива да изглеждат залепени. */
.mxp-dlv .dlv-open{ margin-bottom:14px; }
.mxp-dlv-chosen{ display:none; padding:13px 15px; border-radius:13px;
  border:1px solid rgba(124,92,255,.45); background:rgba(124,92,255,.10);
  font-size:13.5px; line-height:1.6; }
.mxp-dlv-chosen.is-on{ display:block; }
.mxp-dlv-chosen b{ color:#fff; }
.mxp-dlv-clear{ display:block; margin-top:9px; border:0; background:none; padding:0; cursor:pointer;
  color:#a9b6ff; font-family:inherit; font-size:12px; font-weight:800; text-decoration:underline; }

/* ── Стъпка 3: сметка ─────────────────────────────────────────────────────── */
.mxp-bill{ max-width:520px; margin:0 auto; }
.mxp-bill-row{ display:flex; align-items:baseline; gap:12px; padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07); font-size:14px; }
.mxp-bill-row .k{ flex:1 1 auto; color:#c3cbe0; font-weight:600; }
.mxp-bill-row .k small{ display:block; margin-top:2px; font-size:11.5px; color:#8b93a1; font-weight:600; }
.mxp-bill-row .v{ flex:0 0 auto; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.mxp-bill-row.total{ border-bottom:0; margin-top:6px; padding-top:14px;
  border-top:2px solid rgba(255,255,255,.14); font-size:17px; }
.mxp-bill-row.total .k{ color:#fff; font-weight:900; }
.mxp-bill-row.total .v{ font-size:22px; font-weight:900; }
.mxp-bill-note{ margin-top:14px; font-size:12px; color:#8b93a1; line-height:1.6; text-align:center; }

/* ── Лявата колона на попъпа за плащане: карта → албум → сметка ──────────── */
.mxpay-side{ display:flex; flex-direction:column; gap:16px; align-items:stretch; }
/* Картата на матрицата е СТЕСНЕНА (тя е илюстрация), а всичко под нея — доставка,
   книга и сметка — върви по пълната ширина на колоната и е еднакво широко. */
/* Картата върви по същата ширина като доставката и сметката под нея — колоната се чете
   като едно цяло, вместо да започва с по-тесен елемент. */
.mxpay-card .mtx-card{ width:100%; max-width:none; margin:0; }
.mxpay-side > *{ width:100%; margin-left:0; margin-right:0; }
.mxpay-dlv{ box-sizing:border-box; }
.mxpay-book{ gap:8px; }
.mxpay-book .mxp-book-nav{ font-size:11.5px; }
.mxpay-book .mxp-nav{ width:27px; height:27px; font-size:13px; }
.mxpay-book .mxp-book-host{ margin:0 auto; }
.mxpay-side .mxp-bill{ max-width:none; }
.mxpay-side .mxp-bill-row{ padding:9px 0; font-size:13.5px; }
.mxpay-side .mxp-bill-row.total{ font-size:16px; }
.mxpay-side .mxp-bill-row.total .v{ font-size:20px; }

/* Доставката и връщането в лявата колона на плащането */
.mxpay-dlv{ padding:13px 15px; border-radius:13px;
  border:1px solid rgba(124,92,255,.42); background:rgba(124,92,255,.10);
  font-size:13px; line-height:1.6; color:#dfe5ef; }
.mxpay-dlv b{ color:#fff; }
.mxpay-dlv .mxp-sec-t{ margin-bottom:6px; }

/* Вграденият избор на доставка — методите с логата им най-отгоре */
.dlv-inline .dlv-methods{ margin-bottom:14px; }
.dlv-inline .dlv-method{ background:rgba(255,255,255,.04); }
/* 🔴 ТУК се задава височината на логото — това правило е по-специфично и надвива онова
   в picker.css. Гледай и двете, ако логото не се променя. */
.dlv-inline .dlv-method img{ height:32px; max-width:130px; padding:0; }
.dlv-inline .dlv-list{ max-height:250px; }
.dlv-inline .dlv-map{ min-height:250px; }

/* ══ ТЕЛЕФОН ═══════════════════════════════════════════════════════════════
   На телефон „плаващ прозорец" няма смисъл: полето е малко и всяко поле от
   рамката е изядено място. Попъпът става ЦЯЛ ЕКРАН, съдържанието — в една
   колона, а действието — широко и под палеца. */
@media (max-width: 760px){
  .mxp-modal{ padding:0; }
  .mxp-box{ width:100%; height:100%; max-height:100%; border-radius:0; border:0; }
  .mxp-head{ padding:12px 14px; }
  .mxp-head h3{ font-size:17px; }

  /* Трите пълни надписа се чупеха на по три реда и „Плащане" изобщо не се
     виждаше. Сега се четат номерата, а името — само на текущата стъпка. */
  .mxp-steps{ padding:0 14px; gap:10px; }
  .mxp-step{ flex:0 0 auto; padding:12px 0; font-size:18px; gap:8px;
    white-space:nowrap; }
  .mxp-step.is-on{ flex:1 1 auto; }
  .mxp-step .n{ width:32px; height:32px; font-size:16px; }
  .mxp-step-t{ display:none; }
  .mxp-step.is-on .mxp-step-t{ display:inline; }

  .mxp-body{ padding:14px; }
  .mxp-1{ gap:16px; }
  /* Вертикалният жест си остава скрол по стъпката; хоризонталният е за книгата. */
  .mxp-book-host{ max-width:100%; touch-action:pan-y; cursor:pointer; }
  /* Книгата се прелиства и тук — стрелките са едри, за пръст. */
  .mxp-book-nav{ font-size:16px; gap:16px; }
  .mxp-nav{ width:44px; height:44px; font-size:21px; }

  /* Редът „етикет / стойност" минава на ДВА реда: 160px за етикета не оставят
     място за стойността и тя изтичаше извън екрана. */
  .mxp-row{ flex-direction:column; align-items:stretch; gap:3px; padding:10px 0; }
  /* Всичко по стъпките е с ~30% по-едро: на телефон дребният десктопен шрифт
     се чете трудно, а тук човек проверява какво и за колко поръчва. */
  .mxp-row .k{ min-width:0; font-size:16px; }
  .mxp-row .v{ font-size:19px; }
  .mxp-sec-t{ font-size:15px; }
  .mxp-hint{ font-size:16px; }

  /* Долната лента: сумата на СВОЙ ред отгоре, бутоните — широки. */
  .mxp-foot{ flex-wrap:wrap; gap:10px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .mxp-foot .sp{ display:none; }
  .mxp-total{ order:-1; width:100%; font-size:19px; }
  .mxp-total b{ font-size:26px; }
  .mxp-btn{ flex:1 1 auto; height:52px; font-size:19px; padding:0 18px; }
  .mxp-btn-ghost{ flex:0 0 auto; height:52px; padding:0 20px; font-size:18px; }

  /* Сметката и изборът на доставка — по цялата ширина. */
  .mxp-bill, .mxp-dlv{ max-width:none; }
  .mxp-bill-row{ font-size:18px; }
  .mxp-bill-row .k small{ font-size:15px; }
  .mxp-bill-row.total{ font-size:21px; }
  .mxp-bill-row.total .v{ font-size:26px; }
  .mxp-bill-note{ font-size:15px; }
  /* Изборът на доставка е ЧАСТ от стъпка 2 — расте заедно с останалото. */
  .dlv-inline .dlv-tab{ font-size:16px; padding:9px 18px; }
  .dlv-inline .dlv-method .nm{ font-size:17.5px; }
  .dlv-inline .dlv-method .nt{ font-size:15px; }
  .dlv-inline .dlv-method .pr{ font-size:17px; }
  .dlv-inline .dlv-search,
  .dlv-inline .dlv-in{ height:46px; font-size:16.5px; }
  .dlv-inline .dlv-office .c{ font-size:14px; }
  .dlv-inline .dlv-office .n{ font-size:17px; }
  .dlv-inline .dlv-office .a{ font-size:15px; }
  .dlv-inline .dlv-empty, .dlv-inline .dlv-err{ font-size:16px; }
  .dlv-inline .dlv-more{ font-size:15px; }
  .dlv-inline .dlv-maptoggle{ height:50px; font-size:17px; }
  /* Без собствен скрол на списъка — стъпката се скролва като едно цяло. */
  .dlv-inline .dlv-list{ max-height:none; overflow:visible; }
  .dlv-inline .dlv-map{ min-height:260px; }
  .dlv-inline .dlv-method img{ height:30px; max-width:118px; }
}