/* ===== Base / Sticky Footer ===== */
html, body { height:100%; margin:0; }
body{
  min-height:100vh;
  display:flex;                 /* ← يجعل الجسم Flex عمودي */
  flex-direction:column;
  background:#fff; color:#111;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
}
/* ✅ دعم اللِياوت الحالي: <main class="app-main">  + دعم قديم main.content */
.app-main, main.content { flex:1 0 auto; }  /* ← يدفع الفوتر للأسفل عند قِصر المحتوى */

/* حاوية عامة موحّدة العرض */
.wrap{ max-width:1120px; margin:0 auto; padding:24px 16px; }
@media (max-width:640px){ .wrap{ padding:16px 12px; } }

/* ===== متغيّرات عامة للأقسام ===== */
:root {
  /* News */
  --news-gap: 1.25rem;
  --news-radius: 16px;
  --news-border: #eaeaea;
  --news-muted: #6b7280;
  --news-ink: #111827;
  --news-bg: #ffffff;
  --news-chip-bg: #f3f4f6;

  /* API highlights */
  --api-card-bg: #fff8e1;
  --api-card-br: 20px;
  --api-card-bd: #f2e8c9;
  --api-ink: #0f172a;
  --api-muted: #64748b;
  --api-accent: #2563eb;
  --api-gap: 24px;

  /* OTP highlights */
  --otp-card-bg: #eef6ff;
  --otp-card-bd: #d9e8ff;
  --otp-ink: #0f172a;
  --otp-muted: #64748b;
  --otp-accent: #2563eb;
  --otp-radius: 20px;
  --otp-gap: 24px;

  /* أحجام صورة OTP (نقطة واحدة للحقيقة) */
  --otp-img-max-desktop: 300px;
  --otp-img-max-mobile:  200px;
}

/* ===== Header ===== */
.site-header{ background:#fff; }
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.site-header .logo img{ display:block; width:clamp(60px,12vw,60px); height:auto; }

/* ===== Header Navigation ===== */
.site-nav { }
.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:16px;
}
.nav-item{ }
.nav-link{
  display:inline-block; padding:8px 10px;
  color:#0f172a; text-decoration:none; font-weight:600;
}
.nav-link:visited{ color:#0f172a; }
.nav-link:hover{ color:#111; text-decoration:none; }
.nav-link.is-active{ position:relative; color:#111; }
.nav-link.is-active::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px;
  width:100%; height:2px; background:#111; border-radius:2px;
}
@media (max-width:640px){
  .site-header .wrap{ flex-direction:column; align-items:center; gap:10px; }
  .nav-list{ gap:12px; }
}

/* ===== JSON block (home) ===== */
.json{
  direction:ltr;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:1.05rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; margin:0;
}
.json .key{ color:#111; }
.json .string{ color:#15803d; }
@media (max-width:640px){ .json{ font-size:.95rem; } }

/* ===== Footer ===== */
.site-footer{
  background:#fff; color:#0f172a;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans';
  margin-top:auto; position:static; padding-block: clamp(30px, 0vw, 200px) !important;
}
.site-footer *{ font-family:inherit !important; }
.divider{ border:0; height:1px; background:#eaeaea; margin:12px 0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.links{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.links a{ color:#334155; text-decoration:none; font-weight:500; }
.links a:hover{ color:#0f172a; }
.sep{ opacity:.35; }
.muted{ color:#94a3b8; }
.social{ display:flex; align-items:center; gap:12px; }
.icons{ display:flex; gap:10px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #e5e7eb; border-radius:8px;
  text-decoration:none; background:#fff;
}
.icon-btn:hover{ background:#f8fafc; border-color:#dbeafe; }
.icon-btn svg{ width:18px; height:18px; fill:#0f172a; }
.social-label{ color:#475569; font-weight:600; }
.site-footer .meta{ color:#64748b; font-size:.9rem; margin-top:4px; }
.site-footer .meta .heart{ color:#ef4444; margin-inline-start:6px; font-size:1.05em; vertical-align:-0.1em; }
@media (max-width:640px){
  .footer-row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .links{ gap:8px 10px; }
  .links .sep{ display:none; }
  .icon-btn{ width:34px; height:34px; }
}
/* Heart pulse (اختياري) */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.site-footer .meta .heart{ animation:pulse 1.8s ease-in-out infinite; }

/* ===== أزرار عامة ===== */
.btn{
  display:inline-block; text-decoration:none;
  background:#111827; color:#fff;
  padding:10px 16px; border-radius:10px; border:1px solid transparent;
}
.btn:hover{ opacity:.95; }
/* نسخة خفيفة تُستخدم في أقسام متعددة */
.btn.btn-ghost{ background:transparent; color:#0f172a; border-color:#e5e7eb; }
.btn.btn-ghost:hover{ background:#f9fafb; }

/* ===== Page (show) ===== */
.page-wrap { padding-top:24px; padding-bottom:24px; }
.page-title { margin:8px 0 6px; font-size:clamp(22px,3vw,32px); font-weight:800; color:#0f172a; }
.page-meta { margin:0 0 18px; font-size:.9rem; color:#64748b; }
.page-content { display:flex; flex-direction:column; gap:16px; }
.page-card { background:#fafafa; border:1px solid #eee; border-radius:14px; padding:16px; }
.page-figure { margin:0; }
.page-figure img { max-width:100%; height:auto; border-radius:10px; }
.caption { font-size:.9rem; color:#64748b; margin-top:6px; }
.quote { border-inline-start:4px solid #e5e7eb; padding-inline-start:12px; color:#334155; margin:0; }
.quote p { margin:0 0 6px; }
.quote small { color:#94a3b8; }
.file-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:#f8fafc; border:1px solid #e5e7eb; padding:10px 14px; border-radius:10px; color:#111; }
.file-link .paperclip { line-height:1; }
.file-link .file-label { font-weight:600; }
.prose { line-height:1.9; color:#111; }
.prose a { color:#0a66c2; text-decoration:underline; }
.prose p { margin:0 0 10px; }
.prose ul, .prose ol { padding-right:1.25rem; margin:0 0 10px; }
.prose h2 { margin:10px 0; font-size:1.4rem; }
.prose h3 { margin:8px 0; font-size:1.2rem; }
.embed iframe { width:100%; min-height:320px; border:0; border-radius:10px; }

/* ===== Maintenance Page ===== */
.maintenance.centered { min-height:60vh; display:flex; align-items:center; justify-content:center; }
.maintenance-card { text-align:center; max-width:680px; margin:0 auto; }
.maintenance-title { margin:0 0 10px; font-size:clamp(22px,3vw,28px); color:#0f172a; }
.maintenance-message { color:#475569; margin:0 0 16px; }
.maintenance-hint { color:#94a3b8; font-size:.9rem; margin:0; }

/* ===== News (index/list) ===== */
.news-container { max-width:1200px; margin-inline:auto; padding:2rem 1rem; }
.news-header { display:flex; flex-direction:column; gap:var(--news-gap); margin-bottom:1rem; }
@media (min-width:768px){
  .news-header{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.news-title { font-size:1.5rem; font-weight:800; color:var(--news-ink); margin:0; }
.news-filters{ display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px){ .news-filters{ flex-direction:row; align-items:center; } }
.news-filter-select{ appearance:none; border:1px solid var(--news-border); border-radius:10px; padding:.5rem .75rem; background:#fff; }
.news-filter-apply{ border:none; border-radius:10px; padding:.5rem 1rem; background:#111827; color:#fff; cursor:pointer; }
.news-filter-apply:hover{ filter:brightness(0.95); }
.news-filter-reset{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--news-border); border-radius:10px; padding:.5rem 1rem; color:var(--news-ink); text-decoration:none; }
.news-filter-reset:hover{ background:#f9fafb; }

.news-featured { margin-block:1.25rem 2rem; }
.news-featured-scroller{ display:flex; gap:var(--news-gap); overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.news-featured-scroller::-webkit-scrollbar{ height:8px; }
.news-featured-scroller::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }
.news-featured-card{ min-width:240px; max-width:280px; display:block; text-decoration:none; color:inherit; scroll-snap-align:start; }
.news-featured-thumb{ aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:var(--news-radius); background:#f3f4f6; }
.news-featured-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.news-featured-card:hover .news-featured-thumb img{ transform:scale(1.03); }
.news-featured-meta{ margin-top:.5rem; }
.news-featured-date{ font-size:.75rem; color:var(--news-muted); }
.news-featured-title{ font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.news-grid{ display:grid; gap:var(--news-gap); grid-template-columns:1fr; }
@media (min-width:640px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .news-grid{ grid-template-columns:repeat(3,1fr); } }
.news-card{ border:1px solid var(--news-border); border-radius:20px; overflow:hidden; background:var(--news-bg); }
.news-card-link{ color:inherit; text-decoration:none; display:block; }
.news-card-thumb{ background:#f3f4f6; aspect-ratio:16/9; overflow:hidden; }
.news-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.news-card-link:hover .news-card-thumb img{ transform:scale(1.03); }
.news-card-body{ padding:1rem; }
.news-card-meta{ display:flex; align-items:center; gap:.5rem; color:var(--news-muted); font-size:.8rem; margin-bottom:.25rem; }
.news-card-dot{ opacity:.6; }
.news-card-title{ font-weight:800; margin:.25rem 0 .5rem 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-summary{ color:#4b5563; font-size:.925rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card-tags{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.news-chip{ display:inline-block; padding:.25rem .5rem; background:var(--news-chip-bg); border-radius:999px; font-size:.8rem; text-decoration:none; color:inherit; }
.news-chip:hover{ filter:brightness(0.97); }
.news-pagination{ margin-top:1.25rem; }
.news-empty{ padding:2rem 1rem; text-align:center; color:var(--news-muted); }

/* مساحة عامة للمحتوى تحت الهيدر وفوق الفوتر */
.app-main { min-height:40vh; }

/* ===== API Highlights ===== */
.api-section{ padding:24px 0 28px; background:transparent; }
.api-heading{
  margin:0 0 6px; text-align:center;
  font-weight:800; font-size:clamp(22px,3vw,32px); color:var(--api-ink);
}
.api-sub{ margin:0 0 22px; text-align:center; color:var(--api-muted); font-size:1rem; }
.api-cards{ display:grid; gap:var(--api-gap); grid-template-columns:1fr; }
@media (min-width:992px){ .api-cards{ grid-template-columns:1fr 1fr; } }
.api-card{ background:var(--api-card-bg); border:1px solid var(--api-card-bd); border-radius:var(--api-card-br); padding:24px; box-shadow:0 10px 20px rgba(0,0,0,.04); }
.api-title{ margin:0 0 12px; font-weight:800; color:var(--api-ink); font-size:clamp(18px,2.2vw,22px); }
.api-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; }
.api-list .check{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-inline-start:.35rem;
  border-radius:50%; background:rgba(37,99,235,.12); color:var(--api-accent); font-weight:700; line-height:1;
}
.api-list li{ color:var(--api-ink); }
.api-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.api-visual .api-figure{ margin:0; position:relative; }
.api-visual img{ width:100%; height:auto; display:block; border-radius:var(--api-card-br); }
.api-badge{
  position:absolute; inset-inline-start:16px; inset-block-end:16px;
  background:#fff; color:var(--api-ink);
  border:1px solid #e5e7eb; border-radius:14px; padding:10px 14px; box-shadow:0 8px 18px rgba(0,0,0,.08);
  font-size:.95rem;
}
.api-badge strong{ font-size:1.1rem; margin-inline-end:6px; }

/* ===== OTP Highlights ===== */
.otp-section{ padding:24px 0 28px; background:transparent; }
.otp-cards{ display:grid; gap:var(--otp-gap); grid-template-columns:1fr; align-items:stretch; }
@media (min-width:992px){ .otp-cards{ grid-template-columns:1fr 1fr; } }
.otp-card{ background:var(--otp-card-bg); border:1px solid var(--otp-card-bd); border-radius:var(--otp-radius); padding:24px; box-shadow:0 10px 20px rgba(0,0,0,.04); }
.otp-figure{ margin:0; position:relative; }
.otp-figure img{ width:100%; height:auto; display:block; border-radius:var(--otp-radius); }

.otp-heading{ margin:0 0 10px; font-weight:800; color:var(--otp-ink); font-size:clamp(18px,2.2vw,22px); }
.otp-sub{ margin:0 0 14px; color:var(--otp-muted); max-width:52ch; margin-inline:auto; }
.otp-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; width:fit-content; margin-inline:auto; text-align:right; }
.otp-list li{ display:flex; flex-direction:row-reverse; align-items:baseline; gap:.45rem; }
.otp-list .check{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:rgba(37,99,235,.12); color:var(--otp-accent); font-weight:700; line-height:1;
}
.otp-ctas{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* صورة البطاقة اليمنى وحجمها */
.otp-visual{ display:flex; align-items:center; justify-content:center; }
.otp-visual .otp-figure{ width:100%; display:flex; align-items:center; justify-content:center; }
.otp-visual .otp-figure img{
  max-width:100%; height:auto; object-fit:contain;
  max-height:var(--otp-img-max-desktop);
}
@media (max-width:992px){
  .otp-visual .otp-figure img{ max-height:var(--otp-img-max-mobile); }
}

/* البادج: على اليد يمينًا */
.otp-badge{
  position:absolute;
  inset-inline-end:12%;
  inset-block-end:18px;
  transform:none;
  background:#fff; color:var(--otp-ink);
  border:1px solid #e5e7eb; border-radius:14px; padding:10px 14px; box-shadow:0 8px 18px rgba(0,0,0,.08);
  display:inline-flex; align-items:baseline; gap:8px;
}
.otp-badge strong{ font-size:1.1rem; }
.otp-badge span{ font-size:.92rem; color:var(--otp-muted); }


/* (اختياري) موضع البادج مع الصورة الأصغر */
.otp-badge{
  inset-inline-start: 12px;
  inset-block-end: 12px;
}

/* === OTP: تصغير الصورة ووضع البادج على اليد === */
:root{
  --otp-img-max-desktop: 300px;  /* كان أكبر */
  --otp-img-max-mobile:  200px;
}
.otp-visual .otp-figure{ position: relative; }
.otp-badge{
  inset-inline-start: auto !important;
  inset-inline-end: 12% !important;
  inset-block-end: 18px !important;
  transform: none !important;
}

/* تقليل المسافة العمودية بين الأقسام (اختياري) */
.api-section, .otp-section{
  padding-block: clamp(2px, 0vw, 20px) !important;
}

/* === OTP: محاذاة المحتوى والأزرار لليمين =================== */
.otp-card { 
  direction: rtl !important;      /* يجعل التدفق يمين←يسار داخل البطاقة */
}

.otp-card .otp-list{
  text-align: right !important;   /* النصوص لليمين */
  margin: 0 !important;
  padding: 0 !important;
}

.otp-card .otp-list li{
  display: flex !important;
  flex-direction: row !important;  /* مع direction:rtl العنصر الأول يظهر يمين */
  align-items: flex-start !important;
  gap: .5rem !important;
}

.otp-card .otp-ctas{
  display: flex !important;
  justify-content: flex-start !important; /* start = يمين في RTL */
}

/* OTP: تباعد مريح بين القائمة والأزرار */
.otp-card .otp-list{
  margin: 0 0 16px !important;   /* مسافة أسفل القائمة */
  padding: 0 !important;
  text-align: right !important;
}

.otp-card .otp-ctas{
  display: flex !important;
  justify-content: flex-start !important; /* يمين في RTL */
  gap: 12px !important;                   /* مسافة بين الأزرار */
  margin-top: 6px !important;             /* لمسة تباعد إضافية */
}

.news-article-hero {
	margin: 1rem 0 1.25rem;
	border-radius: var(--news-radius);
	overflow: hidden;
	background: #f3f4f6;
}

.news-article-hero img {
	width: 100%;
	height: auto;
	display: block;
}

.news-article-header {
	margin-bottom: 1rem;
}

.news-article-title {
	font-weight: 800;
	font-size: 1.75rem;
	margin: 0 0 .5rem 0;
	color: var(--news-ink);
}
.news-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	color: var(--news-muted);
	font-size: .9rem;
}
.news-article-summary {
	font-size: 1.05rem;
	color: #374151;
	margin: 0 0 1rem 0;
}
.news-article-content {
	color: var(--news-ink);
	line-height: 1.9;
}