/* =====================================================
   Seat Booking Plugin – seat-booking.css
   ===================================================== */

/* ---------- Reset / Root ---------- */
.sb-wrapper *,
.sb-wrapper *::before,
.sb-wrapper *::after {
    box-sizing: border-box;
}

:root {
    --sb-bg:           #f5f0e8;
    --sb-card-bg:      #fffdf7;
    --sb-border:       #e8d8a0;
    --sb-gold:         #c8922a;
    --sb-gold-light:   #f0d080;
    --sb-text:         #2a2010;
    --sb-text-muted:   #7a6840;
    --sb-selected:     #d4a843;
    --sb-booked:       #b0b0b0;
    --sb-stage-bg:     #1a1a2e;
    --sb-font:         'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* tier colours */
    --tier-gold:   #e8c84a;
    --tier-purple: #b09ad0;
    --tier-green:  #88c888;
    --tier-peach:  #e0b080;
    --tier-pink:   #e890b8;
    --tier-blue:   #90b8e0;
}

/* ---------- Layout ---------- */
.sb-wrapper {
    display:         flex;
    gap:             24px;
    align-items:     flex-start;
    background:      var(--sb-bg);
    padding:         24px;
    border-radius:   16px;
    font-family:     var(--sb-font);
    color:           var(--sb-text);
    min-height:      600px;
}

/* MAP PANEL */
.sb-map-panel {
    flex:      1 1 0;
    min-width: 0;
    position:  relative;
}

.sb-map-viewport {
    overflow:      auto;
    border-radius: 12px;
    background:    var(--sb-bg);
    max-height:    75vh;
    cursor:        grab;
}
.sb-map-viewport:active { cursor: grabbing; }

.sb-map-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         16px;
    transform-origin: top center;
    transition:      transform .2s ease;
    min-width:       700px;
}

/* ---------- Stage ---------- */
.sb-stage {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--sb-stage-bg);
    color:           #fff;
    width:           480px;
    max-width:       90%;
    padding:         10px 24px;
    border-radius:   8px;
    margin-bottom:   12px;
    font-weight:     700;
    letter-spacing:  .08em;
    font-size:       .85rem;
}
.sb-stage small {
    font-size:   .65rem;
    opacity:     .7;
    font-weight: 400;
    letter-spacing: .12em;
}

/* ---------- Section labels ---------- */
.sb-section-label {
    display:         inline-block;
    background:      var(--sb-gold);
    color:           #fff;
    font-size:       .7rem;
    font-weight:     700;
    letter-spacing:  .1em;
    padding:         2px 14px;
    border-radius:   20px;
    margin:          10px 0 4px;
}

/* ---------- Row ---------- */
.sb-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sb-section.sb-balcony { margin-top: 14px; }

.sb-row {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.sb-row-label {
    font-size:   .6rem;
    font-weight: 700;
    color:       var(--sb-text-muted);
    width:       18px;
    text-align:  center;
    flex-shrink: 0;
}

.sb-seats-left,
.sb-seats-right {
    display: flex;
    gap:     2px;
}

.sb-aisle {
    width:      16px;
    flex-shrink: 0;
}

/* ---------- Seats ---------- */
.sb-seat {
    width:         18px;
    height:        18px;
    border:        1px solid transparent;
    border-radius: 3px;
    font-size:     .48rem;
    cursor:        pointer;
    padding:       0;
    line-height:   18px;
    text-align:    center;
    transition:    transform .1s, box-shadow .1s;
    color:         rgba(0,0,0,.5);
    font-weight:   600;
}
.sb-seat:hover:not(.sb-booked) {
    transform:   scale(1.25);
    box-shadow:  0 2px 6px rgba(0,0,0,.25);
    z-index:     10;
    position:    relative;
}
.sb-seat.sb-selected {
    background:  var(--sb-selected) !important;
    border-color: #a07820 !important;
    color:       #fff !important;
    transform:   scale(1.15);
}
.sb-seat.sb-booked {
    background:  var(--sb-booked) !important;
    cursor:      not-allowed;
    color:       transparent;
}

/* Tier colours */
.sb-seat.tier-gold   { background: var(--tier-gold);   border-color: #c0a030; }
.sb-seat.tier-purple { background: var(--tier-purple);  border-color: #8060b0; }
.sb-seat.tier-green  { background: var(--tier-green);   border-color: #50a050; }
.sb-seat.tier-peach  { background: var(--tier-peach);   border-color: #c08040; }
.sb-seat.tier-pink   { background: var(--tier-pink);    border-color: #c05090; }
.sb-seat.tier-blue   { background: var(--tier-blue);    border-color: #5080c0; }

/* ---------- Zoom Controls ---------- */
.sb-zoom-controls {
    display:   flex;
    gap:       6px;
    margin-bottom: 10px;
}
.sb-zoom-btn {
    width:         38px;
    height:        38px;
    border:        2px solid var(--sb-border);
    background:    var(--sb-card-bg);
    border-radius: 8px;
    font-size:     1.1rem;
    cursor:        pointer;
    color:         var(--sb-text);
    transition:    background .15s;
}
.sb-zoom-btn:hover { background: var(--sb-gold-light); }

/* ---------- Legend ---------- */
.sb-legend {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px 16px;
    margin-top: 14px;
    font-size:  .72rem;
    color:      var(--sb-text-muted);
}
.sb-legend-item {
    display:     flex;
    align-items: center;
    gap:         5px;
}
.sb-legend-dot {
    width:         12px;
    height:        12px;
    border-radius: 3px;
    display:       inline-block;
    flex-shrink:   0;
}
.sb-legend-tier-gold   { background: var(--tier-gold); }
.sb-legend-tier-purple { background: var(--tier-purple); }
.sb-legend-tier-green  { background: var(--tier-green); }
.sb-legend-tier-peach  { background: var(--tier-peach); }
.sb-legend-tier-pink   { background: var(--tier-pink); }
.sb-legend-tier-blue   { background: var(--tier-blue); }

/* ---------- Sidebar ---------- */
.sb-sidebar {
    width:          320px;
    flex-shrink:    0;
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

/* Info card */
.sb-info-card,
.sb-selected-card {
    background:    var(--sb-card-bg);
    border:        2px solid var(--sb-border);
    border-radius: 16px;
    padding:       20px;
}

.sb-info-header {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    margin-bottom: 12px;
}
.sb-event-icon {
    font-size:  1.6rem;
    flex-shrink: 0;
}
.sb-event-title {
    font-size:      1rem;
    font-weight:    800;
    letter-spacing: .04em;
    color:          var(--sb-text);
    margin:         0;
    line-height:    1.3;
    text-transform: uppercase;
}

.sb-meta-row {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px 14px;
    margin-bottom: 6px;
}
.sb-meta-item {
    font-size:  .75rem;
    color:      var(--sb-text-muted);
    border:     1px solid var(--sb-border);
    border-radius: 20px;
    padding:    3px 10px;
}

/* Tier list */
.sb-tier-list {
    margin-top: 14px;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}
.sb-tier-row {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        8px 10px;
    border-radius:  8px;
    border-bottom:  1px solid var(--sb-border);
}
.sb-tier-row:last-child { border-bottom: none; }
.sb-tier-dot {
    width:         14px;
    height:        14px;
    border-radius: 4px;
    flex-shrink:   0;
}
.sb-tier-dot.tier-gold   { background: var(--tier-gold); }
.sb-tier-dot.tier-purple { background: var(--tier-purple); }
.sb-tier-dot.tier-green  { background: var(--tier-green); }
.sb-tier-dot.tier-peach  { background: var(--tier-peach); }
.sb-tier-dot.tier-pink   { background: var(--tier-pink); }
.sb-tier-dot.tier-blue   { background: var(--tier-blue); }

.sb-tier-name  { flex: 1; font-size: .72rem; font-weight: 600; color: var(--sb-text); }
.sb-tier-price { font-size: .75rem; font-weight: 700; color: var(--sb-gold); white-space: nowrap; }

/* Selected seats */
.sb-selected-heading {
    font-size:   .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    color:       var(--sb-text);
    margin:      0 0 12px;
    border-bottom: 2px solid var(--sb-border);
    padding-bottom: 8px;
}
.sb-no-seats {
    font-size: .78rem;
    color:     var(--sb-text-muted);
    text-align: center;
    padding:   10px 0;
}
.sb-selected-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.sb-selected-item {
    display:    flex;
    justify-content: space-between;
    align-items: center;
    font-size:  .75rem;
    padding:    5px 4px;
    border-bottom: 1px solid var(--sb-border);
    gap:        8px;
}
.sb-selected-item:last-child { border-bottom: none; }
.sb-selected-item .sb-remove {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #c04040;
    font-size:  .9rem;
    padding:    0 4px;
    line-height: 1;
}
.sb-total-row {
    display:    flex;
    justify-content: space-between;
    font-size:  .82rem;
    font-weight: 700;
    color:      var(--sb-text);
    padding:    8px 0;
    border-top: 2px solid var(--sb-border);
    margin-top: 4px;
}
.sb-total-row strong { color: var(--sb-gold); }

.sb-book-btn {
    width:          100%;
    padding:        14px;
    background:     var(--sb-gold);
    color:          #fff;
    border:         none;
    border-radius:  10px;
    font-size:      .82rem;
    font-weight:    800;
    letter-spacing: .1em;
    cursor:         pointer;
    transition:     background .2s, transform .1s;
    margin-top:     10px;
}
.sb-book-btn:hover:not(:disabled) {
    background:  #b07820;
    transform:   translateY(-1px);
}
.sb-book-btn:disabled {
    background: #ccc;
    cursor:     not-allowed;
}

.sb-message {
    font-size:   .75rem;
    margin-top:  8px;
    text-align:  center;
    min-height:  1.2em;
}
.sb-message.success { color: #2a8a2a; }
.sb-message.error   { color: #c03030; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sb-wrapper {
        flex-direction: column;
        padding: 14px;
    }
    .sb-sidebar {
        width: 100%;
    }
    .sb-map-viewport {
        max-height: 55vh;
    }
}

/* ---------- WooCommerce extras ---------- */
.sb-goto-cart {
    display:         inline-block;
    margin-top:      6px;
    background:      var(--sb-gold);
    color:           #fff;
    padding:         4px 12px;
    border-radius:   20px;
    font-size:       .75rem;
    font-weight:     700;
    text-decoration: none;
    transition:      background .2s;
}
.sb-goto-cart:hover { background: #b07820; color: #fff; }

.sb-seat.sb-reserved {
    background:  #f0c050 !important;
    cursor:      not-allowed;
    opacity:     .7;
}