/**
 * 移动端复选框/单选框触摸优化
 * 修复 aiz-checkbox 和 aiz-radio 在移动端无法选中的问题
 */

/* 1. 增大点击区域（使用伪元素扩展） */
.aiz-checkbox,
.aiz-radio {
    position: relative;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 2. 为标签添加最小点击区域（移动端建议至少 44x44px） */
.aiz-checkbox .aiz-square-check,
.aiz-checkbox .aiz-rounded-check,
.aiz-radio .aiz-square-check,
.aiz-radio .aiz-rounded-check {
    min-width: 16px;
    min-height: 16px;
    display: inline-block;
    cursor: pointer;
}

/* 3. 扩展点击热区（通过伪元素） */
.aiz-checkbox .aiz-square-check::before,
.aiz-checkbox .aiz-rounded-check::before,
.aiz-radio .aiz-square-check::before,
.aiz-radio .aiz-rounded-check::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    /* 扩展到 40x40px 的可点击区域 */
}

/* 4. 移动端特定优化 */
@media (max-width: 768px) {
    /* 增大复选框本身的尺寸 */
    .aiz-checkbox .aiz-square-check,
    .aiz-checkbox .aiz-rounded-check,
    .aiz-radio .aiz-square-check,
    .aiz-radio .aiz-rounded-check {
        width: 20px;
        height: 20px;
        top: 1px; /* 调整位置 */
    }
    
    /* 调整对勾位置 */
    .aiz-square-check:after {
        margin-left: -2px;
        margin-top: -7px;
        width: 6px;
        height: 12px;
    }
    
    /* 调整圆点位置 */
    .aiz-rounded-check:after {
        margin-left: -4px;
        margin-top: -4px;
        width: 8px;
        height: 8px;
    }
    
    /* 增加整体标签的内边距 */
    .aiz-checkbox,
    .aiz-radio {
        padding-left: 32px;
        min-height: 44px; /* 苹果建议的最小触摸目标 */
        display: flex;
        align-items: center;
    }
    
    [dir="rtl"] .aiz-checkbox,
    [dir="rtl"] .aiz-radio {
        padding-right: 32px;
        padding-left: 0;
    }
}

/* 5. 确保 input 仍然可以接收事件 */
.aiz-checkbox > input,
.aiz-radio > input {
    position: absolute;
    opacity: 0;
    z-index: 10 !important; /* 使用 !important 确保优先级，覆盖原有的 z-index: -1 */
    width: 40px; /* 扩大实际输入框的点击区域 */
    height: 40px;
    top: -12px;
    left: -12px;
    cursor: pointer;
    margin: 0;
    pointer-events: auto !important; /* 确保可以接收指针事件 */
}

[dir="rtl"] .aiz-checkbox > input,
[dir="rtl"] .aiz-radio > input {
    left: auto;
    right: -12px;
}

/* 6. 移动端触摸反馈 */
@media (max-width: 768px) {
    .aiz-checkbox:active .aiz-square-check,
    .aiz-checkbox:active .aiz-rounded-check,
    .aiz-radio:active .aiz-square-check,
    .aiz-radio:active .aiz-rounded-check {
        transform: scale(1.1);
        transition: transform 0.1s ease;
    }
}

/* 7. 表格中的复选框优化 */
@media (max-width: 768px) {
    table .aiz-checkbox,
    table .aiz-radio {
        min-height: 40px;
    }
    
    table .aiz-checkbox .aiz-square-check,
    table .aiz-checkbox .aiz-rounded-check {
        width: 22px;
        height: 22px;
    }
}

/* 8. 模态框中的复选框优化 */
.modal .aiz-checkbox,
.modal .aiz-radio {
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 768px) {
    .modal .aiz-checkbox,
    .modal .aiz-radio {
        min-height: 48px;
    }
}

/* 9. 禁用状态保持 */
.aiz-checkbox.aiz-checkbox-disabled > input,
.aiz-radio.aiz-radio-disabled > input {
    cursor: not-allowed;
    pointer-events: none;
}

/* 10. 确保复选框组的间距 */
@media (max-width: 768px) {
    .aiz-checkbox-inline .aiz-checkbox,
    .aiz-radio-inline .aiz-radio {
        margin-right: 20px;
        margin-bottom: 10px;
    }
}

/* 11. 强制移动端触摸支持 */
@media (max-width: 768px) {
    /* 确保整个标签区域都可以点击 */
    .aiz-checkbox,
    .aiz-radio {
        position: relative;
        display: flex;
        align-items: center;
        touch-action: manipulation; /* 优化触摸响应 */
    }
    
    /* 确保 input 在最上层但不覆盖视觉元素 */
    .aiz-checkbox > input,
    .aiz-radio > input {
        z-index: 5 !important;
        width: 44px !important;
        height: 44px !important;
        top: -12px !important;
        left: -12px !important;
        margin: 0 !important;
    }
    
    /* 视觉元素要可见 */
    .aiz-checkbox .aiz-square-check,
    .aiz-checkbox .aiz-rounded-check,
    .aiz-radio .aiz-square-check,
    .aiz-radio .aiz-rounded-check {
        pointer-events: none; /* 视觉元素不接收点击，只让 input 接收 */
        z-index: 2 !important; /* 确保可见 */
        position: relative;
    }
    
    /* 确保勾选标记可见 */
    .aiz-checkbox > input:checked ~ .aiz-square-check::after,
    .aiz-checkbox > input:checked ~ .aiz-rounded-check::after,
    .aiz-radio > input:checked ~ .aiz-square-check::after,
    .aiz-radio > input:checked ~ .aiz-rounded-check::after {
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 3 !important;
    }
}

/* 12. 针对表格中的复选框的特殊优化 */
@media (max-width: 768px) {
    table .aiz-checkbox > input,
    table .aiz-radio > input {
        width: 50px !important;
        height: 50px !important;
        top: -15px !important;
        left: -15px !important;
    }
}

/* 13. 增加点击反馈（视觉提示） */
@media (max-width: 768px) {
    .aiz-checkbox:active,
    .aiz-radio:active {
        opacity: 0.7;
    }
}

/* 14. 确保整个 label 区域都可以点击（包括文字） */
.aiz-checkbox,
.aiz-radio {
    cursor: pointer !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 15. 确保文字部分可以触发点击 */
.aiz-checkbox > span,
.aiz-radio > span {
    cursor: pointer;
    pointer-events: auto; /* 确保文字可以接收点击 */
}

/* 16. 复选框视觉元素不拦截点击（让 input 接收） */
.aiz-checkbox .aiz-square-check,
.aiz-checkbox .aiz-rounded-check,
.aiz-radio .aiz-square-check,
.aiz-radio .aiz-rounded-check {
    pointer-events: none !important; /* 视觉元素不拦截 */
    /* 确保显示层级正确 */
    position: relative;
    z-index: 1;
    display: inline-block;
}

/* 17. 强制显示选中状态（最高优先级） */
.aiz-checkbox > input:checked ~ .aiz-square-check::after,
.aiz-checkbox > input:checked ~ .aiz-rounded-check::after,
.aiz-radio > input:checked ~ .aiz-square-check::after,
.aiz-radio > input:checked ~ .aiz-rounded-check::after {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 10 !important;
    position: absolute !important;
}

/* 未选中状态 */
.aiz-checkbox > input:not(:checked) ~ .aiz-square-check::after,
.aiz-checkbox > input:not(:checked) ~ .aiz-rounded-check::after,
.aiz-radio > input:not(:checked) ~ .aiz-square-check::after,
.aiz-radio > input:not(:checked) ~ .aiz-rounded-check::after {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 18. 增强整个 label 的点击体验 */
.aiz-checkbox,
.aiz-radio {
    display: inline-flex;
    align-items: center;
    position: relative;
    pointer-events: auto; /* label 接收点击 */
}

/* 19. 文字部分样式优化 */
.aiz-checkbox > span:not(.aiz-square-check):not(.aiz-rounded-check),
.aiz-radio > span:not(.aiz-square-check):not(.aiz-rounded-check) {
    pointer-events: none; /* 文字不拦截点击，让 label 处理 */
    display: inline-block;
    vertical-align: middle;
}

/* 19. 移动端额外优化：确保文字区域足够大 */
@media (max-width: 768px) {
    .aiz-checkbox,
    .aiz-radio {
        padding: 8px 0;
        width: 100%;
    }
}