/* TRI ÂN live seating map — luxury venue-map layer.
   Visual only: the React component remains the authority for table state,
   selection, holds and checkout. */

/* Frame + floor */
#table-map .venue-map-frame {
  border-color: rgba(217, 179, 108, 0.5) !important;
  background: linear-gradient(180deg, rgba(20, 17, 12, 0.985), rgba(5, 5, 5, 0.995)) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 241, 205, 0.05) !important;
}

#table-map .venue-map-canvas {
  isolation: isolate;
  border-color: rgba(217, 179, 108, 0.32) !important;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(230, 191, 111, 0.18), transparent 23%),
    radial-gradient(circle at 50% 48%, rgba(122, 88, 39, 0.075), transparent 36%),
    linear-gradient(160deg, #18140f 0%, #0b0a08 48%, #050505 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 219, 0.025),
    inset 0 -120px 170px rgba(0, 0, 0, 0.36),
    0 18px 54px rgba(0, 0, 0, 0.28) !important;
}

#table-map .venue-map-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(217,179,108,.025) 50%, transparent 50.1%),
    radial-gradient(circle at 18% 16%, rgba(255,226,157,.055), transparent 10%),
    radial-gradient(circle at 82% 16%, rgba(255,226,157,.055), transparent 10%);
}

/* Stage */
#table-map .venue-map-stage {
  z-index: 4;
  border-color: rgba(231, 194, 119, 0.82) !important;
  border-radius: 0 0 44% 44% / 0 0 30% 30%;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(239, 206, 138, 0.24), transparent 52%),
    linear-gradient(180deg, rgba(45, 36, 24, 0.96), rgba(13, 11, 9, 0.98)) !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 242, 211, 0.11),
    0 0 30px rgba(202, 158, 78, 0.1) !important;
}

#table-map .venue-map-stage::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -0.55rem;
  height: 0.7rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 5% 50%, #f5d99d 0 7%, rgba(229,187,101,.25) 10%, transparent 22%),
    radial-gradient(circle at 28% 50%, #f5d99d 0 7%, rgba(229,187,101,.25) 10%, transparent 22%),
    radial-gradient(circle at 50% 50%, #f5d99d 0 7%, rgba(229,187,101,.25) 10%, transparent 22%),
    radial-gradient(circle at 72% 50%, #f5d99d 0 7%, rgba(229,187,101,.25) 10%, transparent 22%),
    radial-gradient(circle at 95% 50%, #f5d99d 0 7%, rgba(229,187,101,.25) 10%, transparent 22%);
  filter: drop-shadow(0 0 7px rgba(237,196,112,.65));
}

#table-map .venue-map-stage .venue-stage-primary {
  color: #ead3a1 !important;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-shadow: 0 1px 16px rgba(214, 171, 89, 0.22);
}

#table-map .venue-stage-secondary {
  display: block;
  margin-top: 0.12rem;
  color: rgba(243, 234, 216, 0.55);
  font-family: 'Manrope', sans-serif;
  font-size: clamp(0.34rem, 0.95cqw, 0.52rem);
  font-weight: 600;
  letter-spacing: 0.34em;
}

#table-map .venue-map-stage-line {
  border-top-style: solid !important;
  border-color: rgba(217, 179, 108, 0.22) !important;
  box-shadow: 0 -7px 18px rgba(213, 167, 79, 0.08);
}

/* Venue wayfinding: real map information, not decorative copy. */
#table-map .venue-wayfinding {
  position: absolute;
  z-index: 7;
  top: 4.4%;
  display: flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.24rem 0.48rem;
  border-bottom: 1px solid rgba(217, 179, 108, 0.62);
  background: linear-gradient(90deg, rgba(6,6,6,.82), rgba(20,16,11,.62), rgba(6,6,6,.2));
  color: rgba(243, 234, 216, 0.9);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.44rem, 1.35cqw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  pointer-events: none;
}

#table-map .venue-wayfinding--toilet { left: 1.2%; }
#table-map .venue-wayfinding--entrance {
  right: 1.2%;
  background: linear-gradient(270deg, rgba(6,6,6,.82), rgba(20,16,11,.62), rgba(6,6,6,.2));
}

#table-map .venue-bar {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 39%;
  width: clamp(1.35rem, 5.8cqw, 3.2rem);
  height: 39%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 179, 108, 0.58);
  border-left: 0;
  border-radius: 0 1.35rem 1.35rem 0;
  background:
    linear-gradient(90deg, rgba(79, 53, 19, 0.38), rgba(13, 11, 8, 0.94) 50%, rgba(5, 5, 5, 0.88));
  box-shadow:
    inset -1px 0 rgba(255, 228, 166, 0.06),
    8px 0 30px rgba(0,0,0,.28),
    0 0 18px rgba(199, 148, 60, 0.06);
  color: #d9b36c;
  pointer-events: none;
}

#table-map .venue-bar::before,
#table-map .venue-bar::after {
  content: '✦';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(217,179,108,.42);
  font-size: clamp(.4rem,1.1cqw,.6rem);
}
#table-map .venue-bar::before { top: 8%; }
#table-map .venue-bar::after { bottom: 8%; }

#table-map .venue-bar span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.56rem, 1.65cqw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.2em;
}

#table-map .venue-map-outdoor {
  border-color: rgba(243, 234, 216, 0.1) !important;
  background: rgba(5,5,5,.5);
  color: rgba(243, 234, 216, 0.34) !important;
}

#table-map .venue-map-boundary { border-color: rgba(217, 179, 108, 0.18) !important; }

/* Tables: jewellery-like discs, compact enough to keep the original geometry. */
#table-map .venue-table { transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease, box-shadow 180ms ease; }

#table-map .venue-table-disc,
#table-map .venue-table--desktop {
  border-radius: 999px !important;
  border-width: 1px !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -12px 18px rgba(0,0,0,.28) !important;
}

#table-map .venue-table--desktop {
  width: clamp(2.8rem, 7.3cqw, 4.45rem) !important;
  height: clamp(2.8rem, 7.3cqw, 4.45rem) !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

#table-map .venue-table[data-tier='vip'] .venue-table-disc,
#table-map .venue-table--desktop[data-tier='vip'][data-selected='false'],
#table-map .venue-table--open.venue-table-disc[data-tier='vip'][data-selected='false'] {
  border-color: rgba(250, 206, 92, 0.96) !important;
  background:
    radial-gradient(circle at 36% 27%, rgba(255,243,184,.34), transparent 18%),
    radial-gradient(circle at 50% 50%, #8b671b 0%, #5a3d09 48%, #171006 100%) !important;
  color: #fff4d2 !important;
  box-shadow: 0 0 20px rgba(232,183,55,.2), 0 10px 24px rgba(0,0,0,.5), inset 0 1px rgba(255,245,207,.38) !important;
}

#table-map .venue-table[data-tier='premium'] .venue-table-disc,
#table-map .venue-table--desktop[data-tier='premium'][data-selected='false'],
#table-map .venue-table--open.venue-table-disc[data-tier='premium'][data-selected='false'] {
  border-color: rgba(127, 230, 236, 0.9) !important;
  background:
    radial-gradient(circle at 36% 27%, rgba(205,255,255,.26), transparent 18%),
    radial-gradient(circle at 50% 50%, #164f53 0%, #10383b 48%, #071617 100%) !important;
  color: #dffcff !important;
  box-shadow: 0 0 20px rgba(93,218,225,.16), 0 10px 24px rgba(0,0,0,.5), inset 0 1px rgba(222,255,255,.28) !important;
}

#table-map .venue-table[data-tier='general'] .venue-table-disc,
#table-map .venue-table--desktop[data-tier='general'][data-selected='false'],
#table-map .venue-table--open.venue-table-disc[data-tier='general'][data-selected='false'] {
  border-color: rgba(229, 231, 235, 0.9) !important;
  background:
    radial-gradient(circle at 36% 27%, rgba(255,255,255,.26), transparent 18%),
    radial-gradient(circle at 50% 50%, #5b5b5a 0%, #343434 48%, #111 100%) !important;
  color: #fbfbf8 !important;
  box-shadow: 0 0 18px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.3) !important;
}

#table-map .venue-table[data-selected='true'] {
  border-color: #fff6de !important;
  background: radial-gradient(circle at 36% 27%, #fffdf7, #e2c37d 48%, #7b581d 100%) !important;
  color: #0a0907 !important;
  box-shadow: 0 0 0 2px rgba(255,247,225,.18), 0 0 34px rgba(229,187,96,.42), 0 12px 28px rgba(0,0,0,.5) !important;
}

#table-map .venue-table--open:hover { transform: translate(-50%, -50%) scale(1.07) !important; filter: brightness(1.12); }

#table-map .venue-table-number {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.8cqw, 1.55rem);
  font-weight: 500;
  line-height: .85;
}

#table-map .venue-table-tier {
  display: block;
  margin-top: .28rem;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(.32rem,.78cqw,.48rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

#table-map .venue-table-name {
  width: clamp(3.1rem, 9.2cqw, 5.3rem) !important;
  padding: .18rem .2rem .22rem;
  border: 1px solid rgba(217,179,108,.26);
  border-radius: .18rem;
  background: linear-gradient(180deg, rgba(10,10,10,.94), rgba(5,5,5,.76));
  color: rgba(243,234,216,.94) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.95);
  box-shadow: 0 7px 16px rgba(0,0,0,.22);
}

#table-map .venue-table--desktop .venue-table-name {
  position: absolute;
  left: 50%;
  top: calc(100% + .28rem);
  transform: translateX(-50%);
  line-height: 1.02;
  white-space: normal !important;
}

#table-map .venue-table--reserved .venue-table-disc { opacity: .78; }
#table-map .venue-table--reserved .venue-table-disc > * { position: relative; z-index: 1; }

/* Legend belongs to the map, not to generic page chrome. */
#table-map .venue-map-legend {
  color: rgba(243,234,216,.82);
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
#table-map .venue-map-legend [data-tier='vip'] { color: #f7d66f !important; }
#table-map .venue-map-legend [data-tier='premium'] { color: #a7f0f3 !important; }
#table-map .venue-map-legend [data-tier='general'] { color: #eeeeec !important; }

@media (max-width: 767px) {
  #table-map .venue-map-frame { padding: .55rem .45rem .68rem !important; }
  #table-map .venue-map-canvas { aspect-ratio: 10 / 14 !important; }
  #table-map .venue-wayfinding { top: 4%; padding: .2rem .3rem; font-size: clamp(.39rem,2.1cqw,.56rem); }
  #table-map .venue-bar { width: clamp(1.15rem,6.1cqw,1.75rem); }
  #table-map .venue-table-disc,
  #table-map .venue-table--open {
    width: clamp(2.22rem, 9.5cqw, 2.9rem) !important;
    height: clamp(2.22rem, 9.5cqw, 2.9rem) !important;
  }
  #table-map .venue-table-name {
    width: clamp(2.75rem,10.4cqw,3.55rem) !important;
    font-size: clamp(.49rem,1.75cqw,.66rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #table-map .venue-table { transition: none !important; }
}