/* Seat Addon — free-form viewer (front-end). */
.mepsa_canvas_booking {
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    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;
    background: #f8fafc;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    touch-action: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.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; }