/* =====================================================================
 * Stadium Seat Map - Styles (PassZone integration)
 * Only SVG-specific styles — demo page chrome removed.
 * ===================================================================== */

/* --- Color variables ------------------------------------------------ */
:root {
  --color-blue:    #4A77C9;
  --color-blue-2:  #5A87D9;
  --color-green:   #76C36C;
  --color-green-2: #88D17E;
  --color-red:     #D9534F;
  --color-red-2:   #E66763;
  --color-gold:    #C9A249;
  --color-gold-2:  #D9B561;
  --color-yellow:  #F4DEA0;
  --color-yellow-2:#FBE9B5;
  --color-grey:    #999999;
  --color-grey-2:  #ADADAD;

  --color-selected:#1f2937;
  --color-occupied:#9ca3af;
  --color-stroke:  #ffffff;

  --field-light:   #4ea24a;
  --field-dark:    #41902f;

  --text-light:    #ffffff;
  --text-dark:     #1f2937;
}

/* --- Stadium SVG ---------------------------------------------------- */
.stadium-map { width: 100%; }
.stadium-svg {
  width: 100%; height: auto;
  display: block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The pitch (visual only). */
.field-bg {
  fill: var(--field-light);
}
.field-stripe-a { fill: var(--field-light); }
.field-stripe-b { fill: var(--field-dark); opacity: 0.8; }
.field-line {
  stroke: rgba(255,255,255,0.92);
  stroke-width: 2;
  fill: none;
}
.field-line-fill {
  fill: rgba(255,255,255,0.95);
  stroke: none;
}

/* All sections share these baseline rules. */
.seat-section {
  stroke: var(--color-stroke);
  stroke-width: 1.5;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, opacity .15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Per-category colors (filled below). */
.seat-section.seat-upper-tier { fill: var(--color-blue);   }
.seat-section.seat-lower-bowl { fill: var(--color-green);  }
.seat-section.seat-side-stand { fill: var(--color-red);    }
.seat-section.seat-vip        { fill: var(--color-yellow); }
.seat-section.seat-premium    { fill: var(--color-gold);   }
.seat-section.seat-special    { fill: var(--color-grey);   }

/* Inner & outer bottom variations: inner is light yellow, middle gold,
   outer the lighter yellow band shown in the reference image. */
.seat-section.seat-ring-outer.seat-side-bottom {
  fill: var(--color-yellow);
}
.seat-section.seat-ring-middle.seat-side-bottom {
  fill: var(--color-gold);
}
.seat-section.seat-ring-inner.seat-side-bottom {
  fill: var(--color-yellow-2);
}

/* Hover & focus. */
.seat-section:hover,
.seat-section:focus-visible {
  outline: none;
  filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* Selected state – fill change only, no border at all. */
.seat-section.is-selected {
  fill: var(--color-selected);
  stroke: none;
}

/* Suppress hover glow on already-selected sections. */
.seat-section.is-selected:hover,
.seat-section.is-selected:focus-visible {
  filter: none;
}
.seat-section.is-selected + .seat-label,
.seat-section.is-selected ~ .seat-label { fill: #fff; }

/* Occupied / unavailable. */
.seat-section.is-occupied {
  fill: var(--color-occupied) !important;
  cursor: not-allowed;
  opacity: 0.85;
}
.seat-section.is-occupied:hover { filter: none; }

/* Tiny shake when user clicks an occupied section. */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-1.5px); }
  40%     { transform: translateX(1.5px); }
  60%     { transform: translateX(-1px); }
  80%     { transform: translateX(1px); }
}
.seat-section.shake { animation: shake .25s ease; }

/* Section labels. */
.seat-label {
  fill: #ffffff;
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  pointer-events: none;
  text-rendering: geometricPrecision;
  letter-spacing: 0.2px;
}
/* Use dark labels on light/yellow fills for readability. */
.seat-label-vip,
.seat-label-premium { fill: #1f2937; }

/* Inner ring bottom uses a softer yellow background → keep dark labels. */
.seat-label-ring-inner.seat-label-side-bottom { fill: #1f2937; }
.seat-label-ring-outer.seat-label-side-bottom { fill: #1f2937; }
.seat-label-ring-middle.seat-label-side-bottom { fill: #1f2937; }