/* ====================================================================
   ملف الأنماط الموحد لصفحات الأسئلة (القائمة + التفاصيل)
==================================================================== */

/* ═══════════ 1. المتغيرات والإعدادات الأساسية ═══════════ */
.questions-page,
.question-page {
  --qa-bg: #f9f8f6;
  --qa-surface: #f5f1e3;
  --qa-border: rgba(201, 160, 62, 0.12);
  --qa-text: #0a2647;
  --qa-muted: #3e3e3e;
  --qa-soft: rgba(201, 160, 62, 0.1);
  --qa-accent: #556b2f;
  --qa-accent-light: #6b8a3e;
  --qa-answer-bg: #faf9f6;
  --qa-answer-hover: #f5f0e4;
  --qa-shadow: 0 10px 28px rgba(10, 38, 71, 0.06);
  --qa-shadow-sm: 0 4px 14px rgba(10, 38, 71, 0.06);
  --qa-danger: #a63d40;
  --qa-gold: #c9a03e;

  max-width: 920px;
  margin-inline: auto;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 17px;
  line-height: 1.7;
  /* تحديث: معيار عالمي للقراءة على سطح المكتب */
  font-weight: 400;
  color: var(--qa-muted);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.35s ease, background-color 0.35s ease;
}

.questions-page *,
.questions-page *::before,
.questions-page *::after,
.question-page *,
.question-page *::before,
.question-page *::after {
  box-sizing: border-box;
}

.qa-shell {
  width: 100%;
  max-width: 100%;
}


/* ═══════════ 2. صندوق البحث وشريط إضافة سؤال ═══════════ */
.search-wrapper {
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border);
  border-radius: 1.25rem;
  box-shadow: var(--qa-shadow-sm);
  padding: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.fb-prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border);
  border-radius: 2rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  box-shadow: var(--qa-shadow-sm);
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.fb-prompt-bar:hover {
  box-shadow: var(--qa-shadow);
}

.fb-prompt-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.fb-prompt-avatar i {
  font-size: 2.4rem;
  color: var(--qa-accent);
  opacity: 0.8;
}

.fb-prompt-text {
  color: var(--qa-muted);
  font-weight: 500;
  opacity: 0.7;
  font-size: 1.05rem;
}

.fb-prompt-action {
  background: var(--qa-soft);
  color: var(--qa-accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.fb-prompt-bar:hover .fb-prompt-action {
  background: var(--qa-accent);
  color: #fff;
}


/* ═══════════ 3. بطاقة السؤال (Post Card) ═══════════ */
.qa-card {
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border) !important;
  border-radius: 1.25rem;
  box-shadow: var(--qa-shadow-sm);
  overflow: hidden;
  /* مهم لجعل الخلفية تأخذ شكل الحواف المنحنية */
  margin-bottom: 1.5rem;
  transition: box-shadow 0.3s ease;
}

.qa-card:hover {
  box-shadow: var(--qa-shadow);
}

.main-question-card {
  border-top: 4px solid var(--qa-accent) !important;
}

.qa-post-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem 0.75rem;
  background: var(--qa-surface);
  border-bottom: 1px solid var(--qa-border);
}

.qa-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--qa-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qa-accent);
  font-size: 1.8rem;
  flex-shrink: 0;
}

.qa-user-info {
  flex-grow: 1;
  min-width: 0;
}

/* توزيع عناصر رأس البطاقة */
.qa-user-name {
  font-weight: 700;
  color: var(--qa-text);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}

.qa-user-name>span:first-child {
  font-weight: 800;
  color: var(--qa-text);
}

.qa-user-name .qa-number {
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
}

.qa-user-name .badge {
  margin-inline-start: auto;
}

.qa-post-meta {
  font-size: 0.9rem;
  color: var(--qa-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.8;
}

.qa-number {
  background: var(--qa-soft);
  color: var(--qa-accent);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.qa-post-body {
  padding: 0.75rem 1.5rem 1.5rem;
}


/* ═══════════ 4. النصوص (العناوين والمحتوى) ═══════════ */
.question-title {
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 800;
  color: var(--qa-text);
  line-height: 1.4;
  /* تحديث: تباعد مريح للعناوين */
  margin-bottom: 1rem !important;
  /* تحديث: تقليل المسافة السفلية قليلاً */
  padding-bottom: 0.75rem;
  border-bottom: 2px dashed var(--qa-border);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.question-title a {
  color: inherit;
  text-decoration: none;
}

.question-title a:hover {
  color: var(--qa-accent);
}

.rich-text,
.question-body,
.answer-body {
  font-size: 1.05rem;
  /* تحديث: حجم أمثل للقراءة على الويب */
  line-height: 1.75;
  /* تحديث: تباعد أسطر عالمي ومريح */
  color: var(--qa-muted);
  overflow-wrap: anywhere;
  text-align: start;
}

.question-body p,
.answer-body p,
.rich-text p {
  margin-bottom: 1rem;
}

.question-body p:last-child,
.answer-body p:last-child,
.rich-text p:last-child {
  margin-bottom: 0;
}

.question-body ul,
.question-body ol,
.answer-body ul,
.answer-body ol {
  padding-inline-start: 1.5rem;
  margin-bottom: 1rem;
}

.question-body li,
.answer-body li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* تحديث */
.question-body strong,
.answer-body strong,
.rich-text strong {
  font-weight: 700;
  color: var(--qa-text);
}

.question-body em,
.answer-body em,
.rich-text em {
  font-style: italic;
}

.question-body img,
.question-body video,
.question-body iframe,
.answer-body img,
.answer-body video,
.answer-body iframe {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem;
}

.expandable-text {
  display: block;
  white-space: pre-wrap;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--qa-muted);
  /* تحديث */
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: normal;
  user-select: text;
  font-weight: 400;
}


/* ═══════════ 5. الإجراءات والأزرار (Actions Bar) ═══════════ */
.qa-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border);
  border-radius: 1rem;
  box-shadow: var(--qa-shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.qa-actions-bar::-webkit-scrollbar {
  display: none;
}

.qa-action-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  color: var(--qa-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
  min-height: 40px;
}

.qa-action-item:hover {
  background: var(--qa-soft);
  color: var(--qa-accent);
  text-decoration: none;
}

.qa-action-item:active {
  transform: scale(0.95);
}

.qa-action-item i {
  font-size: 1.05rem;
  line-height: 1;
}

/* أيقونات التعديل والحذف */
.mini-action {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  font-size: 0.9rem;
  color: var(--qa-muted);
  background: transparent;
  flex-shrink: 0;
}

.mini-action:active {
  transform: scale(0.92);
}

.mini-action:hover {
  background: var(--qa-soft);
}

.mini-action-edit:hover {
  color: var(--qa-accent);
}

.mini-action-delete:hover {
  color: var(--qa-danger);
}

/* أسفل البطاقة (Footer for List Page) */
.qa-post-footer {
  display: flex;
  border-top: 1px solid var(--qa-border);
  padding: 0.25rem 0;
}

.qa-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--qa-muted);
  cursor: pointer;
  flex-grow: 1;
  transition: background 0.2s;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
}

.qa-action-btn:hover {
  background: var(--qa-soft);
  color: var(--qa-accent);
  text-decoration: none;
}


/* ═══════════ 6. قسم الإجابات والردود ═══════════ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.section-title {
  color: var(--qa-text);
  font-weight: 800;
  font-size: 1.25rem;
}

.qa-reply-section {
  background: var(--qa-bg);
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--qa-border);
}

.qa-reply-card {
  display: block;
  margin-bottom: 1.25rem;
}

.answer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.answer-author {
  font-weight: 700;
  color: var(--qa-text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--qa-border);
}

/* تمييز إجابة المحامي عن المستخدم العادي */
.question-page .lawyer-answer,
.questions-page .answer-content {
  background: var(--qa-bg);
  border: 1px solid var(--qa-border);
  border-inline-start: 4px solid var(--qa-accent);
  border-radius: 0.5rem 1rem 1rem 0.5rem;
  padding: 1.25rem 1.5rem;
}

.question-page .lawyer-answer .answer-body {
  font-size: 1.08rem;
  /* تحديث: حجم محتوى المحامي */
  color: var(--qa-text);
  line-height: 1.8;
  /* تحديث */
  font-weight: 500;
}

.question-page .user-answer {
  background: #ffffff;
  border: 1px solid var(--qa-border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}

.question-page .user-answer .answer-body {
  font-size: 1rem;
  /* تحديث */
  color: var(--qa-muted);
  line-height: 1.75;
  /* تحديث */
  font-weight: 400;
}

/* نموذج الرد */
.dalala-link {
  font-weight: 800;
  color: var(--qa-accent);
  background: var(--qa-soft);
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  display: inline-block;
  direction: ltr;
  unicode-bidi: plaintext;
  white-space: nowrap;
}

textarea[name="body"],
#id_body {
  min-height: 160px;
  width: 100%;
  border-radius: 0.85rem;
  border: 1.5px solid var(--qa-border);
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: inherit;
  outline: none;
  /* تحديث */
  background: var(--qa-bg);
  color: var(--qa-muted);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea[name="body"]:focus,
#id_body:focus {
  border-color: var(--qa-accent);
  box-shadow: 0 0 0 4px rgba(85, 107, 47, 0.12);
}

.qa-submit-btn {
  min-height: 52px;
  border: 0;
  background: linear-gradient(135deg, var(--qa-accent), var(--qa-accent-light));
  box-shadow: 0 6px 16px rgba(85, 107, 47, 0.15);
  font-weight: 800;
  font-size: 1.1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.qa-submit-btn:active {
  transform: scale(0.97);
}


/* ═══════════ 7. أزرار التحكم السفلية (للقائمة) ═══════════ */
#load-more-container {
  margin-top: 3rem;
  margin-bottom: 5rem;
}

#load-more {
  min-height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--qa-accent);
  box-shadow: 0 10px 24px rgba(85, 107, 47, 0.18);
  font-weight: 800;
  font-size: 1.1rem;
  padding-inline: 2.5rem;
}

#no-more-questions .alert {
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border);
  border-radius: 1rem;
  color: var(--qa-muted);
}

.placeholder-glow {
  background: var(--qa-answer-bg) !important;
  border: 1px solid var(--qa-border);
  border-radius: 1.25rem;
  padding: 2rem !important;
  --bs-placeholder-bg: var(--qa-soft) !important;
}

.placeholder {
  opacity: 0.8 !important;
}


/* ═══════════ 8. الروابط الداخلية والمراجع ═══════════ */
.ref-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--qa-soft);
  color: var(--qa-accent);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  max-width: 100%;
  min-height: 42px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  margin: 0.2rem 0;
  vertical-align: middle;
}

.ref-link:hover {
  background: var(--qa-accent);
  color: #fff;
  text-decoration: none;
}

.ref-link:active {
  transform: scale(0.97);
}

.ref-link i {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

.ref-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.ref-broken {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  background: rgba(166, 61, 64, 0.06);
  color: var(--qa-danger);
  font-size: 0.95rem;
  opacity: 0.65;
}

.ref-media {
  display: block;
  max-width: 380px;
  margin: 0.85rem 0;
  text-decoration: none;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--qa-border);
  background: var(--qa-bg);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ref-media:hover {
  box-shadow: var(--qa-shadow);
  transform: translateY(-2px);
  text-decoration: none;
}

.ref-media:active {
  transform: scale(0.98);
}

.ref-media-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--qa-surface);
}

.ref-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.ref-media:hover .ref-media-thumb img {
  transform: scale(1.04);
}

.ref-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ref-media-play i {
  color: #fff;
  font-size: 1.4rem;
  margin-inline-start: 4px;
}

.ref-media-title {
  display: block;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--qa-muted);
  border-top: 1px solid var(--qa-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ═══════════ 9. تأثيرات الهولدر والتحميل ═══════════ */
.skeleton-card {
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border) !important;
  border-radius: 1.25rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.skeleton-card .skel-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem 0.75rem;
  background: var(--qa-surface);
}

.skeleton-card .skel-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-card .skel-body {
  padding: 1rem 1.5rem 1.5rem;
}

.skeleton-card .skel-reply {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--qa-border);
}

.skeleton-card .skel-footer {
  display: flex;
  border-top: 1px solid var(--qa-border);
  padding: 0.75rem 1rem;
  gap: 1rem;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qa-card.loaded-card {
  animation: cardFadeIn 0.5s ease-out forwards;
}


/* ====================================================================
   10. تجربة الهاتف (Mobile UX) - وضع مساحات مضغوطة جداً (Above the Fold)
==================================================================== */
@media (max-width: 767.98px) {

  /* 1. الحاوية العامة */
  .questions-page,
  .question-page {
    padding-inline: 0 !important;
    padding-top: 0 !important;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
    /* تحديث: معيار الهاتف المثالي للقراءة السريعة */
  }

  .questions-page .container.py-3 {
    padding-top: 0.5rem !important;
  }

  .questions-page h1.display-6 {
    font-size: 1.3rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* 2. ضغط شريط الإضافة (Composer) والبحث */
  .fb-prompt-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-radius: 12px !important;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem 1rem !important;
    box-shadow: var(--qa-shadow-sm);
  }

  .fb-prompt-text {
    font-size: 0.9rem !important;
  }

  .search-wrapper {
    border-radius: 12px !important;
    margin: 0 0 0.5rem 0;
    padding: 8px 1rem !important;
  }

  .gsc-search-button-v2 {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }

  /* 3. ضغط هوامش بطاقة السؤال ( qa-card ) */
  .qa-card,
  .qa-actions-bar {
    border-radius: 12px !important;
    /* حواف دائرية أنيقة */
    border: 1px solid var(--qa-border) !important;
    box-shadow: var(--qa-shadow-sm) !important;
    overflow: hidden;
    /* مهم جداً لجعل الخلفية تأخذ شكل الحواف */
  }

  .qa-card {
    margin-bottom: 0.75rem !important;
    /* تم إزالة الـ padding من هنا لكي تمتد خلفية الرأس بعرض الكارد بالكامل */
  }

  .qa-actions-bar {
    margin-bottom: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }

  .qa-action-item {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.5rem;
  }

  .qa-action-item i {
    font-size: 1.2rem;
  }

  /* ضبط رأس البطاقة ليكون ممتداً ومرتباً */
  .qa-post-header {
    padding: 0.75rem 1rem !important;
    background: var(--qa-surface) !important;
    margin-bottom: 0 !important;
  }

  .qa-post-body {
    padding: 0.75rem 1rem 1rem !important;
  }

  .qa-post-footer {
    padding: 0.25rem 1rem;
  }

  .qa-user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }

  .qa-user-name {
    font-size: 0.85rem !important;
  }

  /* 4. تصغير حجم خط السؤال والإجابة */
  .question-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    line-height: 1.4 !important;
  }

  /* تحديث: تكبير الخط قليلاً (0.95 بدلاً من 0.9) مع تقليل المسافة (1.6) لضمان قراءة مريحة واحتفاظه بالمساحة */
  .rich-text,
  .question-body,
  .answer-body,
  .expandable-text {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .question-body p,
  .answer-body p,
  .rich-text p {
    margin-bottom: 0.75rem !important;
  }

  /* 5. ضغط قسم الإجابات */
  .answers-section {
    margin-top: 0.75rem !important;
  }

  .section-head {
    margin-bottom: 0.5rem !important;
    padding-inline: 1rem;
  }

  .section-title {
    font-size: 1rem !important;
  }

  .qa-reply-section {
    padding: 1rem;
  }

  .qa-reply-card {
    margin-bottom: 0.5rem !important;
  }

  .question-page .lawyer-answer,
  .question-page .user-answer,
  .questions-page .answer-content {
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem 0.75rem 0.75rem 0.5rem !important;
  }

  .answer-author {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .answer-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }

  .answer-author-name {
    font-size: 0.85rem !important;
  }

  /* 6. ضغط أزرار التذييل (Footer) لسهولة اللمس */
  .qa-action-btn {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8rem !important;
    min-height: 36px;
  }

  .qa-action-btn span {
    display: none;
  }

  .qa-action-btn i {
    font-size: 1.25rem;
  }

  /* 7. تعديل نموذج الرد وجعل المربع ممتداً بالكامل على الهاتف */
  .qa-card.reply-card {
    margin-top: 0.75rem !important;
    padding: 0 !important; /* إزالة الحشو الداخلي للبطاقة */
    border-radius: 12px !important;
    overflow: hidden;
  }

  .qa-card.reply-card .qa-post-header {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0 !important;
  }

  .qa-card.reply-card .qa-post-body {
    padding: 0 !important; /* إزالة الحشو الداخلي للجسم */
  }

  /* الحاوية التي تضم مربع النص */
  .qa-card.reply-card .qa-post-body .mb-3 {
    padding: 1rem 1rem 0 1rem !important; 
    margin-bottom: 0 !important;
  }

  /* إجبار مربع النص على الامتداد بالكامل وزيادة ارتفاعه */
  .qa-card.reply-card textarea[name="body"],
  .qa-card.reply-card #id_body {
    width: 100% !important;
    min-height: 180px !important; /* ارتفاع أكبر ليكون مريحاً وممتداً */
    border-radius: 0.75rem !important;
  }

  /* زر الإرسال */
  .qa-card.reply-card .d-grid {
    padding: 1rem !important; 
  }

  /* أمثلة المراجع (في حال كان المستخدم محامياً) */
  .qa-card.reply-card .row.g-3 {
    padding: 0 1rem 1rem !important; 
    margin-top: 0 !important;
  }
  /* 8. الروابط والوسائط */
  .ref-link {
    display: flex;
    width: 100%;
  }

  .ref-media {
    max-width: 100%;
  }

  /* 9. الهولدر للموبايل */
  .skeleton-card {
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ================= تنسيق محرك البحث المخصص ================= */
.search-wrapper {
  padding: 12px;
  background: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(10, 38, 71, 0.05);
}

.gsc-control-cse {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.gsc-input-box {
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
}

.gsc-search-button-v2 {
  border-radius: 8px !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  padding: 10px 16px !important;
  height: 36px !important;
  min-width: 36px !important;
}

.gsc-search-button-v2:hover {
  background-color: #09203d !important;
  border-color: #09203d !important;
}

.gs-title,
.gs-snippet {
  font-family: inherit !important;
  line-height: 1.6 !important;
}

@media (max-width: 767.98px) {
  .search-wrapper {
    padding: 8px;
    border-radius: 12px;
    margin-top: 0.5rem !important;
  }

  .gsc-search-button-v2 {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}

/* ═══════════ تحديث نموذج الرد الاحترافي (Composer) ═══════════ */
.qa-card.reply-card {
  background: var(--qa-answer-bg);
  border: 1px solid var(--qa-border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.qa-card.reply-card .qa-post-header {
  background: var(--qa-surface);
  padding: 0.85rem 1.5rem;
}

.qa-card.reply-card .qa-post-body {
  padding: 0 !important; /* التحكم بالحشو يتم عبر العناصر الداخلية */
}

/* تحسين مربع الكتابة ليكون احترافياً */
.qa-card.reply-card textarea[name="body"],
.qa-card.reply-card #id_body {
  width: 100%;
  min-height: 180px; /* ارتفاع مريح للكتابة */
  background-color: #ffffff;
  border: 1.5px solid var(--qa-border);
  border-radius: 0.85rem;
  padding: 1.1rem 1.25rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--qa-text);
  font-family: inherit;
  resize: vertical; /* السماح للمستخدم بتكبير المربع عمودياً */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qa-card.reply-card textarea[name="body"]:focus,
.qa-card.reply-card #id_body:focus {
  border-color: var(--qa-accent);
  box-shadow: 0 0 0 4px rgba(85, 107, 47, 0.12);
  outline: none;
}

/* تذييل النموذج: يضع الزر في المنتصف أو اليمين حسب الحاجة */
.composer-footer {
  display: flex;
  justify-content: flex-end; /* محاذاة لليسار في RTL */
  align-items: center;
  padding-top: 0.5rem;
}

/* تحسين زر الإرسال */
.qa-submit-btn {
  min-height: 48px;
  width: auto;
  padding-inline: 2.5rem;
  border: 0;
  background: linear-gradient(135deg, var(--qa-accent), var(--qa-accent-light));
  box-shadow: 0 4px 12px rgba(85, 107, 47, 0.2);
  font-weight: 700;
  font-size: 1.05rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.qa-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(85, 107, 47, 0.3);
}

.qa-submit-btn:active {
  transform: translateY(0) scale(0.98);
}

/* تحسين قسم أمثلة المراجع للمحامي */
.lawyer-references-section {
  background: var(--qa-bg);
  border-top: 2px dashed var(--qa-border);
}

.lawyer-references-section .card {
  background: #ffffff;
  border: 1px solid var(--qa-border) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lawyer-references-section .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--qa-shadow-sm);
}

/* === تعديلات الهاتف (Mobile UX) === */
@media (max-width: 767.98px) {
  .qa-card.reply-card .qa-post-header {
    padding: 0.75rem 1rem;
  }

  .qa-card.reply-card form {
    padding: 1rem !important;
  }

  .qa-card.reply-card textarea[name="body"],
  .qa-card.reply-card #id_body {
    min-height: 160px;
    border-radius: 0.75rem;
  }

  /* جعل الزر ممتداً بالكامل على الهاتف */
  .composer-footer {
    justify-content: stretch;
  }

  .qa-submit-btn {
    width: 100%;
    min-height: 52px;
    font-size: 1.1rem;
  }

  .lawyer-references-section {
    padding: 1rem !important;
  }
  
  .lawyer-references-section .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
}