:root {
  --primary: #E07A5F;
  --secondary: #81B29A;
  --accent: #F2CC8F;
  --dark: #3D405B;
  --text: #5F6368;
  --bg-light: #F4F1DE;
  --white: #FFFFFF;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-lg: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-light: #1a1a1a;
  --white: #2d2d2d;
  --dark: #f0f0f0;
  --text: #b8b8b8;
  --shadow: 0 10px 30px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg-light);
  transition: background-color 0.3s ease;
  overflow-x: hidden; /* إضافة مهمة لمنع الكسر العرضي */
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem; /* قللت الهامش قليلاً للموبايل */
}

/* Header Styles */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85); /* زيادة الشفافية قليلاً */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

[data-theme="dark"] .header {
  background: rgba(45, 45, 45, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header.scrolled {
  box-shadow: var(--shadow);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px; /* زيادة الارتفاع قليلاً */
}

.header-logo a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.header-logo i {
  font-size: 2rem;
}

.header-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-weight: 600;
  color: var(--text);
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
  font-size: 1.25rem;
  transition: var(--transition);
}

.action-btn:hover {
  background: var(--bg-light);
  color: var(--primary);
  transform: translateY(-2px);
}

.subscribe-btn {
  width: auto;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.subscribe-btn:hover {
  background: var(--dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.mobile-menu-toggle {
  display: none;
  font-size: 1.5rem;
  color: var(--dark);
}

/* Ad Banners */
.ad-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 0;
}

.ad-label {
  font-size: 0.625rem;
  color: var(--text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.ad-placeholder {
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-weight: 600;
  border: 1px dashed #ccc;
  max-width: 100%; /* مهم جداً */
}

[data-theme="dark"] .ad-placeholder {
  background: #333;
  border-color: #555;
  color: #777;
}

/* ===========================
   Search Overlay Styling
   =========================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-modal {
    background: var(--white);
    padding: 3rem;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    position: relative;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.search-overlay.active .search-modal {
    transform: translateY(0);
}

.close-search {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--text);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-light);
}

.close-search:hover {
    background: var(--primary);
    color: var(--white);
}

.search-modal h3 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    color: var(--dark);
}

.search-form {
    display: flex;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
}

.search-form input {
    flex: 1;
    border: none;
    background: none;
    font-size: 1.2rem;
    color: var(--dark);
    outline: none;
    padding: 0.5rem;
}

.search-form button {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Content & Hero */
.hero-section { padding: 1rem 0 3rem; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 2rem;
}

.hero-featured {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: var(--transition);
  height: 100%;
}

.hero-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hero-featured .post-image {
  position: relative;
  height: 100%;
  min-height: 400px;
}

.hero-featured .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero-featured:hover .post-image img { transform: scale(1.03); }

.post-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

.hero-featured .post-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem;
  color: var(--white);
  z-index: 2;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}


.reading-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-featured .post-title {
  color: var(--white);
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 1.2;
}

[data-theme="dark"].hero-grid .post-title {
  color: var(--white);
}

.post-excerpt {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 90%;
}

.post-title {
    color: var(--dark);
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.2;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid var(--white);
}

/* تنسيق الإعلان بين العنوان والصورة */
.ad-before-featured-image {
    margin: 0px 0;
    text-align: center;
    padding: 0px 0;
}

/* ضبط المسافة فوق الصورة البارزة */
.post-featured-image {
    margin-top: 1.5rem;
}

/* ==========================================
   Post Content Styling (Single Page)
   ========================================== */

/* 1. تنسيق الفقرات (Paragraphs) */
.post-content p {
    font-size: 18px; /* حجم مريح للعين */
    line-height: 1.8; /* مسافة بين الأسطر تمنع تداخل الكلمات */
    margin-bottom: 25px; /* مسافة كافية تحت كل فقرة */
    font-weight: 400;
}

/* 2. تنسيق العناوين الكبيرة (H2) */
.post-content h2 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 45px; /* مسافة كبيرة من الأعلى للفصل بين الأقسام */
    margin-bottom: 20px;
    line-height: 1.3;
    position: relative;

}

/* إضافة لمسة برتقالية احترافية بجانب H2 */


/* 3. تنسيق العناوين الفرعية (H3) */
.post-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* 4. تنسيق الصور داخل المقال (Images) */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
     /* توسيط الصورة مع مسافة عمودية */

    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* ظل ناعم يعطي عمقاً */
}

/* تنسيق تسمية الصورة (Captions) */
.post-content figcaption {
    text-align: center;
    font-size: 14px;
    margin-top: -30px;
    margin-bottom: 40px;
    font-style: italic;
}

/* 5. تنسيق القوائم (Lists) */
.post-content ul, .post-content ol {
    margin-bottom: 25px;
    padding-left: 25px;
}

.post-content li {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.6;
}

/* ==========================================
   Post Navigation Styling
   ========================================== */

.post-navigation {
    display: flex;
    gap: 20px;
    margin: 50px 0;
    padding-top: 30px;
    border-top: 1px solid #eee; /* فاصل بسيط عن محتوى المقال */
}

.nav-box {
    flex: 1; /* تجعل الصناديق متساوية في العرض */
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* تأثير التمرير (Hover) */
.nav-box:hover {
    border-color: #ff6b35; /* لون القالب البرتقالي */
    box-shadow: 0 10px 20px rgba(255, 107, 53, 0.08);
    transform: translateY(-3px);
}

/* تنسيق النص العلوي (Previous/Next Post) */
.nav-box span {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* تنسيق عنوان المقال */
.nav-box strong {
    font-size: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عرض سطرين فقط لتجنب اختلاف الأطوال */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* تغيير لون العنوان عند التمرير */
.nav-box:hover strong {
    color: #ff6b35;
}

/* تنسيق خاص لزر "السابق" وزر "التالي" عند وجودهما معاً */
.nav-box.prev {
    text-align: left;
}

.nav-box.next {
    text-align: right;
}
.related-posts h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* التوافق مع الهواتف الذكية */
@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column; /* ترتيب الصناديق تحت بعضها في الجوال */
    }
}

.author-info { display: flex; flex-direction: column; }
.author-name { font-weight: 600; color: var(--text); font-size: 0.95rem; }
.post-date { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); }

/* Trending Side */
.hero-trending {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trending-post {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  flex: 1;
}

.trending-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.trending-post .post-image {
  position: relative;
  height: 100%;
}

.trending-post .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.trending-post:hover .post-image img { transform: scale(1.05); }

.trending-post .post-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  color: var(--white);
}

.trending-post .post-title {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Categories Section */
.categories-section { padding: 1rem 0; }

.category-pills {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  scrollbar-width: thin;
}

.pill {
  padding: 0.7rem 1.5rem;
  background: var(--white);
  color: var(--text);
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  font-size: 0.9rem;
}

.pill:hover, .pill.active {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Content Area */
.content-section { padding: 2rem 0 4rem; }
.content-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; margin-bottom: 3rem; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-left: 5px solid var(--primary);
  padding-left: 1rem;
}

.section-title { font-size: 1.8rem; color: var(--dark); }

.view-all {
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.view-all:hover { gap: 0.75rem; }

.ad-header { margin-bottom: 2rem; border-radius: var(--radius); }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.post-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.card-image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .card-image img { transform: scale(1.05); }

.category-badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.3rem 0.8rem; background: var(--primary);
  color: var(--white); border-radius: 50px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
}

.card-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card-title { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--dark); font-weight: 700; line-height: 1.4; }
.card-excerpt { font-size: 0.95rem; color: var(--text); margin-bottom: 1.5rem; line-height: 1.6; }
.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.05); }

.author-mini { display: flex; align-items: center; gap: 0.5rem; }
.author-mini img { width: 30px; height: 30px; border-radius: 50%; }
.author-mini span { font-size: 0.85rem; font-weight: 600; color: var(--text); }

.ad-card {
  grid-column: 1 / -1;
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin: 1rem 0;
}
/* تنسيق الحاوية الكبرى التي تضم العمود والسايدبار */
.content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* المسافة الفاصلة بين العمود والسايدبار */
    margin-top: 1rem;
}
.sidebar {
    flex: 0 0 320px; /* تثبيت عرض السايدبار على 320 بكسل وجعل العمود يأخذ الباقي */
}
/* التنسيق الأساسي للعمود الرئيسي */
.main-column {
    flex: 1; /* جعل العمود يأخذ المساحة المتاحة بالكامل */
    min-width: 0; /* لمنع تمدد العناصر البرمجية خارج الإطار */
    display: flex;
    flex-direction: column;
    gap: 1px; /* المسافة بين المقال والبطاقات والنموذج */
}

/* تنسيق المحتوى داخل العمود (Typography) */



.main-column .post-content {
    font-size: 1.1rem;
    line-height: 1.8;

}

/* --- التجاوب مع الشاشات المختلفة (Responsiveness) --- */

/* للشاشات المتوسطة (مثل التابلت) */
@media (max-width: 991px) {
    .main-column {
        flex: 0 0 100%; /* جعل العمود يأخذ عرض الشاشة بالكامل */
    }
}



/* تنسيق الحاوية الخارجية */
.top-ad-wrapper {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    overflow: hidden; /* يمنع خروج أي شيء عن الإطار */
}

/* تنسيق وحدة الإعلانات المرنة */
.ad-responsive-unit {
    display: inline-block;
    max-width: 100%; /* لا يتجاوز عرض الشاشة أبداً */
    height: auto;
    background: #f9f9f9; /* لون خلفية خفيف للمكان الشاغر */
    border: 1px dashed #ddd;
    line-height: 90px;
    color: #999;
}

/* ضبط المقاسات حسب نوع الشاشة (Media Queries) */

/* لشاشات الكمبيوتر (اللوحات الكبيرة) */
@media (min-width: 992px) {
    .ad-responsive-unit {
        width: 728px;
        height: 90px;
    }
}

/* لشاشات التابلت (مقاس متوسط) */
@media (min-width: 768px) and (max-width: 991px) {
    .ad-responsive-unit {
        width: 468px;
        height: 60px;
        line-height: 60px;
    }
}

/* لشاشات الهاتف (أصغر مقاس) */
@media (max-width: 767px) {
    .ad-responsive-unit {
        width: 320px;
        height: 100px; /* مقاس إعلان الموبايل الشهير */
        line-height: 100px;
        font-size: 12px;
    }
}

/* Sidebar */
.sidebar-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2rem; }

.ad-sidebar {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column;
  align-items: center; box-shadow: var(--shadow-sm);
}

.widget {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
}

.widget-title {
  font-size: 1.25rem; margin-bottom: 1.5rem;
  color: var(--dark); padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
}

.popular-list { display: flex; flex-direction: column; gap: 1.2rem; }
.popular-item { display: flex; gap: 1rem; align-items: flex-start; }
.popular-number { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: #e0e0e0; line-height: 1; }
.popular-content h4 { font-size: 1rem; margin-bottom: 0.3rem; color: var(--dark); line-height: 1.4; font-weight: 600; }
.popular-views { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #999; }

.categories-list { display: flex; flex-direction: column; gap: 0.5rem; }
.categories-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem; border-radius: 8px; transition: var(--transition);
  font-weight: 500;
}
.categories-list a:hover { background: var(--bg-light); color: var(--primary); padding-left: 1rem; }
.categories-list span { padding: 0.2rem 0.6rem; background: var(--bg-light); border-radius: 50px; font-size: 0.8rem; font-weight: 700; color: var(--text); }


/* Load More */
.load-more-container { display: flex; justify-content: center; margin-top: 3rem; }
.load-more-btn {
  background: transparent; border: 2px solid var(--primary);
  color: var(--primary); padding: 0.8rem 2rem; border-radius: 50px;
  font-weight: 700; font-size: 1rem; display: flex; align-items: center;
  gap: 0.5rem; transition: var(--transition);
}
.load-more-btn:hover { background-color: var(--primary); color: var(--white); }
.load-more-btn.hidden { display: none; }

/* Footer */
.footer { background: var(--dark); color: rgba(255,255,255,0.7); padding: 5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; }
.footer-logo { display: flex; align-items: center; gap: 0.5rem; font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--white); margin-bottom: 1.5rem; }
.footer-logo i { color: var(--primary); }
.social-links { display: flex; gap: 1rem; margin-top:1rem; }
.social-links a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; color: white; }
.social-links a:hover { background: var(--primary); transform: translateY(-3px); }
.footer-title { color: var(--white); font-size: 1.2rem; margin-bottom: 1.5rem; font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-links a:hover { color: var(--primary); padding-left: 5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; text-align: center; font-size: 0.9rem; }
/* 2. تنسيق زر الصعود للأعلى */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary);
  color: var(--white);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0; /* مخفي افتراضياً */
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 990;
}

.scroll-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--dark);
  transform: translateY(-5px);
}

/* تعديل مكانه في الموبايل لكي لا يغطي المحتوى */
@media (max-width: 768px) {
  .scroll-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* ===========================
   FINAL POLISH FIXES ✨
   =========================== */

/* 1. إصلاح الفوتر في الدارك مود */
[data-theme="dark"] .footer {
  background-color: #0a0a0a !important; /* لون أسود عميق */
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255, 255, 255, 0.7);
}

/* ضمان أن العناوين داخل الفوتر تبقى بيضاء */
[data-theme="dark"] .footer-title,
[data-theme="dark"] .footer-logo span {
    color: #ffffff !important;
}

/* ================= SINGLE POST PAGE ================= */

/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.breadcrumbs a { color: var(--primary); font-weight: 600; }

/* Inline Meta */
.post-meta-inline {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Featured Image */
.post-featured-image img {
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
}

/* Share Bar */
.share-bar {
  position: sticky;
  top: 120px;
  z-index: 99999;
  float: left;
  margin-left: -20px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.share-bar a {
  width: 40px;
  height: 40px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--primary);
}

/* Content */
.post-content h2,
.post-content h3 {
  margin-top: 2rem;
}
.post-content blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--dark);
}

/* ==========================================
   تنسيق الوسوم (Post Tags)
   ========================================== */

.post-tags {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 40px 0;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0; /* خط فاصل بسيط عن المحتوى */
}

.tags-label {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tags-label i {
    color: var(--primary); /* أيقونة باللون البرتقالي */
    font-size: 18px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* تنسيق كل وسم كأنه زر أنيق */
.post-tags a {
    display: inline-block;
    background: #f8f9fa;
    color: #666;
    padding: 6px 16px;
    border-radius: 50px; /* زوايا دائرية بالكامل */
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

/* تأثير عند تمرير الماوس */
.post-tags a:hover {
    background: var(--primary); /* يتحول للبرتقالي عند التمرير */
    color: #fff;
    border-color: #ff6b35;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.2);
}

/* التوافق مع الجوال */
@media (max-width: 768px) {
    .post-tags {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Author Box */
.author-box {
  display: flex;
  gap: 1.5rem;
  margin: 3rem 0;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.author-box img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.author-box p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1rem;
}
/* تنسيق أيقونات التواصل الاجتماعي في صندوق الكاتب */
.author-social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.author-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    color: #555;
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-social-links a:hover {
    background: #ff6b35;
    color: #fff;
    transform: translateY(-3px);
}

/* تنسيق خاص لأيقونة "مشاهدة جميع المقالات" */
.author-social-links a.view-all-posts {
    margin-left: 5px;
    background: #222;
    color: #fff;
}

.author-social-links a.view-all-posts:hover {
    background: #000;
}

/* Post Navigation */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
}
.nav-box {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  transition: var(--transition);
}
.nav-box:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

/* ==========================================
   Table of Contents (TOC) Styling
   ========================================== */
.felina-toc {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.15);;
    padding: 25px;
    border-radius: var(--radius);
    margin: 30px 0;
}

.toc-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toc-title i { color: #ff6b35; }

.felina-toc ul { list-style: none; padding: 0; margin: 0; }

.toc-item { margin-bottom: 8px; }

/* إزاحة العناوين الفرعية H3 */
.toc-item.level-3 { margin-left: 20px; font-size: 0.9em; }

.toc-item a {
    text-decoration: none;
    color: #555;
    transition: color 0.3s;
}

.toc-item a:hover { color: #ff6b35; }

/* ==========================================
   تنسيق الروابط (Internal & External Links)
   ========================================== */

/* الروابط الداخلية */
.post-content a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 107, 53, 0.1);
    transition: all 0.3s ease;
}

.post-content a:hover {
    background: rgba(255, 107, 53, 0.05);
    border-bottom-color: #ff6b35;
}

/* الروابط الخارجية (التي تبدأ بـ http) */
.post-content a[href^="http"]:not([href*="felina.local"]) {
    color: var(--dark);
    border-bottom: 2px solid #bdc3c7;
    padding-right: 18px;
    position: relative;
}

/* إضافة أيقونة سهم للروابط الخارجية */
.post-content a[href^="http"]:not([href*="felina.local"])::after {
    content: "\ea7a"; /* أيقونة سهم من RemixIcon */
    font-family: 'remixicon';
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 2px;
}

.post-content a[href^="http"]:not([href*="felina.local"]):hover {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}


/* ===========================
   COMMENTS SECTION (GRID LAYOUT) ✨
   =========================== */
#commentform label {
    display: none; /* إخفاء Label لأن الـ Placeholder يكفي */
}
.comment-form-cookies-consent {
    display: none;
}
.comments {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid #f0f0f0;
}

/* نموذج التعليقات بنظام Grid */
#commentform {
  display: grid;
  grid-template-columns: 1fr 1fr; /* عمودين متساويين */
  gap: 1.5rem;
}

/* الفقرات التعريفية (مثل Logged in as) تأخذ العرض كاملاً */
#commentform > p:not(.comment-form-author):not(.comment-form-email) {
  grid-column: 1 / -1;
}

/* ==========================================
   إصلاح تنسيق الردود المتداخلة (Comment Replies Fix)
   ========================================== */

/* 1. ضبط الحاوية الكلية للردود */
.commentlist .children {
    list-style: none;
    margin-left: 45px; /* مسافة الإزاحة للرد */
    padding-left: 15px;
    border-left: 2px solid #ff6b35; /* خط برتقالي جانبي يربط الرد بالأصل */
    margin-top: 10px;
}

/* 2. ضمان استقلالية صندوق الرد وعدم تداخله */
.commentlist .children .comment-body {
    background: #fcfcfc; /* خلفية أفتح قليلاً للتمييز */
    border: 1px solid #eee;
    margin-bottom: 15px;
    padding: 20px;
    display: block; /* يمنع العناصر من الطفو */
    overflow: hidden; /* يحتوي العناصر الداخلية */
}

/* 3. إصلاح تداخل الميتا (الاسم، التاريخ، رسالة المراجعة) */
.comment-meta {
    display: flex;
    flex-wrap: wrap; /* يسمح للعناصر بالنزول لسطر جديد بدل التداخل */
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.comment-author.vcard {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 4. تنسيق رسالة "في انتظار المراجعة" (المشكلة الأكبر في الصورة) */
.comment-awaiting-moderation {
    display: block;
    width: 100%; /* تأخذ سطر كامل لمنع تداخلها مع الاسم */
    background: #fff4f0;
    color: #e67e22;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-style: italic;
    margin: 10px 0;
    border-right: 3px solid #ff6b35;
}

/* 5. ضبط حجم صورة صاحب الرد لتكون أصغر قليلاً من الأصلي */
.children .avatar {
    width: 40px !important;
    height: 40px !important;
}

/* 6. إصلاح زر الرد في التعليقات المتداخلة */
.children .reply {
    margin-top: 10px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .commentlist .children {
        margin-left: 20px; /* تقليل الإزاحة في الشاشات الصغيرة */
        padding-left: 10px;
    }
    
    .comment-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* تنسيق الحقول العامة */
.comment-form input,
.comment-form textarea {
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--dark);
  transition: all 0.3s ease;
  width: 100%;
}

/* مربع الرسالة يمتد للعرض كاملاً */
.comment-form-comment {
  grid-column: 1 / -1;
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* زر الإرسال */
.comment-form .form-submit {
  grid-column: 1 / -1;
  text-align: center;
}

.comment-form input[type="submit"] {
  background-color: var(--primary);
  color: #fff;
  padding: 0.8rem 3rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  width: auto !important; /* لكي لا يأخذ العرض كاملاً */
  min-width: 180px;
}

.comment-form input[type="submit"]:hover {
  background-color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* الوضع المظلم (Dark Mode) */
[data-theme="dark"] .comment-form input, 
[data-theme="dark"] .comment-form textarea {
  background-color: #2d2d2d;
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .comment-form input:focus,
[data-theme="dark"] .comment-form textarea:focus {
  background-color: #333333;
  border-color: var(--primary);
}

/* ==========================================
   تنسيق قائمة التعليقات السابقة (Comment List)
   ========================================== */

.commentlist {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

/* صندوق التعليق الفردي */
.comment-body {
    background:var(--white);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.comment-body:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* ترويسة التعليق (الاسم والصورة) */
.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.comment-author.vcard {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-author img {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.comment-author .fn {
    font-weight: 700;
    color: var(--dark);
    font-style: normal;
}

.comment-author .fn a {
    color: var(--dark);
    text-decoration: none;
}

/* التاريخ والوقت */
.comment-metadata {
    font-size: 12px;
    color: var(--dark);
}

.comment-metadata a {
    color: var(--dark);
    text-decoration: none;
}

/* محتوى النص في التعليق */
.comment-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    margin: 0;
}
div#comments .comments-title {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}
/* زر الرد (Reply) */
.reply {
    margin-top: 15px;
    text-align: right;
}

.comment-reply-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary); /* لون القالب البرتقالي */
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.comment-reply-link:hover {
    color: var(--dark);
}

/* ------------------------------------------
   تنسيق الردود المتداخلة (Nested Replies)
   ------------------------------------------ */

.commentlist .children {
    list-style: none;
    margin-left: 50px; /* إزاحة للردود */
    border-left: 2px solid #f0f0f0; /* خط جانبي لتمييز التسلسل */
    padding-left: 20px;
}

/* التوافق مع الجوال للردود المتداخلة */
@media (max-width: 768px) {
    .commentlist .children {
        margin-left: 20px;
        padding-left: 10px;
    }
}

/* إخفاء التسميات (Labels) إذا كنت تستخدم Placeholders */
#commentform label {
    display: none;
}

/* التوافق مع الجوال */
@media (max-width: 768px) {
  #commentform {
    grid-template-columns: 1fr; /* عمود واحد في الجوال */
  }
}


/* ===========================
   ARCHIVE PAGE STYLES 📂
   =========================== */

/* Archive Header Box */
.archive-header-section {
  padding: 3rem 0;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.archive-header-box {
  max-width: 800px;
}

.archive-header-section .container {
    display: flex;
    justify-content: center;
}

.archive-header-box {
    text-align: center;       /* توسيط النصوص */
    align-items: center;      /* توسيط العناصر */
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
}

/* توسيط شريط الإحصائيات (عدد المقالات) */
.archive-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.archive-subtitle {
  display: inline-block;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.archive-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--dark);
}

.archive-desc {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.archive-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.archive-stats i {
  color: var(--primary);
  margin-right: 0.3rem;
}

/* Pagination Styling (الترقيم) */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.page-num, .page-prev, .page-next {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  min-width: 45px;
  padding: 0 1rem;
  border-radius: 50px;
  background: var(--white);
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  border-color: var(--primary);
}

.page-num:hover, .page-prev:hover, .page-next:hover {
  color: var(--white);
  transform: translateY(-2px);
  background: var(--primary);
}

.page-num.active {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 10px rgba(224, 122, 95, 0.3);
}

.page-dots {
  color: var(--text);
  font-weight: 600;
  padding: 0 0.5rem;
}

/* ===========================
   404 ERROR PAGE STYLES 🙀
   =========================== */

.error-page {
  padding: 4rem 0 6rem;
  text-align: center;
  min-height: 70vh; /* لضمان أن الفوتر ينزل للأسفل */
  display: flex;
  align-items: center;
}

.error-content {
  max-width: 600px;
  margin: 0 auto;
}

/* صورة القطة */
.error-img {
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}

.error-img img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
  height: auto;
  transform: rotate(-2deg); /* إمالة بسيطة لإعطاء طابع مرح */
  transition: transform 0.3s ease;
}

.error-img:hover img {
  transform: rotate(0);
}

/* النصوص */

.error-title {
  font-size: 2rem;
  color: var(--dark);
  margin-bottom: 1rem;
}

.error-desc {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* الأزرار */
.error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-home {
  background: var(--primary);
  color: var(--white);
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(224, 122, 95, 0.3);
}

.btn-home:hover {
  background: var(--dark);
  transform: translateY(-3px);
}

.btn-search {
  background: var(--white);
  color: var(--dark);
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.1);
}

.btn-search:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* وضع المظلم */
[data-theme="dark"] .btn-search {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: var(--white);
}

/* ===========================
   SEARCH PAGE CENTERING FIX 🎯
   =========================== */

/* توسيط المحتوى داخل هيدر البحث */
.search-hero .container {
    display: flex;
    justify-content: center;
}

.search-hero .archive-header-box {
    text-align: center; /* توسيط النصوص */
    width: 100%;
    max-width: 800px;
}

/* جعل العنوان الفرعي (Search Results For) في سطر لوحده */
.search-hero .archive-subtitle {
    display: block; 
    margin-bottom: 1rem;
}

/* توسيط مربع البحث الكبير */
.big-search-form {
    margin: 2rem auto 0; /* auto يجعله في الوسط أفقياً */
    width: 100%;
    max-width: 600px;
    display: flex;
    box-shadow: var(--shadow-sm); /* إضافة ظل خفيف للجمالية */
    border-radius: 50px; /* لضمان دائرية الظل */
}

/* تحسين شكل الحقل والزر */
.big-search-form input {
    border-radius: 50px 0 0 50px;
    border: 1px solid #e0e0e0;
    border-right: none;
    padding-left: 2rem;
}

.big-search-form button {
    border-radius: 0 50px 50px 0;
}

/* Big Search Form (Search Page) */
.big-search-form {
    display: flex;
    margin-top: 1.5rem;
    max-width: 600px;
}
.big-search-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid rgb(0 0 0 / 15%);
    border-right: none;
    border-radius: 50px 0 0 50px;
    font-size: 1.1rem;
    outline: none;
    transition: 0.3s;
}
.big-search-form input:focus {
    border-color: var(--primary);
}
.big-search-form button {
    background: var(--primary);
    color: var(--white);
    padding: 0 2rem;
    border-radius: 0 50px 50px 0;
    font-size: 1.5rem;
}
.big-search-form button:hover {
    background: var(--dark);
}

/* ===========================
   AUTHOR PAGE STYLES 🧑‍⚕️
   =========================== */

/* جعل الهيرو مثل الأرشيف (في الوسط) */
.author-hero .container {
    display: flex;
    justify-content: center;
}

.author-header-box {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
}

/* تنسيق صورة الكاتب في الميتا */
.meta-avatar img {
    border-radius: 50%; /* جعل الصورة دائرية */
    vertical-align: middle;
    margin-right: 8px;
    border: 2px solid #eee;
}

.author-meta {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

/* تنسيق مساحة الإعلان تحت العنوان */
.ad-after-title {
    margin: 20px 0 30px;
    text-align: center;
    clear: both;
}

.ad-placeholder-header {
    background: #f9f9f9;
    border: 1px dashed #ccc;
    color: #999;
    padding: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* تنسيق صورة الكاتب الكبيرة */
.author-avatar-large {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
    position: relative;
}

.author-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: var(--shadow); /* ظل جميل */
}

/* أيقونات السوشيال ميديا الخاصة بالكاتب */
.author-social {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
    justify-content: center;
}

.author-social a {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.05);
}

.author-social a:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* بطاقتين بجانب بعضهما */
    gap: 20px;
    margin: 30px 0;
}

.full-width-card {
    grid-column: 1 / -1; /* بطاقة العنوان تأخذ السطر كاملاً */
}

/* ===========================
   CONTACT WITH SIDEBAR STYLES 📞
   =========================== */

/* Hero Adjustment */
.contact-hero-small {
    padding: 3rem 0 2rem;
    border-bottom: none; /* إزالة الخط الفاصل لأن المحتوى متصل */
}

/* شبكة الكروت داخل العمود الرئيسي */
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* كارتين بجانب بعض */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* ستايل الكارت الجديد (أنيق وصغير) */
.contact-card-small {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center; /* الأيقونة بجانب النص */
    gap: 1rem;
    transition: transform 0.2s;
}

.contact-card-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--primary);
}

/* الكارت العريض (للعنوان) */
.full-width-card {
    grid-column: 1 / -1; /* يمتد على كامل العرض */
}

/* الأيقونة */
.contact-icon-small {
    width: 50px;
    height: 50px;
    background: #eaf6f6;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.contact-text-box h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--text);
}

.contact-text-box a, 
.contact-text-box p {
    font-weight: 700;
    color: var(--dark);
    font-size: 1.05rem;
    font-family: 'Outfit', sans-serif;
}

/* تنسيق الفورم */
.contact-form-wrapper {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); /* ظل خفيف جداً */
}

/* العنوان فوق الفورم */
.section-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--dark);
    text-align: center; /* توسيط عنوان "Send a Message" */
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 1. جعل الاسم والايميل 50% - 50% بالضبط */
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* قسمة متساوية */
    gap: 1.5rem; /* مسافة بين المربعين */
    width: 100%;
}

/* تنسيق الحقول (المربعات) */
.contact-form-wrapper input,
.contact-form-wrapper textarea {
    background: #f9f9f9;
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #eee;
    border-radius: 12px; /* حواف ناعمة */
    font-size: 1rem;
    transition: all 0.3s ease;
    color: var(--dark);
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(224, 122, 95, 0.1);
    outline: none;
}

/* 2. تنسيق الزر (في الوسط + صغير) */
.contact-form-wrapper button {
    align-self: center; /* يضع الزر في وسط الفورم أفقياً */
    background: var(--dark);
    color: var(--white);
    padding: 0.8rem 3rem; /* عرض مناسب وليس كبيراً جداً */
    border-radius: 50px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    min-width: 160px; /* ضمان ألا يكون صغيراً جداً */
}

.contact-form-wrapper button:hover {
    background: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(224, 122, 95, 0.4);
}

/* التدرج اللوني البرتقالي الاحترافي للخلفية */
.newsletter-box{
    background: var(--primary);
    padding: 60px 0;
    border-radius: var(--radius);
    margin: 40px auto;
    text-align: center;
    color: #fff;
}

.newsletter-form {
  margin-bottom: 1rem;
}

i.ri-mail-send-line.newsletter-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 1.75rem;
}
/* تنظيم الحقول والزر لضمان التمدد */
.newsletter-form-group {
    display: flex;
    gap: 15px;
    max-width: 650px; /* زيادة عرض النموذج الإجمالي */
    margin: 30px auto 0;
    align-items: flex-start; /* يمنع قفز الزر عند ظهور الرسالة */
}

/* تمديد حقل الإيميل ليكون طويلاً */
.newsletter-input-wrapper {
    flex: 3; /* جعل حقل الإيميل يأخذ مساحة أكبر بكثير من الزر */
    display: flex;
    flex-direction: column;
}

.newsletter-input {
    width: 100%;
    padding: 16px 25px;
    border-radius: 12px;
    border: none;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* تنسيق الرسالة تحت الإيميل */
.newsletter-response-msg {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    display: none;
    color: #ffffff;
}

/* تنسيق الزر مع الأيقونة */
.newsletter-btn {
    flex: 1;
    height: 55px;
    background-color: #1a1a2e;
    color: white;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    background-color: #0f0f1d;
}

/* توافق الجوال */
/* =========================================
   Newsletter Responsive Fix (≤ 768px)
========================================= */
@media (max-width: 768px) {

  .newsletter-section {
    padding: 30px 12px;
  }

  .newsletter-input-wrapper {
    width: 100%;
}
  .newsletter-box {
    padding: 26px 18px;
    border-radius: 16px;
  }

  .newsletter-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }

  .newsletter-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .newsletter-text {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  /* ===== Form Layout ===== */
  .newsletter-form-group {
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-input {
    padding: 14px;
    font-size: 0.95rem;
    border-radius: 12px;
  }

  .newsletter-btn {
    width: 100%;
    padding: 14px;
    font-size: 0.95rem;
    border-radius: 28px;
  }

  /* ===== Response Message ===== */
  .newsletter-response-msg {
    font-size: 0.85rem;
    padding: 10px 12px;
    margin-top: 8px;
    text-align: left;
  }

  /* ===== Privacy Text ===== */
  .newsletter-privacy {
    font-size: 0.8rem;
    margin-top: 14px;
    line-height: 1.4;
  }

}

/* منع اهتزاز الصفحة وحجز مساحة الصورة (CLS Fix) */
.post-featured-image {
  aspect-ratio: 16 / 9; /* الحفاظ على أبعاد الصورة القياسية */
  background-color: #f0f0f0; /* لون خلفية مؤقت حتى تظهر الصورة */
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}



/* =========================================
   RESPONSIVE DESIGN FIXES (FINAL) 🚀
   ========================================= */

/* 1. التابلت والشاشات المتوسطة (تم التعديل لـ 992px ليظهر السايدبار في 1024px) */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-trending { 
    flex-direction: row; 
    gap: 1rem; 
    overflow-x: auto;
    padding-bottom: 1rem;
  }
  .trending-post { min-width: 280px; }
  
  /* هنا يتم تحويل المحتوى لعمود واحد وإنزال السايدبار */
  .content-grid { grid-template-columns: 1fr; } 
  .sidebar { margin-top: 3rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* 2. الموبايل (الأهم) */
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
  
  /* --- إصلاح الهيدر الجذري --- */
  .header-container { 
    height: 60px; 
    padding: 0 0.5rem;
  }
  
.sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 3rem;
  }

  
     .contact-info-grid {
        grid-template-columns: 1fr; /* عمود واحد */
    }
    .form-group-row {
        grid-template-columns: 1fr;
    }
    .contact-form-wrapper {
        padding: 1.5rem;
    }
  
     .author-avatar-large {
        width: 100px;
        height: 100px;
    }
    
    .author-header-box .archive-title {
        font-size: 2rem !important;
    }
  
  /* تصغير العنوان الكبير لكي لا ينكسر بشكل سيء */
    .archive-title {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }
	
/* 1. إخفاء شريط المشاركة الجانبي (لأنه يغطي النص) */
.share-bar {
    margin-left: -10px;
}


    /* 2. تصغير عنوان المقال الضخم */
    .post-title {
        font-size: 1.8rem !important; /* تصغير من 2.5rem */
        line-height: 1.3;
        margin-top: 1rem;
    }

/* 1. إخفاء الوصف الطويل في الهيرو (للموبايل فقط) */
    .hero-featured .post-excerpt {
        display: none !important;
    }

    /* 2. تحسين ظهور العنوان */
    .hero-featured .post-title {
        font-size: 1.5rem !important; /* حجم مناسب للقراءة */
        line-height: 1.3;
        margin-bottom: 0.5rem !important;
        display: block !important; /* ضمان ظهوره */
    }

    /* 3. تقليل الهوامش الداخلية ليأخذ العنوان راحته */
    .hero-featured .post-content {
        padding: 1.5rem !important;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); /* تحسين التدرج */
    }

    /* 4. زيادة ارتفاع الصورة قليلاً لتستوعب العنوان */
    .hero-featured .post-image {
        min-height: 300px !important;
    }
    
    /* تحسين شكل معلومات الكاتب */
    .post-author {
        margin-top: 0.5rem;
    }

    /* 3. إصلاح صندوق الكاتب (ليصبح عمودياً) */
    .author-box {
        flex-direction: column; /* الصورة فوق والنص تحت */
        text-align: center;     /* توسيط المحتوى */
        gap: 1rem;
        padding: 1.5rem !important;
    }

    .author-box img {
        margin: 0 auto; /* توسيط صورة الكاتب */
        width: 70px;    /* تصغير الصورة قليلاً */
        height: 70px;
    }

    .author-box h4 {
        margin-bottom: 0.5rem;
    }

    /* 4. تحسين هوامش المحتوى لكي لا يلتصق بالحواف */
    .post-content {
        font-size: 1.05rem; /* خط مريح للقراءة */
        line-height: 1.7;
    }

    /* ضمان أن الصور داخل المقال لا تخرج عن الشاشة */
    .post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
	
/* 1. إصلاح العناوين الفرعية (H2, H3) لتناسب الهاتف */
    .post-content h2 {
        font-size: 1.5rem !important; /* تصغير من الحجم الكبير */
        line-height: 1.3;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .post-content h3 {
        font-size: 1.25rem !important;
        line-height: 1.3;
        margin-top: 1.5rem;
        margin-bottom: 0.8rem;
    }

    /* 2. إصلاح كارثة أزرار التنقل (Make them Stack) */
    .post-navigation {
        grid-template-columns: 1fr !important; /* إجبارها لتكون عمود واحد */
        gap: 1rem !important;
    }

    .nav-box {
        width: 100% !important; /* تأخذ العرض الكامل */
        text-align: center;      /* توسيط النص لجمالية أكثر */
        padding: 1.5rem !important;
    }

    /* تحسين شكل النصوص داخل الأزرار */
    .nav-box span {
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
        opacity: 0.7;
    }

    .nav-box strong {
        display: block;
        font-size: 1.1rem;
        line-height: 1.4;
    }
	
/* وهذا يمنع الترقيم من كسر العرض */
    .pagination-container {
        flex-wrap: wrap; /* يسمح للأرقام بالنزول لسطر جديد إذا ضاق المكان */
        gap: 0.5rem;
    }
    
    /* إصلاح الشعار في صفحة الأرشيف أيضاً */
    .header-logo a {
        font-size: 1rem !important;
    }
    .header-logo span {
        display: inline-block !important;
        max-width: 100% !important;
    }

    /* تحسين الهوامش الجانبية للنص */
    .archive-desc {
        font-size: 1rem;
        padding: 0 1rem;
    }
  
  /* 2. تحويل مربع البحث إلى "ستايل التطبيقات" (فوق بعض) */
    .big-search-form {
        flex-direction: column; /* جعل العناصر عمودية */
        gap: 15px; /* مسافة بين الحقل والزر */
        box-shadow: none !important; /* إزالة الظل المشترك */
        background: transparent;
    }

    /* تنسيق الحقل ليصبح دائرياً بالكامل */
    .big-search-form input {
        width: 100%;
        border-radius: 50px !important; /* تدوير كامل */
        border: 1px solid #ddd !important;
        padding: 1rem 1.5rem;
        text-align: center; /* توسيط النص داخل الحقل */
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }

    /* تنسيق الزر ليصبح عريضاً ودائرياً */
    .big-search-form button {
        width: 100%;
        border-radius: 50px !important;
        padding: 0.8rem 0; /* تحسين الارتفاع */
        font-size: 1.2rem;
        box-shadow: 0 4px 15px rgba(224, 122, 95, 0.3); /* ظل للزر */
    }
    
    /* تعديل المسافات العامة */
    .search-hero .archive-title {
        font-size: 1.8rem; /* تصغير العنوان الكبير قليلاً */
    }
  
  .error-code { font-size: 4rem; }
  .error-title { font-size: 1.5rem; }
  .error-img img { max-width: 280px; }
  
  /* تصغير الشعار */
  .header-logo a {
    font-size: 1.1rem; /* تصغير الخط */
    gap: 0.3rem;
  }
  
  .header-logo i { font-size: 1.4rem; }

  /* إخفاء زر "Subscribe" في الموبايل لتوفير المساحة */
  .subscribe-btn { display: none !important; }

  /* تقليل المسافات بين الأيقونات */
  .header-actions { gap: 0.3rem; }
  
  .action-btn {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }

  .mobile-menu-toggle { display: block; }

  /* --- القائمة الجانبية --- */
  .header-nav {
    position: fixed; top: 62px; left: -100%; width: 100%;
    height: calc(100vh - 60px); background: var(--white);
    padding: 2rem; transition: left 0.3s ease;
    z-index: 999; display: flex; flex-direction: column;
    overflow-y: auto;
	padding-top: 0px;
  }
  .header-nav.active { left: 0; }
  .nav-list { flex-direction: column; width: 100%; gap: 0; }
  .nav-link {
    display: block; padding: 1rem 0; font-size: 1.1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05); width: 100%;
  }

  /* --- إصلاح المحتوى --- */
  .hero-trending { flex-direction: column; }
  .trending-post { min-width: auto; }
  
  .hero-featured .post-title { font-size: 1.5rem; }
  .hero-featured .post-image { min-height: 220px; }

  .posts-grid { grid-template-columns: 1fr; }
  
  .newsletter-box { padding: 2rem 1rem; }
  .newsletter-form { flex-direction: column; }
  
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-logo { justify-content: center; }
  .social-links { justify-content: center; }

  /* --- إصلاح الإعلانات (Critical Fix) --- */
  /* نمنع الإعلان من تجاوز عرض الشاشة */
  .ad-banner { 
    padding: 1rem 0; 
    width: 100%; 
    overflow: hidden; 
  }
  
  /* نجبر الإعلان الكبير على الصغر */
  .ad-leaderboard .ad-placeholder {
    width: 100% !important;
    max-width: 300px !important;
    height: 50px !important; /* تصغير الارتفاع */
    margin: 0 auto;
    font-size: 0.8rem;
  }

 .comment-form {
    grid-template-columns: 1fr; /* عمود واحد فقط */
    gap: 1rem;
  }
  
  /* في الهاتف، الزر يأخذ العرض كامل لسهولة اللمس */
  .comment-form button {
    width: 100%; 
  }

  .archive-header-section { padding: 2rem 0; }
  .archive-title { font-size: 2rem; }
  .page-next span { display: none; } /* إخفاء النص في الموبايل */
  
  /* إعلانات المقالات والسايدبار */
  .ad-header .ad-placeholder,
  .ad-sidebar .ad-placeholder,
  .ad-inline .ad-placeholder {
    width: 100% !important;
    max-width: 300px !important;
    height: 250px !important;
    margin: 0 auto;
  }
}

/* 3. الشاشات الصغيرة جداً (iPhone SE / Galaxy Fold) */
@media (max-width: 380px) {
  /* في الشاشات الضيقة جداً، نخفي كلمة Authority ونبقي CatCare فقط */
  .header-logo span {
    display: inline-block;
    max-width: 85px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
  
  .header-logo i { font-size: 1.2rem; }
  
  /* تصغير إضافي للأزرار */
  .action-btn { width: 30px; height: 30px; font-size: 1.1rem; }
}