/* 自定义样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    
    .transition-all-300 {
        transition: all 0.3s ease;
    }
    
    .shadow-hover {
        @apply transition-all duration-300 hover:shadow-lg;
    }
    
    .btn-primary {
        @apply bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg shadow-md transition-all duration-300;
    }
    
    .btn-secondary {
        @apply bg-white border-2 border-gray-200 hover:border-blue-500 hover:shadow-md rounded-lg p-4 transition-all duration-300;
    }
}

/* 支付选项按钮样式 */
.payment-option {
    transition: all 0.3s ease;
}

.payment-option:hover {
    transform: translateY(-2px);
}

.payment-option:active {
    transform: translateY(0);
}

/* 展开/收起动画 */
#domestic-options, #international-options {
    animation: fadeIn 0.3s ease forwards;
}

/* 全屏收款码动画 */
#qr-code-modal {
    animation: fadeIn 0.3s ease forwards;
}

#qr-code-modal .bg-white {
    animation: zoomIn 0.3s ease forwards;
}

/* 响应式调整 */
@media (max-width: 640px) {
    header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    .payment-option {
        padding: 1rem;
    }
    
    .payment-option i {
        font-size: 1.5rem;
    }
    
    .payment-option span {
        font-size: 0.875rem;
    }
}

/* 确保按钮点击区域足够大 */
button {
    min-height: 48px;
}

/* 安全认证图标样式 */
footer i {
    font-size: 1.25rem;
}

/* 确保收款码在各种设备上都能清晰显示 */
#qr-code-image {
    max-height: 70vh;
    width: auto;
}

/* 确保模态框在小屏幕上也有良好的显示效果 */
@media (max-width: 640px) {
    #qr-code-modal .bg-white {
        margin: 1rem;
        width: calc(100% - 2rem);
    }
}