/* ============================================================================
   إصلاح التمرير الأفقي للموبايل - Fix Mobile Horizontal Scroll
   منع أي عنصر من التسبب في تمرير أفقي
============================================================================ */

/* ============================================
   إخفاء Top Bar على الموبايل فقط
============================================ */
@media (max-width: 991px) {
    .top-bar {
        display: none !important;
    }

    /* إزالة اللون البرتقالي من الهيدر - Transparent Header */
    .top-header-area {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* إظهار زر القائمة بوضوح - Show Menu Button */
    .mobile-menu-toggle {
        display: block !important;
        position: fixed !important;
        top: 50px !important;
        margin-right: 15px !important;
        /* نزل للأسفل */
        right: 15px !important;
        z-index: 9999 !important;
    }

    .hamburger-btn,
    #sidebar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        /* لون برتقالي شفاف */
        background: rgba(242, 129, 35, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 12px !important;
        font-size: 22px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 20px rgba(242, 129, 35, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .hamburger-btn:hover,
    #sidebar-toggle:hover {
        background: rgba(255, 157, 80, 0.9) !important;
        transform: scale(1.05) !important;
    }

    /* السايدبار يفتح من اليمين (RTL) */
    .sidebar-menu {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
        direction: rtl !important;
        text-align: right !important;
    }

    .sidebar-menu.active {
        transform: translateX(0) !important;
    }

    /* توسيط العناوين على الموبايل */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .section-title,
    .page-title,
    .hero-title,
    .brand-name {
        text-align: center !important;
    }

    /* توسيط النصوص في section-title */
    .section-title p,
    .section-title .section-subtitle,
    .mx-auto p,
    .product-image p {
        text-align: center !important;
    }

    /* تقليل المسافات الكبيرة على الموبايل */
    .mt-150 {
        margin-top: 50px !important;
    }

    .mb-150 {
        margin-bottom: 50px !important;
    }

    .mt-80 {
        margin-top: 30px !important;
    }

    /* إصلاح سلايدر الآراء على الموبايل */
    .testimonail-section {
        padding: 30px 0 !important;
        background: #f9f9f9 !important;
    }

    .testimonial-sliders {
        min-height: auto !important;
        padding: 20px !important;
    }

    .single-testimonial-slider {
        padding: 20px !important;
        background: #fff !important;
        border-radius: 15px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    }

    .client-avater img {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
    }

    .client-meta h3 {
        font-size: 18px !important;
    }

    .testimonial-body {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
}

/* منع التمرير الأفقي على الموبايل فقط - Prevent Horizontal Scroll (Mobile Only) */
@media (max-width: 991px) {

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

    /* التأكد من أن جميع العناصر لا تتجاوز عرض الشاشة - استثناء Owl Carousel */
    *:not(.owl-carousel):not(.owl-stage-outer):not(.owl-stage):not(.owl-item):not(.testimonial-sliders):not(.single-testimonial-slider) {
        max-width: 100%;
    }

    /* إصلاح Container */
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* إصلاح Row */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* إصلاح الأعمدة */
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   إصلاح Hero Section للموبايل
============================================ */

@media (max-width: 767px) {

    /* Hero Section */
    .hero-section-modern {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .hero-content {
        overflow-x: hidden !important;
        padding: 60px 0 !important;
    }

    /* الأزرار */
    .hero-buttons {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .hero-btn {
        max-width: 100% !important;
        width: 90% !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    /* الميزات */
    .hero-features {
        width: 100% !important;
        padding: 0 10px !important;
        gap: 15px !important;
    }

    .feature-item {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    /* النصوص */
    .hero-description {
        padding: 0 15px !important;
    }

    .desc-main {
        font-size: 18px !important;
        padding: 0 10px !important;
    }

    .desc-sub {
        font-size: 15px !important;
        padding: 0 10px !important;
    }

    .desc-features {
        font-size: 13px !important;
        padding: 0 10px !important;
    }
}

/* ============================================
   إصلاح الهيدر للموبايل - Mobile Header Fix
   تصميم احترافي مع اللوجو على اليسار
============================================ */

@media (max-width: 991px) {
    .top-header-area {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 10px 0 !important;
    }

    .main-menu-wrap {
        overflow-x: hidden !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    /* اللوجو على اليسار - Logo on Left */
    .site-logo {
        order: 1 !important;
        max-width: 100px !important;
        margin: 0 !important;
        padding: 5px !important;
    }

    .site-logo img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* زر القائمة على اليمين - Menu Button on Right */
    .mobile-menu {
        order: 3 !important;
        margin: 0 !important;
    }

    .mean-container .mean-bar {
        background: transparent !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .mean-container a.meanmenu-reveal {
        width: 45px !important;
        height: 45px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid #fff !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
    }

    .mean-container a.meanmenu-reveal:hover {
        background: #fff !important;
    }

    .mean-container a.meanmenu-reveal span {
        background: #fff !important;
        height: 3px !important;
        margin: 3px 0 !important;
        display: block !important;
        width: 25px !important;
    }

    .mean-container a.meanmenu-reveal:hover span {
        background: #F28123 !important;
    }

    /* أيقونات الهيدر في المنتصف */
    .header-icons {
        order: 2 !important;
        display: flex !important;
        gap: 15px !important;
        margin: 0 auto !important;
    }
}

/* تحسينات إضافية للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .site-logo {
        max-width: 80px !important;
    }

    .mean-container a.meanmenu-reveal {
        width: 40px !important;
        height: 40px !important;
    }

    .mean-container a.meanmenu-reveal span {
        width: 20px !important;
    }

    .header-icons {
        gap: 10px !important;
    }

    .header-icons a {
        font-size: 18px !important;
    }
}


/* ============================================
   إصلاح Top Bar للموبايل
============================================ */

@media (max-width: 767px) {
    .top-bar {
        overflow-x: hidden !important;
        padding: 8px 0 !important;
    }

    .top-bar .container {
        padding: 0 10px !important;
    }

    .top-bar-right {
        gap: 10px !important;
    }

    .social-links {
        gap: 5px !important;
    }

    .language-selector {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   إصلاح الصور والمحتوى
============================================ */

@media (max-width: 767px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* إصلاح أي عناصر قد تسبب overflow */
    .product-item,
    .category-item,
    .card,
    .box {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* إصلاح الجداول */
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
}

/* ============================================
   إصلاح الظلال الكبيرة - Fix Large Shadows
   تقليل الظلال القوية التي تسبب مشاكل على الموبايل
============================================ */

@media (max-width: 767px) {

    /* إزالة جميع الظلال الكبيرة */
    * {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    /* إعادة الظلال الضرورية فقط بأحجام صغيرة */

    /* الهيدر */
    .top-header-area,
    #sticker {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }

    /* الأزرار */
    .hero-btn,
    .boxed-btn,
    .bordered-btn,
    button,
    .btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    /* البطاقات والمنتجات */
    .card,
    .product-item,
    .single-product-item,
    .category-item {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    /* القوائم المنسدلة */
    .sub-menu,
    .dropdown-menu {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Hero Section */
    .hero-section-modern {
        box-shadow: none !important;
    }

    /* إزالة الظلال الداخلية */
    *[style*="box-shadow: inset"] {
        box-shadow: none !important;
    }

    /* تقليل ظلال النصوص */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .brand-name,
    .hero-title {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ============================================
   إصلاح محاذاة النصوص العربية - Fix Arabic Text Alignment
   جعل جميع النصوص العربية محاذاة لليمين
============================================ */

@media (max-width: 767px) {

    /* Footer */
    .footer-area,
    .footer-box,
    .about-widget p,
    .get-in-touch ul,
    .pages ul,
    .subscribe p {
        text-align: right !important;
        direction: rtl !important;
    }

    /* جميع الفقرات */
    p {
        text-align: right !important;
        direction: rtl !important;
    }

    /* استثناء: توسيط النصوص في المنتجات والعناوين */
    .product-image p,
    .product-description,
    .single-product-item p,
    .section-title p,
    .section-title .section-subtitle,
    .mx-auto p {
        text-align: center !important;
    }

    /* القوائم */
    ul,
    ol {
        text-align: right !important;
        direction: rtl !important;
        padding-right: 20px !important;
        padding-left: 0 !important;
    }

    /* العناوين */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-align: center !important;
    }
}

/* ============================================
   إصلاح Footer للموبايل - Mobile Footer Fix
   تحسين تصميم وتنسيق Footer
============================================ */

@media (max-width: 767px) {

    /* Footer العام */
    .footer-area {
        padding: 40px 0 20px !important;
        overflow-x: hidden !important;
    }

    .footer-box {
        margin-bottom: 30px !important;
        text-align: right !important;
    }

    /* عناوين Footer */
    .footer-box h2,
    .footer-box h3 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        text-align: right !important;
    }

    /* روابط Footer */
    .footer-box ul {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .footer-box ul li {
        margin-bottom: 10px !important;
        text-align: right !important;
    }

    .footer-box ul li a {
        font-size: 14px !important;
        padding: 5px 0 !important;
        display: inline-block !important;
    }

    /* حقل الاشتراك - Subscribe Field */
    .subscribe-text {
        margin-bottom: 20px !important;
    }

    .subscribe-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .subscribe-form input[type="email"],
    .subscribe-form input[type="text"] {
        width: 100% !important;
        padding: 12px 15px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        font-size: 14px !important;
        text-align: right !important;
    }

    .subscribe-form button,
    .subscribe-form input[type="submit"] {
        width: 100% !important;
        padding: 12px 15px !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* أيقونات التواصل الاجتماعي */
    .social-links {
        display: flex !important;
        gap: 10px !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
    }

    .social-links a {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 18px !important;
    }

    /* Copyright */
    .copyright {
        text-align: center !important;
        padding: 20px 0 !important;
        font-size: 13px !important;
    }

    /* تحسين المسافات */
    .footer-area .container {
        padding: 0 15px !important;
    }

    .footer-area .row {
        margin: 0 !important;
    }

    .footer-area [class*="col-"] {
        padding: 0 10px !important;
    }
}