/* Небольшой добор utility-классов, которых не было в вырезанном из сайта site.css
   (та CSS собрана Tailwind только под ОДНУ акционную страницу, поэтому в ней нет
   всего необходимого нам набора классов). Использует те же CSS-переменные/токены,
   что и site.css, чтобы визуально всё было в едином стиле. */

.mt-1{margin-top:calc(var(--spacing)*1)}
.mt-2{margin-top:calc(var(--spacing)*2)}
.mt-3{margin-top:calc(var(--spacing)*3)}
.mt-4{margin-top:calc(var(--spacing)*4)}
.mt-6{margin-top:calc(var(--spacing)*6)}
.mt-8{margin-top:calc(var(--spacing)*8)}

.mb-1{margin-bottom:calc(var(--spacing)*1)}
.mb-2{margin-bottom:calc(var(--spacing)*2)}
.mb-3{margin-bottom:calc(var(--spacing)*3)}
.mb-4{margin-bottom:calc(var(--spacing)*4)}
.mb-6{margin-bottom:calc(var(--spacing)*6)}
.mb-8{margin-bottom:calc(var(--spacing)*8)}

.space-y-1>*+*{margin-top:calc(var(--spacing)*1)}
.space-y-2>*+*{margin-top:calc(var(--spacing)*2)}
.space-y-3>*+*{margin-top:calc(var(--spacing)*3)}
.space-y-4>*+*{margin-top:calc(var(--spacing)*4)}
.space-y-6>*+*{margin-top:calc(var(--spacing)*6)}
.space-x-2>*+*{margin-left:calc(var(--spacing)*2)}
.space-x-4>*+*{margin-left:calc(var(--spacing)*4)}

.text-destructive{color:var(--destructive)}
.border-destructive{border-color:var(--destructive)}
.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}
.bg-secondary\/60{background-color:color-mix(in oklab,var(--secondary) 60%,transparent)}

.hover\:underline:hover{text-decoration-line:underline}
.hover\:opacity-80:hover{opacity:.8}

.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.aspect-video{aspect-ratio:16/9}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}

.sticky{position:sticky}
.top-0{top:0}

.badge{
  display:inline-flex;align-items:center;gap:calc(var(--spacing)*1);
  border-radius:3.40282e38px;padding-inline:calc(var(--spacing)*2.5);
  padding-block:calc(var(--spacing)*.5);font-size:var(--text-xs);
  font-weight:var(--font-weight-medium);
  background-color:var(--secondary);color:var(--secondary-foreground);
}
.badge-active{background-color:var(--color-green-700);color:#fff}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:calc(var(--radius) - 2px);
  padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);
  font-size:var(--text-sm);font-weight:var(--font-weight-medium);
  transition-property:color,background-color,border-color,box-shadow;
  transition-duration:.15s;cursor:pointer;border:none;
}
.btn-primary{background-image:linear-gradient(to bottom,var(--color-orange-500),var(--color-orange-600));color:#fff;box-shadow:var(--tw-shadow,0 1px 3px 0 #0000001a)}
.btn-primary:hover{background-color:color-mix(in oklab,var(--color-orange-600) 85%,transparent)}
.btn-secondary{background-color:var(--secondary);color:var(--secondary-foreground)}
.btn-secondary:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}
.btn-outline{background-color:transparent;border:1px solid var(--border);color:var(--foreground)}
.btn-outline:hover{background-color:var(--accent)}
.btn-block{width:100%}

.tab-link{
  display:inline-flex;align-items:center;border-radius:calc(var(--radius) - 2px);
  padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*1.5);
  font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--muted-foreground);
}
.tab-link.active{background-color:var(--secondary);color:var(--secondary-foreground)}

.card{
  border-radius:var(--radius);border:1px solid var(--border);
  background-color:var(--card);color:var(--card-foreground);
  box-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
}

/* ---------------------------------------------------------------------------
   Акции: сетка карточек с картинками (как в референсном веб-клиенте)
   --------------------------------------------------------------------------- */

.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--spacing)*3)}
@media (min-width:640px){.offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.offer-card{
  display:flex;flex-direction:column;text-align:left;overflow:hidden;
  border-radius:calc(var(--radius) + 4px);border:1px solid var(--border);
  background-color:var(--card);color:var(--card-foreground);cursor:pointer;
  box-shadow:0 1px 3px 0 #0000001a;padding:0;
  transition:transform .15s ease,box-shadow .15s ease;
}
.offer-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px #00000026}
.offer-card:active{transform:translateY(0) scale(.99)}
.offer-card:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.offer-thumb{
  position:relative;width:100%;aspect-ratio:1/1;
  background:linear-gradient(160deg,#fff 0%,#f6f6f7 100%);
}
.offer-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.offer-thumb .badge{position:absolute;left:calc(var(--spacing)*2);top:calc(var(--spacing)*2)}

.offer-info{padding:calc(var(--spacing)*3);display:flex;flex-direction:column;gap:calc(var(--spacing)*1)}
.offer-name{
  font-size:var(--text-sm);font-weight:var(--font-weight-semibold);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.offer-sub{
  font-size:var(--text-xs);color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------------------------------------------------------------------------
   Bottom sheet (аналог vaul из референса)
   --------------------------------------------------------------------------- */

.sheet{position:fixed;inset:0;z-index:50;display:none}
.sheet.open{display:block}

.sheet-overlay{
  position:absolute;inset:0;background:#00000066;opacity:0;
  transition:opacity .25s ease;
}
.sheet.shown .sheet-overlay{opacity:1}

.sheet-panel{
  position:absolute;left:0;right:0;bottom:0;margin-inline:auto;
  width:100%;max-width:var(--container-xl,36rem);
  max-height:92vh;display:flex;flex-direction:column;
  background:var(--background,#fff);
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px -12px #00000040;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
.sheet.shown .sheet-panel{transform:translateY(0)}
.sheet-panel.dragging{transition:none}

.sheet-handle-area{padding-bottom:calc(var(--spacing)*2);cursor:grab;touch-action:none;flex-shrink:0}
.sheet-handle-area:active{cursor:grabbing}
.sheet-handle{margin:calc(var(--spacing)*3) auto 0;height:6px;width:100px;border-radius:9999px;background:#c9c9c9}

.sheet-body{
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 calc(var(--spacing)*4) calc(var(--spacing)*6);
}

.sheet-hero{
  width:100%;aspect-ratio:16/10;border-radius:calc(var(--radius) + 2px);
  background:linear-gradient(160deg,#fff 0%,#f4f4f5 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sheet-hero img{width:100%;height:100%;object-fit:contain}

.sheet-title{font-size:var(--text-xl);font-weight:var(--font-weight-bold);line-height:1.2}
.sheet-sub{font-size:var(--text-sm);color:var(--muted-foreground)}
.sheet-text{font-size:var(--text-sm);white-space:pre-line;color:var(--foreground)}

.sheet-actions{
  position:sticky;bottom:0;
  padding-top:calc(var(--spacing)*3);
  background:linear-gradient(to top,var(--background,#fff) 70%,transparent);
}

/* Выбор товара внутри акции */
.choice-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing)*2)}
.choice{
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing)*1);
  padding:calc(var(--spacing)*2);border-radius:calc(var(--radius));
  border:2px solid var(--border);background:var(--card);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.choice:hover{background:var(--accent)}
.choice.selected{border-color:var(--color-orange-600);background:color-mix(in oklab,var(--color-orange-500) 8%,transparent)}
.choice img{width:100%;aspect-ratio:1/1;object-fit:contain}
.choice-name{
  font-size:11px;line-height:1.2;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.choice-fixed{display:flex;align-items:center;gap:calc(var(--spacing)*3)}
.choice-fixed img{width:44px;height:44px;object-fit:contain;flex-shrink:0}

/* Экран QR внутри шита */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing)*4)}
.qr-img{
  width:62%;max-width:260px;height:auto;padding:calc(var(--spacing)*3);
  background:#fff;border-radius:calc(var(--radius) + 2px);border:1px solid var(--border);
}
.qr-hint{max-width:22rem;text-align:center;font-size:var(--text-sm);color:var(--muted-foreground)}
.qr-or{display:flex;align-items:center;gap:calc(var(--spacing)*3);width:100%;color:var(--muted-foreground)}
.qr-or::before,.qr-or::after{content:"";height:1px;flex:1;background:var(--border)}
.qr-code{
  font-size:var(--text-4xl);font-weight:var(--font-weight-bold);
  color:var(--color-gray-700,#374151);letter-spacing:.12em;text-align:center;
}
.qr-note{font-size:var(--text-xs);color:var(--muted-foreground);text-align:center}
.qr-reused{
  font-size:var(--text-xs);text-align:center;
  color:var(--color-green-700);font-weight:var(--font-weight-medium);
}

.spinner{
  width:28px;height:28px;border-radius:9999px;
  border:3px solid var(--border);border-top-color:var(--color-orange-600);
  animation:spin .8s linear infinite;margin:calc(var(--spacing)*8) auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

.sheet-error{
  border-radius:var(--radius);padding:calc(var(--spacing)*3);
  background-color:color-mix(in oklab,var(--destructive) 10%,transparent);
  color:var(--destructive);font-size:var(--text-sm);text-align:center;
}

body.sheet-open{overflow:hidden}

/* ---------------------------------------------------------------------------
   История бонусов
   --------------------------------------------------------------------------- */

.tx-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:calc(var(--spacing)*3);padding:calc(var(--spacing)*3);
}
.tx-row + .tx-row{border-top:1px solid var(--border)}
.tx-main{min-width:0}
.tx-title{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);line-height:1.3}
.tx-sub{
  font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tx-date{font-size:11px;color:var(--muted-foreground);margin-top:2px}
.tx-amount{
  font-size:var(--text-base);font-weight:var(--font-weight-bold);
  white-space:nowrap;color:var(--muted-foreground);
}
.tx-amount.positive{color:var(--color-green-700)}

/* ---------------------------------------------------------------------------
   Заказы
   --------------------------------------------------------------------------- */

.order-num{font-size:var(--text-base);font-weight:var(--font-weight-bold)}
.order-address{font-size:var(--text-sm);color:var(--muted-foreground);margin-top:calc(var(--spacing)*2)}

.order-items{
  margin-top:calc(var(--spacing)*3);padding-top:calc(var(--spacing)*3);
  border-top:1px solid var(--border);display:flex;flex-direction:column;gap:calc(var(--spacing)*2);
}
.order-item{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing)*3)}
.order-item-name{font-size:var(--text-sm);min-width:0}
.order-item-price{font-size:var(--text-sm);color:var(--muted-foreground);white-space:nowrap}
.order-extras{display:flex;flex-wrap:wrap;gap:calc(var(--spacing)*1);margin-top:2px}
.order-extras span{
  font-size:11px;color:var(--muted-foreground);
  background:var(--secondary);border-radius:9999px;
  padding:1px calc(var(--spacing)*2);
}

.order-footer{
  margin-top:calc(var(--spacing)*3);padding-top:calc(var(--spacing)*3);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing)*3);
}
.order-meta{display:flex;flex-wrap:wrap;gap:calc(var(--spacing)*2);font-size:var(--text-xs);color:var(--muted-foreground)}
.order-total{font-size:var(--text-lg);font-weight:var(--font-weight-bold);white-space:nowrap}

.badge-st-done{background-color:var(--color-green-700);color:#fff}
.badge-st-active{background-image:linear-gradient(to bottom,var(--color-orange-500),var(--color-orange-600));color:#fff}
.badge-st-error{background-color:color-mix(in oklab,var(--destructive) 12%,transparent);color:var(--destructive)}

.text-green-700{color:var(--color-green-700)}
.mt-2{margin-top:calc(var(--spacing)*2)}
.min-w-0{min-width:0}

/* ---------------------------------------------------------------------------
   Меню / корзина / оплата
   --------------------------------------------------------------------------- */

.offer-price{font-size:var(--text-sm);font-weight:var(--font-weight-bold)}
.choice-extra{font-size:10px;color:var(--muted-foreground)}

/* шаг +/- для количества и ингредиентов */
.stepper{display:inline-flex;align-items:center;gap:calc(var(--spacing)*2);flex-shrink:0}
.stepper-btn{
  width:30px;height:30px;border-radius:9999px;border:1px solid var(--border);
  background:var(--card);font-size:var(--text-base);line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.stepper-btn:disabled{opacity:.35;cursor:default}
.stepper-btn:not(:disabled):hover{background:var(--accent)}
.stepper-val{min-width:18px;text-align:center;font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}

.ing-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--spacing)*3);padding:calc(var(--spacing)*2) 0;
}
.ing-row + .ing-row{border-top:1px solid var(--border)}
.ing-left{display:flex;align-items:center;gap:calc(var(--spacing)*3);min-width:0}
.ing-left img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.ing-name{font-size:var(--text-sm)}

/* список ресторанов */
.store-list{display:flex;flex-direction:column;gap:calc(var(--spacing)*2);max-height:60vh;overflow-y:auto}
.store-item{
  text-align:left;padding:calc(var(--spacing)*3);border-radius:var(--radius);
  border:1px solid var(--border);background:var(--card);cursor:pointer;
}
.store-item:hover{background:var(--accent)}
.store-item.selected{border-color:var(--color-orange-600);border-width:2px}
.store-addr{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.store-name{font-size:var(--text-xs);color:var(--muted-foreground)}

/* корзина */
.cart-row{
  display:flex;align-items:center;gap:calc(var(--spacing)*3);
  padding:calc(var(--spacing)*3) 0;
}
.cart-row + .cart-row{border-top:1px solid var(--border)}
.cart-img{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.cart-mid{flex:1;min-width:0}
.cart-name{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}
.cart-mods{font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px}
.cart-right{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--spacing)*2);flex-shrink:0}
.cart-price{font-size:var(--text-sm);font-weight:var(--font-weight-bold);white-space:nowrap}

.search-input{
  width:100%;border-radius:calc(var(--radius) - 2px);border:1px solid var(--input,var(--border));
  background:var(--background,#fff);padding:calc(var(--spacing)*2) calc(var(--spacing)*3);
  font-size:var(--text-sm);
}
.search-input:focus{outline:2px solid var(--ring);outline-offset:1px}
.search-input[hidden]{display:none}

.cart-total{
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--text-lg);font-weight:var(--font-weight-bold);
  margin-bottom:calc(var(--spacing)*3);
}

/* плавающая кнопка корзины */
.cart-fab{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--spacing)*4);
  z-index:40;display:flex;align-items:center;gap:calc(var(--spacing)*3);
  padding:calc(var(--spacing)*3) calc(var(--spacing)*6);border:none;cursor:pointer;
  border-radius:9999px;color:#fff;font-weight:var(--font-weight-semibold);
  background-image:linear-gradient(to bottom,var(--color-orange-500),var(--color-orange-600));
  box-shadow:0 8px 24px -6px #00000059;
}
.cart-fab[hidden]{display:none}

/* карточка «оплатите заказ» */
.pay-banner{
  position:sticky;top:0;z-index:30;
  margin:0 auto;max-width:var(--container-xl,36rem);
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing)*3);
  padding:calc(var(--spacing)*3) calc(var(--spacing)*4);
  background:color-mix(in oklab,var(--color-orange-500) 12%,#fff);
  border-bottom:1px solid color-mix(in oklab,var(--color-orange-600) 30%,transparent);
}
.pay-title{font-size:var(--text-sm);font-weight:var(--font-weight-bold)}
.pay-sub{font-size:var(--text-xs);color:var(--muted-foreground)}

/* админка */
.acc-link{
  display:flex;align-items:center;gap:calc(var(--spacing)*2);
  padding:calc(var(--spacing)*2) calc(var(--spacing)*3);
  border-radius:calc(var(--radius) - 2px);background:var(--secondary);
}
.acc-link a{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono,monospace);font-size:var(--text-xs);
}
.acc-link a:hover{text-decoration:underline}
.w-full{width:100%}
.flex-1{flex:1}

/* консоль логов админки */
.log-panel{
  border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;
  background:#0f1115;color:#e6e6e6;font-size:var(--text-xs);
  font-family:var(--font-mono,ui-monospace,monospace);
}
.log-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--spacing)*2) calc(var(--spacing)*3);
  background:#171a21;color:#9aa4b2;font-weight:var(--font-weight-semibold);
}
.log-close{background:none;border:none;color:#9aa4b2;font-size:16px;cursor:pointer;line-height:1}
.log-row{
  display:flex;gap:calc(var(--spacing)*2);align-items:flex-start;
  padding:calc(var(--spacing)*2) calc(var(--spacing)*3);
  border-top:1px solid #1e222b;
}
.log-ico{width:14px;flex-shrink:0;text-align:center}
.log-main{min-width:0}
.log-text{white-space:pre-wrap;word-break:break-word}
.log-detail{color:#8b95a3;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.log-ok .log-ico{color:#4ade80}
.log-fail .log-ico{color:#f87171}
.log-fail .log-text{color:#fca5a5}
.log-info .log-ico{color:#7c8794}
.log-run .log-text{color:#9aa4b2}
.log-run .log-ico::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:9999px;
  border:2px solid #3a4150;border-top-color:#e6e6e6;animation:spin .8s linear infinite;
}

.btn.is-busy{opacity:.7;cursor:progress}