/*
Theme Name: Shafaq Clone
Theme URI: https://example.com
Author: Your Team
Description: قالب ووردبريس مطابق لتصميم شفق نيوز (نفس بنية الـ div والكلاسات الأصلية) لتسهيل التحكم بالهيدر والبلوكات الرئيسية.
Version: 1.0.0
Text Domain: shafaq-clone
*/

/* =========================================================
   ملاحظة: هذا الملف يحتوي على الـ CSS الأصلي مأخوذ من صفحة
   شفق نيوز كما هو تقريباً (مع دمج التكرارات) حتى يبقى الشكل
   مطابق 100%. لا تغيّر أسماء الكلاسات هنا لأن الـ PHP templates
   تعتمد عليها بالحرف.
   ========================================================= */

/* =========================================================
   الخطوط - الملف الأصلي (assets/css/tailwind.css) بيعرّف
   @font-face لـ DroidKufi / Roboto / Speda لكن بمسارات محلية
   (/fonts/...) مش موجودة عندنا. الحل: نعرّف نفس أسماء العائلات
   دي تاني هنا بروابط شغالة فعليًا، فقاعدة *[lang="ar"]{font-family:
   'DroidKufi'} الموجودة في الملف الأصلي تشتغل صح من غير ما نلمسه.
   ========================================================= */

/* DroidKufi الحقيقي (Droid Arabic Kufi) - مستضاف مجانًا Apache 2.0 */
@font-face {
    font-family: 'DroidKufi';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fontlibrary.org/assets/fonts/droid-arabic-kufi/6afbe2c8257159c2fefd1b43cd951ba3/a9b030e29a35f523a137ee0175be419f/DroidArabicKufiRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'DroidKufi';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fontlibrary.org/assets/fonts/droid-arabic-kufi/6afbe2c8257159c2fefd1b43cd951ba3/1b89eb34f74a02c0681727faadf48466/DroidArabicKufiBold.ttf') format('truetype');
}

/* Roboto (لاتيني/أرقام) - من Google Fonts بدل المسار المحلي المكسور */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ملاحظة: خط Speda (يُستخدم في روابط الكوردي) مسارُه في الملف الأصلي
   محلي (/fonts/Speda/*.ttf) ومش لاقيله مصدر مجاني مستضاف، فهيرجع
   تلقائيًا لـ sans-serif (fallback بتاعه في الملف نفسه: "Speda, sans-serif")
   لحد ما ترفع ملفاته في assets/fonts/Speda/ وتحدّث المسار. */

*, ::after, ::before { box-sizing: border-box; }

body{
    background-color:#F7F7F7;
}
html.dark body,
body.dark{
    background-color:#0F0F0F;
    color:#ABABAB;
}

a{ color:#007bff; text-decoration:none; background-color:transparent; }
a:hover{ color:#0056b3; text-decoration:underline; }
a{ text-decoration:none !important; color:inherit !important; }

img{ vertical-align:middle; border-style:none; }

h5{ margin:0 0 .5rem; font-weight:500; line-height:1.2; font-size:1.25rem; }
p{ margin:0; padding:0; }

/* -------- Bootstrap-like grid (مستخدم مع تصميم Tailwind) -------- */
.row{ display:flex; flex-wrap:wrap; margin-right:-15px; margin-left:-15px; }
.no-gutters > .col, .no-gutters > [class*="col-"]{ padding-right:0; padding-left:0; }

.col, .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.col-auto,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-auto,
.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,
.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,
.col-xl,.col-xl-3{
    position:relative; width:100%; padding-right:15px; padding-left:15px;
}
.col{ flex-basis:0; flex-grow:1; max-width:100%; }
.col-auto{ flex:0 0 auto; width:auto; max-width:100%; }
.col-1{flex:0 0 8.333333%;max-width:8.333333%}
.col-2{flex:0 0 16.666667%;max-width:16.666667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-5{flex:0 0 41.666667%;max-width:41.666667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333333%;max-width:58.333333%}
.col-8{flex:0 0 66.666667%;max-width:66.666667%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333333%;max-width:83.333333%}
.col-11{flex:0 0 91.666667%;max-width:91.666667%}
.col-12{flex:0 0 100%;max-width:100%}

@media (min-width:576px){
    .col-sm-6{flex:0 0 50%;max-width:50%}
    .col-sm-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:768px){
    .col-md-3{flex:0 0 25%;max-width:25%}
    .col-md-8{flex:0 0 66.666667%;max-width:66.666667%}
    .col-md-9{flex:0 0 75%;max-width:75%}
    .col-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:767px) and (max-width:992px){
    .col-md-8{flex:0 0 100%;max-width:100%}
}
@media (min-width:992px){
    .col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}
    .col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}
    .col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}
    .col-lg-10{flex:0 0 83.333333%;max-width:83.333333%}
    .col-lg-12{flex:0 0 100%;max-width:100%}
    .carousel-item img{ border-radius:1% !important; height:500px; box-shadow:0 5px 5px rgba(0,0,0,.21); transition:.25s linear; }
}
@media (min-width:1200px){ .col-xl-3{flex:0 0 25%;max-width:25%} }

/* -------- Carousel (البلوك العلوي: أخبار عاجلة + الهيدلاين) -------- */
.carousel{ position:relative; }
.carousel-inner{ position:relative; width:100%; overflow:hidden; }
.carousel-inner::after{ display:block; clear:both; content:""; }
.carousel-item{ position:relative; display:none; float:right; width:100%; backface-visibility:hidden; transition:transform .6s ease-in-out; padding:15px; cursor:grabbing; }
.carousel-item.active{ display:block; }
.carousel-item img{ border-radius:2%; box-shadow:0 5px 5px rgba(0,0,0,.21); transition:.25s linear !important; width:100%; }
.carousel-item img:hover{ transform:scale(1.02); }

.carousel-control-next,.carousel-control-prev{
    position:absolute; top:0; bottom:0; z-index:1; display:flex; align-items:center; justify-content:center;
    width:15%; color:#fff; text-align:center; opacity:.5; transition:opacity .15s ease;
}
.carousel-control-next:hover,.carousel-control-prev:hover{ color:#fff; opacity:.9; }
.carousel-control-prev{ left:0; margin:0 10px; }
.carousel-control-next{ right:0; margin:0; }
/* تعديل خاص بشريط "الأخبار العاجلة" (magicCarousel): عرض ضيق (2%) ولون أحمر
   بدل الأبيض الافتراضي، لأن خلفية الشريط بيضاء والسهم الأبيض كان بيختفي. */
#magicCarousel .carousel-control-prev,
#magicCarousel .carousel-control-next{ width:2%; color:#bc000c !important; opacity:1; }

.carousel-indicators{
    position:absolute; right:0; bottom:0; left:0; z-index:15; display:flex; justify-content:flex-end;
    padding-right:0; margin:0 15%; list-style:none;
}
.carousel-indicators li{
    width:24px; height:5px; margin:2px; text-indent:-999px; cursor:pointer;
    background-color:rgba(0,0,0,0); border:1px solid #bc000c; border-radius:10px;
    position:relative; top:-30px;
}
.carousel-indicators li.active{ background:#bc000c; }

.breaking-news{
    position:absolute; right:0; background-color:#bc000c !important; color:#FFF !important; padding:13px; z-index:2 !important;
}
.category-breaking-news{
    position:absolute; background-color:#bc000c; padding:5px; left:30px; top:30px; border-radius:2px; font-weight:bold; color:#FFF;
}
.carousel-title{ }
.carousel-item .carousel-title:hover{ color:#bc000c; }
.icon-lef-right a i:hover{ background-color:#bc000c; color:#FFF !important; }

/* -------- آخر الأخبار (السايدبار) -------- */
.scroll{ overflow-y:scroll; width:100%; background-color:#fff; }
.scroll::-webkit-scrollbar{ width:7px; }
.scroll::-webkit-scrollbar-track{ box-shadow:inset 0 0 6px rgba(0,0,0,.3); border-radius:5px; }
.scroll::-webkit-scrollbar-thumb{ border-radius:5px; box-shadow:inset 0 0 6px #929090 !important; }

.last-news .article-item .card-block{ color:#263238; }
.last-news .article-item:hover .card-block{ color:#990500; }
.last-news .card-title{ font-size:.9rem; }
.last-news.dark-segment .article-item .card-block{ color:#fff; }
.last-news.dark-segment .article-item:hover .card-block{ color:#ff5c57; }
.last-news.dark-segment .card-block:hover{ color:#eb1a1c !important; }
@media (min-width:992px){ .last-news.dark-segment .card-title{ height:40px; line-height:1.2; overflow:hidden; } }

.article-item{ cursor:pointer; flex-wrap:nowrap !important; }
.article-item:hover .article-image{ filter:contrast(1.2); }
.article-image{ border-radius:4px; }
.article-image-first{ }
.first-Image-latest-news{ }

/* -------- كروت أقسام الموقع (سياسة/اقتصاد/أمن ...) -------- */
.card-title{ margin-bottom:.75rem; }
.border-bottom{ border-bottom:1px solid #dee2e6 !important; }
.faily-image-cover{ max-height:350px; object-fit:contain; }
.sub-post-img{ }
@media (min-width:768px){ .sub-post-img{ height:85px; object-fit:cover; } }
.header-title.simple{ font-weight:bold; }
.header-title.simple.theme-red{ color:#d43333; font-weight:bold; }
.video-articles{ background-color:#263238; }
.writer-img{ }

/* -------- زر فيسبوك الجانبي -------- */
.w2bslikebox{ display:block; float:left; height:270px; padding:0 5px 0 46px; width:245px; z-index:99999; position:fixed; top:calc(50% - 129px); }
.w2bslikebox div{ border:none; position:relative; display:block; }
.ronnie-style-facebook-iframe{ transform:rotate(270deg); line-height:1rem; font-size:2rem; font-weight:500; left:-58px; top:calc(50% - 69px); border-radius:0 0 10px 10px; }

/* -------- صفحة عرض الخبر (single.php) -------- */
#newsDetails { text-align: justify !important; }
#newsDetails p { margin-bottom: 1rem; }
#newsDetails img { max-width: 100%; height: auto; border-radius: 4px; }
#newsDetails a { color: #00f !important; text-decoration: underline !important; }
html.dark #newsDetails a { color: #bbdcff !important; }

.shafaq-reading-mode {
    line-height: 2.2 !important;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: .2px;
}

#articleTag a { display: inline-block; border-radius: 3px; }
#shareDiv.hidden, #fontList.hidden { display: none !important; }
#shareDiv.flex { display: flex !important; }
#fontList.flex { display: flex !important; }
#fontBtn, #shareBtn { cursor: pointer; }
.important-news:lang(ar), .important-news:lang(ku){
    position:absolute; width:37px; height:30px; background-color:#bc000c; color:#FFF; font-size:15px;
    border-bottom-left-radius:7px; padding:3px 2px 0 0;
}
.important-news:lang(en){
    position:absolute; width:37px; height:30px; background-color:#bc000c; color:#FFF; font-size:15px;
    border-bottom-right-radius:7px; padding:3px 0 0 7px;
}
.pointer{ cursor:pointer; font-size:15px; }
.mx-auto{ margin-right:auto !important; }
.w-100{ width:100% !important; }
.w-4\/12{ width:3.333333333333333%; }
.basis-1\/5{ flex-basis:25% !important; }
.footer_ad_section{ margin:15px; align-self:center; }
iframe{ width:100% !important; }
figure footer{ display:none; }

/* -------- خدمة RSS المودال -------- */
.style-rss-categories-rtl{ display:block; margin-bottom:10px; text-align:right; direction:rtl; font-size:20px; font-weight:400; }
.style-rss-categories-ltr{ display:block; margin-bottom:10px; text-align:left; direction:ltr; font-size:20px; font-weight:400; }
.btn-close-rss{ background-color:#007bff; padding:7px; border-radius:5px; color:#FFF !important; position:relative; top:18px; }

/* -------- تجاوب الموبايل / التابلت -------- */
@media only screen and (min-width:320px) and (max-width:480px){
    .swiper{ padding-bottom:20px !important; }
    .breaking-news{ width:65px; font-size:14px; top:-8px; }
    .carousel-item span.carousel-title{ white-space:pre-line !important; }
    .carousel-item a p{ position:relative; right:18% !important; font-size:12px !important; text-overflow:ellipsis; white-space:nowrap; left:36% !important; }
    .carousel-item a span{ position:relative; right:0 !important; font-size:16px !important; width:100% !important; top:15px !important; }
    .carousel-item a img{ height:200px !important; }
    .carousel-title{ font-size:13px !important; left:0 !important; }
    .carousel-control-prev,.carousel-control-next,.icon-lef-right{ display:none !important; }
    .carousel-indicators{ margin-left:0 !important; position:absolute !important; top:124% !important; display:flex; justify-content:center; align-items:center; right:12% !important; }
    .section-left-side{ margin:24px 0 !important; }
    .mobile-title-breaking-news{ position:relative; left:30% !important; }
    .last-news{ height:auto !important; overflow-y:hidden !important; }
    .first-Image-latest-news{ display:block !important; }
    .last-news .card-title{ font-size:.8rem !important; }
    .article-image{ min-width:144px !important; height:90px !important; object-fit:cover !important; }
    .article-image-first{ min-width:144px !important; height:150px !important; object-fit:cover !important; }
    .fix-title-ltr{ padding-right:8px !important; }
    .fix-title-rtl{ padding-left:8px !important; }
    .fix-first-title{ margin-top:10px !important; }
    .faily-image-cover{ height:350px !important; object-fit:contain !important; }
}
@media only screen and (min-width:481px) and (max-width:991px){
    .breaking-news{ width:65px; font-size:15px; top:-8px; }
    .carousel-control-prev,.carousel-control-next,.icon-lef-right{ display:none !important; }
    .carousel-indicators{ margin-left:0 !important; position:absolute !important; top:114% !important; display:flex; justify-content:center; align-items:center; }
    .section-left-side{ margin:24px 0 !important; }
}
@media only screen and (min-width:992px) and (max-width:1200px){
    .breaking-news{ width:65px; font-size:15px; top:-8px; }
    .carousel-control-prev,.carousel-control-next{ display:block; top:15px; }
    .carousel-indicators{ position:absolute !important; top:103% !important; display:flex; justify-content:center; align-items:center; }
    .section-left-side{ margin:24px 0 !important; }
}
@media (min-width:601px){ .mobile-device{ display:none !important; } .desktop-device{ display:block !important; } }
@media (min-width:320px) and (max-width:600px){
    .mobile-device{ display:block !important; }
    .desktop-device{ display:none !important; }
    .last-news{ height:auto !important; overflow-y:hidden !important; }
    .first-Image-latest-news{ display:block !important; }
    .last-news .card-title{ font-size:.8rem !important; }
    .article-image{ min-width:144px !important; }
    .fix-title-ltr{ padding-right:8px !important; }
    .fix-title-rtl{ padding-left:8px !important; }
    .fix-first-title{ margin-top:10px !important; }
    .border-bottom .margin-bottem-card{ margin:15px auto !important; }
    .section-left-side{ display:block; margin:20px 0 80px 0 !important; }
}
@media only screen and (min-width:1280px) and (max-width:2000px){
    .images-shafaq-app{ display:block !important; }
    .section-footer-rtl{ margin-right:70px !important; }
    .section-footer-ltr{ margin-left:70px !important; }
}
@media only screen and (min-width:320px) and (max-width:1024px){
    .arcella,.copy-right{ margin:5px auto !important; }
    .term-conditions{ margin-left:auto !important; margin-right:auto !important; }
}
@media only screen and (min-width:1278px){ .no-wrap-section{ overflow:hidden !important; white-space:nowrap !important; } }

/* -------- ذيل الصفحة -------- */
footer .list-group-item{ background-color:transparent !important; border:0 !important; padding-left:0 !important; padding-right:0 !important; color:#B0BEC5 !important; }
footer .list-group-item:hover{ color:#FF0800 !important; }
li a.hover-link:hover{ color:#FFF !important; }

/* -------- زر كأس العالم (اختياري) -------- */
.world-cup-link{
    position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border-radius:999px;
    background:#fff; color:#a91e23 !important; font-weight:700 !important; text-decoration:none; transition:all .3s ease;
    box-shadow:0 6px 18px rgb(169 30 35);
}
.world-cup-link:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(107,33,168,.5); }
.world-cup-link::after{ content:"🏆"; animation:trophy-bounce 2s infinite; }
@keyframes trophy-bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

/* -------- Gap-fill: كلاسات مش موجودة في build الـ tailwind.css المرفوع
   (الملف مُصفّى حسب صفحات معينة، وناقص كام كلاس مستخدم في قسم "مقالات الرأي") -------- */
.aspect-\[3\/4\]{ aspect-ratio: 3 / 4; }
.min-h-\[8rem\]{ min-height: 8rem; }
.w-3\/12{ width: 25%; }
.basis-8\/12{ flex-basis: 66.666667%; }
@media (min-width: 768px){
    .md\:w-1\/3{ width: 33.333333%; }
    .md\:min-h-0{ min-height: 0; }
}
@media (min-width: 1024px){
    .lg\:w-1\/4{ width: 25%; }
    .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:gap-10{ gap: 2.5rem; }
}

/* -------- Gap-fill: كلاسات مسافات (margin/padding) ناقصة من الملفين
   (سبب مشكلة تنسيق قسم فيلي وأي مكان تاني بيستخدمها) -------- */
.position-relative{ position: relative !important; }
.m-0{ margin: 0 !important; }
.m-3{ margin: .75rem !important; }
.mt-2{ margin-top: .5rem !important; }
.mt-3, .my-3{ margin-top: .75rem !important; }
.mt-4{ margin-top: 1rem !important; }
.mt-5{ margin-top: 1.25rem !important; }
.mb-3, .my-3{ margin-bottom: .75rem !important; }
.mb-4{ margin-bottom: 1rem !important; }
.my-5{ margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.p-1{ padding: .25rem !important; }
.p-2{ padding: .5rem !important; }
.p-4{ padding: 1rem !important; }
.pt-5{ padding-top: 1.25rem !important; }
.pt-7{ padding-top: 1.75rem !important; }
.pb-3{ padding-bottom: .75rem !important; }
.pb-5{ padding-bottom: 1.25rem !important; }
.pb-10{ padding-bottom: 2.5rem !important; }
.px-0{ padding-right: 0 !important; padding-left: 0 !important; }
.px-1{ padding-right: .25rem !important; padding-left: .25rem !important; }
.px-2{ padding-right: .5rem !important; padding-left: .5rem !important; }
.px-3{ padding-right: .75rem !important; padding-left: .75rem !important; }
.px-4{ padding-right: 1rem !important; padding-left: 1rem !important; }
.px-5{ padding-right: 1.25rem !important; padding-left: 1.25rem !important; }
.px-6{ padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-7{ padding-right: 1.75rem !important; padding-left: 1.75rem !important; }
.px-10{ padding-right: 2.5rem !important; padding-left: 2.5rem !important; }
.py-0{ padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1{ padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2{ padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4{ padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5{ padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }