/* Qaada Mobile Final Fixes
   - منع تمدد الصفحة في الجوال
   - تثبيت صفحات الدخول والتسجيل
   - إصلاح تمدد إضافة اليوتيوب
   - عرض القصص في الجوال قصتين بجانب بعض
*/

html,
body{
    max-width:100%;
    overflow-x:hidden !important;
}

*{
    max-width:100%;
    box-sizing:border-box;
}

/* منع أي عنصر من توسيع الصفحة */
input,
textarea,
select,
button,
img,
video,
iframe{
    max-width:100%;
}

/* صفحات الدخول والتسجيل على الجوال */
@media(max-width:768px){

    .auth-page,
    .auth-card{
        width:100% !important;
        max-width:100vw !important;
        min-height:100dvh !important;
        overflow-x:hidden !important;
    }

    .auth-card{
        overflow-y:auto !important;
    }

    .auth-form-side{
        width:100% !important;
        max-width:100vw !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .input-group,
    .auth-btn,
    .social-row,
    .auth-legal-note,
    .terms-check,
    .qaada-inline-footer{
        width:100% !important;
        max-width:100% !important;
    }

    .social-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:8px !important;
    }

    .social-btn{
        flex:1 1 0 !important;
        min-width:0 !important;
        width:auto !important;
    }
}

/* إصلاح منطقة يوتيوب حتى لا تمدد الصفحة */
.youtube-box,
.youtube-input-box,
.video-url-box,
.youtube-url-box,
#youtubeBox,
#youtubeInputBox,
#youtubePreview,
.youtube-preview{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
}

.youtube-box input,
.youtube-input-box input,
.video-url-box input,
.youtube-url-box input,
input[name="youtube_url"],
input[name="video_url"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
}

.youtube-preview iframe,
#youtubePreview iframe,
.post-youtube iframe,
.youtube-embed iframe,
iframe[src*="youtube.com"],
iframe[src*="youtu.be"]{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:16/9;
    height:auto !important;
    border-radius:18px;
    display:block;
}

/* منطقة الأزرار داخل صندوق النشر */
@media(max-width:768px){
    .composer,
    .post-composer,
    .create-post,
    .tweet-box,
    .publish-box{
        width:100% !important;
        max-width:100vw !important;
        overflow:hidden !important;
    }

    .composer-actions,
    .post-actions,
    .tweet-actions,
    .publish-actions{
        display:flex !important;
        flex-wrap:wrap !important;
        gap:8px !important;
        max-width:100% !important;
    }

    .composer-actions button,
    .post-actions button,
    .tweet-actions button,
    .publish-actions button{
        max-width:100%;
        white-space:nowrap;
    }
}

/* القصص في الجوال: قصتين بجانب بعض */
@media(max-width:768px){

    .stories-grid,
    .stories-list,
    .stories-container,
    .story-list,
    .story-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }

    .story-card,
    .story-item,
    .story-box{
        width:100% !important;
        height:auto !important;
        aspect-ratio:9/14 !important;
        min-height:0 !important;
        border-radius:22px !important;
        overflow:hidden !important;
    }

    .story-card img,
    .story-item img,
    .story-box img,
    .story-card video,
    .story-item video,
    .story-box video{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    .add-story-card,
    .story-add-card{
        width:100% !important;
        aspect-ratio:9/14 !important;
        border-radius:22px !important;
    }
}

/* نافذة القصة للجوال */
.qaada-story-modal{
    position:fixed;
    inset:0;
    background:rgba(4,12,25,.82);
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.qaada-story-modal.show{
    display:flex;
}

.qaada-story-modal-content{
    width:min(420px,94vw);
    max-height:88dvh;
    aspect-ratio:9/16;
    background:#000;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.qaada-story-modal-content img,
.qaada-story-modal-content video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
    display:block;
}

.qaada-story-close{
    position:absolute;
    top:10px;
    left:10px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:#111827;
    font-size:24px;
    font-weight:900;
    z-index:2;
    cursor:pointer;
}

@media(min-width:769px){
    .qaada-story-modal{
        display:none !important;
    }
}