/* ============================================
   ملف التجاوب مع الشاشات الصغيرة (Responsive)
   
   هيكل التصميم الأصلي (960px):
   ┌─────────────────── layout (960px) ───────────────────┐
   │ ┌─────────── header_up (960px) ─────────────────────┐ │
   │ │  header_up_right (420px)  │  header_up_left       │ │
   │ └──────────────────────────────────────────────────┘ │
   │ ┌─────────── header_down (960px) ───────────────────┐ │
   │ │  logo (305px)  │  banner_adver (635px)            │ │
   │ └──────────────────────────────────────────────────┘ │
   │ ┌─────────── menu (960px) ──────────────────────────┐ │
   │ │  menu_right (770px)  │  menu_search (160px)       │ │
   │ └──────────────────────────────────────────────────┘ │
   │ ┌─────────── container_data (960px) ────────────────┐ │
   │ │ ┌── data_right (650px) ──┐ ┌── data_left (287px)─┐│ │
   │ │ │   المحتوى الرئيسي      │ │   القائمة الجانبية  ││ │
   │ │ │   second_right (310px) │ │   tabs/vote/tv/etc  ││ │
   │ │ │   second_left (310px)  │ │                     ││ │
   │ │ └───────────────────────┘ └─────────────────────┘│ │
   │ └──────────────────────────────────────────────────┘ │
   │ ┌─────────── footer (960px) ────────────────────────┐ │
   │ │ footer_right (657px)    │  footer_left (303px)    │ │
   │ │  right(177) sec(194) third(134) fourth(143)       │ │
   │ └──────────────────────────────────────────────────┘ │
   │ ┌─────────── real_footer (960px) ───────────────────┐ │
   │ │ right(200) │ middle(480) │ soscial_footer(186)    │ │
   │ └──────────────────────────────────────────────────┘ │
   └─────────────────────────────────────────────────────┘
   
   ============================================ */


/* ===========================================
   شاشات أقل من 960px (تابلت وهاتف)
   =========================================== */
@media screen and (max-width: 960px) {

    /* --- قاعدة عامة: جميع العناصر تستخدم box-sizing --- */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* --- الإطار العام --- */
    .layout {
        width: 100% !important;
        min-height: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        position: relative;
    }

    /* --- شريط الهيدر العلوي (التاريخ + أيقونات) --- */
    .layout_header {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        overflow: hidden;
    }

    .header_up {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        box-sizing: border-box;
        padding: 5px;
        overflow: hidden;
    }

    .header_up_right {
        width: 100% !important;
        float: none !important;
    }

    .header_up_left {
        width: 100% !important;
        float: none !important;
        text-align: center;
        padding: 5px 0;
    }

    .date_div {
        width: 100% !important;
        float: none !important;
        background-size: cover;
    }

    .date_melady,
    .date_hegry {
        width: auto !important;
        float: right;
    }

    .icons {
        width: auto !important;
    }

    .tawasal {
        width: auto !important;
        float: right;
    }

    .soscial {
        width: auto !important;
        float: right;
    }

    /* --- البانر والشعار --- */
    .header_down {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        overflow: hidden;
    }

    .header_down_banner {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        background-size: cover;
    }

    .header_down_banner_logo {
        width: 100% !important;
        float: none !important;
        text-align: center;
        height: auto !important;
        padding: 10px 0 !important;
    }

    .header_down_banner_logo img {
        max-width: 180px;
        height: auto;
    }

    .header_down_banner_adver {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        text-align: center;
        padding-top: 5px;
    }

    /* --- القائمة الرئيسية - إصلاح تشوه الكلمات --- */
    .menu {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        background-size: cover;
        background-image: url(../images/menu_bg.png) !important;
        border-bottom: 2px solid #062848;
    }

    .menu_right {
        width: 100% !important;
        float: none !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        margin-top: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* إلغاء العروض الثابتة للروابط لمنع تكسر الكلمات */
    .first_one,
    .second_one,
    .third_one,
    .fourth_one,
    .five_one,
    .six_one,
    .seven_one,
    .eight_one,
    .nine_one,
    .ten_one {
        width: auto !important;
        display: inline-block !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        float: none !important;
        font-size: 14px !important;
        height: 40px !important;
        line-height: normal !important;
        padding-top: 12px !important;
    }

    .each_li {
        float: none !important;
        display: inline-block !important;
        background-position: left center !important;
    }

    .menu_search {
        width: 100% !important;
        float: none !important;
        padding: 5px 10px;
        box-sizing: border-box;
        background: #f4f4f4;
    }

    .loginboxdiv_search {
        width: 100% !important;
        float: none !important;
    }

    .loginbox_search {
        width: 90% !important;
    }

    /* --- الحاوية الرئيسية --- */
    .container {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* --- شريط الأخبار --- */
    .container_news {
        width: 100% !important;
        float: none !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }

    /* --- حاوية البيانات --- */
    .container_data {
        width: 100% !important;
        float: none !important;
        overflow: hidden;
        min-height: auto !important;
    }

    /* ===================================
       المحتوى الرئيسي (يأخذ العرض الكامل)
       =================================== */
    .container_data_right {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        padding: 0 10px;
        clear: both;
    }

    .container_data_right_tabs,
    .container_data_right_first {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        clear: both;
    }

    .container_data_right_second,
    .container_data_right_second_without_border,
    .container_data_right_second_without_border_title,
    .container_data_right_adv {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        clear: both;
    }

    /* الأعمدة الداخلية في المحتوى (310px + 310px) تتكدس فوق بعض */
    .container_data_right_second_right,
    .container_data_right_second_left {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        box-sizing: border-box;
        clear: both;
    }

    .container_data_right_second_right_text1,
    .container_data_right_second_right_text2 {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .container_home_text_left {
        width: calc(100% - 87px) !important;
        height: auto !important;
    }

    .container_home_pic_left {
        width: 77px !important;
        height: auto !important;
    }

    /* رؤوس العناوين بأعمادها */
    .container_data_right_second_right_title,
    .container_data_right_second_right_title_makalat,
    .container_data_right_second_right_title_derasat,
    .container_data_right_second_right_title_nadwa,
    .container_data_right_second_right_title_books,
    .container_data_right_second_right_title_mafahem,
    .container_data_right_second_right_title_kadya,
    .container_data_right_second_right_title_eldoo2 {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        clear: both;
    }

    .right_first_right,
    .right_first_middle,
    .right_first_left {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
        clear: both;
    }

    .right_first_right_pic,
    .right_first_right_text {
        width: 100% !important;
    }

    .adv_right,
    .adv_left {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        clear: both;
    }

    /* ===================================
       القائمة الجانبية (تنزل تحت المحتوى)
       تحتفظ بنفس الشكل المميز كما في الكمبيوتر
       =================================== */
    .container_data_left {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-top: 20px !important;
        padding: 10px 12px !important;
        box-sizing: border-box;
        clear: both;
        /* الإبقاء على الخلفية كما في الكمبيوتر */
        background-repeat: repeat !important;
        background-position: left top !important;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .container_data_left_adv {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        height: auto !important;
        clear: both;
        overflow: hidden;
        text-align: center;
    }

    .container_data_left_first,
    .container_data_left_second,
    .container_data_left_third,
    .container_data_left_fourth,
    .container_data_left_fifth {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        height: auto !important;
        clear: both;
        overflow: hidden;
        margin-top: 10px !important;
        padding-bottom: 10px;
    }

    .container_data_left_title {
        width: 100% !important;
        float: none !important;
        clear: both;
        margin-bottom: 8px;
    }

    .container_data_left_title img {
        max-width: 100%;
        height: auto;
    }

    .container_data_left_second_tabs {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        overflow: hidden;
        border-bottom: 1px solid #B0B0B0;
        margin-bottom: 5px;
    }

    /* --- التبويبات تحتفظ بشكلها --- */
    .right_tab_active,
    .right_tab {
        width: auto !important;
        padding-right: 10px !important;
    }

    .middle_tab,
    .middle_tab_active {
        width: auto !important;
    }

    .container_data_left_text {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        clear: both;
    }

    .container_data_left_text_left {
        width: calc(100% - 85px) !important;
        float: right !important;
    }

    .container_data_left_text_left_pic {
        width: 79px !important;
        height: auto !important;
    }

    .line_data {
        width: 100% !important;
        clear: both;
        padding: 3px 0;
    }

    .form_row {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        clear: both;
    }

    .form_text_field {
        width: auto !important;
    }

    .televison_title {
        width: 100% !important;
        clear: both;
    }

    .televison_video,
    .televison_video embed,
    .televison_video iframe {
        width: 100% !important;
        height: auto !important;
        clear: both;
    }

    /* --- عنوان تحت الضوء يأخذ العرض الكامل --- */
    .container_data_right_second_right_title_eldoo2 {
        width: 100% !important;
    }

    /* --- إصلاح جدول المقالات في القائمة الجانبية --- */
    .container_data_left table {
        width: 100% !important;
    }

    /* --- عناصر الاستطلاع --- */
    .opinion_main_div {
        width: 100% !important;
        background-size: contain;
        background-position: center 18px;
    }

    /* --- إصلاح عناصر الاستطلاع --- */
    .opinion_main_div {
        width: 100% !important;
        background-position: center 18px;
    }

    .opinion_main_div_title {
        width: 100% !important;
    }

    .opinion_main_div_choose {
        width: 100% !important;
    }

    .opinion_main_div_submit {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        text-align: center;
    }

    /* --- عناصر النصوص --- */
    .text_padding {
        width: 100% !important;
    }

    .red_title_active,
    .red_title {
        width: 100% !important;
    }

    .adoo2_normal,
    .adoo2_hover,
    .adoo2:link,
    .adoo2:visited,
    .adoo2:active,
    .adoo2:hover {
        width: 100% !important;
    }

    /* ===================================
       الفوتر - إصلاح التداخل
       =================================== */
    .footer {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        box-sizing: border-box;
        background-size: cover;
        clear: both;
        overflow: hidden;
        padding: 10px 0;
    }

    .footer_right {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        clear: both;
        overflow: hidden;
    }

    .footer_right_right,
    .footer_right_right_second,
    .footer_right_right_third,
    .footer_right_right_fourth {
        width: 48% !important;
        float: right !important;
        height: auto !important;
        min-height: 120px;
        margin-bottom: 10px;
        box-sizing: border-box;
        background-image: none !important;
        padding: 5px;
    }

    .footer_right_title_first,
    .footer_right_title_second,
    .footer_right_title_third,
    .footer_right_title_fourth {
        width: 100% !important;
        height: auto !important;
        background-image: none !important;
        padding-bottom: 5px;
        padding-right: 5px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .footer_right_title_first_text {
        width: 100% !important;
        height: auto !important;
        padding-right: 5px !important;
    }

    .footer_right_title_first_text_right,
    .footer_right_title_first_text_left {
        width: 100% !important;
        float: none !important;
    }

    .footer_left {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        clear: both;
        background-position: center 15px;
        min-height: 80px;
        padding: 10px;
    }

    .news_letter {
        width: 100% !important;
        margin-top: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    .news_letter_right {
        width: auto !important;
    }

    .news_letter_submit {
        width: auto !important;
    }

    .loginboxdiv {
        width: 100% !important;
        background-size: contain;
    }

    .loginbox {
        width: 90% !important;
    }

    /* --- الفوتر السفلي --- */
    .real_footer {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        padding: 10px;
        box-sizing: border-box;
        background-size: cover;
        clear: both;
        overflow: hidden;
    }

    .real_footer_right {
        width: 100% !important;
        float: none !important;
        text-align: center;
        height: auto !important;
        padding: 5px 0;
    }

    .real_footer_middle {
        width: 100% !important;
        float: none !important;
        text-align: center;
        padding-right: 0 !important;
    }

    .real_footer_middle_up,
    .real_footer_middle_down {
        width: 100% !important;
        float: none !important;
        text-align: center;
        padding-right: 0 !important;
        height: auto !important;
    }

    .soscial_footer {
        width: 100% !important;
        float: none !important;
        text-align: center;
        padding: 10px 0;
    }

    /* ===================================
       عناصر عامة
       =================================== */

    /* الصور تتكيف مع عرض الشاشة */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* الجداول لا تتجاوز عرض الشاشة */
    table {
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* إخفاء الـ dock لتجنب التداخل */
    #dock {
        display: none !important;
    }

    /* إخفاء إعلانات Google التي قد تسبب تداخل */
    ins.adsbygoogle {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* إصلاح بحث Google المخصص */
    .gcse-search,
    .gsc-control-cse {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ===========================================
   شاشات أقل من 600px (هواتف متوسطة)
   =========================================== */
@media screen and (max-width: 600px) {

    /* أعمدة الفوتر تأخذ عرض كامل بدل 48% */
    .footer_right_right,
    .footer_right_right_second,
    .footer_right_right_third,
    .footer_right_right_fourth {
        width: 100% !important;
        float: none !important;
        min-height: auto;
    }

    /* تصغير الشعار أكثر */
    .header_down_banner_logo img {
        max-width: 180px;
    }

    /* تعديل القائمة */
    .menu_right {
        font-size: 12px !important;
    }

    /* إصلاح تداخل التبويبات */
    .right_tab_active,
    .right_tab,
    .middle_tab,
    .middle_tab_active,
    .left_tab {
        width: auto !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        font-size: 10px !important;
    }
}


/* ===========================================
   شاشات أقل من 480px (هواتف صغيرة)
   =========================================== */
@media screen and (max-width: 480px) {

    body {
        font-size: 13px !important;
    }

    /* البحث */
    .loginboxdiv_search {
        width: 100% !important;
    }

    /* تبويبات القائمة الجانبية */
    .container_data_left_second_tabs {
        display: flex !important;
        flex-wrap: wrap;
        height: auto !important;
    }

    .right_tab_active,
    .right_tab,
    .middle_tab,
    .middle_tab_active {
        float: none !important;
        flex: 1;
        text-align: center;
        min-width: 80px;
    }
}