/* 🚀 USDT-FLASH Mobile Sections Enhancement */
/* تحسين أقسام محددة للهواتف المحمولة */

@media (max-width: 768px) {
    
    /* ===== PACKAGES SECTION MOBILE ===== */
    #pricing {
        padding: 40px 0 !important;
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 25%, #e5e7eb 50%, #f3f4f6 75%, #ffffff 100%) !important;
        overflow: hidden !important;
    }
    
    .packages-section-header {
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important;
    }
    
    .packages-section-header .bg-white {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 20px !important;
        padding: 25px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
    
    .packages-section-header h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        font-weight: 900 !important;
        background: linear-gradient(45deg, #10b981, #3b82f6, #8b5cf6) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .packages-section-header p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #6b7280 !important;
        margin-bottom: 20px !important;
    }
    
    /* Packages Grid */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    
    /* Package Cards */
    .bg-white.bg-opacity-95 {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-radius: 20px !important;
        padding: 25px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
        border: 2px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .bg-white.bg-opacity-95:active {
        transform: scale(0.98) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Package Headers */
    .absolute.top-0.left-0.w-full.h-2 {
        height: 4px !important;
        border-radius: 20px 20px 0 0 !important;
    }
    
    /* Package Icons */
    .w-20.h-20 {
        width: 60px !important;
        height: 60px !important;
        border-radius: 16px !important;
        margin: 0 auto 15px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    .w-20.h-20 i {
        font-size: 24px !important;
        color: white !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
    }
    
    /* Package Titles */
    .text-2xl.font-bold.text-gray-900 {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #1f2937 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    /* Package Badges */
    .bg-gradient-to-r.from-yellow-400.to-orange-500 {
        background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
        color: white !important;
        padding: 6px 12px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: inline-block !important;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Package Pricing */
    .text-center.mb-8 {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
    
    .text-lg.text-gray-500.line-through {
        font-size: 14px !important;
        color: #9ca3af !important;
        text-decoration: line-through !important;
        margin-bottom: 5px !important;
    }
    
    .text-5xl.font-black {
        font-size: 32px !important;
        font-weight: 900 !important;
        margin-bottom: 8px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .text-3xl.font-bold.text-gray-800 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin-bottom: 20px !important;
    }
    
    /* Package Features */
    .space-y-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 25px !important;
    }
    
    .flex.items-center.text-gray-700 {
        display: flex !important;
        align-items: center !important;
        padding: 10px 15px !important;
        background: rgba(16, 185, 129, 0.05) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(16, 185, 129, 0.1) !important;
    }
    
    .flex.items-center.text-gray-700 i {
        font-size: 16px !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) !important;
    }
    
    .flex.items-center.text-gray-700 span {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        line-height: 1.4 !important;
    }
    
    /* Package Buttons */
    .w-full.bg-gradient-to-r {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        color: white !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        touch-action: manipulation !important;
        border: none !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    .w-full.bg-gradient-to-r:active {
        transform: translateY(2px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Package License Info */
    .text-center.mt-4 {
        text-align: center !important;
        margin-top: 15px !important;
    }
    
    .text-xs.font-semibold.flex.items-center.justify-center {
        font-size: 10px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 6px 12px !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(16, 185, 129, 0.2) !important;
    }
    
    .text-xs.font-semibold.flex.items-center.justify-center i {
        font-size: 10px !important;
    }
    
    /* Popular Badge */
    .absolute.-top-2.-right-8 {
        position: absolute !important;
        top: -2px !important;
        right: -8px !important;
        background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
        color: white !important;
        padding: 6px 20px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        transform: rotate(45deg) !important;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        z-index: 10 !important;
    }
    
    /* ===== TESTIMONIALS SECTION MOBILE ===== */
    #testimonials {
        padding: 40px 0 !important;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    }
    
    #testimonials .container {
        padding: 0 15px !important;
    }
    
    #testimonials h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        font-weight: 900 !important;
        background: linear-gradient(45deg, #e74c3c, #f39c12, #e67e22) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    #testimonials p {
        font-size: 14px !important;
        color: #6b7280 !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    /* Testimonials Slider */
    .testimonials-slider {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    
    .testimonial-slide {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .testimonial-slide .bg-white {
        background: white !important;
        padding: 20px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 20px !important;
    }
    
    /* User Avatar */
    .user-avatar {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: white !important;
        margin-right: 15px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    .testimonial-slide h3 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 !important;
    }
    
    .testimonial-slide p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #4b5563 !important;
        margin: 15px 0 !important;
        min-height: auto !important;
    }
    
    /* Rating Stars */
    .rating {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    
    .rating i {
        font-size: 14px !important;
    }
    
    .rating span {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-left: 8px !important;
    }
    
    /* Testimonial Controls */
    .testimonial-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 25px !important;
    }
    
    .testimonial-controls button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        border: 1px solid #e5e7eb !important;
        color: #6b7280 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        transition: all 0.3s ease !important;
        touch-action: manipulation !important;
    }
    
    .testimonial-controls button:active {
        transform: scale(0.95) !important;
        background: #e5e7eb !important;
    }
    
    .testimonial-dots {
        display: flex !important;
        gap: 8px !important;
    }
    
    /* ===== PLATFORMS SECTION MOBILE ===== */
    .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }
    
    .platform-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        touch-action: manipulation !important;
    }
    
    .platform-item:active {
        transform: scale(0.98) !important;
    }
    
    .platform-item .bg-white {
        background: white !important;
        padding: 20px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    .platform-item img {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
        margin: 0 auto 12px auto !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    .platform-item h3 {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }
    
    .platform-item .w-full {
        width: 100% !important;
        height: 4px !important;
        border-radius: 2px !important;
        overflow: hidden !important;
        margin-top: 10px !important;
    }
    
    .platform-item .bg-green-500,
    .platform-item .bg-blue-500,
    .platform-item .bg-yellow-500,
    .platform-item .bg-orange-500,
    .platform-item .bg-purple-500,
    .platform-item .bg-indigo-500 {
        height: 100% !important;
        border-radius: 2px !important;
        transition: width 0.3s ease !important;
    }
    
    /* ===== FOOTER MOBILE ===== */
    footer {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
        color: white !important;
        padding: 40px 0 20px 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    footer .container {
        padding: 0 15px !important;
    }
    
    footer .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 30px !important;
    }
    
    footer h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #10b981 !important;
    }
    
    footer h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        color: #10b981 !important;
    }
    
    footer p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #d1d5db !important;
        margin-bottom: 15px !important;
    }
    
    footer ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    footer li {
        margin-bottom: 8px !important;
    }
    
    footer a {
        font-size: 13px !important;
        color: #d1d5db !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    footer a:active {
        color: #10b981 !important;
    }
    
    footer a i {
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    
    /* Social Links */
    footer .flex.flex-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }
    
    footer .flex.flex-wrap a {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #374151, #1f2937) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        color: white !important;
        transition: all 0.3s ease !important;
        touch-action: manipulation !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    footer .flex.flex-wrap a:active {
        transform: scale(0.95) !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
    }
    
    /* Company Stats in Footer */
    footer .grid.grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }
    
    footer .text-center.bg-gradient-to-br {
        text-align: center !important;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
        backdrop-filter: blur(10px) !important;
        padding: 15px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
    }
    
    footer .text-3xl.font-bold {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #10b981 !important;
        margin-bottom: 5px !important;
    }
    
    footer .text-sm.opacity-90 {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Tether Verification */
    footer .bg-gradient-to-r.from-green-600\\/20 {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2)) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        padding: 20px !important;
        border-radius: 16px !important;
        text-align: center !important;
        margin: 20px 0 !important;
    }
    
    footer .bg-gradient-to-r.from-green-600\\/20 img {
        width: 32px !important;
        height: 32px !important;
        margin-right: 10px !important;
    }
    
    footer .bg-gradient-to-r.from-green-600\\/20 .text-green-400 {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #10b981 !important;
        margin-bottom: 5px !important;
    }
    
    footer .bg-gradient-to-r.from-green-600\\/20 .text-gray-300 {
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        margin-bottom: 8px !important;
    }
    
    footer .bg-gradient-to-r.from-green-600\\/20 a {
        font-size: 10px !important;
        color: #10b981 !important;
        text-decoration: underline !important;
    }
    
    /* Copyright */
    footer .flex.flex-col.md\\:flex-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    footer .text-gray-400 p {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 0 !important;
        line-height: 1.5 !important;
    }
    
    /* ===== CHAT SYSTEM MOBILE ===== */
    .chat-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
        z-index: 9998 !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        touch-action: manipulation !important;
        border: 3px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .chat-icon:active {
        transform: scale(0.95) !important;
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    }
    
    .chat-window {
        position: fixed !important;
        bottom: 90px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        max-width: 350px !important;
        height: 400px !important;
        background: white !important;
        border-radius: 20px !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
        z-index: 9997 !important;
        overflow: hidden !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        transform: scale(0) !important;
        transform-origin: bottom right !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .chat-window.active {
        transform: scale(1) !important;
    }
    
    /* ===== SCROLL OPTIMIZATIONS ===== */
    html {
        scroll-padding-top: 80px !important;
    }
    
    /* Smooth scrolling for anchor links */
    a[href^="#"] {
        scroll-behavior: smooth !important;
    }
    
    /* ===== LOADING STATES ===== */
    .loading {
        opacity: 0.7 !important;
        pointer-events: none !important;
    }
    
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
        background-size: 200% 100% !important;
        animation: loading 1.5s infinite !important;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* ===== TOUCH FEEDBACK ===== */
    .touch-feedback:active {
        background: rgba(16, 185, 129, 0.1) !important;
        transform: scale(0.98) !important;
    }
    
    /* ===== SAFE AREA SUPPORT ===== */
    @supports (padding: max(0px)) {
        body {
            padding-left: max(15px, env(safe-area-inset-left)) !important;
            padding-right: max(15px, env(safe-area-inset-right)) !important;
        }
        
        header {
            padding-top: max(0px, env(safe-area-inset-top)) !important;
        }
        
        .chat-icon {
            bottom: max(20px, env(safe-area-inset-bottom)) !important;
            right: max(20px, env(safe-area-inset-right)) !important;
        }
        
        .chat-window {
            bottom: max(90px, calc(env(safe-area-inset-bottom) + 70px)) !important;
            right: max(20px, env(safe-area-inset-right)) !important;
        }
    }
}

/* ===== VERY SMALL SCREENS (320px and below) ===== */
@media (max-width: 320px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    header {
        height: 60px !important;
    }
    
    section[role="main"] {
        margin-top: 60px !important;
    }
    
    .glass-effect {
        padding: 15px !important;
    }
    
    .glass-effect h2 {
        font-size: 20px !important;
    }
    
    .card-container {
        max-width: 280px !important;
        height: 180px !important;
    }
    
    .packages-section-header h2 {
        font-size: 24px !important;
    }
    
    .bg-white.bg-opacity-95 {
        padding: 20px !important;
    }
    
    .w-full.bg-gradient-to-r {
        padding: 14px 20px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }
    
    .chat-icon {
        width: 55px !important;
        height: 55px !important;
        font-size: 22px !important;
    }
    
    .chat-window {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
        bottom: 75px !important;
    }
}