/* ============================================================
   MODAL — центр (desktop) / bottom-sheet (phone) / drawer (Rule R9)
   Розмітка:
   <div class="modal" id="..." aria-hidden="true">
     <div class="modal__overlay" data-close></div>
     <div class="modal__dialog" role="dialog" aria-modal="true"> ... </div>
   </div>
   data-modal-variant="center" | "drawer"
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-4);
  visibility:hidden; pointer-events:none;
}
.modal.is-open{ visibility:visible; pointer-events:auto; }

.modal__overlay{
  position:absolute; inset:0;
  background:rgba(14,18,27,.5);
  backdrop-filter:blur(4px);            /* блюр фону (Rule R9) */
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.modal.is-open .modal__overlay{ opacity:1; }

.modal__dialog{
  position:relative; z-index:1;
  width:100%; max-width:480px; max-height:calc(100dvh - var(--space-8));
  background:var(--bg-surface);
  border:1px solid var(--stroke);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modal.is-open .modal__dialog{ opacity:1; transform:translateY(0) scale(1); }
.modal__dialog--sm{ max-width:400px; }
.modal__dialog--lg{ max-width:640px; }

/* Хедер/боді/футер модалки */
.modal__header{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-5) var(--space-5) var(--space-4);
}
.modal__header-icon{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--radius-lg); background:var(--bg-subtle); border:1px solid var(--stroke);
  color:var(--text-sub);
}
.modal__header-icon--danger{ background:var(--error-tint); border-color:var(--error-tint); color:var(--error-base); }
.modal__titles{ min-width:0; flex:1; }
.modal__title{ font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--text-strong); }
.modal__subtitle{ font-size:var(--text-sm); color:var(--text-soft); margin-top:2px; }
.modal__close{ margin-left:auto; }
/* Заголовок усередині тіла (скролиться), на всю ширину + бордер знизу */
.modal__lead{
  display:flex; align-items:flex-start; gap:var(--space-3);
  margin:0 calc(-1 * var(--space-5));
  padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--stroke-soft);
}
/* Тіло скролиться, коли модалка вища за екран (і на ПК теж), а хедер/футер лишаються.
   Смугу скрола ховаємо (scrollbar-width:none + ::-webkit-scrollbar:0) — скрол є, смуги не видно. */
.modal__body{ padding:0 var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--gap-block);
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; }
.modal__body::-webkit-scrollbar{ width:0; height:0; }
.modal__header, .modal__footer{ flex:0 0 auto; }

/* R32 — модалка-форма: сірий фон body + білі блоки-картки + біла шапка; іконку розділа ховаємо тут (не правимо кожну розмітку) */
.modal--carded .modal__body{ background:var(--bg-page); padding:var(--space-2) var(--space-4) var(--space-4); }
.modal--carded .modal__lead{ background:var(--bg-surface); margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0; padding:var(--space-4); }
.modal--carded .modal__header-icon{ display:none; }                       /* без іконки розділа зліва від заголовка (R32) */
.modal--carded .modal__lead .icon-btn,
.modal--carded .modal__header .icon-btn{ background:var(--bg-subtle); border-radius:var(--radius-circle); }   /* ← / × — сірий круглий фон */
.modal--carded .modal__lead .icon-btn:hover,
.modal--carded .modal__header .icon-btn:hover{ background:var(--bg-hover); }
.modal--carded .form-section{ background:var(--bg-surface); border:1px solid var(--stroke-soft); border-radius:var(--radius-xl); box-shadow:var(--shadow-xs); padding:var(--space-4); }

.modal__footer{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--stroke-soft); background:var(--bg-subtle);
}
.modal__footer--spread{ justify-content:space-between; }
/* 3+ кнопок: другорядну (першу — «В чернетку») виносимо окремим рядком зверху на всю ширину, решта рівно нижче */
.modal__footer--stacktop > :first-child{ flex:1 1 100%; order:-1; justify-content:center; }
.modal__footer--stacktop > :not(:first-child){ flex:1 1 0; justify-content:center; }
/* до трьох кнопок у ряд на всю ширину; останній ряд рівно розподіляється (2 → по 50%),
   приховані [hidden] не займають місця */
.modal__footer--grid3{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.modal__footer--grid3 .btn{ flex:1 1 calc(33.333% - var(--space-2)); justify-content:center; }
.modal__footer--grid3 [hidden]{ display:none; }

/* ---------- Перегляд товару: hero-картка ---------- */
.view-hero{
  display:flex; gap:var(--space-4); align-items:center;
  padding:var(--space-4);
  background:linear-gradient(135deg, var(--primary-50), var(--bg-subtle));
  border:1px solid var(--stroke-soft); border-radius:var(--radius-xl);
}
.view-hero__imgwrap{
  flex:0 0 auto; width:96px; height:96px; display:grid; place-items:center; overflow:hidden;
  background:#fff; border:1px solid var(--stroke-soft); border-radius:var(--radius-lg);
}
.view-hero__img{ width:100%; height:100%; object-fit:contain; }
.view-hero__main{ min-width:0; display:flex; flex-direction:column; gap:var(--space-2); }
.view-hero__cat{ align-self:flex-start; }
.view-hero__name{ font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--text-strong); line-height:1.25; }
.view-hero__price{ font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--primary); }
.view-hero__unit{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-soft); margin-left:4px; }
.view-hero__badges{ display:flex; gap:var(--space-2); flex-wrap:wrap; }

/* ---------- Перегляд товару: кольорові плитки показників ---------- */
.view-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.view-stat{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3); border:1px solid var(--stroke-soft); border-radius:var(--radius-lg);
  background:var(--bg-surface);
}
.view-stat__icon{ flex:0 0 auto; width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--bg-subtle); color:var(--text-sub); }
.view-stat__icon .icon{ width:18px; height:18px; }
.view-stat__txt{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.view-stat__k{ font-size:var(--text-xs); color:var(--text-soft); }
.view-stat__v{ font-size:var(--text-md); font-weight:var(--fw-semibold); color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.view-stat--primary .view-stat__icon{ background:var(--primary-50); color:var(--primary); }
.view-stat--green .view-stat__icon{ background:var(--success-tint); color:var(--success-base); }
.view-stat--amber .view-stat__icon{ background:var(--warning-tint); color:var(--warning-base); }
.view-stat--blue .view-stat__icon{ background:var(--info-tint); color:var(--info-base); }
.view-stat--violet .view-stat__icon{ background:var(--purple-tint); color:var(--purple-base); }

/* ---------- Підтвердження (видалення тощо) ---------- */
.confirm{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-3); padding:var(--space-3) var(--space-2) var(--space-1); }
.confirm__icon{ width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--radius-xl); background:var(--bg-subtle); color:var(--text-sub); }
.confirm__icon .icon{ width:24px; height:24px; }
.confirm__icon--danger{ background:var(--error-tint); color:var(--error-base); }
.confirm__title{ font-size:var(--text-lg); font-weight:var(--fw-semibold); color:var(--text-strong); }
.confirm__text{ font-size:var(--text-sm); color:var(--text-soft); line-height:1.5; }

/* ---------- DRAWER (виїжджає справа) ---------- */
.modal[data-modal-variant="drawer"]{ justify-content:flex-end; padding:0; }
.modal[data-modal-variant="drawer"] .modal__dialog{
  max-width:440px; width:440px; height:100dvh; max-height:100dvh;
  border-radius:0; border-right:none; border-top:none; border-bottom:none;
  transform:translateX(24px);
}
.modal[data-modal-variant="drawer"].is-open .modal__dialog{ transform:translateX(0); }
.modal[data-modal-variant="drawer"] .modal__body{ flex:1; }

/* ---------- ТЕЛЕФОН (Rule R9) ----------
   Звичайні (center) модалки — bottom-sheet знизу.
   Drawer (форм багато) — повноекранна бічна панель справа. */
@media (max-width:640px){
  /* center → bottom-sheet */
  .modal:not([data-modal-variant="drawer"]){ align-items:flex-end; padding:0; }
  .modal:not([data-modal-variant="drawer"]) .modal__dialog{
    max-width:100%; width:100%; height:auto;
    max-height:90vh;                              /* 90% (Rule R9) */
    border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
    border-bottom:none;
    transform:translateY(100%);
  }
  .modal:not([data-modal-variant="drawer"]).is-open .modal__dialog{ transform:translateY(0); }
  /* тіло bottom-sheet скролиться (хедер/футер лишаються), щоб довгий контент і кнопки були доступні */
  .modal:not([data-modal-variant="drawer"]) .modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal:not([data-modal-variant="drawer"]) .modal__header,
  .modal:not([data-modal-variant="drawer"]) .modal__footer{ flex:0 0 auto; }
  /* «ручка» зверху як на iOS */
  .modal:not([data-modal-variant="drawer"]) .modal__dialog::before{
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:99px; background:var(--neutral-300);
  }
  .modal:not([data-modal-variant="drawer"]) .modal__header{ padding-top:var(--space-6); }

  /* drawer → повноекранна бічна панель */
  .modal[data-modal-variant="drawer"] .modal__dialog{
    width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; transform:translateX(100%);
  }
  .modal[data-modal-variant="drawer"].is-open .modal__dialog{ transform:translateX(0); }
}

/* Блокуємо скрол сторінки під модалкою.
   scrollbar-gutter:stable на <html> тримає місце смуги → без стрибка (Rule R17) */
html:has(.modal.is-open){ overflow:hidden; }
body.modal-open{ overflow:hidden; }

/* Список «на цей номер уже є замовлення» у Confirm — номери клікабельні (відкриваються в новій вкладці) */
.dup-list{ display:flex; flex-direction:column; gap:var(--space-1); margin:var(--space-2) 0 0; text-align:left; }
.dup-row{ flex-wrap:wrap; row-gap:4px;
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  border:1px solid var(--stroke-soft); background:var(--bg-surface);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dup-row:hover{ border-color:var(--primary); background:var(--primary-tint); }
.dup-row__head{ display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; }
.dup-row__n{ font-weight:var(--fw-semibold); color:var(--primary); white-space:nowrap; }
.dup-row__goods{ width:100%; font-size:var(--text-xs); line-height:1.35; color:var(--text-sub); }
.dup-row__goods b{ color:var(--text-strong); white-space:nowrap; }
.dup-row__m{ flex:1 1 auto; min-width:0; font-size:var(--text-xs); color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dup-row .icon{ width:14px; height:14px; color:var(--text-soft); flex:0 0 auto; }
.dup-row:hover .icon{ color:var(--primary); }
.dup-ask{ margin:var(--space-3) 0 0; }