/* Smart Seating — shop seat map */
#smartseat-shop {
  margin: 0 0 16px;
  position: relative; /* tooltip is absolutely positioned relative to this */
}
.smartseat-shop-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.smartseat-shop-key { display: inline-flex; align-items: center; gap: 5px; }
.smartseat-shop-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; border: 1px solid #1b2736; }
.smartseat-shop-dot.free { background: #16a34a; }
.smartseat-shop-dot.sel { background: #0055cc; }
.smartseat-shop-dot.taken { background: #c7ccd6; }
.smartseat-shop-dot.blk { background: #6b7280; }

.smartseat-shop-canvas {
  border: 1px solid #d7d9dd;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  overflow: hidden;
}
.smartseat-shop-svg {
  width: 100%;
  height: 60vh;
  min-height: 320px;
  max-height: 640px;
  touch-action: none;
  display: block;
  cursor: grab;
}

/* Seats are <g class="smartseat-shop-seat {state}"> with a .smartseat-shop-dotc
   circle (category colour) + .smartseat-shop-num number. */
.smartseat-shop-seat { cursor: pointer; outline: none; }
.smartseat-shop-seat.taken,
.smartseat-shop-seat.blk { cursor: not-allowed; }

.smartseat-shop-dotc {
  stroke: rgba(15, 23, 42, 0.28);
  stroke-width: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  transition: stroke 0.1s ease, stroke-width 0.1s ease;
}
.smartseat-shop-seat.taken .smartseat-shop-dotc { fill: #d8dce2; filter: none; }
.smartseat-shop-seat.blk .smartseat-shop-dotc { fill: #6b7280; filter: none; }

.smartseat-shop-seat.free:hover .smartseat-shop-dotc { stroke: #0f172a; stroke-width: 2; }
.smartseat-shop-seat.free:focus .smartseat-shop-dotc { stroke: #0055cc; stroke-width: 2.5; }
.smartseat-shop-seat.sel .smartseat-shop-dotc {
  stroke: #0055cc;
  stroke-width: 4;
  filter: drop-shadow(0 0 4px rgba(0, 85, 204, 0.6));
}

.smartseat-shop-num {
  font-size: 9px;
  font-weight: 600;
  fill: rgba(15, 23, 42, 0.72);
  pointer-events: none;
  user-select: none;
}
.smartseat-shop-seat.taken .smartseat-shop-num,
.smartseat-shop-seat.blk .smartseat-shop-num { fill: rgba(255, 255, 255, 0.9); }

.smartseat-shop-area { pointer-events: none; }
.smartseat-shop-area text { font-family: inherit; }

/* Product (standing / GA) areas — clickable bookable regions */
.smartseat-shop-product { pointer-events: auto; cursor: pointer; }
.smartseat-shop-product > rect,
.smartseat-shop-product > circle,
.smartseat-shop-product > ellipse,
.smartseat-shop-product > polygon {
  fill: rgba(16, 185, 129, 0.18);
  stroke: #059669;
  stroke-width: 2;
  transition: fill 0.1s ease;
}
.smartseat-shop-product:hover > rect,
.smartseat-shop-product:hover > circle,
.smartseat-shop-product:hover > ellipse,
.smartseat-shop-product:hover > polygon { fill: rgba(16, 185, 129, 0.30); }
.smartseat-shop-product.chosen > rect,
.smartseat-shop-product.chosen > circle,
.smartseat-shop-product.chosen > ellipse,
.smartseat-shop-product.chosen > polygon { fill: rgba(5, 150, 105, 0.40); stroke-width: 3; }
.smartseat-shop-product.unavail { cursor: not-allowed; }
.smartseat-shop-product.unavail > rect,
.smartseat-shop-product.unavail > circle,
.smartseat-shop-product.unavail > ellipse,
.smartseat-shop-product.unavail > polygon { fill: rgba(148,163,184,0.30); stroke: #94a3b8; }
.smartseat-shop-product-label {
  font-size: 14px; font-weight: 700; fill: #065f46;
  pointer-events: none; user-select: none; dominant-baseline: middle;
}

/* Section blocks — click zooms the map into the section */
.smartseat-shop-section { pointer-events: auto; cursor: zoom-in; }
.smartseat-shop-section > rect,
.smartseat-shop-section > circle,
.smartseat-shop-section > ellipse,
.smartseat-shop-section > polygon {
  fill: rgba(99, 102, 241, 0.10);
  stroke: #6366f1;
  stroke-width: 2;
  transition: fill 0.1s ease;
}
.smartseat-shop-section:hover > rect,
.smartseat-shop-section:hover > circle,
.smartseat-shop-section:hover > ellipse,
.smartseat-shop-section:hover > polygon { fill: rgba(99, 102, 241, 0.22); }
.smartseat-shop-section-label {
  font-size: 15px; font-weight: 700; fill: #4338ca;
  pointer-events: none; user-select: none; dominant-baseline: middle;
}

.smartseat-shop-status { margin: 10px 0 6px; font-weight: 600; }
.smartseat-shop-submit { min-height: 46px; font-size: 16px; }

@media (max-width: 768px) {
  .smartseat-shop-submit { width: 100%; }
  .smartseat-shop-svg { height: 55vh; }
}

.smartseat-shop-heading { margin: 18px 0 8px; }
.smartseat-shop-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.smartseat-shop-price { display: inline-flex; align-items: center; gap: 5px; }
.smartseat-shop-price .smartseat-shop-dot { border: 1px solid #1b2736; }

/* ─── Zoom controls overlay ──────────────────────────────────────────────── */
.smartseat-shop-canvas { position: relative; }
.smartseat-shop-zoom {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.smartseat-zoom-btn {
  width: 34px; height: 34px;
  border: 1px solid #c7ccd6;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 7px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.smartseat-zoom-btn:hover { background: #eef2ff; }

/* ─── Hover tooltip (seats.io-style card) ────────────────────────────────── */
.smartseat-shop-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  width: 180px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 12px;
}
.smartseat-tip-head {
  display: flex;
  background: #2b2f36;
}
.smartseat-tip-head .cell {
  flex: 1 1 0;
  padding: 7px 10px;
  text-align: center;
  color: #fff;
}
.smartseat-tip-head .cell + .cell { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.smartseat-tip-head .lbl {
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa3b2;
}
.smartseat-tip-head .val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.smartseat-tip-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-weight: 600;
}
.smartseat-tip-cat .pr { font-weight: 700; white-space: nowrap; }

/* ─── Sticky action bar ──────────────────────────────────────────────────── */
.smartseat-shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0;
}
.smartseat-shop-bestwrap { display: flex; gap: 6px; align-items: center; }
.smartseat-shop-qty { width: 64px; min-height: 38px; padding: 4px 8px; }
.smartseat-shop-status { margin: 0; flex: 1 1 auto; font-weight: 600; }
.smartseat-shop-submit { min-height: 44px; font-size: 16px; }

@media (max-width: 768px) {
  .smartseat-shop-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #d7d9dd;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px;
    margin: 10px -10px 0;
    z-index: 30;
  }
  .smartseat-shop-submit { width: 100%; order: 3; }
  .smartseat-shop-status { order: 2; flex-basis: 100%; }
  .smartseat-shop-bestwrap { order: 1; }
}

.smartseat-shop-swatch { vertical-align: -2px; }