/* =====================================================
   CONCERT SEATING — FRONTEND
===================================================== */

/* -----------------------------
   GLOBAL / WRAPPER
------------------------------ */
.cs-seating-wrapper{
    width:100%;
    max-width:100vw;
    padding:0 24px 40px;
    box-sizing:border-box;

    overflow-x:auto;
    overflow-y:visible;

    position:relative;
}

/* Keep wide rows from collapsing */
.cs-section{
    min-width:max-content;
}

/* -----------------------------
   SECTION / TITLE
------------------------------ */
.cs-section{
    position:relative;
    margin-bottom:60px;
    text-align:center;
    overflow:visible;
}

.cs-section-title{
    position:relative;
    z-index:10;
    display:inline-block;
    margin-bottom:75px;

    font-size:28px;
    font-weight:700;
    color:#222;

    background:#fff;
    padding:6px 14px;
    border-radius:6px;
}

/* =====================================================
   ROW LAYOUT
===================================================== */
.cs-row{
    display:flex;
    align-items:center;
    justify-content:center; /* keep labels beside seats */
    gap:14px;

    margin:18px 0;
    position:relative;
}

/* Orchestra needs extra vertical room for the arc */
.cs-row.orchestra{
    margin:38px 0;
}

/* Balcony rows: ensure rotation has room */
.cs-row.balcony{
    min-height:48px;
}

/* =====================================================
   ROW LABELS
===================================================== */
.cs-row-label{
    min-width:28px;
    text-align:center;

    font-size:14px;
    font-weight:800;
    color:#000;

    line-height:1;
    user-select:none;

    flex-shrink:0;
}

/* keep labels close to seats (not screen edge) */
.cs-label-left{  margin-right:0px; }
.cs-label-right{ margin-left:0px; }

/* Your orchestra label tuning (KEEP) */
.cs-row.orchestra .cs-row-label{
    transform:translateY(-25px);
}

/* Balcony label tuning (single source of truth) */
.cs-row.balcony.has-aisle .cs-row-label{
    transform:translateY(75px);
}

/* Two-block balcony rows: move entire row down as one piece */
.cs-row.balcony.no-aisle{
    transform:translateY(45px);
}
.cs-row.balcony.no-aisle .cs-row-label{
    transform:translateY(30px);
}

/* =====================================================
   ROW SEATS CONTAINER
===================================================== */
.cs-row-seats{
    display:flex;
    align-items:center;
    gap:1px;
}


/* =====================================================
   SEATS — UNIFORM SIZE + STATES
===================================================== */
.cs-seat{
    width:25px;
    height:25px;
    min-width:25px;
    min-height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;

    border-radius:6px;
    color:#fff;

    cursor:pointer;
    user-select:none;

    position:relative;

    pointer-events:auto;
    z-index:3;

    transform:translateZ(0);

    transition:transform .1s ease, outline .1s ease;
}

.cs-block,
.cs-block-wrap,
.cs-row-seats {
    overflow: visible;
}

.cs-block.angled-left{
    transform:rotate(-12deg);
    transform-origin:right center;
}

.cs-block.angled-right{
    transform:rotate(12deg);
    transform-origin:left center;
}

.cs-seat {
    transform: translateZ(0);
}


.cs-row-seats{
    position:relative;
    z-index:1;
}

/* =====================================================
   SEAT STATE COLORS
   ===================================================== */

.cs-seat.cs-available{
    background-color:#1e73be;
}

.cs-seat.cs-reserved{
    background-color:#c0392b;
    cursor:not-allowed;
    pointer-events:none;
}

.cs-seat.cs-sold{
    background-color:#1e73be;
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
}

.cs-seat.cs-locked{
    background-color:#000;
    color:#fff;
    cursor:not-allowed;
    pointer-events:none;
}

.cs-block{
    position:relative;
    z-index:1;
}

.cs-seat{
    z-index:2;
}


.cs-seat.cs-selected {
    box-shadow: 0 0 0 3px #000;
    transform: scale(1.05) translateZ(0);
    z-index: 10;
}


/* ==============================
   WHEELCHAIR ROW POSITIONING
   ============================== */


.cs-wheelchair-row {
    position: relative;
    top: -75px;      /* vertical adjustment */
    z-index: 5;
}

.cs-wheelchair-row .cs-row-seats {
    justify-content: flex-start !important;
    position: relative;
    left: -250px;    /* horizontal adjustment */
}

.cs-wheelchair-seat {
    border: 2px dashed #666;
    background: #eef3f8;
}





/* =====================================================
   AISLE
===================================================== */
.cs-aisle{
    width:25px;
    height:1px;
    display:block;
    flex-shrink:0;
}

/* =====================================================
   BALCONY ANGLES (APPLY TO BLOCK ITSELF)
===================================================== */
.cs-block{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:1px;
    flex-shrink:0;
}

.cs-block.angled-left{
    transform:rotate(-12deg);
    transform-origin:right center;
}

.cs-block.angled-right{
    transform:rotate(12deg);
    transform-origin:left center;
}

.cs-block.straight{
    transform:none;
}

/* =====================================================
   BALCONY ALIGNMENT (CENTER AISLE + OUTER EDGES)
   Virtual geometry: treat every block as 14 seats wide.
===================================================== */

/* virtual measurements (must match seat + gap above) */
:root{
    --cs-seat:25px;
    --cs-gap:4px;
    --cs-aisle:26px;

    /* 14 seats: width = 14 seats + 13 gaps */
    --balcony-block-width: calc((var(--cs-seat) * 14) + (var(--cs-gap) * 13));
}

/* Each balcony block is wrapped in a fixed-width "virtual block"
   so aisle positions don't drift when seat-count varies. */
.cs-row.balcony .cs-block-wrap{
    width:var(--balcony-block-width);
    display:flex;
    flex-shrink:0;
}

/* For 4-block balcony rows:
   pos-1 = outer-left  (align to outer edge)
   pos-2 = inner-left  (align toward center aisle)
   pos-3 = inner-right (align toward center aisle)
   pos-4 = outer-right (align to outer edge)
*/
.cs-row.balcony[data-block-count="4"] .cs-block-wrap.pos-1{ justify-content:flex-start; }
.cs-row.balcony[data-block-count="4"] .cs-block-wrap.pos-2{ justify-content:flex-end; }
.cs-row.balcony[data-block-count="4"] .cs-block-wrap.pos-3{ justify-content:flex-start; }
.cs-row.balcony[data-block-count="4"] .cs-block-wrap.pos-4{ justify-content:flex-end; }

/* For 2-block balcony rows (no aisle):
   pos-1 outer-left, pos-2 outer-right
*/
.cs-row.balcony[data-block-count="2"] .cs-row-seats{
    width:calc((var(--balcony-block-width) * 4) + (var(--cs-aisle) * 3));
    display:flex;
    justify-content:space-between;
}
.cs-row.balcony[data-block-count="2"] .cs-block-wrap.pos-1{ justify-content:flex-start; }
.cs-row.balcony[data-block-count="2"] .cs-block-wrap.pos-2{ justify-content:flex-end; }

/* =====================================================
   STAGE
===================================================== */
.cs-stage-wrapper{
    display:flex;
    justify-content:center;
    margin-top:80px;
}

.cs-stage{
    width:90%;
    max-width:980px;
    height:90px;

    background:linear-gradient(to bottom,#333,#111);
    color:#fff;

    text-align:center;
    font-weight:700;
    letter-spacing:3px;
    line-height:90px;

    border-radius:500px 500px 0 0;
}

/* =====================================================
   LEGEND
===================================================== */

.cs-legend-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.cs-legend {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 18px 24px 20px;

    border: 2px solid #333;
    border-radius: 8px;
    background: #fff;
}

.cs-legend::before {
    content: "Legend";
    position: absolute;
    top: -10px;
    left: 16px;

    padding: 0 8px;
    background: #fff;

    font-weight: 700;
    font-size: 13px;
    color: #000;
}

.cs-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Legend color squares */
.cs-legend-seat {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    display: block;
}

/* Legend colors — EXPLICIT */
.cs-legend-seat.cs-available {
    background-color: #1e73be;
}

.cs-legend-seat.cs-reserved {
    background-color: #c0392b;
}

.cs-legend-seat.cs-sold {
    background-color: #1e73be;
    opacity: 0.35;
}

.cs-legend-seat.cs-locked {
    background-color: #000;
}

/* Legend text */
.cs-legend-item span {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.cs-legend-contact {
    margin-top: 8px;
    font-size: 14px;
    text-align: left;
}

.cs-legend-contact a {
    font-weight: 600;
    text-decoration: underline;
}
.cs-legend-contact {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
    font-size: 14px;
}

.cs-legend-contact a {
    font-weight: 600;
    text-decoration: underline;
}


/* =====================================================
   OVERFLOW SAFETY — PREVENT CLIPPING (KEEP)
===================================================== */
.cs-row,
.cs-row-seats,
.cs-block,
.cs-block-wrap{
    overflow:visible;
}

/* Horizontal scroll allowed, vertical never clipped */
.cs-seating-wrapper{
    overflow-x:auto;
    overflow-y:visible !important;
}



/* Blocks are visual only */
.cs-block{
    pointer-events:none;
}

/* Seats remain interactive */
.cs-seat{
    pointer-events:auto;
    position:relative;
    z-index:5;
}

.cs-block-wrap{
    pointer-events:none;
}


/* =====================================================
   LOCK COUNTDOWN
===================================================== */

.cs-seat.cs-locked {
    background-color: #000;
    color: #fff;
    cursor: not-allowed;
    position: relative;
}

.cs-seat.cs-locked::after {
    content: attr(data-countdown);
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}



.cs-row.balcony{
    pointer-events:none;
}

.cs-row.balcony .cs-row-label{
    pointer-events:none;
}

.cs-row.balcony .cs-row-seats{
    pointer-events:none;
}

.cs-row.balcony .cs-block-wrap{
    pointer-events:none;
}

.cs-row.balcony .cs-block{
    pointer-events:none;
}

.cs-row.balcony .cs-seat{
    pointer-events:auto;
    position:relative;
    z-index:10;
}


/* =====================================================
   ROW LABEL POSITION TWEAKS
===================================================== */

/* Orchestra row labels — small upward nudge */
.cs-row.orchestra .cs-row-label{
    transform: translateY(-35px);
}

/* Balcony rows WITH aisles */
.cs-row.balcony.has-aisle .cs-row-label{
    transform: translateY(55px); 
}

/* Balcony rows WITHOUT aisles */
.cs-row.balcony.no-aisle .cs-row-label{
    transform: translateY(15px); 
}