/* Seat Addon — free-form viewer (front-end). */
.mepsa_canvas_booking {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(2, 6, 23, 0.08), 0 2px 6px rgba(2, 6, 23, 0.05);
    margin-bottom: 16px;
}

.mepsa_canvas_booking .mepsa_canvas_view {
    /* Height is set dynamically by JS fit(); min ensures something renders before JS runs. */
    width: 100%;
    min-height: 80px;
    /* Soft grey, semi-transparent seating area with a gentle dotted texture. */
    background-color: rgba(148, 163, 184, 0.12);
    background-image: radial-gradient(rgba(148, 163, 184, 0.32) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    /* Scroll sideways on narrow screens (seats stay a readable size). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    box-shadow: inset 0 2px 8px rgba(2, 6, 23, 0.06);
}
.mepsa_canvas_booking .mepsa_canvas_view::-webkit-scrollbar { height: 8px; }
.mepsa_canvas_booking .mepsa_canvas_view::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

.mepsa_canvas_booking .mepsa_canvas_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 13px;
    color: #475569;
}
.mepsa_canvas_booking .mepsa_canvas_legend span { display: inline-flex; align-items: center; gap: 6px; }
.mepsa_canvas_booking .mepsa_swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mepsa_canvas_booking .mepsa_swatch_sold { background: #e5e7eb; }
.mepsa_canvas_booking .mepsa_swatch_locked { background: #eef0f3; border: 1px dashed #b6bcc6; }

.mepsa_canvas_booking .mepsa_selected_summary {
    margin-top: 14px;
    padding: 12px 16px;
    background: #f1f5ff;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
}
.mepsa_canvas_booking .mepsa_selected_head { margin-bottom: 6px; }
.mepsa_canvas_booking .mepsa_selected_list { list-style: none; margin: 0; padding: 0; }
.mepsa_canvas_booking .mepsa_selected_list li {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; border-bottom: 1px dashed #d8def0;
}
.mepsa_canvas_booking .mepsa_selected_list li .mepsa_li_seat {
    font-weight: 700; min-width: 52px;
    display: inline-flex; align-items: center; gap: 6px;
}
.mepsa_canvas_booking .mepsa_selected_list li .mepsa_li_dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mepsa_canvas_booking .mepsa_selected_list li .mepsa_li_type { color: #475569; flex: 1; }
.mepsa_canvas_booking .mepsa_selected_list li .mepsa_li_price { font-weight: 600; }
.mepsa_canvas_booking .mepsa_selected_total { margin-top: 8px; text-align: right; font-weight: 700; }