/**
 * 移动端表单优化样式
 */

/* ==================== 表单布局优化 ==================== */
@media (max-width: 767px) {
    /* 单列表单布局 */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* 表单分组 */
    .form-group {
        margin-bottom: 20px;
    }
    
    /* 可折叠表单分组 */
    .form-section {
        margin-bottom: 20px;
    }
    
    .form-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;
    }
    
    .form-section-header h3 {
        margin: 0;
        font-size: 16px;
    }
    
    .form-section-toggle {
        font-size: 20px;
        transition: transform 0.3s ease;
    }
    
    .form-section.collapsed .form-section-toggle {
        transform: rotate(-90deg);
    }
    
    .form-section-content {
        max-height: 2000px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .form-section.collapsed .form-section-content {
        max-height: 0;
    }
}

/* ==================== 输入框优化 ==================== */
@media (max-width: 767px) {
    /* 最小高度48px（iOS推荐） */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px !important; /* 防止iOS自动缩放 */
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        width: 100%;
    }
    
    /* Focus状态优化 */
    input:focus,
    textarea:focus,
    select:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    /* Textarea特殊处理 */
    textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Select优化 */
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        padding-right: 40px;
    }
}

/* ==================== 键盘类型优化 ==================== */
/* 这些通过HTML属性实现，CSS仅做样式优化 */
input[type="number"] {
    text-align: right;
}

input[type="tel"] {
    letter-spacing: 1px;
}

/* ==================== 文件上传优化 ==================== */
@media (max-width: 767px) {
    .file-upload-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
    
    .file-upload-input {
        position: absolute;
        left: -9999px;
    }
    
    .file-upload-button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 20px;
        background: #667eea;
        color: #fff;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        width: 100%;
    }
    
    .file-upload-button:active {
        background: #5568d3;
    }
    
    /* 文件预览 */
    .file-preview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        margin-top: 15px;
    }
    
    .file-preview-item {
        position: relative;
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        background: #f8f9fa;
    }
    
    .file-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .file-preview-remove {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 24px;
        height: 24px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
    }
    
    /* 上传进度 */
    .upload-progress {
        margin-top: 10px;
    }
    
    .upload-progress-bar {
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .upload-progress-fill {
        height: 100%;
        background: #667eea;
        transition: width 0.3s ease;
    }
    
    .upload-progress-text {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
        text-align: center;
    }
}

/* ==================== 复选框和单选框优化 ==================== */
@media (max-width: 767px) {
    .checkbox-group,
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .checkbox-item,
    .radio-item {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        cursor: pointer;
    }
    
    .checkbox-item input,
    .radio-item input {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        cursor: pointer;
    }
    
    .checkbox-item label,
    .radio-item label {
        flex: 1;
        cursor: pointer;
        margin: 0;
    }
    
    .checkbox-item.checked,
    .radio-item.checked {
        background: #e3f2fd;
        border: 2px solid #667eea;
    }
}

/* ==================== 按钮优化 ==================== */
@media (max-width: 767px) {
    .btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 8px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    /* 提交按钮特殊样式 */
    .btn-submit {
        background: #667eea;
        color: #fff;
        font-weight: bold;
    }
    
    .btn-submit:active {
        background: #5568d3;
    }
    
    /* 返回按钮 */
    .btn-back {
        background: #f8f9fa;
        color: #333;
    }
}

/* ==================== 表单验证提示 ==================== */
@media (max-width: 767px) {
    .form-error {
        color: #dc3545;
        font-size: 14px;
        margin-top: 5px;
        display: block;
    }
    
    .form-success {
        color: #28a745;
        font-size: 14px;
        margin-top: 5px;
        display: block;
    }
    
    .input-error {
        border-color: #dc3545 !important;
    }
    
    .input-success {
        border-color: #28a745 !important;
    }
}

/* ==================== 加载状态 ==================== */
@media (max-width: 767px) {
    .form-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.6;
    }
    
    .form-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin: -15px 0 0 -15px;
        border: 3px solid rgba(0,0,0,.1);
        border-radius: 50%;
        border-top-color: #667eea;
        animation: spin 1s ease-in-out infinite;
    }
}

/* ==================== 日期选择器优化 ==================== */
@media (max-width: 767px) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ==================== 标签优化 ==================== */
@media (max-width: 767px) {
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 14px;
        color: #333;
    }
    
    label .required {
        color: #dc3545;
        margin-left: 2px;
    }
    
    label .optional {
        color: #999;
        font-weight: normal;
        font-size: 12px;
        margin-left: 5px;
    }
}

/* ==================== 帮助文本 ==================== */
@media (max-width: 767px) {
    .form-help {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
        display: block;
    }
}