/* ============================================
   تحسين صفحة شحن الألعاب على الجوال
   Direct Charge Games Page Mobile Enhancement
   ============================================ */

/* إعادة تعيين التصميم القديم */
@media (max-width: 768px) {
    /* إخفاء التصميم القديم */
    .midasbuy-exact-page .banner-slider.banner-zoom-70 {
        display: block !important;
    }
    
    /* تطبيق التصميم الجديد */
    .midasbuy-exact-page {
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
    }
}

@media (max-width: 768px) {
    /* تحسين البانر */
    .banner-slider.banner-zoom-70 {
        min-height: clamp(180px, 35vw, 240px) !important;
        border-radius: clamp(14px, 3vw, 18px) !important;
        margin: clamp(0.75rem, 2vw, 1rem) 0 !important;
    }
    
    .banner-slide {
        min-height: clamp(180px, 35vw, 240px) !important;
        padding: clamp(1rem, 3vw, 1.5rem) !important;
    }
    
    .banner-content {
        padding: clamp(0.75rem, 2.5vw, 1rem) !important;
    }
    
    .banner-top-text {
        font-size: clamp(0.75rem, 2.2vw, 0.9rem) !important;
        margin-bottom: clamp(0.3rem, 1vw, 0.4rem) !important;
    }
    
    .banner-event-text {
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
        margin-bottom: clamp(0.3rem, 1vw, 0.4rem) !important;
    }
    
    .banner-main-text {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important;
    }
    
    .banner-badge-top {
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
        padding: clamp(0.3rem, 1vw, 0.4rem) clamp(0.6rem, 1.8vw, 0.8rem) !important;
        top: clamp(0.5rem, 1.5vw, 0.75rem) !important;
        inset-inline-end: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }
    
    /* تحسين شريط البحث */
    .midasbuy-search-section {
        margin: clamp(0.75rem, 2vw, 1rem) 0 !important;
        padding: 0 !important;
    }
    
    .search-form {
        width: 100% !important;
    }
    
    .search-wrapper {
        display: flex !important;
        align-items: center !important;
        background: var(--bg-secondary) !important;
        border-radius: clamp(20px, 4.5vw, 24px) !important;
        padding: clamp(0.5rem, 1.5vw, 0.65rem) clamp(0.75rem, 2vw, 1rem) !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        gap: 0.5rem !important;
    }
    
    .search-wrapper input {
        flex: 1 !important;
        padding: clamp(0.6rem, 1.8vw, 0.75rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        border: none !important;
        background: transparent !important;
        color: var(--text-color) !important;
        min-height: 44px !important;
    }
    
    .search-wrapper input::placeholder {
        color: var(--text-muted) !important;
        opacity: 0.7 !important;
    }
    
    .search-icon-btn {
        width: clamp(36px, 8.5vw, 40px) !important;
        height: clamp(36px, 8.5vw, 40px) !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.95), rgba(255, 107, 53, 0.95)) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .search-icon-btn i {
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        color: #fff !important;
    }
    
    /* تحسين العناوين */
    .section-title-box {
        margin-top: clamp(0.75rem, 2vw, 1rem) !important;
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }
    
    .section-title {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }
    
    .category-title-box {
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem) !important;
    }
    
    .category-title {
        font-size: clamp(1rem, 3.2vw, 1.2rem) !important;
        padding: clamp(0.5rem, 1.5vw, 0.65rem) clamp(0.75rem, 2vw, 1rem) !important;
    }
    
    .category-title i {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    }
    
    /* تحسين قائمة الألعاب */
    .games-list-tile {
        padding: 0.5rem 0 !important;
        margin-top: 0.75rem !important;
    }
    
    .games-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(0.4rem, 1.2vw, 0.6rem) !important;
        padding: 0 !important;
    }
    
    /* تحسين بطاقات الألعاب */
    .game-item {
        border-radius: clamp(10px, 2.5vw, 12px) !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
    }
    
    .game-img-box {
        height: clamp(100px, 25vw, 130px) !important;
        min-height: clamp(100px, 25vw, 130px) !important;
        border-radius: clamp(10px, 2.5vw, 12px) 0 0 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .game-img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .game-label {
        font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
        padding: clamp(0.2rem, 0.6vw, 0.3rem) clamp(0.4rem, 1.2vw, 0.5rem) !important;
        border-radius: clamp(8px, 2vw, 10px) !important;
        gap: clamp(0.2rem, 0.6vw, 0.3rem) !important;
    }
    
    .game-label i {
        font-size: clamp(0.6rem, 1.6vw, 0.7rem) !important;
    }
    
    .game-label span {
        font-size: clamp(0.6rem, 1.6vw, 0.7rem) !important;
    }
    
    .game-name {
        padding: clamp(0.5rem, 1.5vw, 0.65rem) !important;
        min-height: auto !important;
    }
    
    .game-name-text {
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        line-height: 1.3 !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    /* تحسين الأقسام */
    .popular-games-section,
    .all-games-section {
        margin-top: clamp(1rem, 2.5vw, 1.5rem) !important;
    }
    
    .games-category-section {
        margin-bottom: clamp(1rem, 2.5vw, 1.5rem) !important;
    }
}

@media (max-width: 480px) {
    .banner-slider.banner-zoom-70 {
        min-height: clamp(160px, 32vw, 200px) !important;
    }
    
    .banner-slide {
        min-height: clamp(160px, 32vw, 200px) !important;
        padding: clamp(0.85rem, 2.5vw, 1.25rem) !important;
    }
    
    .banner-main-text {
        font-size: clamp(1rem, 3.2vw, 1.25rem) !important;
    }
    
    .search-wrapper {
        padding: clamp(0.45rem, 1.3vw, 0.6rem) clamp(0.65rem, 1.8vw, 0.9rem) !important;
    }
    
    .search-wrapper input {
        padding: clamp(0.55rem, 1.6vw, 0.7rem) clamp(0.45rem, 1.3vw, 0.65rem) !important;
        font-size: clamp(0.85rem, 2.2vw, 0.95rem) !important;
    }
    
    .games-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(0.35rem, 1vw, 0.5rem) !important;
    }
    
    .game-img-box {
        height: clamp(85px, 20vw, 110px) !important;
        min-height: clamp(85px, 20vw, 110px) !important;
    }
    
    .game-name-text {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
    }
    
    .section-title {
        font-size: clamp(1.1rem, 3.5vw, 1.3rem) !important;
    }
    
    .category-title {
        font-size: clamp(0.95rem, 3vw, 1.1rem) !important;
    }
}

@media (max-width: 360px) {
    .games-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.3rem !important;
    }
    
    .game-img-box {
        height: 75px !important;
        min-height: 75px !important;
    }
    
    .game-name {
        padding: 0.4rem 0.3rem !important;
        min-height: 35px !important;
    }
    
    .game-name-text {
        font-size: 0.65rem !important;
    }
    
    .section-title {
        font-size: 1rem !important;
    }
}