/*
Theme Name: nraji3
Theme URI: https://example.com
Author: Mostafa
Description: قالب ووردبريس عربي احترافي لمواقع المناهج والكتب المدرسية، بتصميم شبكة صفوف دراسية بصرية حديثة، محسن بالكامل للسرعة ومقاييس Core Web Vitals وتصفح الذكاء الاصطناعي.
Version: 1.2.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: kotoby
*/

:root{
  --ink:#006c35;         /* أخضر سعودي رسمي */
  --ink-2:#004d26;
  --paper:#f8f9fa;       /* خلفية الصفحة النظيفة */
  --card-bg:#ffffff;
  --card-border:#e5e7eb;
  --gold:#b88228;
  --text:#212529;
  --muted:#575a5e;
  --link-color:#006c35;
  --tg:#0077a8;
  --wa:#1b7c47;
  --tw:#000000;
  --fb:#233a72;
  --radius:16px;
  --shadow:0 4px 15px rgba(0,0,0,0.06);
}

html[data-theme="dark"]{
  --ink:#0e8a48;
  --ink-2:#0b6e39;
  --paper:#0f1512;
  --card-bg:#1a211d;
  --card-border:#2c352f;
  --gold:#d2a24c;
  --text:#eef1ef;
  --muted:#a7afaa;
  --link-color:#3fcf82;
  --shadow:0 4px 15px rgba(0,0,0,0.35);
}

html[data-theme="dark"] body{
  background:var(--paper);
  color:var(--text);
}

html[data-theme="dark"] img{
  filter:brightness(.92);
}

html,body{
  transition:background-color .2s ease, color .2s ease;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

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

/* ===== حجز مساحة أيقونات Font Awesome قبل تحميل ملف الأيقونات =====
   ملف Font Awesome نفسه لا يتم تعديله. هذه القواعد فقط تحجز نفس مساحة
   الأيقونة من البداية حتى لا يتغير عرض أزرار المشاركة/الأزرار عند وصول الخط. */
.fa,.fas,.fa-solid,.far,.fa-regular,.fab,.fa-brands{
  display:inline-block;
  width:1em;
  min-width:1em;
  height:1em;
  line-height:1;
  flex:0 0 1em;
  vertical-align:middle;
}

a{
  color:var(--link-color);
  text-decoration:none;
  transition:color .15s ease;
}

/* إمكانية الوصول: تمييز الروابط النصية بالتسطير */
article a,
main a:not(.edu-grid-card):not(.section-badge),
.entry-content a,
.site-footer a,
.widget a,
p a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}

article a:hover,
main a:not(.edu-grid-card):not(.section-badge):hover,
.entry-content a:hover,
p a:hover{
  color:#0b8f4d;
}

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

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== الهيدر والتنقل ===== */
.site-topbar{
  background:var(--ink-2);
  height:5px;
}

.site-nav{
  background:var(--ink);
  color:#fff;
}

.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.site-nav .primary-menu{
  display:flex;
  flex-wrap:wrap;
}

.site-nav .primary-menu li + li{
  border-inline-start:1px solid rgba(255,255,255,.15);
}

.site-nav .primary-menu a{
  display:block;
  padding:16px 18px;
  font-weight:700;
  font-size:15px;
  color:#f2f7f5;
  text-decoration:none !important;
  transition:background .15s ease, color .15s ease;
}

.site-nav .primary-menu a:hover,
.site-nav .primary-menu .current-menu-item > a{
  background:rgba(255,255,255,.14);
  color:#ffd782;
}

.site-nav .menu-toggle{
  display:none;
  background:none;
  border:0;
  color:#fff;
  font-size:24px;
  padding:14px 18px;
  cursor:pointer;
  min-width:48px;
  min-height:48px;
}

.dark-mode-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  margin-inline-start:auto;
  transition:background .15s ease;
}

.dark-mode-toggle:hover{
  background:rgba(255,255,255,.22);
}

.dark-mode-toggle .icon-sun{display:none;}
.dark-mode-toggle .icon-moon{display:block;}

html[data-theme="dark"] .dark-mode-toggle .icon-sun{display:block;}
html[data-theme="dark"] .dark-mode-toggle .icon-moon{display:none;}

/* ===== شعار الموقع المحمي من التمدد (حل CLS) ===== */
.site-brand{
  text-align:center;
  padding:24px 20px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.site-brand .custom-logo-link{
  display:inline-block;
  max-width:300px;
  width:100%;
  max-height:90px;
  margin:0 auto;
  text-decoration:none !important;
  overflow:hidden;
}

.site-brand .custom-logo,
.site-brand .custom-logo-link img{
  margin:0 auto;
  max-width:100%;
  max-height:85px;
  width:auto;
  height:auto;
  object-fit:contain;
  aspect-ratio:300 / 85;
  display:block;
}

.site-brand .logo-text{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:32px;
  font-weight:900;
  color:var(--ink);
  text-decoration:none !important;
}

.site-brand .logo-text span{color:#0b8f4d;}

.site-brand .tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
}

/* ===== شريط المشاركة ===== */
.share-bar{
  max-width:920px;
  margin:0 auto 28px;
  padding:18px 24px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
}

.share-bar p{
  margin:0 0 14px;
  font-weight:800;
  color:var(--ink);
  font-size:16px;
}

.share-bar .share-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.share-bar .share-links a{
  padding:11px 22px;
  border-radius:9px;
  color:#ffffff !important;
  font-weight:800;
  font-size:14px;
  text-decoration:none !important;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .15s ease, filter .15s ease;
}

.share-bar .tg{background:var(--tg);}
.share-bar .wa{background:var(--wa);}
.share-bar .tw{background:var(--tw);}
.share-bar .fb{background:var(--fb);}
.share-bar .share-links a i{
  font-size:15px;
  line-height:1;
}

/* تحسين تباين أيقونات المشاركة SVG (بما فيها Telegram و X)
   في حال قام Font Awesome أو إضافة أخرى بتحويل <i> إلى <svg>. */
.share-bar .share-links a svg,
.share-bar .share-links a svg *,
.single-share-bar .share-links a svg,
.single-share-bar .share-links a svg *{
  color:#ffffff !important;
  fill:#ffffff !important;
  stroke:#ffffff !important;
  opacity:1 !important;
}

/* الحفاظ على تباين قوي للأزرار نفسها في اختبارات الوصول WCAG. */
.share-bar .share-links .tg,
.single-share-bar .share-links .tg{
  background:#006b95 !important;
  color:#ffffff !important;
}
.share-bar .share-links .tw,
.single-share-bar .share-links .tw{
  background:#000000 !important;
  color:#ffffff !important;
}

.share-bar a:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
}

/* =========================================
   صندوق الفلتر - اللون الأخضر السعودي
========================================= */
.edu-filter-box {
  width: 100%;
  margin: 0 auto 25px;
  padding: 34px 20px;
  background: linear-gradient(135deg, #006c35 0%, #0b8f4d 100%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,108,53,0.18);
}

.edu-filter-box::before,
.edu-filter-box::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 20px solid rgba(255,255,255,0.09);
  pointer-events: none;
}

.edu-filter-box::before {
  top: -65px;
  right: -55px;
}

.edu-filter-box::after {
  bottom: -70px;
  left: -55px;
}

.edu-filter-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  color: #fff;
}

.edu-filter-icon {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.edu-filter-header h2 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}

.edu-filter-header p {
  color: rgba(255,255,255,0.95) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* =========================================
   نموذج الفلتر: عناصر select + label + زر البحث
   (تنسيق يمنع الـ Layout Shift ويثبّت الأبعاد)
========================================= */
.edu-filter-form{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.edu-select{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  width: 100%;
  padding-inline-start: 10px;
  padding-inline-end: 8px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.edu-select-icon{
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.edu-select select{
  flex: 1;
  min-width: 0; /* يسمح للـ ellipsis يشتغل جوه flex بدل ما يكسر عرض الصندوق */
  height: 50px;
  width: 100%;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575a5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat left 0 center/10px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  direction: rtl;
  text-align: right;
  padding: 0 2px 0 12px; /* شمال: مساحة صغيرة للسهم، يمين: النص لصق الحافة */
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; /* بدونها فايرفوكس بيحتفظ بالسهم الأصلي ومساحة داخلية زيادة بتاكل من مساحة النص */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edu-select select:disabled{
  cursor: not-allowed;
  opacity: .5;
}

/* label مرتبط بكل select لقارئ الشاشة (يحل مشكلة "عناصر select بلا label") */
.edu-select-label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* يخفي فعليًا العناصر المخصصة للمسارات الشرطية (كان مفقودًا تمامًا) */
.is-hidden{
  display: none !important;
}

.edu-filter-button{
  grid-column: 1 / -1;
  justify-self: center;
  height: 52px;
  padding: 0 32px;
  background: var(--gold);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter .15s ease, transform .15s ease;
}

.edu-filter-button:disabled{
  opacity: .5;
  cursor: not-allowed;
}

.edu-filter-button:not(:disabled):hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* مساحة محجوزة لرسالة النتيجة عشان مانعملش CLS لما تظهر */
#edu-filter-message{
  min-height: 24px;
  margin-top: 10px;
  text-align: center;
}

/* ===== صندوق إخلاء المسؤولية ===== */
.edu-disclaimer{
  max-width: 920px;
  margin: 18px auto 0;
  padding: 16px 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.edu-disclaimer p{
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 768px){
  .edu-filter-form{ grid-template-columns: 1fr; }
  .edu-select{ width: 100%; }
  .edu-filter-button{ width: 100%; justify-content: center; }
}

/* ===== شارة القسم ===== */
.section-badge{
  display:block;
  width:fit-content;
  margin:0 auto 28px;
  padding:10px 30px;
  background:var(--ink);
  color:#ffffff !important;
  font-weight:800;
  font-size:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.25);
  text-decoration:none !important;
  text-align:center;
}

/* =========================================
   شبكة المربعات البصرية (النسخة الملمومة والمتناسقة)
========================================= */
.edu-visual-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; 
  gap: 20px !important; 
  margin: 25px 0 40px !important;
  direction: rtl !important; 
  width: 100% !important;
}

.edu-grid-card {
  flex: 0 0 220px !important; 
  max-width: 220px !important; 
  box-sizing: border-box !important;
  padding: 22px 12px 18px !important; 
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  will-change: transform;
}

/* تأثير خط اللمعان عند الهوفر */
.edu-grid-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -150% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent, rgba(11,143,77,0.18), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.7s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.edu-grid-card:hover,
.edu-grid-card:active {
  box-shadow: 0 14px 30px rgba(11,143,77,0.22) !important;
  transform: translateY(-8px) scale(1.03) !important;
  border-color: #0b8f4d !important;
}

.edu-grid-card:hover::before,
.edu-grid-card:active::before {
  left: 150% !important;
}

.edu-grid-icon {
  width: 140px !important;  
  height: 140px !important; 
  margin-bottom: 12px !important;
  object-fit: contain !important;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important;
  z-index: 2 !important;
}

.edu-post-thumb {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.edu-grid-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #006c35 0%, #0b8f4d 100%) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
}

.edu-grid-card:hover .edu-grid-icon,
.edu-grid-card:active .edu-grid-icon {
  transform: scale(1.12) rotate(-3deg) !important;
}

.edu-grid-title {
  font-size: 18px !important; 
  font-weight: 900 !important; 
  color: #2b2b2b !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
  line-height: 1.35 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: color 0.3s ease !important;
}

.edu-grid-card:hover .edu-grid-title,
.edu-grid-card:active .edu-grid-title {
  color: #0b8f4d !important;
}

/* ===== شارة الركن المائلة داخل صفحات التصنيفات (حل / كتاب / اختبار / أوراق ...) ===== */
.kotoby-ribbon {
  position: absolute !important;
  top: 14px !important;
  left: -36px !important;
  width: 135px !important;
  padding: 5px 0 !important;
  transform: rotate(-45deg) !important;
  transform-origin: center !important;
  z-index: 5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
  pointer-events: none !important;
}

.kotoby-ribbon--sharh    { background: #6b46c1 !important; } /* بنفسجي */
.kotoby-ribbon--hal      { background: #0d9488 !important; } /* أخضر مائل للتركواز */
.kotoby-ribbon--kitab    { background: #db2777 !important; } /* وردي/ماجنتا */
.kotoby-ribbon--ikhtibar { background: #1e3a8a !important; } /* كحلي */
.kotoby-ribbon--awraq    { background: #2563eb !important; } /* أزرق */
.kotoby-ribbon--tawzee   { background: #ea580c !important; } /* برتقالي */
.kotoby-ribbon--tahdeer  { background: #0b8f4d !important; } /* أخضر */

@media (max-width: 640px) {
  .kotoby-ribbon {
    top: 10px !important;
    left: -32px !important;
    width: 115px !important;
    font-size: 10px !important;
    padding: 4px 0 !important;
  }
}

/* ===== التذييل ===== */
.site-footer{
  background:var(--ink-2);
  color:#cfe0d8;
  padding:32px 0;
  text-align:center;
  font-size:15px;
}

.site-footer a{
  color:#ffd782;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ===== صف روابط الفوتر + أيقونات السوشيال ميديا يسارها ===== */
.footer-links-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 4px;
  min-height:26px;
}

.footer-links-text{
  margin:0;
  font-size:14px;
}

.footer-social{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:2;
}

.footer-social a{
  width:26px;
  height:26px;
  min-width:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  color:#ffffff !important;
  text-decoration:none !important;
  font-size:12px;
  line-height:1;
  transition:transform .15s ease, background .15s ease;
}

.footer-social a:hover{
  background:rgba(255,255,255,0.28);
  transform:translateY(-2px);
}

@media (max-width: 640px){
  .footer-links-row{
    flex-direction:column;
    gap:10px;
  }
  .footer-social{
    position:static;
    transform:none;
  }
}

/* =========================================
   تنسيق الموبايل والشاشات الصغيرة (عمودين متناسقين)
========================================= */
@media (max-width: 768px) {
  .edu-filter-box {
    padding: 24px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
  }

  .edu-filter-header {
    flex-direction: column;
    gap: 10px;
  }

  .edu-filter-header h2 {
    font-size: 20px !important;
  }

  .edu-filter-header p {
    font-size: 13px !important;
  }

  .edu-visual-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    justify-content: initial !important;
    gap: 12px !important;
    margin: 15px 0 30px !important;
  }

  .edu-grid-card {
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 8px !important;
    margin: 0 !important;
  }

  .edu-grid-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 55% !important;
    justify-self: center;
  }

  .edu-grid-icon {
    width: 95px !important;  
    height: 95px !important; 
    margin-bottom: 8px !important;
  }

  .edu-post-thumb {
    height: 95px !important;
  }

  .edu-grid-placeholder {
    font-size: 26px !important;
  }

  .edu-grid-title {
    font-size: 14px !important;
    line-height: 1.25 !important; 
  }

  .edu-grid-card:hover,
  .edu-grid-card:active {
    transform: translateY(-4px) scale(1.02) !important;
  }

  .site-nav .primary-menu{
    display:none;
    flex-direction:column;
    width:100%;
  }
  .site-nav .primary-menu.is-open{display:flex;}

  /* ترتيب شريط الموبايل: الـ ☰ في أقصى الشمال، وجنبها على طول
     أيقونة البحث والوضع الليلي — من غير أي مسافة فاضية بينهم.
     الصفحة RTL فالترتيب بيتقرا من اليمين للشمال، يعني أقل رقم order
     بيبان على اليمين وأكبر رقم على الشمال. */
  .site-nav .container{
    justify-content:flex-end; /* flex-end في RTL = ناحية الشمال */
    gap:6px;
    padding:0 10px;
  }
  .site-nav .menu-toggle{
    display:block;
    order:3;
    margin:0;
    padding:14px 8px;
  }
  .kotoby-search{
    order:2;
    margin:0;
  }
  .dark-mode-toggle{
    order:1;
    margin:0;
  }
  .site-nav .primary-menu{
    order:4;   /* القائمة لما تتفتح تنزل تحت الأزرار مش فوقها */
    margin:0;
  }
}

/* ===== تظبيط الصناديق البيضاء الثابتة في الوضع الليلي ===== */
html[data-theme="dark"] .edu-select,
html[data-theme="dark"] .edu-grid-card,
html[data-theme="dark"] .share-bar,
html[data-theme="dark"] .single-article,
html[data-theme="dark"] .edu-grid-card:hover {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .edu-grid-title,
html[data-theme="dark"] .edu-select-label,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .single-article h1 {
  color: var(--text) !important;
}

html[data-theme="dark"] .edu-grid-placeholder {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%) !important;
}

/* ===== إصلاح وضوح النصوص في الوضع الليلي (الوصف + عنوان المراحل + القوائم) ===== */
html[data-theme="dark"] .tagline,
html[data-theme="dark"] .stage-select-heading,
html[data-theme="dark"] .edu-select select,
html[data-theme="dark"] .edu-select select option {
  color: #ffffff !important;
}

html[data-theme="dark"] .edu-select select {
  color-scheme: light;
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat left 0 center/10px 10px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

html[data-theme="dark"] .edu-select select option {
  background: var(--card-bg) !important;
  color-scheme: light;
}

/* ===== شعار "موقع نراجع سعودي" فوق قسم اختر المرحلة الدراسية ===== */
.site-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff !important;
  background: linear-gradient(90deg, #0b8f4d 0%, #006c35 100%);
  box-shadow: 0 6px 16px rgba(0, 108, 53, 0.28);
  letter-spacing: .3px;
}

html[data-theme="dark"] .site-badge{
  background: linear-gradient(90deg, #b88228 0%, #8a611c 100%);
  box-shadow: 0 6px 16px rgba(184, 130, 40, 0.35);
  color: #ffffff !important;
}

/* ===== قسم: حلول مضافة حديثاً ===== */
.recent-solutions-banner{
  margin: 40px auto 20px;
  max-width: 900px;
  text-align: center;
  background: linear-gradient(90deg, #0b8f4d 0%, #0f6e6a 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 17px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 197, 94, .55);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.recent-solutions-grid{
  margin-top: 6px !important;
}

html[data-theme="dark"] .recent-solutions-banner{
  background: linear-gradient(90deg, #8a611c 0%, #b88228 100%);
  border-color: rgba(255,255,255,.25);
}

@media (max-width: 640px){
  .recent-solutions-grid .edu-grid-card:last-child:nth-child(odd) {
    grid-column: unset;
    max-width: 100% !important;
    justify-self: unset;
  }
}

/* ===== شريط/شارة ملونة داخل المقالات — شورت كود [kotoby_banner] ===== */
.kotoby-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px auto;
  max-width: 900px;
  text-align: center;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.7;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}

.kotoby-banner .kotoby-banner-icon{
  font-size: 1.05em;
  line-height: 1;
}

.kotoby-banner .kotoby-banner-text,
.kotoby-banner a{
  color: #ffffff !important;
}

.kotoby-banner a{
  text-decoration: underline;
}

html[data-theme="dark"] .kotoby-banner{
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

@media (max-width: 640px){
  .kotoby-banner{
    font-size: 15px;
    padding: 12px 16px;
  }
}

/* ==========================================================================
   أماكن إعلانات Google AdSense
   - أسماء الكلاسات هنا مقصودة تبقى محايدة (kotoby-block بدل kotoby-ad-slot)
     عشان بعض إضافات حجب الإعلانات في المتصفح بتخفي أي عنصر اسمه فيه "ad-slot"
     أو "ad-header" حتى لو مش إعلان فعلي، فده بيقلل احتمال إخفاء الصندوق نفسه بالغلط.
   - متباعدة عن باقي المحتوى (مش ملزّقة في الأزرار أو الروابط) لتفادي أي نقر بالغلط.
   - overflow:hidden + max-width:100% عشان الإعلان (حتى لو "متجاوب") ميعملش سكرول أفقي على الموبايل.
   ========================================================================== */
.kotoby-block {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	clear: both;
	text-align: center;
	margin: 28px auto;
	/* حجز مساحة الإعلان قبل وصول كود الشبكة يمنع دفع المحتوى لأسفل (CLS). */
	min-height: 100px;
}

/* إعلان الهيدر هو الأكثر تأثيراً على العناصر الظاهرة في أول viewport. */
.site-brand + .kotoby-block {
	min-height: 100px;
}

/* في الشاشات الصغيرة الإعلان المتجاوب يحتاج مساحة عمودية أكبر قليلاً. */
@media (max-width: 480px) {
	.kotoby-block {
		min-height: 100px;
	}
}

.kotoby-block ins.adsbygoogle {
	width: 100%;
	max-width: 100%;
}

.kotoby-block-mid {
	margin: 32px auto;
}

@media (max-width: 480px) {
	.kotoby-block {
		margin: 18px auto;
	}
}

/* ==========================================================================
   عارض ملفات PDF داخل المقالات — شورت كود [kotoby_pdf]
   اللون قابل للتخصيص بالكامل عن طريق CSS variable (--kpdf-color) اللي بتتحط
   inline على كل عنصر عارض من نفس الشورت كود، حسب لون شريط الأدوات المختار
   من صفحة إعدادات القالب (أو المحدد يدوياً في الشورت كود نفسه).
   ========================================================================== */
.kotoby-pdf-viewer {
	--kpdf-color: #006c35;
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card-bg);
	margin: 22px 0;
	box-shadow: var(--shadow);
}

.kpdf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--kpdf-color);
	padding: 8px 14px;
}

.kpdf-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
}

.kpdf-logo {
	max-height: 28px;
	max-width: 120px;
	object-fit: contain;
	display: block;
}

.kpdf-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.kpdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff !important;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	text-decoration: none !important;
	transition: background .15s ease;
	padding: 0;
}

.kpdf-btn:hover {
	background: rgba(255, 255, 255, 0.32);
}

.kpdf-open-new {
	width: auto;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
}

.kpdf-page-info {
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	padding: 0 4px;
	white-space: nowrap;
}

.kpdf-canvas-wrap {
	position: relative;
	background: #e9ebe9;
	min-height: 220px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 14px 2px;
	max-height: 80vh;
}

.kpdf-canvas {
	max-width: 100%;
	height: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	background: #ffffff;
}

.kpdf-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(233, 235, 233, 0.92);
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	text-align: center;
	padding: 0 16px;
}

.kpdf-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--kpdf-color, var(--ink));
	animation: kpdf-spin 0.8s linear infinite;
	display: inline-block;
	flex: none;
}

@keyframes kpdf-spin {
	to { transform: rotate(360deg); }
}

/* وضع جوجل درايف: إطار جوجل الرسمي بنسبة عرض/ارتفاع متجاوبة تناسب صفحة عمودية */
.kotoby-pdf-drive .kpdf-iframe-wrap {
	position: relative;
	width: 100%;
	padding-top: 130%;
	background: #e9ebe9;
}

.kotoby-pdf-drive .kpdf-iframe-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

html[data-theme="dark"] .kpdf-canvas-wrap,
html[data-theme="dark"] .kotoby-pdf-drive .kpdf-iframe-wrap {
	background: #10140f;
}

@media (max-width: 640px) {
	.kpdf-toolbar {
		justify-content: center;
	}
	.kpdf-controls {
		justify-content: center;
		width: 100%;
	}
	.kotoby-pdf-drive .kpdf-iframe-wrap {
		padding-top: 150%;
	}
}


/* =========================================================
   بحث ذكي (AJAX) — أيقونة + قائمة نتائج منسدلة
   ========================================================= */
.kotoby-search{
  position: relative;
  margin-inline-start: 8px;
  flex-shrink: 0;
}

.search-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .15s ease;
}

.search-toggle:hover{
  background: rgba(255,255,255,.22);
}

.kotoby-search-panel{
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 200;
}

.kotoby-search-panel[hidden]{
  display: none;
}

.kotoby-search-form{
  display: flex;
  gap: 8px;
}

.kotoby-search-input{
  flex: 1;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--text);
}

.kotoby-search-input:focus{
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.kotoby-search-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}

.kotoby-search-submit:hover{
  background: var(--ink-2);
}

.kotoby-search-results{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.kotoby-search-results.is-loading{
  opacity: .6;
}

.kotoby-search-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background .15s ease;
}

.kotoby-search-item:hover,
.kotoby-search-item:focus{
  background: var(--paper);
}

.kotoby-search-item-thumb{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}

.kotoby-search-item-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kotoby-search-item-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

.kotoby-search-item-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kotoby-search-item-title{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kotoby-search-item-tag{
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
}

.kotoby-search-msg{
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 16px 4px;
  margin: 0;
}

.kotoby-search-viewall{
  display: block;
  text-align: center;
  margin-top: 6px;
  padding: 10px;
  border-top: 1px solid var(--card-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: none !important;
}

html[data-theme="dark"] .kotoby-search-viewall{
  color: var(--link-color) !important;
}

@media (max-width: 640px){
  .kotoby-search-panel{
    position: fixed;
    inset-inline: 12px;
    top: 64px;
    width: auto;
    max-width: none;
  }
  .search-toggle{
    margin-inline-start: 6px;
  }
}

/* =========================================
   مسار التصفح (Breadcrumbs)
========================================= */
.kotoby-breadcrumbs{
  max-width: 820px;
  margin: 0 auto 16px;
  padding: 0 4px;
}

.kotoby-breadcrumbs__list{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 11px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 13.5px;
  line-height: 1.4;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
}

.kotoby-breadcrumbs__list::-webkit-scrollbar{
  height: 4px;
}

.kotoby-breadcrumbs__list::-webkit-scrollbar-track{
  background: transparent;
}

.kotoby-breadcrumbs__list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 10px;
}

html[data-theme="dark"] .kotoby-breadcrumbs__list{
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

html[data-theme="dark"] .kotoby-breadcrumbs__list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
}

.kotoby-breadcrumbs__item{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kotoby-breadcrumbs__link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s ease;
}

.kotoby-breadcrumbs__link:hover,
.kotoby-breadcrumbs__link:focus-visible{
  color: var(--gold);
  text-decoration: underline;
}

.kotoby-breadcrumbs__home-icon{
  flex-shrink: 0;
  opacity: .9;
}

.kotoby-breadcrumbs__sep{
  color: var(--card-border);
  font-size: 13px;
  user-select: none;
}

.kotoby-breadcrumbs__item--current{
  flex-shrink: 0;
}

.kotoby-breadcrumbs__current-text{
  display: block;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 600px){
  .kotoby-breadcrumbs__list{
    padding: 9px 14px;
    font-size: 12.5px;
    gap: 5px;
  }
  .kotoby-breadcrumbs__link span{
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ==========================================================================
   قسم التعليقات أسفل المقالة (comments.php)
   - نفس عرض بطاقة المقالة (820px) وبنفس خلفية/حدود الكروت في القالب.
   - الحقول والأزرار بلون أزرق فاتح مطابق للتصميم المطلوب، ومتوافقة مع الوضع الليلي.
   ========================================================================== */
:root{
  --comment-accent: #2596e8;
  --comment-accent-dark: #1d7dc4;
  --comment-field-bg: #f3faff;
  --comment-field-border: #bfe3fb;
}

html[data-theme="dark"]{
  --comment-accent: #4fb3ff;
  --comment-accent-dark: #2f8fdb;
  --comment-field-bg: #16232c;
  --comment-field-border: #2c4a5c;
}

.kotoby-comments-section{
  max-width: 820px;
  margin: 28px auto 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}

.kotoby-comments-title{
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: right;
}

.kotoby-comments-closed{
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 0;
}

/* قائمة التعليقات المنشورة */
.kotoby-comments-list{
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kotoby-comments-list ol.children{
  list-style: none;
  margin: 14px 0 0;
  padding: 0 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 2px solid var(--card-border);
}

.kotoby-comment{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kotoby-comment-avatar{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--comment-field-bg);
  border: 2px solid var(--comment-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kotoby-comment-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.kotoby-comment-avatar img[src*="comment-default-avatar"]{
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.kotoby-comment-body{
  flex: 1 1 auto;
  min-width: 0;
}

.kotoby-comment-meta{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.kotoby-comment-author{
  font-weight: 800;
  color: var(--text);
  font-size: 15px;
}

.kotoby-comment-date{
  font-size: 12.5px;
  color: var(--muted);
}

.kotoby-comment-content p{
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.8;
  font-size: 15px;
}

.kotoby-comment-pending{
  display: inline-block;
  background: rgba(184, 130, 40, .12);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 8px;
}

/* فورم إضافة تعليق جديد */
#commentform{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
}

.kotoby-comments-list:empty + #commentform,
#commentform:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#commentform .comment-reply-title{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 18px;
  text-align: right;
}

#commentform .comment-reply-title small{
  display: inline-block;
  margin-inline-start: 10px;
}

#commentform .comment-reply-title small a{
  font-size: 13px;
  font-weight: 700;
  color: var(--comment-accent);
}

#commentform p{
  margin: 0 0 16px;
}

#commentform label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: right;
}

#commentform label .required{
  color: #d64545;
  margin-inline-start: 2px;
}

#commentform input[type="text"],
#commentform textarea{
  width: 100%;
  background: var(--comment-field-bg);
  border: 1.5px solid var(--comment-field-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#commentform textarea{
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

#commentform input[type="text"]:focus,
#commentform textarea:focus{
  outline: none;
  border-color: var(--comment-accent);
  box-shadow: 0 0 0 3px rgba(37, 150, 232, .15);
}

.comment-form-note{
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 16px !important;
}

.form-submit{
  display: flex;
  justify-content: flex-start;
  margin: 0 !important;
}

#commentform .kotoby-comment-submit{
  appearance: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--comment-accent) 0%, var(--comment-accent-dark) 100%);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(37, 150, 232, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}

#commentform .kotoby-comment-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 150, 232, .35);
}

@media (max-width: 640px){
  .kotoby-comments-section{
    padding: 18px 16px;
    border-radius: 12px;
  }
  .form-submit{
    justify-content: stretch;
  }
  #commentform .kotoby-comment-submit{
    width: 100%;
  }
}

/* رابط "رد" تحت كل تعليق */
.kotoby-comment-actions{
  margin-top: 4px;
}

.kotoby-comment-actions a,
#cancel-comment-reply-link{
  font-size: 13px;
  font-weight: 700;
  color: var(--comment-accent);
  text-decoration: none;
}

.kotoby-comment-actions a:hover,
#cancel-comment-reply-link:hover{
  text-decoration: underline;
}

#cancel-comment-reply-link{
  margin-inline-start: 10px;
  color: var(--muted) !important;
}

/* شريط إيموجي التفاعل تحت كل تعليق منشور */
.kotoby-reactions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.kotoby-reaction-btn{
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--comment-field-bg, #f3faff);
  border: 1.5px solid var(--comment-field-border, #bfe3fb);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  line-height: 1;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.kotoby-reaction-btn:hover{
  transform: translateY(-2px) scale(1.05);
  border-color: var(--comment-accent);
}

.kotoby-reaction-emoji{
  font-size: 18px;
  line-height: 1;
  filter: grayscale(35%) opacity(.85);
  transition: filter .15s ease, transform .15s ease;
}

.kotoby-reaction-btn:hover .kotoby-reaction-emoji{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.12);
}

/* الحالة اللي بتنور فيها الإيموجي اللي الزائر داس عليه، بلون مختلف لكل نوع */
.kotoby-reaction-btn.is-active .kotoby-reaction-emoji{
  filter: grayscale(0%) opacity(1);
}

.kotoby-reaction-btn.kotoby-reaction-love.is-active{
  background: rgba(214, 69, 69, .12);
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .12);
}

.kotoby-reaction-btn.kotoby-reaction-admire.is-active{
  background: rgba(46, 176, 108, .14);
  border-color: #2eb06c;
  box-shadow: 0 0 0 3px rgba(46, 176, 108, .14);
}

.kotoby-reaction-btn.kotoby-reaction-wow.is-active{
  background: rgba(224, 168, 30, .14);
  border-color: #e0a81e;
  box-shadow: 0 0 0 3px rgba(224, 168, 30, .14);
}

.kotoby-reaction-btn.kotoby-reaction-celebrate.is-active{
  background: rgba(37, 150, 232, .12);
  border-color: var(--comment-accent);
  box-shadow: 0 0 0 3px rgba(37, 150, 232, .12);
}

.kotoby-reaction-btn.kotoby-pop{
  animation: kotoby-reaction-pop .3s ease;
}

@keyframes kotoby-reaction-pop{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* العداد بجانب كل إيموجي — بيظهر للأدمن بس (مش الزوار) */
.kotoby-reaction-count{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

@media (max-width: 640px){
  .kotoby-reactions{
    flex-wrap: wrap;
  }
  .kotoby-reaction-btn{
    padding: 5px 10px;
  }
}

/* شارة "الإدارة" جنب اسم الأدمن لما يرد على تعليق */
.kotoby-comment-admin-badge{
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.6;
}

/* =========================================================
   البحث بالصوت 🎤 — زرار الميكروفون + حالة الاستماع + كارت الصف
   ========================================================= */
.kotoby-mic{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.kotoby-mic[hidden]{
  display: none;
}

.kotoby-mic:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.kotoby-mic svg{
  position: relative;
  z-index: 2;
}

/* حالة التسجيل: الزرار بيتلون أحمر ونبضة بتطلع من تحته */
.kotoby-mic.is-listening{
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.kotoby-mic-pulse{
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
}

.kotoby-mic.is-listening .kotoby-mic-pulse{
  animation: kotoby-mic-pulse 1.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(192,57,43,.55);
}

@keyframes kotoby-mic-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(192,57,43,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}

@media (prefers-reduced-motion: reduce){
  .kotoby-mic.is-listening .kotoby-mic-pulse{
    animation: none;
  }
}

/* سطر "سمعت: ..." تحت مربع البحث */
.kotoby-voice-status{
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--muted);
  border: 1px solid var(--card-border);
}

.kotoby-voice-status[hidden]{
  display: none;
}

.kotoby-voice-status.is-listening{
  color: var(--text);
  border-color: rgba(192,57,43,.35);
}

.kotoby-voice-status.is-done{
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}

html[data-theme="dark"] .kotoby-voice-status.is-done{
  color: var(--link-color);
}

.kotoby-voice-status.is-error{
  color: #c0392b;
  border-color: rgba(192,57,43,.35);
}

/* كارت "الصف اللي فهمناه" فوق النتائج */
.kotoby-search-grade{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff !important;
}

.kotoby-search-grade-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,.16);
}

.kotoby-search-grade-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kotoby-search-grade-title{
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}

.kotoby-search-grade-hint{
  font-size: 11.5px;
  opacity: .85;
}

/* ----------------------------------------------------------------------
   زر التحميل المؤقّت [kotoby_download]
   الألوان الأساسية (زرار البداية / حالة الجاهزية / لون النص) قابلة للتخصيص
   بالكامل لكل مرة استخدام لوحدها عن طريق CSS variables بتتحط من الشورت كود:
   --kdl-color / --kdl-text / --kdl-ready / --kdl-ready-text
---------------------------------------------------------------------- */
.kotoby-dlbtn{
  --kdl-color:#1c5fae;
  --kdl-text:#ffffff;
  --kdl-ready:#16a34a;
  --kdl-ready-text:#ffffff;
  max-width:420px;
  margin:22px auto;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg, var(--card-bg) 0%, var(--paper) 100%);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
}

.kdl-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 10px;
  margin-bottom:12px;
  border-radius:10px;
  background:var(--card-bg);
  border:1px dashed var(--card-border);
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  text-align:center;
}

.kdl-head i{
  color:var(--kdl-color);
  font-size:14px;
}

.kdl-btn{
  position:relative;
  display:block;
  width:100%;
  border:0;
  border-radius:11px;
  padding:0;
  height:50px;
  overflow:hidden;
  cursor:pointer;
  background:var(--kdl-color);
  color:var(--kdl-text);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
  transition:transform .15s ease, filter .2s ease, background-color .2s ease;
  text-decoration:none !important;
}

.kdl-btn[data-state="idle"]:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.kdl-btn[data-state="counting"]{
  cursor:default;
}

.kdl-btn[data-state="ready"]{
  background:var(--kdl-ready);
  color:var(--kdl-ready-text);
  animation:kdl-pop .35s ease;
}

.kdl-btn-progress{
  position:absolute;
  inset-block:0;
  right:0;
  width:0%;
  background:rgba(0,0,0,.22);
  transition:width 1s linear;
  z-index:1;
}

.kdl-btn-label{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:100%;
  font-size:15.5px;
  font-weight:800;
}

.kdl-btn-label i{
  font-size:14px;
}

.kdl-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 16px;
  margin-top:12px;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
}

.kdl-stat{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.kdl-stat i{
  font-size:12px;
}

.kdl-stat i.fa-download{
  color:var(--kdl-color);
}

.kdl-stat i.fa-eye{
  color:#c0392b;
}

.kdl-stars i{
  color:var(--gold);
  font-size:12px;
}

.kdl-stat-rating .kdl-stars{
  margin-left:4px;
}

@keyframes kdl-pop{
  0%{ transform:scale(.97); }
  60%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

@media (max-width:420px){
  .kotoby-dlbtn{
    max-width:100%;
    padding:12px;
  }
  .kdl-head{
    font-size:12.5px;
  }
  .kdl-btn{
    height:46px;
  }
  .kdl-btn-label{
    font-size:14.5px;
  }
  .kdl-stats{
    gap:5px 10px;
    font-size:11.5px;
  }
}


/* ----------------------------------------------------------------------
   صندوق الهدية [kotoby_gift]
   الألوان قابلة للتخصيص بالكامل لكل مرة استخدام عن طريق CSS variables
   بتتحط من الشورت كود: --kgift-box / --kgift-ribbon / --kgift-accent
   أحجام الخطوط كمان قابلة للتخصيص: --kgift-label-size / --kgift-sublabel-size
   / --kgift-title-size / --kgift-link-size
---------------------------------------------------------------------- */
.kotoby-gift{
  --kgift-box:#c99b3d;
  --kgift-ribbon:#b32d2e;
  --kgift-accent:#006c35;
  --kgift-label-size:16px;
  --kgift-sublabel-size:13px;
  --kgift-title-size:19px;
  --kgift-link-size:16px;
  max-width:320px;
  margin:26px auto;
}

.kgift-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:28px 16px 22px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--card-bg) 0%, var(--paper) 100%);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* زخارف بريق خفيفة حوالين الصندوق */
.kgift-sparkle{
  position:absolute;
  font-size:15px;
  opacity:.5;
  pointer-events:none;
  animation:kgift-twinkle 2.6s ease-in-out infinite;
  z-index:0;
}

.kgift-sparkle-1{ top:16px; left:20px; font-size:13px; animation-delay:.1s; }
.kgift-sparkle-2{ top:20px; right:22px; font-size:18px; animation-delay:.9s; }
.kgift-sparkle-3{ bottom:44px; left:30px; font-size:12px; animation-delay:1.6s; }

.kgift-box-btn{
  position:relative;
  z-index:1;
  background:none;
  border:0;
  padding:14px;
  margin:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.kgift-box{
  position:relative;
  display:block;
  width:132px;
  height:126px;
  perspective:600px;
}

/* المجموعة اللي بتتحرك/تتميل كوحدة واحدة (الجسم + الغطاء + الشرايط + الفيونكة) */
.kgift-box-tilt{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform:rotateX(10deg) rotateY(-10deg);
  transition:transform .35s ease;
}

.kgift-box-btn:hover .kgift-box-tilt{
  transform:rotateX(13deg) rotateY(-16deg) translateY(-6px);
}

.kgift-box-btn:active .kgift-box-tilt{
  transform:rotateX(8deg) rotateY(-10deg) translateY(1px) scale(.98);
}

.kgift-glow{
  position:absolute;
  inset:-30px;
  border-radius:50%;
  background:radial-gradient(circle, var(--kgift-box) 0%, transparent 70%);
  background:radial-gradient(circle, color-mix(in srgb, var(--kgift-box) 55%, transparent) 0%, transparent 70%);
  opacity:0;
  transform:scale(.6);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}

.kgift-body{
  position:absolute;
  bottom:6px;
  left:8px;
  right:8px;
  height:72px;
  border-radius:9px;
  background:var(--kgift-box);
  background:linear-gradient(155deg, color-mix(in srgb, var(--kgift-box) 70%, #fff 30%) 0%, var(--kgift-box) 45%, color-mix(in srgb, var(--kgift-box) 70%, #000) 100%);
  border:1px solid color-mix(in srgb, var(--kgift-box) 55%, #000 45%);
  box-shadow:0 16px 24px -10px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -10px 14px rgba(0,0,0,.2);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}

/* حرف سُمك تحت الصندوق يوهم إنه مجسّم فعلاً مش مسطّح */
.kgift-body::after{
  content:'';
  position:absolute;
  left:9%;
  right:9%;
  bottom:-7px;
  height:9px;
  border-radius:0 0 9px 9px;
  background:rgba(0,0,0,.3);
  z-index:-1;
}

.kgift-lid{
  position:absolute;
  top:26px;
  left:2px;
  right:2px;
  height:26px;
  border-radius:7px;
  background:var(--kgift-box);
  background:linear-gradient(155deg, color-mix(in srgb, var(--kgift-box) 85%, #fff) 0%, var(--kgift-box) 100%);
  border:1px solid color-mix(in srgb, var(--kgift-box) 55%, #000 45%);
  border-bottom:2px solid color-mix(in srgb, var(--kgift-box) 40%, #000 60%);
  box-shadow:0 10px 16px -6px rgba(0,0,0,.35);
  transform-origin:8% 100%;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .45s ease .05s;
}

.kgift-lid::before{
  content:'';
  position:absolute;
  top:3px;
  left:10%;
  right:10%;
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,.4);
}

.kgift-lid::after{
  content:'';
  position:absolute;
  left:3%;
  right:3%;
  bottom:-5px;
  height:6px;
  border-radius:0 0 6px 6px;
  background:rgba(0,0,0,.28);
}

.kgift-ribbon-h{
  position:absolute;
  top:26px;
  left:2px;
  right:2px;
  height:26px;
  background:var(--kgift-ribbon);
  background:linear-gradient(90deg, color-mix(in srgb, var(--kgift-ribbon) 70%, #000) 0%, var(--kgift-ribbon) 50%, color-mix(in srgb, var(--kgift-ribbon) 70%, #000) 100%);
  clip-path:inset(0 44% 0 44%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.3);
  transition:opacity .3s ease .15s;
}

.kgift-ribbon-v{
  position:absolute;
  top:0;
  bottom:6px;
  left:50%;
  width:18px;
  margin-left:-9px;
  background:var(--kgift-ribbon);
  background:linear-gradient(90deg, color-mix(in srgb, var(--kgift-ribbon) 70%, #000) 0%, var(--kgift-ribbon) 45%, color-mix(in srgb, var(--kgift-ribbon) 70%, #fff 30%) 65%, var(--kgift-ribbon) 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}

.kgift-bow-glow{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  width:50px;
  height:50px;
  border-radius:50%;
  background:radial-gradient(circle, var(--kgift-ribbon) 0%, transparent 70%);
  opacity:.3;
  filter:blur(3px);
  transition:opacity .3s ease, transform .3s ease;
}

.kgift-box-btn:hover .kgift-bow-glow{
  opacity:.5;
  transform:translateX(-50%) scale(1.12);
}

.kgift-bow{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:38px;
  line-height:1;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.3));
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}

/* ظل الأرض تحت الصندوق — بيدي إحساس إن الصندوق واقف فعلاً مش عايم */
.kgift-shadow{
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  width:92px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.3) 0%, transparent 72%);
  filter:blur(1px);
  transition:transform .35s ease, opacity .35s ease;
  z-index:0;
}

.kgift-box-btn:hover .kgift-shadow{
  transform:translateX(-50%) scale(1.1);
  opacity:.85;
}

.kgift-scene.is-opening .kgift-glow{
  opacity:1;
  transform:scale(1.3);
}

.kgift-scene.is-opening .kgift-lid,
.kgift-scene.is-opened .kgift-lid{
  transform:translateY(-50px) rotate(-28deg);
  opacity:0;
}

.kgift-scene.is-opening .kgift-ribbon-h,
.kgift-scene.is-opened .kgift-ribbon-h{
  opacity:0;
}

.kgift-scene.is-opening .kgift-bow,
.kgift-scene.is-opened .kgift-bow,
.kgift-scene.is-opening .kgift-bow-glow,
.kgift-scene.is-opened .kgift-bow-glow{
  transform:translate(-50%, -64px) rotate(35deg);
  opacity:0;
}

.kgift-scene.is-opening .kgift-body{
  animation:kgift-shake .5s ease;
}

.kgift-caption{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}

.kgift-label{
  font-size:var(--kgift-label-size, 16px);
  font-weight:800;
  color:var(--kgift-label-color, var(--text));
}

.kgift-sublabel{
  font-size:var(--kgift-sublabel-size, 13px);
  font-weight:600;
  color:var(--kgift-sublabel-color, var(--muted));
}

@keyframes kgift-twinkle{
  0%, 100%{ opacity:.2; transform:scale(.75) rotate(0deg); }
  50%{ opacity:.9; transform:scale(1.15) rotate(18deg); }
}

@keyframes kgift-shake{
  0%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-3px) rotate(-2deg); }
  40%{ transform:translateX(3px) rotate(2deg); }
  60%{ transform:translateX(-2px) rotate(-1deg); }
  80%{ transform:translateX(2px) rotate(1deg); }
  100%{ transform:translateX(0) rotate(0); }
}

/* ---------- البوب-أب ---------- */
.kgift-modal-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(10,12,15,.6);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.kgift-modal-overlay[data-state="open"]{
  opacity:1;
  pointer-events:auto;
}

body.kgift-lock-scroll{
  overflow:hidden;
}

.kgift-modal{
  position:relative;
  width:100%;
  max-width:400px;
  max-height:86vh;
  overflow-y:auto;
  padding:30px 24px 26px;
  border-radius:22px;
  background:var(--card-bg);
  border-top:5px solid var(--kgift-accent);
  box-shadow:0 30px 60px -15px rgba(0,0,0,.45);
  text-align:center;
  transform:scale(.82) translateY(24px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}

html[data-theme="dark"] .kgift-modal{
  border:1px solid var(--card-border);
}

.kgift-modal-overlay[data-state="open"] .kgift-modal{
  transform:scale(1) translateY(0);
}

.kgift-modal-confetti{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
}

.kgift-confetti-piece{
  position:absolute;
  top:-14px;
  width:8px;
  height:14px;
  border-radius:2px;
  opacity:.95;
  animation-name:kgift-confetti-fall;
  animation-timing-function:ease-in;
  animation-fill-mode:forwards;
}

@keyframes kgift-confetti-fall{
  0%{ transform:translateY(0) rotate(0); opacity:1; }
  100%{ transform:translateY(340px) rotate(340deg); opacity:0; }
}

.kgift-close{
  position:absolute;
  top:14px;
  inset-inline-end:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--card-border);
  background:var(--paper);
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease, transform .15s ease;
}

.kgift-close:hover{
  background:var(--card-border);
  transform:scale(1.06);
}

.kgift-modal-icon{
  font-size:44px;
  line-height:1;
  margin-bottom:6px;
}

.kgift-modal-title{
  margin:0 0 6px;
  font-size:var(--kgift-title-size, 19px);
  font-weight:800;
  color:var(--kgift-modal-title-color, var(--text));
}

.kgift-modal-desc{
  margin:0 0 16px;
  font-size:13.5px;
  color:var(--kgift-modal-desc-color, var(--muted));
  font-weight:600;
}

.kgift-coupon{
  margin:0 0 16px;
  padding:14px;
  border-radius:14px;
  background:var(--paper);
  border:1px dashed var(--kgift-accent);
}

/* شكل قسيمة احترافي (تيكيت) لما يكون فيه شعار متجر أو اسم متجر محدد */
.kgift-coupon--branded{
  position:relative;
  padding:16px 14px 14px;
  border:1px solid var(--card-border);
  border-radius:16px;
  background:var(--card-bg);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.28);
  overflow:visible;
}

/* فتحتين دائريتين على جنب الكارت، زي شكل تيكيت/كوبون حقيقي */
.kgift-coupon--branded::before,
.kgift-coupon--branded::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--card-border);
  transform:translateY(-50%);
}

.kgift-coupon--branded::before{ inset-inline-start:-7px; }
.kgift-coupon--branded::after{ inset-inline-end:-7px; }

.kgift-coupon-store{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}

.kgift-coupon-logo{
  max-height:28px;
  max-width:110px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:6px;
}

.kgift-coupon-store-name{
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
}

.kgift-coupon--branded .kgift-coupon-label{
  position:relative;
  text-align:center;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1.5px dashed var(--card-border);
}

.kgift-coupon-label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:800;
  color:var(--kgift-coupon-label-color, var(--muted));
}

.kgift-coupon-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.kgift-coupon-code{
  font-family:monospace;
  font-size:17px;
  font-weight:800;
  letter-spacing:1.5px;
  color:var(--kgift-coupon-code-color, var(--kgift-accent));
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:9px;
  padding:7px 14px;
}

.kgift-copy-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:9px;
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:var(--kgift-accent);
  cursor:pointer;
  transition:filter .2s ease, transform .15s ease;
}

.kgift-copy-btn:hover{
  filter:brightness(1.08);
}

.kgift-copy-btn.is-copied{
  background:#16a34a;
}

.kgift-link-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px;
  margin-bottom:14px;
  border-radius:12px;
  background:var(--kgift-accent);
  color:var(--kgift-link-color, #fff) !important;
  font-size:var(--kgift-link-size, 16px);
  font-weight:800;
  text-decoration:none !important;
  box-shadow:0 8px 16px -6px rgba(0,0,0,.3);
  transition:filter .2s ease, transform .15s ease;
}

.kgift-link-btn i{
  font-size:14px;
}

.kgift-link-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.kgift-extra{
  font-size:13.5px;
  color:var(--kgift-extra-color, var(--text));
  text-align:start;
  line-height:1.8;
}

.kgift-extra p:first-child{
  margin-top:0;
}

.kgift-extra p:last-child{
  margin-bottom:0;
}

/* ---------- تحسينات وضوح النصوص في الدارك مود ----------
   لو انت حددت لون مخصص لأي نص (من لوحة المقالة أو إعدادات القالب)، نفس اللون
   ده هو اللي هيتطبق في الوضع الليلي كمان بدل ما نفرض لون تاني عليه؛ ولو مفيش
   لون مخصص، بيرجع لنفس السلوك الافتراضي القديم (أبيض للكود، ولون نص القالب
   العادي للمحتوى الحر). ---------------------------------------------------- */
html[data-theme="dark"] .kgift-coupon-code{
  color:var(--kgift-coupon-code-color, #fff);
}

html[data-theme="dark"] .kgift-extra,
html[data-theme="dark"] .kgift-extra p,
html[data-theme="dark"] .kgift-extra span,
html[data-theme="dark"] .kgift-extra li,
html[data-theme="dark"] .kgift-extra strong,
html[data-theme="dark"] .kgift-extra b{
  color:var(--kgift-extra-color, var(--text)) !important;
}

html[data-theme="dark"] .kgift-extra a{
  color:var(--link-color) !important;
}

@media (max-width:420px){
  .kgift-scene{
    padding:22px 12px 18px;
  }
  .kgift-modal{
    padding:26px 18px 20px;
  }
  .kgift-modal-title{
    font-size:calc(var(--kgift-title-size, 19px) - 1.5px);
  }
}