/**
 * Barut Group - Mobile Optimized Styles
 * هذا الملف يحسن عرض الموقع على الأجهزة المحمولة
 * يتم تحميله فقط للشاشات أقل من 768 بكسل
 */

/* =========================================
   🎯 GENERAL MOBILE STYLES
   ========================================= */

/* تصغير اللوغو مع خلفية بيضاء */
nav img,
nav .w-\[80px\] {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    background-color: white !important;
    border-radius: 6px !important;
    padding: 3px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* تحسين Navbar - تقليل الارتفاع والعرض + إبقاءه ثابت */
#navbar,
nav#navbar,
nav.fixed {
    padding: 0.25rem 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

nav .container {
    padding: 0.35rem 0.75rem !important;
    gap: 0.5rem !important;
}

nav .py-4 {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* تصغير زر اللغة */
#lang-switcher-btn {
    font-size: 0.75rem !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
}

#lang-switcher-btn span {
    font-size: 0.7rem !important;
}

/* تصغير أزرار القائمة */
#mobile-menu a {
    font-size: 1rem !important;
    padding: 0.75rem !important;
}

/* =========================================
   🎨 HERO SECTION
   ========================================= */

/* المسافة العلوية تتناسب مع navbar */
header.relative {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
    margin-top: 55px !important;
}

header h1 {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
}

header p {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
}

header .flex a {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9rem !important;
}

/* =========================================
   ⭐ FEATURES / WHY-US SECTION
   ========================================= */

#why-us {
    padding: 2rem 0 !important;
}

#why-us .text-center h2 {
    font-size: 1.25rem !important;
}

#why-us .text-center span {
    font-size: 0.7rem !important;
}

/* ترتيب المميزات جنب بعض (2 أعمدة) */
#why-us .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
}

/* تصغير أيقونات المميزات */
#why-us .w-12,
#services .w-12 {
    width: 2rem !important;
    height: 2rem !important;
}

#why-us .w-6,
#services .w-6 {
    width: 1rem !important;
    height: 1rem !important;
}

/* تصغير كروت المميزات */
#why-us .p-6 {
    padding: 0.75rem !important;
}

#why-us h3 {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

/* =========================================
   🛠️ SERVICES SECTION - ACCORDION MOBILE
   ========================================= */

#services {
    padding: 2rem 0 !important;
}

#services h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
}

#services .text-gray-600 {
    font-size: 0.85rem !important;
}

/* Grid becomes single column for accordion */
#services .grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
}

/* Accordion card styles */
.service-accordion {
    margin-bottom: 0 !important;
}

.service-header {
    background: white !important;
    transition: background-color 0.2s ease !important;
}

.service-header:active {
    background: #f7f7f7 !important;
}

.service-arrow {
    flex-shrink: 0 !important;
}

.service-details {
    animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* =========================================
   📰 NEWS SECTION
   ========================================= */

#news-section-container .container {
    padding: 0 1rem !important;
}

#news-section-container h2 {
    font-size: 1.5rem !important;
}

/* كروت الأخبار */
#news-section-container .p-6 {
    padding: 1rem !important;
}

#news-section-container h3 {
    font-size: 1rem !important;
}

/* =========================================
   📝 ABOUT SECTION
   ========================================= */

#about {
    padding: 3rem 0 !important;
}

#about h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

#about p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

#about .relative img {
    border-radius: 1rem !important;
}

/* =========================================
   📞 CONTACT SECTION
   ========================================= */

#contact {
    padding: 2rem 0 !important;
}

#contact .p-12 {
    padding: 1.5rem !important;
}

#contact h2,
#contact h3 {
    font-size: 1.25rem !important;
}

#contact input,
#contact select,
#contact textarea {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
}

#contact button[type="submit"] {
    padding: 0.875rem !important;
}

/* =========================================
   🦶 FOOTER
   ========================================= */

footer {
    padding: 2rem 0 !important;
}

footer h4 {
    font-size: 1rem !important;
}

footer .container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
}

/* =========================================
   📰 NEWS PAGE (news.php)
   ========================================= */

/* قائمة الأخبار */
.container.max-w-6xl {
    padding: 1rem !important;
}

#newsGrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

#newsGrid>div {
    padding: 1rem !important;
}

#newsGrid h3 {
    font-size: 1rem !important;
}

/* تصفية الأخبار */
#categoryFilters {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

#categoryFilters button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
}

/* صفحة الخبر الواحد */
article.container {
    padding: 1rem !important;
}

article h1 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

article .prose {
    font-size: 0.95rem !important;
}

/* أزرار المشاركة */
article .flex.flex-wrap.justify-center {
    justify-content: center !important;
}

article .flex.flex-wrap a,
article .flex.flex-wrap button {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
}

/* =========================================
   🔧 ADMIN DASHBOARD MOBILE
   ========================================= */

/* شريط التنقل */
body nav.bg-white {
    padding: 0.75rem 1rem !important;
}

body nav h1 {
    font-size: 1rem !important;
}

body nav .flex.items-center.gap-4 {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

body nav button,
body nav a {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* إحصائيات الموقع - تبويبات أزرق احترافي */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
}

/* كروت الإحصائيات */
.bg-gradient-to-br {
    padding: 1rem !important;
    border-radius: 1rem !important;
}

.bg-gradient-to-br .text-4xl {
    font-size: 1.5rem !important;
}

.bg-gradient-to-br .text-3xl {
    font-size: 1.25rem !important;
}

.bg-gradient-to-br .text-xs {
    font-size: 0.65rem !important;
}

/* جعل التبويبات باللون الأزرق الاحترافي */
.bg-gradient-to-br.from-blue-500,
.bg-gradient-to-br.from-green-500,
.bg-gradient-to-br.from-purple-500,
.bg-gradient-to-br.from-orange-500 {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

/* الأسعار والأرقام ظاهرة */
.font-black,
.font-bold {
    letter-spacing: -0.02em !important;
}

/* جداول الإحصائيات */
.grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

/* البيانات الثانوية */
.grid.grid-cols-1.lg\:grid-cols-3 .bg-white {
    padding: 1rem !important;
}

.grid.grid-cols-1.lg\:grid-cols-3 h3 {
    font-size: 0.75rem !important;
}

/* جدول الزيارات */
table.w-full {
    font-size: 0.7rem !important;
}

table th,
table td {
    padding: 0.5rem !important;
}

/* إخفاء بعض الأعمدة على الموبايل */
table th:nth-child(5),
table td:nth-child(5) {
    display: none !important;
}

/* إدارة الأخبار */
.flex.justify-between.items-center.mb-6 {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.flex.justify-between.items-center.mb-6 h2 {
    font-size: 1.25rem !important;
    text-align: center !important;
}

.flex.justify-between.items-center.mb-6 .flex.gap-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.flex.justify-between.items-center.mb-6 button {
    flex: 1 1 45% !important;
    min-width: 140px !important;
    font-size: 0.8rem !important;
    padding: 0.5rem !important;
}

/* جدول الأخبار */
.bg-white.rounded-lg.shadow table {
    font-size: 0.75rem !important;
}

.bg-white.rounded-lg.shadow th,
.bg-white.rounded-lg.shadow td {
    padding: 0.5rem !important;
}

/* إخفاء عمود الرابط والمشاهدات */
.bg-white.rounded-lg.shadow th:nth-child(2),
.bg-white.rounded-lg.shadow td:nth-child(2),
.bg-white.rounded-lg.shadow th:nth-child(4),
.bg-white.rounded-lg.shadow td:nth-child(4) {
    display: none !important;
}

/* أزرار الإجراءات */
.bg-white.rounded-lg.shadow .flex.gap-2 {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
}

.bg-white.rounded-lg.shadow .flex.gap-2 button,
.bg-white.rounded-lg.shadow .flex.gap-2 form button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.65rem !important;
}

/* Modal - النموذج */
#modal .max-w-4xl,
#aiModal .max-w-lg {
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 0.5rem !important;
}

#modal .p-6 {
    padding: 1rem !important;
}

/* تبويبات اللغات - أزرق */
#modal .flex.flex-wrap.border-b button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    margin-inline-end: 0.25rem !important;
}

#modal .flex.flex-wrap.border-b button.bg-blue-100 {
    background-color: #1e40af !important;
    color: white !important;
}

/* حقول النموذج */
#modal input,
#modal textarea {
    font-size: 0.9rem !important;
    padding: 0.75rem !important;
}

#modal textarea {
    min-height: 100px !important;
}

/* =========================================
   📱 LANGUAGE SWITCHER
   ========================================= */

/* حاوية زر اللغة */
.relative.group {
    position: static !important;
}

#lang-dropdown {
    width: 160px !important;
    max-width: 160px !important;
    position: fixed !important;
    top: 50px !important;
    right: 10px !important;
    left: auto !important;
    padding: 0.5rem !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.25rem !important;
    z-index: 100 !important;
}

#lang-dropdown a {
    padding: 0.4rem 0.2rem !important;
    font-size: 0.65rem !important;
    text-align: center !important;
}

/* =========================================
   🎨 GENERAL MOBILE IMPROVEMENTS
   ========================================= */

/* تحسين التمرير */
html {
    scroll-behavior: smooth;
}

/* تحسين النقر على اللمس */
a,
button {
    min-height: 44px;
    min-width: 44px;
}

/* إخفاء التمرير الأفقي */
body {
    overflow-x: hidden !important;
}

/* تحسين قراءة النصوص */
p,
span,
div {
    line-height: 1.6 !important;
}

/* الأزرار أكثر وضوحاً */
button,
.btn,
[type="submit"] {
    font-weight: 600 !important;
}