/* ===================================================================
   НАЗАД К БЫВШЕМУ! — модуль рассадки
   Стилистика взята с лендинга back2ex.show (site/assets/css/style.css).
   Модуль самостоятельный: на лендинг не влияет и ничего оттуда не тянет.
   =================================================================== */

@font-face{
  font-family:'Unbounded';
  font-style:normal; font-weight:700 800; font-display:swap;
  src:url('../fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Unbounded';
  font-style:normal; font-weight:700 800; font-display:swap;
  src:url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Manrope';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root{
  --white:#ffffff;
  --cream:#FBF6EF;
  --black:#161311;
  --red:#E2231A;
  --red-dark:#B81810;
  --yellow:#FFC72C;
  --cardboard:#C9A46B;
  --ink-60:rgba(22,19,17,.62);
  --ink-40:rgba(22,19,17,.4);
  --line:rgba(22,19,17,.1);
  --shadow-sm:0 2px 10px rgba(22,19,17,.06);
  --shadow-md:0 8px 24px rgba(22,19,17,.10);
  --shadow-red:0 8px 20px rgba(226,35,26,.28);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --font-display:'Unbounded', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;

  /* цвета категорий — привязаны к цене, одинаково во всех залах */
  --cat-vip:#FFC72C;
  --cat-gold:#C9A46B;
  --cat-silver:#B0A3C4;
  --cat-standart:#8FBC9C;
  --seat-taken:#DAD3C9;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--black);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:6px;}

/* ---------- каркас ---------- */
.sm-app{display:flex;flex-direction:column;height:100dvh;}

.sm-header{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:12px 18px;background:var(--white);border-bottom:1px solid var(--line);
}
.sm-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sm-title h1{
  margin:0;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sm-title p{margin:0;font-size:13px;color:var(--ink-60);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sm-badge{
  flex:none;margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red-dark);background:rgba(226,35,26,.09);
  border:1px solid rgba(226,35,26,.22);border-radius:999px;padding:5px 10px;white-space:nowrap;
}
.sm-hall-switch{flex:none;display:flex;gap:4px;background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:3px;}
.sm-hall-switch button{
  border:0;background:transparent;color:var(--ink-60);cursor:pointer;
  font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.sm-hall-switch button[aria-pressed="true"]{background:var(--black);color:var(--white);}

.sm-main{flex:1;display:grid;grid-template-columns:1fr 330px;min-height:0;}

/* ---------- схема ---------- */
.sm-map{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--cream);}
.sm-map-head{
  flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--white);
}
.sm-count{font-size:13px;font-weight:700;color:var(--ink-60);}
.sm-count b{color:var(--black);}
.sm-map-actions{margin-left:auto;display:flex;gap:8px;}

.sm-stage-wrap{flex:1;position:relative;min-height:0;overflow:hidden;touch-action:none;}
#hall{width:100%;height:100%;display:block;cursor:grab;}
#hall.dragging{cursor:grabbing;}
#hall .stage-shape{fill:rgba(226,35,26,.10);stroke:var(--red);stroke-width:2.5;}
#hall .stage-label{font-family:var(--font-display);font-weight:700;fill:var(--red-dark);
  text-anchor:middle;letter-spacing:.14em;}
#hall .row-label{font-size:15px;font-weight:700;fill:var(--ink-40);text-anchor:middle;
  font-family:var(--font-body);}
#hall .table-shape{stroke:rgba(22,19,17,.22);stroke-width:2;}
#hall .table-shape.whole{cursor:pointer;}
#hall .table-shape.whole:hover{stroke:var(--red);stroke-width:3;}
#hall .table-label{font-size:17px;font-weight:800;fill:var(--ink-60);text-anchor:middle;
  font-family:var(--font-body);pointer-events:none;}
#hall .seat{cursor:pointer;stroke:rgba(22,19,17,.18);stroke-width:1.5;
  transition:transform .12s ease;transform-box:fill-box;transform-origin:center;}
#hall .seat:hover{transform:scale(1.14);}
#hall .seat.taken{fill:var(--seat-taken);cursor:not-allowed;stroke:rgba(22,19,17,.12);}
#hall .seat.taken:hover{transform:none;}
#hall .seat.selected{fill:var(--red);stroke:var(--red-dark);stroke-width:2.5;}
#hall .seat-num{font-weight:700;fill:rgba(22,19,17,.72);text-anchor:middle;
  font-family:var(--font-body);pointer-events:none;}
#hall .seat-num.on-selected{fill:var(--white);}
#hall .seat-mark{stroke:var(--white);stroke-width:2.6;fill:none;pointer-events:none;
  stroke-linecap:round;stroke-linejoin:round;}
#hall .seat-cross{stroke:rgba(22,19,17,.34);stroke-width:2;pointer-events:none;stroke-linecap:round;}

.sm-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;}
.sm-zoom button{
  width:40px;height:40px;backdrop-filter:blur(3px);border-radius:12px;border:1px solid var(--line);
  background:var(--white);box-shadow:var(--shadow-sm);cursor:pointer;
  font-size:20px;font-weight:700;color:var(--black);line-height:1;
  display:grid;place-items:center;
}
.sm-zoom button:hover{background:var(--cream);}

.sm-legend{
  flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;
  background:var(--white);border-top:1px solid var(--line);
}
.sm-chip{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ink-60);background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;
}
.sm-chip i{width:12px;height:12px;border-radius:50%;flex:none;
  border:1px solid rgba(22,19,17,.18);}
.sm-chip b{color:var(--black);font-weight:800;}

/* ---------- панель заказа ---------- */
.sm-order{
  display:flex;flex-direction:column;min-height:0;
  background:var(--white);border-left:1px solid var(--line);
}
.sm-order-head{
  flex:none;padding:16px 18px 10px;display:flex;align-items:baseline;gap:8px;
}
.sm-order-head h2{margin:0;font-family:var(--font-display);font-size:15px;font-weight:800;}
.sm-order-head span{font-size:13px;color:var(--ink-40);}
.sm-cart{flex:1;overflow-y:auto;padding:0 18px;display:flex;flex-direction:column;gap:9px;}
.sm-empty{color:var(--ink-40);font-size:14px;line-height:1.5;padding:6px 0 14px;}

.sm-item{
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;
  border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--radius-sm);padding:10px 12px;
}
.sm-item .where{font-weight:700;font-size:14px;}
.sm-item .cat{font-size:12px;color:var(--ink-40);text-transform:uppercase;letter-spacing:.06em;}
.sm-item .price{font-weight:800;font-size:14px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.sm-item .drop{
  grid-column:2;justify-self:end;border:0;background:none;color:var(--red-dark);
  font-size:12px;font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline;
}

.sm-summary{
  flex:none;padding:14px 18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;
}
.sm-line{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-60);
  font-variant-numeric:tabular-nums;}
.sm-line.total{font-size:17px;font-weight:800;color:var(--black);
  border-top:1px solid var(--line);padding-top:9px;}
.sm-hint{font-size:12px;color:var(--ink-40);line-height:1.45;}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:16px;border:none;border-radius:14px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--red);color:var(--white);padding:15px 22px;box-shadow:var(--shadow-red);}
.btn-primary:hover{background:var(--red-dark);}
.btn-primary[disabled]{background:var(--seat-taken);color:var(--ink-40);
  box-shadow:none;cursor:not-allowed;transform:none;}
.btn-outline{background:transparent;border:1.6px solid var(--black);color:var(--black);padding:13px 20px;}
.btn-outline:hover{background:rgba(22,19,17,.05);}
.btn-sm{padding:9px 14px;font-size:13.5px;border-radius:11px;}
.btn-wide{width:100%;padding:16px 22px;font-size:16px;}

/* ---------- подсказка при наведении ---------- */
.sm-tip{
  position:fixed;z-index:40;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);padding:10px 13px;min-width:170px;
}
.sm-tip.on{opacity:1;transform:translateY(0);}
.sm-tip .t-where{font-weight:800;font-size:14px;}
.sm-tip .t-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-40);
  margin-top:2px;}
.sm-tip .t-price{font-weight:800;font-size:15px;margin-top:6px;}
.sm-tip .t-fee{font-size:11.5px;color:var(--ink-40);}
.sm-tip .t-taken{font-size:12.5px;color:var(--red-dark);font-weight:700;margin-top:4px;}

/* ---------- список мест ---------- */
.sm-list-view{display:none;flex-direction:column;min-height:0;flex:1;}
.sm-list-view.on{display:flex;}
.sm-app.list-mode .sm-map{display:none;}
.sm-filters{
  flex:none;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:12px 16px;background:var(--white);border-bottom:1px solid var(--line);
}
.sm-filters label{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-40);display:flex;align-items:center;gap:7px;}
.sm-filters select{
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--black);
  border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--white);
}
.sm-list{flex:1;overflow-y:auto;padding:12px 16px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-content:start;}
.sm-list-item{
  border:1px solid var(--line);border-left:5px solid var(--cat-gold);
  border-radius:var(--radius-sm);padding:11px 13px;background:var(--white);
  display:flex;flex-direction:column;gap:6px;
}
.sm-list-item .li-where{font-weight:700;font-size:14px;}
.sm-list-item .li-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-40);}
.sm-list-item .li-price{font-weight:800;}
.sm-list-item button{align-self:flex-start;}
.sm-list-item.chosen{border-left-color:var(--red);background:rgba(226,35,26,.04);}

/* ---------- мобильная шторка ---------- */
.sm-sheet-handle{display:none;}

@media (max-width:820px){
  .sm-main{grid-template-columns:1fr;position:relative;}
  .sm-header{padding:10px 14px;gap:10px;flex-wrap:wrap;}
  .sm-badge{order:3;margin-left:0;}
  .sm-hall-switch{order:4;}

  .sm-order{
    position:absolute;left:0;right:0;bottom:0;z-index:30;
    border-left:0;border-top:1px solid var(--line);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:0 -8px 28px rgba(22,19,17,.14);
    max-height:74dvh;transform:translateY(calc(100% - var(--peek,132px)));
    transition:transform .22s ease;
  }
  .sm-order.open{transform:translateY(0);}
  .sm-sheet-handle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    flex:none;width:100%;border:0;background:none;cursor:pointer;
    padding:12px 18px 6px;text-align:left;
  }
  .sm-sheet-handle .sh-sum{font-weight:800;font-size:15px;}
  .sm-sheet-handle .sh-act{font-size:13px;font-weight:700;color:var(--red-dark);}
  .sm-sheet-handle::before{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;border-radius:2px;background:var(--line);
  }
  .sm-order-head{display:none;}
  .sm-cart{max-height:38dvh;}
  .sm-stage-wrap{padding-right:46px;}
  .sm-zoom{right:6px;}
  .sm-zoom button{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.9);}
  .sm-legend{padding-bottom:calc(var(--peek,132px) + 8px);}
  .sm-list{grid-template-columns:1fr;padding-bottom:calc(var(--peek,132px) + 16px);}
  .sm-zoom{bottom:calc(var(--peek,132px) + 14px);}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}