/* План на залата (редактор в планера и печат). Цветовете на заетите места са по страна (planner-seating-render.js). */
.sl-svg {
  width: 100%;
  height: 100%;
  display: block;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  user-select: none;
}
.sl-floor {
  fill: #fff;
  stroke: #e1dcd3;
  stroke-width: 4;
}
.sl-grid-line {
  fill: none;
  stroke: #f0e9dc;
  stroke-width: 2;
}
.sl-element rect {
  fill: #f0e9dc;
  stroke: #8a8175;
  stroke-width: 3;
}
.sl-el-dance rect {
  fill: #faf8f0;
  stroke-dasharray: 16 10;
}
.sl-el-stage rect,
.sl-el-dj rect {
  fill: #ede0c5;
}
.sl-el-wall rect,
.sl-el-column rect {
  fill: #6c6760;
  stroke: #292725;
}
.sl-el-entrance rect {
  fill: #dfeae3;
  stroke: #7f9f8c;
}
.sl-element text {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 3px;
  fill: #6c6760;
}
.sl-top circle,
.sl-top rect {
  fill: #faf8f0;
  stroke: #d0c19e;
  stroke-width: 3;
}
.sl-chair circle {
  stroke: #8a8175;
  stroke-width: 2;
}
.sl-taken circle {
  stroke: #fff;
  stroke-width: 3;
}
.sl-badge {
  font-size: 20px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
}
.sl-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  fill: #292725;
  pointer-events: none;
}
.sl-count {
  font-size: 20px;
  font-weight: 600;
  fill: #6c6760;
  pointer-events: none;
}
.sl-selected .sl-top circle,
.sl-selected .sl-top rect,
.sl-element.sl-selected rect {
  stroke: #8f6d23;
  stroke-width: 6;
}
.sl-over .sl-top circle,
.sl-over .sl-top rect {
  stroke: #b42318;
  stroke-width: 6;
}
.sl-over .sl-count {
  fill: #b42318;
}
.sl-target .sl-top circle,
.sl-target .sl-top rect,
.sl-dropping .sl-top circle,
.sl-dropping .sl-top rect {
  stroke: #7f9f8c;
  stroke-width: 5;
  stroke-dasharray: 10 6;
}
/* Редактор в планера */
.sl-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.sl-canvas-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-width: 0;
}
.sl-canvas {
  height: min(72vh, 760px);
  background: #fff;
  border: 1px solid #e1dcd3;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.sl-canvas [data-table],
.sl-canvas [data-element] {
  cursor: move;
}
.sl-readonly [data-table],
.sl-readonly [data-element] {
  cursor: pointer;
}
.sl-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
#planner .sl-zoom button {
  min-height: 36px;
  min-width: 36px;
  padding: 4px 12px;
  background: #fff;
}
.sl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--ink-muted);
}
.sl-legend i,
.sl-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  flex: none;
}
.sl-free-dot {
  border: 2px solid var(--line-strong);
  background: #fff;
}
.sl-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}
.sl-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sl-group .pl-eyebrow {
  width: 100%;
}
#planner .sl-group button {
  min-height: 36px;
  padding: 6px 14px;
  font-weight: 500;
}
.sl-group select {
  width: auto;
  margin: 0;
}
.sl-group .check {
  margin: 0;
}
.sl-venue {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
}
.sl-venue summary {
  cursor: pointer;
  font-weight: 600;
}
.sl-venue-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sl-venue-body label {
  max-width: 460px;
}
.sl-size {
  display: flex;
  gap: 12px;
}
.sl-size label {
  width: 160px;
}
.sl-lock {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.sl-lock .check {
  margin: 0;
}
.sl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 14px;
}
.sl-stats strong {
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
}
.sl-guests,
.sl-panel {
  padding: 16px;
  gap: 10px;
  max-height: min(80vh, 860px);
  overflow: auto;
}
#planner .sl-guests h2,
#planner .sl-panel h2 {
  font-size: 20px;
  margin: 0;
}
.sl-guests input[type='search'] {
  margin: 0;
}
/* Филтър „Група“ над списъка без маса (етикет над менюто; шрифтът остава 16px – iPhone не увеличава при фокус). */
.sl-group-filter {
  font-size: 13px;
  color: var(--ink-muted);
}
.sl-group-filter select {
  margin-top: 4px;
  min-height: 40px;
  padding: 8px 10px;
}
.sl-sides {
  flex-wrap: wrap;
}
.sl-guest-list,
.sl-party-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-party-list li {
  display: flex;
  align-items: center;
  gap: 4px;
}
#planner .sl-guest {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 44px;
  font-weight: 400;
  background: #fff;
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
}
#planner .sl-guest.active {
  border: 2px solid var(--sage);
  background: var(--mint);
}
.sl-guest span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sl-guest strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.sl-hint {
  font-size: 13px;
}
.sl-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: #292725;
  color: #fff;
  padding: 6px 12px;
  border-radius: 35px;
  font: 600 13px 'Montserrat', sans-serif;
}
.pl-warn-note {
  border-color: #e7b8b2 !important;
  background: #fbf0ee !important;
}
.sl-row-actions {
  gap: 6px !important;
}
#planner .sl-row-actions button {
  min-height: 36px;
  padding: 6px 12px;
}
.invite-table {
  font-weight: 700;
  font-size: 20px;
}
@media (max-width: 1100px) {
  .sl-layout {
    grid-template-columns: 1fr;
  }
  .sl-guests,
  .sl-panel {
    max-height: none;
  }
  .sl-canvas {
    height: 60vh;
  }
}
/* Печат */
.seating-print .sp-scheme {
  border: 1px solid #e1dcd3;
  margin-bottom: 18px;
}
.seating-print .sp-scheme .sl-svg {
  height: auto;
  max-height: 170mm;
}
.seating-print h2 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
}
@media print {
  .sp-page {
    break-before: page;
  }
}
.sl-sides {
  display: flex !important;
  flex-wrap: wrap;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
#planner .sl-sides button {
  border: 1px solid var(--line) !important;
  font-size: 13px;
  padding: 4px 10px !important;
  min-height: 32px !important;
}

/* ---------- Изчистен вид на редактора (28.09.2026) ----------
   Една лента с инструменти, план на залата като „лист“ върху мек фон, бутони за мащаба в ъгъла,
   панел за маса/елемент само когато има избор. */
.sl-svg {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
.sl-floor {
  fill: #fff;
  stroke: #d8d3ca;
  stroke-width: 3;
}
.sl-grid-line {
  stroke: #f1efeb;
  stroke-width: 1.5;
}
.sl-element rect {
  fill: #f1efeb;
  stroke: #cfc9bf;
  stroke-width: 2.5;
}
.sl-el-dance rect {
  fill: #faf9f7;
  stroke: #d0c19e;
  stroke-width: 3;
  stroke-dasharray: 14 10;
}
.sl-el-stage rect,
.sl-el-dj rect {
  fill: #f3ecdd;
  stroke: #d0c19e;
}
.sl-el-bar rect,
.sl-el-buffet rect {
  fill: #f4f1ec;
  stroke: #cfc9bf;
}
.sl-el-wall rect,
.sl-el-column rect {
  fill: #8a8175;
  stroke: #6c6760;
}
.sl-el-entrance rect {
  fill: #dfeae3;
  stroke: #7f9f8c;
}
.sl-element text {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  fill: #8a8175;
}
.sl-top circle,
.sl-top rect {
  fill: #fff;
  stroke: #cdb98f;
  stroke-width: 3;
}
.sl-chair circle {
  stroke: #c9c2b6;
  stroke-width: 2;
}
.sl-name {
  font-size: 30px;
  font-weight: 600;
  fill: #292725;
}
.sl-count {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  fill: #8a8175;
}
.sl-table:hover .sl-top circle,
.sl-table:hover .sl-top rect {
  stroke: #8f6d23;
}
.sl-selected .sl-top circle,
.sl-selected .sl-top rect,
.sl-element.sl-selected rect {
  stroke: #8f6d23;
  stroke-width: 5;
  filter: drop-shadow(0 4px 10px rgba(143, 109, 35, 0.25));
}

/* Лента с инструменти: един ред, групите разделени с тънки линии. */
.sl-tools {
  gap: 0;
  padding: 10px 12px;
  align-items: stretch;
}
.sl-group {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 14px;
}
.sl-group + .sl-group {
  border-left: 1px solid var(--line);
}
.sl-group:first-child {
  padding-left: 4px;
}
.sl-group .pl-eyebrow {
  width: auto;
  margin-right: 4px;
  white-space: nowrap;
}
.sl-group-end {
  margin-left: auto;
}
#planner .sl-group .sl-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
#planner .sl-group .sl-type svg {
  color: var(--gold);
  flex: none;
}
#planner .sl-group .sl-type:hover {
  border-color: var(--gold-line);
  background: var(--cream);
}
#planner .sl-group #sl-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
}
.sl-group select {
  min-height: 40px;
  border-radius: 12px;
}
.sl-group .check {
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .sl-tools {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .sl-group-end {
    margin-left: 0;
  }
  .sl-group {
    flex-wrap: wrap;
  }
}

/* Зала и размер + показване на масата/финализиране — на един ред. */
.sl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.sl-meta .sl-venue {
  flex: 1 1 360px;
  padding: 10px 16px;
}
.sl-meta .sl-venue summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 14px;
}
.sl-meta .sl-venue summary::-webkit-details-marker {
  display: none;
}
.sl-meta .sl-venue summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.75px solid var(--ink-muted);
  border-bottom: 1.75px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.sl-meta .sl-venue[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.sl-meta .sl-lock {
  margin-left: auto;
  min-height: 50px;
}

/* Работно поле: гости | план (| панел при избор). */
.sl-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
}
.sl-layout.has-panel {
  grid-template-columns: 280px minmax(0, 1fr) 300px;
}
.sl-panel[hidden] {
  display: none !important;
}
.sl-canvas-wrap {
  gap: 10px;
}
.sl-canvas {
  height: clamp(520px, calc(100vh - 240px), 880px);
  background-color: var(--bg);
  background-image: radial-gradient(circle, #dcd8d1 1px, transparent 1.2px);
  background-size: 22px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: default;
}
.sl-canvas.sl-zoomed {
  cursor: grab;
}
.sl-canvas.sl-zoomed:active {
  cursor: grabbing;
}
.sl-canvas .sl-floor {
  filter: drop-shadow(0 6px 18px rgba(41, 39, 37, 0.08));
}
/* Мащаб: кръгли бутони в долния десен ъгъл на плана. */
.sl-zoom {
  top: auto;
  bottom: 52px;
  right: 14px;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 35px;
  box-shadow: 0 6px 18px rgba(41, 39, 37, 0.1);
}
#planner .sl-zoom button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
#planner .sl-zoom button:hover:not(:disabled) {
  background: var(--paper-sunk);
}
#planner .sl-zoom button:disabled {
  opacity: 0.35;
}
.sl-legend {
  gap: 8px;
  font-size: 12px;
}
.sl-legend > span {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 35px;
  background: #fff;
}
.sl-help {
  margin: 0;
  max-width: 900px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Списък „Без маса“: редове с разделители вместо отделни рамки. */
.sl-guests {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: clamp(520px, calc(100vh - 200px), 920px);
}
#planner .sl-guests h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sl-guest-list {
  gap: 0;
  margin: 0 -8px;
}
.sl-guest-list li + li {
  border-top: 1px solid var(--line);
}
#planner .sl-guest-list .sl-guest {
  min-height: 48px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  gap: 10px;
}
#planner .sl-guest-list .sl-guest:hover {
  background: var(--cream);
}
#planner .sl-guest-list .sl-guest.active {
  border: 0;
  background: var(--mint);
  box-shadow: inset 0 0 0 2px var(--sage);
}
.sl-guest small {
  font-size: 12px;
  color: var(--ink-muted);
}
.sl-guest-list li:hover + li,
.sl-guest-list li:hover {
  border-color: transparent;
}

/* Панел на избраната маса/елемент. */
.sl-panel {
  position: sticky;
  top: 72px;
}
.sl-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
#planner .sl-panel-close {
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}
#planner .sl-panel-close:hover {
  background: var(--paper-sunk);
  color: var(--ink);
}
@media (max-width: 1100px) {
  .sl-layout,
  .sl-layout.has-panel {
    grid-template-columns: 1fr;
  }
  .sl-panel {
    position: static;
  }
  .sl-canvas {
    height: 62vh;
  }
}
#planner .sl-group #sl-undo {
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
#planner .sl-zoom #sl-undo {
  width: 36px;
  min-width: 36px;
  border-radius: 50%;
}
.sl-zoom {
  align-items: center;
}
.sl-zoom-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--line);
}
.sl-snap-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
  margin: 0;
}
.sl-snap-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.sl-snap-toggle:has(input:checked) {
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.sl-snap-toggle:has(input:focus-visible) {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.sl-snap-toggle:hover {
  background: var(--paper-sunk);
}
/* Колоната вдясно е винаги на място: преглед на масите или избраната маса. */
.sl-layout,
.sl-layout.has-panel {
  grid-template-columns: 270px minmax(0, 1fr) 290px;
}
.sl-canvas {
  height: auto;
  max-height: calc(100vh - 150px);
  min-height: 360px;
  width: 100%;
}
.sl-canvas-wrap > .sl-zoom {
  top: 12px;
  right: 12px;
  bottom: auto;
}
.sl-count-chip {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 35px;
  background: var(--paper-sunk);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.sl-panel-head {
  align-items: center;
}
.sl-panel-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.sl-table-list {
  list-style: none;
  margin: 4px -8px 0;
  padding: 0;
}
.sl-table-list li + li {
  border-top: 1px solid var(--line);
}
#planner .sl-table-item {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-weight: 400;
}
#planner .sl-table-item:hover {
  background: var(--cream);
}
.sl-table-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-sunk);
  color: var(--gold);
}
.sl-table-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-table-info strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-meter {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--paper-sunk);
  overflow: hidden;
}
.sl-meter span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gold-line);
}
.sl-table-item.is-full .sl-meter span {
  background: var(--success);
}
.sl-table-item.is-over .sl-meter span {
  background: var(--danger);
}
.sl-table-item small {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.sl-table-item.is-full small {
  color: var(--success);
}
.sl-table-item.is-over small {
  color: var(--danger);
}
/* Оркестър: като „Сцена“ и „DJ“ — светъл фон, тънки контури на инструментите в цветовете на масите. */
.sl-el-orchestra > rect {
  fill: #f3ecdd;
  stroke: #d0c19e;
  stroke-width: 2.5;
}
.sl-orch .sl-orch-icon path {
  fill: none;
  stroke: #b59a63;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-el-orchestra.sl-selected > rect {
  stroke: #8f6d23;
  stroke-width: 5;
}

/* Цял екран за „Маси“ (body.pl-wide от planner.js). */
body.pl-wide main.portal {
  max-width: 1600px;
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}
body.pl-wide .sl-layout,
body.pl-wide .sl-layout.has-panel {
  grid-template-columns: 250px minmax(0, 1fr) 270px;
  gap: 14px;
}
body.pl-wide .sl-canvas {
  max-height: calc(100vh - 190px);
}
@media (max-width: 1100px) {
  body.pl-wide .sl-layout,
  body.pl-wide .sl-layout.has-panel {
    grid-template-columns: 1fr;
  }
}

/* Лявата колона: „Без маса“ | „Маси“ — планът стига до десния край. */
.sl-layout,
.sl-layout.has-panel,
body.pl-wide .sl-layout,
body.pl-wide .sl-layout.has-panel {
  grid-template-columns: 290px minmax(0, 1fr);
}
.sl-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.sl-side > [hidden] {
  display: none !important;
}
.sl-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 35px;
}
#planner .sl-side-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 35px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
#planner .sl-side-tabs button:hover {
  background: var(--paper-sunk);
}
#planner .sl-side-tabs button[aria-selected='true'] {
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-weight: 600;
}
.sl-side-tabs button span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
}
.sl-side .sl-panel {
  position: static;
  max-height: clamp(520px, calc(100vh - 200px), 920px);
  overflow: auto;
}
.sl-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .sl-layout,
  .sl-layout.has-panel,
  body.pl-wide .sl-layout,
  body.pl-wide .sl-layout.has-panel {
    grid-template-columns: 1fr;
  }
}
/* Столове: седалка и облегалка, с лице към масата. Заетите — в цвета на страната. */
.sl-chair-seat,
.sl-chair-back {
  stroke: #c9c2b6;
  stroke-width: 1.5;
}
.sl-chair-back {
  fill-opacity: 1;
}
.sl-chair:not(.sl-taken) .sl-chair-back {
  fill: #f1efeb;
}
.sl-taken .sl-chair-seat {
  fill-opacity: 0.82;
  stroke: #fff;
}
.sl-taken .sl-chair-back {
  stroke: #fff;
}
.sl-chair:hover .sl-chair-seat {
  stroke: #8f6d23;
}
/* Имена — етикет-лента от ръба на зоната през стола към центъра (бутон „Т“ при плана). */
.sl-tag {
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(41, 39, 37, 0.16));
}
.sl-tag rect {
  fill: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
}
.sl-tag text {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  fill: #3a3632;
}
.sl-compact .sl-name {
  font-size: 22px;
}
.sl-compact .sl-count {
  font-size: 13px;
  transform: translateY(-9px);
}
#planner .sl-zoom .sl-toggle {
  width: 36px;
  min-width: 36px;
  border-radius: 50%;
}
#planner .sl-zoom .sl-toggle[aria-pressed='true'] {
  background: var(--gold-soft);
  color: var(--gold-ink);
}

/* Безопасна зона около масите (бутон при плана; разстоянието — в „Зала и размер“). */
.sl-zones {
  pointer-events: none;
}
.sl-zone circle,
.sl-zone rect {
  fill: rgba(208, 193, 158, 0.07);
  stroke: #cdb98f;
  stroke-width: 1.5;
  stroke-dasharray: 7 7;
  opacity: 0.75;
  transition:
    fill 0.2s,
    stroke 0.2s;
}
.sl-zone.sl-zone-bad circle,
.sl-zone.sl-zone-bad rect {
  fill: rgba(168, 71, 92, 0.07);
  stroke: #a8475c;
  stroke-width: 2;
  opacity: 1;
}
.sl-clear-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #e7c3cb;
  border-radius: 35px;
  background: #fbf1f3;
  color: #8a3246;
  font-size: 13px;
  font-weight: 500;
}
.sl-clear-warn::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px dashed #a8475c;
  border-radius: 50%;
}
.sl-clear-warn[hidden] {
  display: none;
}
/* Детско столче: бебешко-син пръстен, малка седалка, бяла поставка и фигурка на дете. */
.sl-chair .sl-kid-ring,
.sl-taken .sl-kid-ring {
  fill: #e7f0f8;
  stroke: #5f8fbd;
  stroke-width: 3;
}
.sl-taken circle.sl-kid-glyph {
  stroke: none;
}
.sl-kid-tray {
  fill: #fff;
  stroke: #5f8fbd;
  stroke-width: 1.5;
}
.sl-taken .sl-kid .sl-chair-seat,
.sl-taken .sl-kid .sl-chair-back {
  fill-opacity: 1;
  stroke: #fff;
  stroke-width: 1;
}
.sl-kid-glyph {
  fill: #fff;
  pointer-events: none;
}
.sl-legend .sl-kid-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e7f0f8;
  border: 2px solid #5f8fbd;
  margin-right: 6px;
}

/* Плъзгач за разстоянието между масите (до бутона за зоната). */
.sl-clear-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 0 2px;
  padding: 0 10px 0 8px;
  height: 32px;
  border-radius: 35px;
  background: var(--paper-sunk);
}
.sl-clear-ctl[hidden] {
  display: none;
}
.sl-clear-ctl input[type='range'] {
  width: 110px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.sl-clear-ctl output {
  min-width: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Бутоните на плана са в лента над схемата (не плуват върху масите). */
.sl-canvas-wrap > .sl-zoom {
  position: static;
  align-self: flex-end;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  box-shadow: none;
}

/* „Зала и размер“ на половин ширина, до него — настройките на визуализатора. */
.sl-meta {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.sl-meta .sl-venue {
  flex: 0 1 50%;
  min-width: 0;
}
.sl-meta > .sl-zoom {
  position: static;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  box-shadow: none;
}
.sl-show-table {
  margin-top: 6px;
  font-size: 14px;
}
@media (max-width: 900px) {
  .sl-meta {
    flex-wrap: wrap;
  }
  .sl-meta .sl-venue {
    flex-basis: 100%;
  }
}

/* Ред над плана: „Без маса | Маси“ (над колоната с гостите), „Зала и размер“ и бутоните на визуализатора —
   еднакви бели заоблени ленти с височина 52px и тънка рамка. */
.sl-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
}
.sl-meta > .sl-side-tabs {
  flex: 0 0 290px;
  box-sizing: border-box;
  height: 52px;
  padding: 5px;
  border-radius: 35px;
}
.sl-meta > .sl-venue {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
}
.sl-meta > .sl-venue summary {
  min-height: 50px;
  font-size: 14px;
  font-weight: 600;
}
.sl-meta > .sl-venue[open] {
  border-radius: 20px;
  padding-bottom: 16px;
}
.sl-meta > .sl-zoom {
  flex: none;
  box-sizing: border-box;
  height: 52px;
  padding: 0 8px;
  margin-left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 35px;
  flex-wrap: nowrap;
}
.sl-meta > .sl-venue + .sl-zoom,
.sl-meta > .sl-side-tabs + .sl-zoom {
  margin-left: auto;
}
body.pl-wide .sl-layout,
body.pl-wide .sl-layout.has-panel,
.sl-layout {
  grid-template-columns: 290px minmax(0, 1fr);
}
@media (max-width: 1100px) {
  .sl-meta {
    flex-wrap: wrap;
  }
  .sl-meta > .sl-side-tabs,
  .sl-meta > .sl-venue {
    flex-basis: 100%;
  }
  body.pl-wide .sl-layout,
  .sl-layout {
    grid-template-columns: 1fr;
  }
}

/* Горна лента: масите вляво, елементите в залата вдясно — всички контроли в един стил. */
.sl-tools {
  flex-wrap: nowrap;
}
.sl-tools .sl-group-end {
  margin-left: auto;
}
.sl-tools .sl-group select {
  height: 40px;
  min-height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.sl-tools .sl-group select:hover {
  border-color: var(--gold-line);
  background-color: var(--cream);
}
#planner .sl-tools #sl-add-el svg {
  color: var(--gold);
}
@media (max-width: 1280px) {
  .sl-tools {
    flex-wrap: wrap;
  }
}

/* BUG-11: на телефон лентата над плана (Без маса | Маси, зала, мащаб) се пренася, вместо да разпъва страницата. */
@media (max-width: 700px) {
  .sl-meta {
    flex-wrap: wrap;
  }
  .sl-meta > .sl-side-tabs {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .sl-meta > .sl-zoom {
    flex: 1 1 100%;
    flex-wrap: wrap;
    height: auto;
    max-width: 100%;
    min-height: 52px;
    padding: 4px 8px;
    justify-content: center;
    border-radius: 26px;
  }
  .sl-meta > .sl-venue + .sl-zoom,
  .sl-meta > .sl-side-tabs + .sl-zoom {
    margin-left: 0;
  }
}