/**
 * 授权/配额弹窗布局 - 与续费授权一致的宽弹窗与卡片换行
 * 适用于：续费授权、购买授权、积分兑换、购买数量、兑换数量
 */

/* 配额包已改为使用主题标准方式（product-box + data-for），选中状态由主题自动处理 */

/* 授权弹窗宽度优化 - 桌面端更宽，移动端自适应 */
@media (min-width: 768px) {
    .modal-dialog.mk-gather-modal-wide {
        width: 653px;
        max-width: calc(100% - 40px);
    }
}

/* 套餐选择区域优化 - 让卡片横向排列，最后一行居中避免单侧留白 */
.mk-gather-modal-wide .charge-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* 套餐卡片与配额包一致：每行 4 个，减少留白 */
.mk-gather-modal-wide .charge-box .product-box,
.mk-gather-modal-wide .charge-box .zib-widget {
    flex: 0 0 calc(25% - 8px);
    min-width: 180px;
    max-width: none;
}

/* 桌面端：配额包加宽 */
@media (min-width: 768px) {
    .mk-gather-modal-wide .charge-box.mb10 .product-box[data-for="quota_package_key"],
    .mk-gather-modal-wide .charge-box.mb10 .zib-widget[data-for="quota_package_key"],
    .mk-gather-modal-wide .charge-box.mb10 .product-box[data-for="points_quota_key"],
    .mk-gather-modal-wide .charge-box.mb10 .zib-widget[data-for="points_quota_key"],
    .mk-gather-modal-wide .charge-box.mb10 .product-box[data-for="quota_purchase_pack_key"],
    .mk-gather-modal-wide .charge-box.mb10 .zib-widget[data-for="quota_purchase_pack_key"],
    .mk-gather-modal-wide .charge-box.mb10 .product-box[data-for="quota_points_pack_key"],
    .mk-gather-modal-wide .charge-box.mb10 .zib-widget[data-for="quota_points_pack_key"] {
        min-width: 180px !important;
        max-width: 250px !important;
    }
}

/* 移动端：一行显示2个套餐 */
@media (max-width: 767px) {
    .modal-dialog.mk-gather-modal-wide {
        width: 100%;
        max-width: 100%;
    }

    .mk-gather-modal-wide .charge-box,
    .mk-gather-modal-wide .charge-box.mb20,
    .mk-gather-modal-wide .charge-box.mb10 {
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .mk-gather-modal-wide .charge-box .product-box,
    .mk-gather-modal-wide .charge-box .zib-widget,
    .mk-gather-modal-wide .charge-box .vip-product,
    .mk-gather-modal-wide .charge-box .zib-widget.vip-product,
    .mk-gather-modal-wide .charge-box .zib-widget.vip-product.product-box {
        flex: 0 0 calc(50% - 4px) !important;
        min-width: 0 !important;
        max-width: none !important;
        width: calc(50% - 4px) !important;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 配额包现在也使用 product-box 类，与套餐卡片共用样式 */
}