/* ============================================================
   شكل موحّد لبطاقات الموقع كله، بلا ظلال

   كانت كل صفحة (بل كل كتلة) بزاوية وظل مختلفين: 6/7/8/9/10/12/14/16/18/20/25/30
   وظلال على تبويبات الهدافين والملخص وبطاقات الأخبار والانتقالات واللاعب، وأخرى في
   الداكن دون الفاتح. صارت كلها على نمط عمود المباريات: خلفية البطاقة وحدٌّ رفيع،
   بلا ظل، في الوضعين. السلّم:

     بطاقة/قسم قائم بذاته على خلفية الصفحة            14px  حد رفيع، بلا ظل
     عنصر قائمة، زر، شريط تبويبات، حقل                 10px  بلا ظل
     جزء صغير داخل عنصر (التبويب المختار، صندوق النتيجة، صورة مصغّرة)   8px
     الحبوب المستديرة (999px) والصور الدائرية (50%) تبقى كما هي: شكلها مقصود.

   لا يُمس ما يطفو فوق الصفحة (القوائم المنسدلة، النوافذ المنبثقة، رسائل التنبيه،
   التلميحات): ظلها يفصلها عمّا تحتها. ولا الحلقات التي تُرسم بالظل لتركيز لوحة
   المفاتيح ومفاتيح التبديل.

   الملف آخر الأنماط تحميلاً (layout/header)، فيعلو style.css و light.css و
   responsive.css و match-header-desktop.css وبقية الملفات التي تكرّرت فيها القواعد.
   الأساس داكن، و html.light للفاتح كبقية الموقع.
   ============================================================ */
:root {
  --ui-card: #151825;
  --ui-inset: #11131e;
  --ui-line: #1e2235;
  --ui-head: rgba(255, 255, 255, 0.03);
  --ui-r-card: 14px;
  --ui-r-item: 10px;
  --ui-r-small: 8px;
}

html.light {
  --ui-card: #ffffff;
  --ui-inset: #f8f9fc;
  --ui-line: #e6eaf3;
  --ui-head: #eef1f7;
}

/* ============================================================
   ١. البطاقات والأقسام
   ============================================================ */

/* بطاقات بخلفية البطاقة نفسها */
.championship-wrap,
.home-news.team-page-news,
#match_list_conf.col-lg-5,
.news-details-wrap .news-page__article,
.news-detail-page-root .news-page__comments,
.news-related,
.news-sections,
.transfer-filters-card,
.stats-block-wrap,
.p-r-s-position-block,
.p-r-s-radar-block,
.p-r-s-team-card,
.p-r-s-monthly-card,
.p-r-s-matches-wrapper,
.lineup-intro,
.faq-list,
.related-links-block > ul,
.lineup-featured-image,
.match-detail-content :is(
  .match-quick-link,
  .match-events-wrap,
  .teams-stats-wrap,
  .match-stats-block,
  .prediction-poll-card,
  .match-teams-rank,
  .teams-last-matches,
  .team-form-card,
  .news-comments-wrapper
),
:is(.match-detail-content, .champ-tab-item) .match-info-collapse {
  background-color: var(--ui-card) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-card) !important;
  box-shadow: none !important;
}

/* بطاقات تحتفظ بخلفيتها (صورة الخبر، صندوق التطبيق) */
.news-page__hero,
.download-app-wrapper {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-card) !important;
  box-shadow: none !important;
}

/* رؤوس الصفحات على الكمبيوتر (على الجوال تمتد بعرض الشاشة) */
@media (min-width: 768px) {
  .profile-header-wrapper,
  .page-breadcrumb .breadcrumb-wrap {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-r-card) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .profile-header-wrapper,
  .page-breadcrumb .breadcrumb-wrap {
    box-shadow: none !important;
  }
}

/* ============================================================
   ٢. العناصر والأزرار والحقول
   ============================================================ */
.news-item,
.big-news-card,
.ajax-match-item.inline-match-item,
.matches-wrapper > .header,
.transform-item,
.transform-history-item,
.pn-card,
.general-stats-item,
.penalties-stats,
.penalty-info-item,
.total-goals,
.player-info-item,
.p-r-s-match-row,
.p-r-s-stat-box,
.p-r-s-league,
.tab-filter-item,
.price-wrap,
.rank-key,
.rank-keys-items,
.show-more-matches,
.view-all-button,
.transfer-load-more-btn,
.transfer-filter-pill,
.download-app-btn,
.season-dropdown-btn,
.inline-date-filter {
  border-radius: var(--ui-r-item) !important;
  box-shadow: none !important;
}

/* عناصر قائمة قائمة بذاتها على خلفية الصفحة في تفاصيل المباراة: خلفية البطاقة وحدّها.
   صفوف جدول القنوات والمعلقين ليست منها (القسم ٧). و‎#news_list_more‎ في قاعدة وحده:
   داخل :is() كان يرفع قوة القاعدة كلها فتغلب تصميم صفوف ذلك الجدول. */
.match-detail-content :is(.match-info-item, .inline-player-item, .news-item):not(.match-info-collapse *),
.match-detail-content #news_list_more {
  background-color: var(--ui-card) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-item) !important;
  box-shadow: none !important;
}

/* عنصر داخل بطاقة: خلفية أغمق قليلاً بلا حد (لا حدود داخل حدود)،
   التعليقات وحقل الكتابة وزر المزيد في ركن الجماهير وفي تعليقات الخبر */
:is(.match-detail-content .news-comments-wrapper, .news-detail-page-root .news-page__comments) :is(.comment-item, textarea, .news-page__more-btn) {
  background-color: var(--ui-inset) !important;
  border: 0 !important;
  border-radius: var(--ui-r-item) !important;
  box-shadow: none !important;
}

/* حقل الكتابة بلا حد يحتاج في الفاتح خلفية أوضح من التعليقات حتى يُعرف أنه حقل */
html.light :is(.match-detail-content .news-comments-wrapper, .news-detail-page-root .news-page__comments) textarea {
  background-color: var(--ui-head) !important;
}

/* خطوط الفصل داخل بطاقة المواجهات بلون الحد نفسه */
.match-detail-content .full-m-item {
  border-color: var(--ui-line) !important;
}

/* ============================================================
   ٣. أشرطة التبويبات (الهدافون/صناع الأهداف، الأبرز/الكل، الفريقان...)
   تبويبات مراحل الترتيب (.rank-stages-flow) حبوب شفافة بتصميمها، فتُستثنى.
   ============================================================ */
.inline-tabs-items:not(.rank-stages-flow .inline-tabs-items):not(#stages_target) {
  background-color: var(--ui-card) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-item) !important;
  box-shadow: none !important;
}

.inline-tabs-items:not(.rank-stages-flow .inline-tabs-items):not(#stages_target) .inline-tab-item {
  border-radius: var(--ui-r-small) !important;
  box-shadow: none !important;
}

/* غلاف الشريط كان يزيحه 4px عن حافتي المحتوى تحته */
.tab-area > .inline-tabs-wrapper {
  padding-inline: 0 !important;
}

/* ============================================================
   ٤. أجزاء صغيرة: صندوق النتيجة والصور المصغّرة
   ============================================================ */
.result-wrap,
.news-img,
.player-img,
.pn-thumb {
  border-radius: var(--ui-r-small) !important;
}

/* ============================================================
   ٥. ظلال أخرى بلا داعٍ (الأشكال باقية)
   ============================================================ */
.mm-league-chip,
.p-r-s-rating-inner,
.lineup-wrap .img,
.transform-item .img,
.transfer-page .img {
  box-shadow: none !important;
}

/* ============================================================
   ٦. الجوال: بطاقات تفاصيل المباراة بالهامش نفسه
   (بعضها كان ممتداً حتى حافة الشاشة بزوايا مدوّرة)
   ============================================================ */
@media (max-width: 767px) {
  /* الملخص (match-quick-link) يأخذ الهامش من غلافه أصلاً.
     بعضها عرضه 100% (الترتيب وعناصر التشكيلة)، فكان الهامش يدفعه 10px خارج
     يسار الشاشة؛ الحد الأقصى يُبقيه داخلها. */
  .match-detail-content :is(
    .match-events-wrap,
    .teams-stats-wrap,
    .match-stats-block,
    .prediction-poll-card,
    .match-teams-rank,
    .teams-last-matches,
    .team-form-card,
    .match-info-collapse,
    .news-comments-wrapper,
    .match-info-item,
    .inline-player-item,
    .news-item,
    .inline-tabs-items
  ):not(.match-info-collapse *),
  .match-detail-content #news_list_more {
    box-sizing: border-box !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: 10px !important;
  }
}

/* ============================================================
   ٧. جداول داخل بطاقة (القنوات والمعلقون، والترتيب في تفاصيل المباراة):
   جدول واحد بلا إطارات داخلية. شريط عناوين بعرض البطاقة، ثم صفوف بلا خلفية
   ولا زوايا بينها خط رفيع. صفوف القنوات مصمّمة هكذا في match-info-block.css،
   والترتيب صار مثلها (كانت صفوفه في الداكن مربعات منفصلة داخل البطاقة).
   ============================================================ */
.match-detail-content .match-teams-rank {
  padding: 0 !important;
  overflow: hidden !important;
}

.match-detail-content .match-teams-rank .rank-row {
  margin: 0 !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important;
}

.match-detail-content .match-teams-rank .rank-row:last-child {
  border-bottom: 0 !important;
}

/* شريط العناوين بلون شريط جدول القنوات وارتفاعه */
.match-detail-content .match-teams-rank .rank-row.header {
  min-height: 40px;
  background: var(--ui-head) !important;
}

/* على الجوال يبقى عمود النقاط وحده (يُخفى فاز/تعادل/خسر) بعرض 14%، وهو أضيق من
   "النقاط" و Points و Puntos على الشاشات الضيقة فتتداخل الكلمة مع ف.أ. العرض نفسه
   للعناوين والصفوف حتى تبقى الأرقام تحت عنوانها. */
@media (max-width: 767px) {
  /* مسافة أصغر للأعمدة الضيقة، بقدر هامش البطاقة */
  .match-detail-content .match-teams-rank .rank-row {
    padding: 0 10px !important;
  }

  .match-detail-content .match-teams-rank .rank-group.results {
    width: max(14%, 46px) !important;
  }

  .match-detail-content .match-teams-rank .rank-group.results .rank-col {
    margin: 0 !important;
  }
}

/* ============================================================
   ٨. قائمة خيارات التعليق (•••): كانت تتوسّط زرها الملاصق لحافة التعليق،
   فيخرج جزء منها خارج الشاشة على الجوال (ويُقصّ داخل لوحة الرئيسية).
   تنفتح الآن من جهة الزر نحو داخل التعليق، في العربية واللغات الأخرى.
   ============================================================ */
.comments-dropdown {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  transform: none !important;
}