/* mobile.css - تحسين المظهر والتجاوب لكافة الشاشات */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .top-brand-bar {
        padding: 10px 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header-brand-group {
        display: flex !important;
        align-items: center !important;
    }

    .brand-logo-text {
        font-size: 2.2rem !important;
        font-family: 'Amiri', serif !important;
    }

    .header-center-tagline {
        display: block !important;
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 2px 0 4px 0 !important;
    }

    .header-left-controls {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .medina-nav-links {
        order: 3 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0 2px 0 !important;
        border-top: 1px solid #222 !important;
        box-sizing: border-box !important;
    }

    .medina-nav-links::-webkit-scrollbar {
        display: none !important;
    }

    .medina-nav-links a {
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
        background: #181818 !important;
        border: 1px solid #282828 !important;
        border-radius: 4px !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }

    .medina-nav-button {
        background: #ffffff !important;
        color: #000000 !important;
        font-weight: 900 !important;
        border-radius: 4px !important;
    }

    .container, .offers-slider-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .offers-page-mobile {
        display: block !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }

    .offers-page-mobile .offer-card { 
        height: 340px !important; 
        width: 100% !important;
    }

    .history-rectangle { height: 240px !important; }
    .bottom-quad-container { grid-template-columns: repeat(1, 1fr) !important; gap: 2px !important; }
    .bottom-quad-card { height: 260px !important; }
    .tiktok-grid-container { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 10px 8px 30px 8px !important; }
    .grid { grid-template-columns: repeat(1, 1fr) !important; gap: 10px !important; }
    .youtube-main-player { width: 100% !important; height: 220px !important; }
}