/**
 * 可视化座位管理插件的前端样式
 */

/* 容器样式 */
.wp-visual-seating-container {
    max-width: 100%;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* 标题部分 */
.vs-header {
    margin-bottom: 15px;
}

.vs-title {
    margin: 0 0 5px 0;
    font-size: 24px;
}

.vs-description {
    margin: 0;
    color: #666;
}

/* 控制区 */
.vs-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.vs-zoom-controls {
    display: none;
    /*display: flex;*/
    gap: 5px;
    align-items: center;
    position: relative;
    z-index: 10; /* 确保控件始终显示在顶部 */
}

.vs-zoom-controls button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    min-width: 30px;
    line-height: 1.5;
}

.vs-zoom-controls button:hover {
    background-color: #f0f0f0;
}

.vs-zoom-level {
    display: inline-block;
    width: 45px;
    text-align: center;
    font-size: 13px;
}

.vs-selection-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.vs-clear-selection {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
}

.vs-clear-selection:hover {
    background-color: #f0f0f0;
}

/* 座位视图区域 */
.vs-seating-view {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto; /* 启用滚动 */
    margin-bottom: 20px;
    height: 600px; /* 固定高度以确保滚动条正常工作 */
    width: 100%;
    background-color: #f9f9f9;
}

.vs-seating-wrapper {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.vs-stage {
    background-color: #eaeaea;
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.vs-stage-label {
    font-weight: bold;
    color: #666;
}

.vs-seating-container {
        transform: scale(1.2);
    position: relative;
    min-width: 100%;
    min-height: 300px;
    padding: 20px;
    background-color: #f9f9f9;
    transform-origin: 0 0; /* 从左上角开始变换 */
    will-change: transform; /* 提示浏览器优化变换 */
    margin-left: 1000px;
    margin-top: -50px;
}

/* 座位样式 */
.vs-seat {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 10px;
    color: white;
    cursor: default;
    user-select: none;
    transition: transform 0.2s, box-shadow 0.2s;
    will-change: transform; /* 优化变换性能 */
    backface-visibility: hidden; /* 减少3D闪烁 */
    transform: translate3d(0, 0, 0); /* 启用GPU加速 */
}

.vs-seat.vs-selectable {
    cursor: pointer;
}

.vs-seat.vs-selectable:hover {
    transform: scale(1.1) translate3d(0, 0, 0);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.vs-seat.vs-selected {
    box-shadow: 0 0 0 2px #f40000, 0 0 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1) translate3d(0, 0, 0);
    z-index: 3;
}

.vs-seat-label {
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.vs-seat-price {
    font-size: 8px;
    margin-top: 2px;
    line-height: 1;
}

/* 座位类型样式 */
.vs-seat-type-regular {
    background-color: #5cb85c;
}

.vs-seat-type-vip {
    background-color: #5bc0de;
}

.vs-seat-type-premium {
    background-color: #9933cc;
}

.vs-seat-type-disabled {
    background-color: #777777;
}

/* 座位状态样式 */
.vs-seat-status-available {
    /* 使用类型的背景色 */
}

.vs-seat-status-sold {
    background-color: #d9534f !important;
}

.vs-seat-status-reserved {
    background-color: #f0ad4e !important;
}

.vs-seat-status-disabled {
    background-color: #777777 !important;
}

.vs-seat-status-temp-locked,
.vs-seat[data-status="temp-locked"] {
    background-color: #ffbb33 !important;
    cursor: not-allowed;
}

/* 图例样式 */
.vs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    justify-content: center;
}

.vs-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vs-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.vs-legend-color.vs-seat-status-available {
    background-color: #5cb85c;
}

.vs-legend-color.vs-seat-status-sold {
    background-color: #d9534f;
}

.vs-legend-color.vs-seat-status-reserved {
    background-color: #f0ad4e;
}

.vs-legend-color.vs-seat-status-disabled {
    background-color: #777777;
}

.vs-legend-color.vs-seat-type-regular {
    background-color: #5cb85c;
}

.vs-legend-color.vs-seat-type-vip {
    background-color: #5bc0de;
}

.vs-legend-color.vs-seat-type-premium {
    background-color: #9933cc;
}

.vs-legend-color.vs-seat-type-disabled {
    background-color: #777777;
}

.vs-legend-text {
    font-size: 12px;
    color: #333;
}

.vs-legend-divider {
    /*width: 1px;*/
    /*height: 16px;*/
    /*background-color: #ddd;*/
}

/* 已选座位区域 */
.vs-selected-seats {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.vs-selected-seats h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.vs-selected-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    max-height: 150px;
    overflow-y: auto;
}

.vs-selected-list li {
    display: flex;
    /*justify-content: space-between;*/
    padding: 5px 0;
    border-bottom: 1px solid #eaeaea;
    justify-content: space-around;
}

.vs-selected-list li:last-child {
    border-bottom: none;
}

.vs-selected-list .vs-remove-seat {
    color: #d9534f;
    cursor: pointer;
    font-size: 14px;
}

.vs-selection-summary {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 15px;
}

.vs-submit-selection {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vs-submit-selection:hover {
    background-color: #4cae4c;
}

/* 响应式样式 */
@media (max-width: 768px) {
    .vs-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    /*.vs-legend {*/
    /*    flex-direction: column;*/
    /*    gap: 10px;*/
    /*}*/
    
    /*.vs-legend-divider {*/
    /*    width: 100%;*/
    /*    height: 1px;*/
    /*    margin: 5px 0;*/
    /*}*/
    
    .vs-seating-view {
        height: 400px; /* 在小屏幕上减小高度 */
    }
}

/* 移动设备优化 */
@media (max-width: 480px) {
    .vs-seating-view {
        /*height: 280px;*/
    }
    
    .vs-seating-container{
    
    transform: scale(1.2);
    transform-origin: 0px 0px;
    
    
    }
    
    
    .vs-zoom-controls button {
        padding: 3px 6px;
        min-width: 24px;
    }
    
    .vs-zoom-level {
        width: 35px;
        font-size: 12px;
    }
}

/* 确认按钮和信息样式 */
.vs-selection-controls {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f7f7f7;
    border-radius: 4px;
}

.vs-selected-seats-info {
    display: flex;
    gap: 15px;
}

.vs-selected-count,
.vs-total-price {
    font-size: 14px;
    font-weight: bold;
}

.vs-confirm-selection {
    padding: 8px 16px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.vs-confirm-selection:hover:not(:disabled) {
    background-color: #45a049;
}

.vs-confirm-selection:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 预订状态样式 */
.vs-reservation-status {
    margin-top: 15px;
    padding: 10px;
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    border-radius: 2px;
}

.vs-status-message {
    font-weight: bold;
    margin-bottom: 5px;
}

.vs-countdown {
    font-size: 13px;
    color: #666;
}

.vs-countdown .time {
    font-weight: bold;
    color: #f44336;
}