/* 移动端模态框专用样式 */

/* 基础移动端模态框适配 */
@media (max-width: 768px) {
    /* 模态框背景 */
    .mobile-device .modal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* 模态框内容容器 */
    .mobile-device .modal-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important; /* 为底部导航栏留出空间 */
        width: 100% !important;
        height: calc(100% - 70px) !important; /* 减去底部导航栏高度 */
        max-width: 100% !important;
        max-height: calc(100% - 70px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 大型模态框也采用全屏 */
    .mobile-device .modal-large {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 模态框头部 */
    .mobile-device .modal-content > h2,
    .mobile-device .modal-title {
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        margin: 0 !important;
        padding: 16px 50px 16px 16px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #e9ecef !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
    }
    
    /* 关闭按钮 */
    .mobile-device .modal-content .close {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 11 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 28px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 表单容器 */
    .mobile-device .modal-content form {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        padding-bottom: 90px !important; /* 为底部按钮留空间，考虑按钮组的高度 */
    }
    
    /* 表单行在移动端改为单列 */
    .mobile-device .modal-content .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .mobile-device .modal-content .form-group {
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    
    /* 表单标签 */
    .mobile-device .form-label-large {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
        font-weight: 600 !important;
    }
    
    /* 输入框优化 */
    .mobile-device .modal-content .form-control,
    .mobile-device .modal-content .form-control-large {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* 防止iOS自动缩放 */
        border: 2px solid #dee2e6 !important;
        border-radius: 8px !important;
        -webkit-appearance: none !important;
    }
    
    /* 选择框优化 */
    .mobile-device .modal-content select.form-control,
    .mobile-device .modal-content select.form-control-large {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px !important;
        color: #333 !important;
    }
    
    /* 文本域优化 */
    .mobile-device .modal-content textarea.form-control,
    .mobile-device .modal-content textarea.form-control-large {
        min-height: 80px !important;
        resize: vertical !important;
        color: #333 !important;
    }
    
    /* 按钮组 */
    .mobile-device .modal-content .button-group {
        position: fixed !important;
        bottom: 70px !important; /* 在底部导航栏上方 */
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        padding: 16px !important;
        border-top: 1px solid #e9ecef !important;
        display: flex !important;
        gap: 12px !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 10 !important;
    }
    
    /* 按钮样式 */
    .mobile-device .modal-content .button-group button {
        flex: 1 !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-device .modal-content .btn-secondary {
        background: #f8f9fa !important;
        color: #495057 !important;
        border: 2px solid #dee2e6 !important;
    }
    
    .mobile-device .modal-content .btn-primary {
        background: linear-gradient(135deg, #D2691E 0%, #F4A460 100%) !important;
        color: white !important;
    }
    
    .mobile-device .modal-content button:active {
        transform: scale(0.98) !important;
    }
    
    /* 特殊处理：预约相关的模态框 */
    .mobile-device #addAppointmentModal .form-control,
    .mobile-device #editAppointmentModal .form-control {
        margin-bottom: 0 !important;
    }
    
    /* 日期时间输入框 */
    .mobile-device input[type="date"],
    .mobile-device input[type="time"] {
        /* 确保在移动端显示原生选择器 */
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
        padding-right: 40px !important;
        color: #333 !important;
    }
    
    .mobile-device input[type="time"] {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolyline points='12 6 12 12 16 14'%3e%3c/polyline%3e%3c/svg%3e");
    }
    
    /* 滚动条美化 */
    .mobile-device .modal-content form::-webkit-scrollbar {
        width: 4px;
    }
    
    .mobile-device .modal-content form::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .mobile-device .modal-content form::-webkit-scrollbar-thumb {
        background: #D2691E;
        border-radius: 2px;
    }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-device .modal-content form {
        padding-bottom: 80px !important; /* 横屏模式下仍需考虑按钮组高度 */
    }
    
    .mobile-device .modal-content .button-group {
        padding: 12px !important;
        bottom: 60px !important; /* 横屏时底部导航栏可能更矮 */
    }
    
    .mobile-device .modal-content .button-group button {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* 小屏幕手机特殊处理 */
@media (max-width: 375px) {
    /* 小屏幕时底部导航栏更小，为60px */
    .mobile-device .modal-content {
        bottom: 60px !important;
        height: calc(100% - 60px) !important;
        max-height: calc(100% - 60px) !important;
    }
    
    .mobile-device .modal-content .button-group {
        bottom: 60px !important;
    }
    
    .mobile-device #newCalendarAppointmentModal {
        bottom: 60px !important;
        height: calc(100% - 60px) !important;
    }
    
    .mobile-device .new-calendar-appointment-content {
        bottom: 60px !important;
        height: calc(100% - 60px) !important;
        max-height: calc(100% - 60px) !important;
    }
    .mobile-device .modal-content > h2,
    .mobile-device .modal-title {
        font-size: 16px !important;
        padding: 14px 45px 14px 14px !important;
    }
    
    .mobile-device .modal-content .close {
        width: 36px !important;
        height: 36px !important;
        font-size: 24px !important;
    }
    
    .mobile-device .modal-content form {
        padding: 12px !important;
    }
    
    .mobile-device .form-label-large {
        font-size: 13px !important;
    }
    
    .mobile-device .modal-content .form-control,
    .mobile-device .modal-content .form-control-large {
        padding: 10px !important;
        font-size: 15px !important;
    }
    
    .mobile-device .modal-content .button-group {
        padding: 12px !important;
    }
    
    .mobile-device .modal-content .button-group button {
        padding: 10px 12px !important;
        font-size: 15px !important;
    }
}

/* 修复iOS的安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-device .modal-content form {
            padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }
        
        .mobile-device .modal-content .button-group {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
            bottom: calc(70px + env(safe-area-inset-bottom)) !important; /* 考虑安全区域 */
        }
    }
}

/* 动画效果 */
@media (max-width: 768px) {
    .mobile-device .modal {
        transition: opacity 0.3s ease;
    }
    
    .mobile-device .modal-content {
        animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* 特定模态框的额外样式 */
@media (max-width: 768px) {
    /* 会员信息显示 */
    .mobile-device .member-info-display {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
    }
    
    /* 折扣信息 */
    .mobile-device .discount-info {
        background: #e8f5e8;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
    }
    
    /* 成功/错误消息提示 */
    .mobile-device .modal-message {
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        text-align: center;
    }
    
    .mobile-device .modal-message.success {
        background: #d4edda;
        color: #155724;
    }
    
    .mobile-device .modal-message.error {
        background: #f8d7da;
        color: #721c24;
    }
    
    /* 日历添加预约模态框专用样式 */
    .mobile-device #newCalendarAppointmentModal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important; /* 为底部导航栏留出空间 */
        width: 100% !important;
        height: calc(100% - 70px) !important; /* 减去底部导航栏高度 */
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        transform: none !important;
        animation: none !important;
        z-index: 10000 !important;
    }
    
    .mobile-device .new-calendar-appointment-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important; /* 为底部导航栏留出空间 */
        width: 100% !important;
        height: calc(100% - 70px) !important; /* 减去底部导航栏高度 */
        max-width: 100% !important;
        max-height: calc(100% - 70px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        box-shadow: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* 日历模态框标题 */
    .mobile-device .new-calendar-appointment-content h3 {
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        margin: 0 !important;
        padding: 16px 50px 16px 16px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #e9ecef !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
    }
    
    /* 日历模态框关闭按钮 */
    .mobile-device .new-calendar-appointment-content .close {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 11 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 28px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        color: #666 !important;
        border: none !important;
        line-height: 1 !important;
    }
    
    .mobile-device .new-calendar-appointment-content .close:hover,
    .mobile-device .new-calendar-appointment-content .close:active {
        background: rgba(255, 255, 255, 1) !important;
        color: #ef4444 !important;
        transform: scale(1.1) !important;
    }
    
    /* 日历模态框表单容器 */
    .mobile-device .new-calendar-appointment-content form {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        padding-bottom: 90px !important; /* 为底部按钮留空间 */
    }
    
    /* 日历表单组 */
    .mobile-device .new-calendar-form-group {
        margin-bottom: 20px !important;
    }
    
    .mobile-device .new-calendar-form-group label {
        display: block !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
    }
    
    /* 日历表单输入框 */
    .mobile-device .new-calendar-form-group input,
    .mobile-device .new-calendar-form-group select,
    .mobile-device .new-calendar-form-group textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        border: 2px solid #dee2e6 !important;
        border-radius: 8px !important;
        background: white !important;
        color: #333 !important;
        transition: all 0.3s ease !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }
    
    .mobile-device .new-calendar-form-group input:focus,
    .mobile-device .new-calendar-form-group select:focus,
    .mobile-device .new-calendar-form-group textarea:focus {
        border-color: #D2691E !important;
        box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.1) !important;
        outline: none !important;
    }
    
    /* 日历表单按钮 */
    .mobile-device .new-calendar-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin-bottom: 12px !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .mobile-device .new-calendar-btn-primary {
        background: linear-gradient(135deg, #D2691E 0%, #F4A460 100%) !important;
        color: white !important;
    }
    
    .mobile-device .new-calendar-btn-primary:hover,
    .mobile-device .new-calendar-btn-primary:active {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(210, 105, 30, 0.3) !important;
    }
    
    .mobile-device .new-calendar-btn-secondary {
        background-color: #f8f9fa !important;
        color: #495057 !important;
        border: 2px solid #dee2e6 !important;
    }
    
    .mobile-device .new-calendar-btn-secondary:hover,
    .mobile-device .new-calendar-btn-secondary:active {
        background-color: #e9ecef !important;
        transform: translateY(-1px) !important;
    }
    
    /* 禁用页面滚动 */
    .mobile-device body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}