/*
=========================================================================
 Jawwy Travel Design — ورقة الأنماط الموحّدة (v1.2.0)
=========================================================================

 جدول المحتويات:
 ---------------------------------------------------------------------
 (أ)  :root ................... توكنز الألوان والخطوط العامة
 (1)  Base ..................... أساسيات الموقع (html/body/typography)
 (2)  Sections / General ....... مكوّنات عامة (أزرار/عناوين/eyebrow)
 (3)  Header ................... الهيدر الثابت + قائمة الموبايل
 (4)  Hero ..................... واجهة الصفحة الرئيسية
 (5)  About .................... قسم "من نحن"
 (6)  Destinations ............. بطاقات الوجهات
 (7)  Services ................. قسم الخدمات (التابات)
 (8)  Offers ................... قسم العروض
 (9)  Banners / Why / Steps ..... اللافتات/لماذا جوي/خطوات الرحلة
 (10) Stats / Reviews / FAQ ..... الأرقام/آراء العملاء/الأسئلة الشائعة
 (11) CTA / Page Hero .......... دعوات الحجز + واجهات الصفحات الداخلية
 (12) Service Tabs / Feature ... لوحة تفاصيل الخدمة
 (13) Blog ..................... شبكة المدونة + الفلترة/البحث
 (14) Newsletter ............... قسم النشرة البريدية (النسخة العامة)
 (15) Footer ................... الفوتر + السوشيال + بيانات التواصل
 (16) Dialog / Booking Popup ... حوارات الحجز/المعلومات/اللايت بوكس
 (17) Responsive - Tablet ...... تعديلات التابلت (≤1023px)
 (18) Responsive - Mobile ...... تعديلات الموبايل (≤640px)
 (19) Reduced Motion ........... احترام تفضيل قلل الحركة
 (20) Typography ............... تحسينات الخطوط
 (21) New Sections ............. أقسام إضافية (v1.1.x)
 (22) English .................. تعديلات اتجاه النسخة الإنجليزية
 (23) Additional Components .... مكوّنات إضافية
 (24) New Sections Responsive .. ريسبونسف الأقسام الجديدة
 (25) FIX ...................... إزالة الفراغات حول النماذج
 (26) Single Article Page ...... صفحة المقال المنفرد (جديد 1.2.0)
       ويعقبه توكنز jy- الخاصة بصفحة المقال + ريسبونسف خاص بها
 ---------------------------------------------------------------------
 ملاحظة: الصفحات تُبنى كودجات HTML داخل Elementor (من pages.json)،
 وكل التنسيق يبقى هنا — عدّل بحذر وراجع README.txt بعد التعديل.
=========================================================================
*/

/* (أ) توكنز التصميم الرئيسية — تُستخدم في كل الأقسام أدناه */
:root {
  --jawy-navy: #0d1f4c;      /* الكحلي: العناوين والأقسام الداكنة */
  --jawy-blue: #1e4094;      /* الأزرق: التدرّجات الداكنة الثانوية */
  --jawy-gold: #c8a428;      /* الذهبي: لون الهوية والتأكيدات */
  --jawy-muted: #7e8bb1;     /* النصوص الثانوية/الفقرات */
  --jawy-pale: #f7f8ff;      /* خلفية فاتحة مايلة للبنفسجي */
  --jawy-gradient: linear-gradient(135deg, #e0bc55, #c8a428); /* تدرّج الأزرار الذهبية */
}

/* =========================================================
   Base
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

.jawy-site {
  margin: 0;
  background: #fff;
  color: var(--jawy-navy);
  font: 400 16px/1.8 Cairo, sans-serif;
  direction: rtl;
}

.jawy-site * {
  box-sizing: border-box;
}

.jawy-site h1,
.jawy-site h2,
.jawy-site h3,
.jawy-site h4,
.jawy-site p {
  margin: 0;
}

.jawy-site button,
.jawy-site input,
.jawy-site textarea {
  font: inherit;
}

.jawy-site button,
.jawy-site a {
  -webkit-tap-highlight-color: transparent;
}

.jawy-site a {
  color: inherit;
  text-decoration: none;
}

.jawy-site button {
  cursor: pointer;
}

.jawy-site button:focus-visible,
.jawy-site a:focus-visible,
.jawy-site input:focus-visible,
.jawy-site textarea:focus-visible,
.jawy-site summary:focus-visible {
  outline: 3px solid #cfaa32;
  outline-offset: 4px;
}

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

.jawy-site em {
  font-style: normal;
  color: var(--jawy-gold);
}

.jawy-wrap {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding-inline: 32px;
}

.jawy-site h2 {
  font-size: 40px;
  line-height: 1.5;
  font-weight: 900;
}

.jawy-site h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;
}

.jawy-site p {
  color: var(--jawy-muted);
}

.jawy-site .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.jawy-site .elementor-widget-wrap {
  padding: 0 !important;
}

.jawy-site .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: none;
}

.jawy-site .elementor-widget-html,
.jawy-site .elementor-column,
.jawy-site .elementor-widget-container {
  width: 100%;
}

.jawy-site .elementor-element {
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
}

/* =========================================================
   Sections / General Components
   ========================================================= */

.jawy-section {
  padding: 96px 0;
}

.jawy-pale {
  background: var(--jawy-pale);
}

.jawy-bluepale {
  background: #eff4ff;
}

.jawy-heading {
  text-align: center;
  margin: 0 auto 56px;
}

.jawy-heading p {
  margin-top: 16px;
}

.jawy-eyebrow {
  display: block;
  color: var(--jawy-gold);
  font-size: 13px;
  letter-spacing: 1.4px;
  font-weight: 800;
  margin-bottom: 12px;
}

.jawy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: 0;
  border-radius: 50px;
  background: var(--jawy-gradient);
  color: var(--jawy-navy) !important;
  box-shadow: 0 4px 14px #c8a42840;
  font-weight: 800 !important;
  line-height: 1.7;
  transition: transform 0.2s, box-shadow 0.2s;
}

.jawy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #c8a42855;
}

.jawy-small {
  padding: 10px 22px;
  font-size: 13px !important;
}

.jawy-outline {
  background: transparent;
  border: 2px solid var(--jawy-blue);
  box-shadow: none;
  color: var(--jawy-blue) !important;
}

.jawy-white-outline {
  background: transparent;
  border: 2px solid #ffffffb3;
  box-shadow: none;
  color: white !important;
}

.jawy-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}

.jawy-actions.center {
  justify-content: center;
}

.jawy-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--jawy-blue);
  font-weight: 700;
  font-size: 14px;
}

/* =========================================================
   Header
   ========================================================= */

.jawy-header {
  height: 80px;
  background: white;
  position: relative;
  z-index: 20;
  box-shadow: 0 2px 15px #0d1f4c0c;
}

.jawy-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 24px;
}

.jawy-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  line-height: 1.3;
}

.jawy-brand img {
  width: 51px;
  height: 60px;
  object-fit: contain;
}

.jawy-brand strong {
  font-size: 16px;
  display: block;
  font-weight: 900;
}

.jawy-brand small {
  font-size: 11px;
  display: block;
  margin-top: 3px;
}

.jawy-header nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.jawy-header nav a,
.jawy-header nav button {
  font-size: 14px;
  white-space: nowrap;
}

.jawy-header nav button {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
}

.jawy-header nav a:hover,
.jawy-header nav button:hover {
  color: var(--jawy-gold);
}

.jawy-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.jawy-language {
  border: 1px solid #bdc9e6;
  border-radius: 50px;
  background: white;
  color: var(--jawy-blue);
  font-size: 12px !important;
  padding: 6px 12px;
}

.jawy-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid #dce2f0;
  border-radius: 8px;
  color: var(--jawy-navy);
  font-size: 24px !important;
  padding: 2px 10px;
}

.jawy-skip {
  position: absolute;
  top: -100px;
  z-index: 100;
  background: white;
  padding: 12px;
}

.jawy-skip:focus {
  top: 0;
}

.jawy-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Hero
   ========================================================= */

.jawy-hero {
  position: relative;
  background:
    linear-gradient(140deg, #0d1f4c77, #0d1f4c99),
    url('assets/hero.webp') center / cover;
  color: white;
  min-height: 823px;
  padding: 104px 0 128px;
  overflow: hidden;
}

.jawy-hero:after {
  content: '';
  position: absolute;
  bottom: -26px;
  left: -3%;
  width: 106%;
  height: 60px;
  background: var(--jawy-pale);
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  transform: rotate(-1.5deg);
}

.jawy-hero h1 {
  font-size: 56px;
  line-height: 1.4;
  font-weight: 900;
  max-width: 650px;
  margin: 24px 0 12px;
}

.jawy-hero p {
  color: #ffffffa6;
  max-width: 512px;
  line-height: 1.8;
}

.jawy-trust {
  display: inline-block;
  padding: 7px 16px;
  background: #ffffff1f;
  border: 1px solid #ffffff33;
  border-radius: 40px;
  font-size: 12px;
  color: #ffffffdd;
}

.jawy-trust:before {
  content: '●';
  color: var(--jawy-gold);
  padding-left: 8px;
}

.jawy-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 672px;
  margin-top: 64px;
}

.jawy-hero-stat {
  text-align: center;
  background: #ffffff1f;
  border: 1px solid #ffffff33;
  border-radius: 16px;
  padding: 16px 12px;
  backdrop-filter: blur(16px);
}

.jawy-hero-stat b {
  display: block;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 900;
}

.jawy-hero-stat span {
  display: block;
  color: #ffffffb3;
  font-size: 14px;
}

.jawy-hero-stat i {
  font-style: normal;
  font-size: 24px;
  display: block;
}

/* =========================================================
   About
   ========================================================= */

.jawy-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.jawy-about p {
  margin-top: 24px;
  line-height: 2;
  font-size: 16px;
}

.jawy-shortline {
  width: 64px;
  height: 4px;
  background: var(--jawy-gold);
  margin-top: 20px;
}

.jawy-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.jawy-benefit {
  background: white;
  border: 1px solid #e7ebf6;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px #0d1f4c05;
}

.jawy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #e9effc;
  font-size: 28px;
  flex-shrink: 0;
}

.jawy-benefit .jawy-icon {
  width: 48px;
  height: 48px;
  font-size: 24px;
}

.jawy-benefit h3 {
  font-size: 18px;
  margin: 12px 0 4px;
}

.jawy-benefit p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* =========================================================
   Destinations
   ========================================================= */

.jawy-destinations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px;
  gap: 16px;
}

.jawy-destination {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  display: block !important;
  border: 0;
  background: var(--jawy-navy);
  color: white !important;
  text-align: right;
}

.jawy-destination img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.jawy-destination:hover img {
  transform: scale(1.035);
}

.jawy-destination:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0d1f4cb3, transparent 70%);
}

.jawy-destination > div {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  right: 20px;
  left: 20px;
}

.jawy-destination p {
  color: #fff9;
  font-size: 14px;
}

.jawy-destination.tall {
  grid-row: span 2;
}

.jawy-destination.wide {
  grid-column: span 2;
}

.jawy-dest-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.jawy-dest-bottom .jawy-destination {
  height: 208px;
}

/* =========================================================
   Services
   ========================================================= */

.jawy-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.jawy-service-card {
  background: white;
  border: 1px solid #eef1f8;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 5px 20px #0d1f4c06;
}

.jawy-service-card h3 {
  margin: 16px 0 8px;
}

.jawy-service-card p {
  font-size: 14px;
  line-height: 2;
}

.jawy-service-card .jawy-link {
  display: block;
  margin-top: 16px;
}

.jawy-badge {
  display: table;
  background: var(--jawy-blue);
  color: white;
  border-radius: 50px;
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 700;
  margin: 16px 0 0;
}

.jawy-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.jawy-tags span {
  background: #eff4ff;
  border-radius: 30px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--jawy-blue);
}

/* =========================================================
   Offers
   ========================================================= */

.jawy-offers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.jawy-offer {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 20px #0d1f4c10;
  background: white;
  position: relative;
  border: 1px solid #f0f2f7;
}

.jawy-offer img {
  height: 208px;
  width: 100%;
  object-fit: cover;
}

.jawy-offer .jawy-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}

.jawy-offer-content {
  padding: 20px;
}

.jawy-offer p {
  font-size: 13px;
}

.jawy-offer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.jawy-price strong {
  font-size: 22px;
  display: block;
}

.jawy-price small {
  font-size: 11px;
  color: var(--jawy-muted);
}

.jawy-offer .jawy-btn {
  padding: 7px 15px;
  font-size: 12px !important;
}

/* =========================================================
   Banners / Why / Steps
   ========================================================= */

.jawy-banner {
  padding: 100px 0;
  background:
    linear-gradient(110deg, #0d1f4cbb, #16366ac7),
    url('assets/promo.webp') center / cover;
  text-align: center;
  color: white;
}

.jawy-banner p {
  max-width: 600px;
  margin: 20px auto 0;
  color: #ffffffa6;
}

.jawy-why-image {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
}

.jawy-why-image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 20px;
}

.jawy-floating {
  position: absolute;
  bottom: -24px;
  left: -30px;
  background: white;
  box-shadow: 0 12px 30px #0d1f4c33;
  padding: 20px 28px;
  border-radius: 16px;
  font-size: 13px;
}

.jawy-floating strong {
  font-size: 40px;
  color: var(--jawy-gold);
  display: block;
  line-height: 1.3;
}

.jawy-why-list {
  margin-top: 40px;
  display: grid;
  gap: 24px;
}

.jawy-why-list > div {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.jawy-why-list .jawy-icon {
  background: var(--jawy-gradient);
  width: 42px;
  height: 42px;
  font-size: 18px;
  border-radius: 8px;
}

.jawy-why-list h3 {
  font-size: 17px;
}

.jawy-why-list p {
  font-size: 13px;
  margin-top: 5px;
}

.jawy-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.jawy-step {
  text-align: center;
  position: relative;
}

.jawy-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--jawy-blue);
  color: white;
  border-radius: 50%;
  font-size: 24px;
  margin-bottom: 20px;
}

.jawy-step h3 {
  font-size: 17px;
}

.jawy-step p {
  font-size: 13px;
  margin-top: 8px;
}

/* =========================================================
   Stats / Reviews / FAQ
   ========================================================= */

.jawy-statbar {
  background: linear-gradient(135deg, #102350, #1e4094);
  padding: 64px 0;
  color: var(--jawy-gold);
}

.jawy-statbar .jawy-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.jawy-statbar strong {
  display: block;
  font-size: 40px;
  font-weight: 900;
}

.jawy-statbar p {
  font-size: 14px;
  color: #ffffff90;
}

.jawy-review {
  background: white;
  border: 1px solid #e6eaf3;
  border-radius: 16px;
  padding: 28px;
}

.jawy-stars {
  color: var(--jawy-gold);
  direction: ltr;
  text-align: right;
  letter-spacing: 3px;
}

.jawy-review p {
  font-size: 14px;
  margin: 16px 0 24px;
  line-height: 2;
}

.jawy-person {
  display: flex;
  gap: 12px;
  align-items: center;
}

.jawy-avatar {
  border-radius: 50%;
  background: var(--jawy-blue);
  color: white;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.jawy-person strong {
  display: block;
  font-size: 13px;
}

.jawy-person small {
  color: var(--jawy-muted);
  font-size: 11px;
}

.jawy-faq {
  max-width: 832px;
  margin: auto;
  display: grid;
  gap: 12px;
}

.jawy-faq details {
  border: 1px solid #e7ebf6;
  border-radius: 12px;
  background: white;
}

.jawy-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 24px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.jawy-faq summary::-webkit-details-marker {
  display: none;
}

.jawy-faq summary:before {
  content: '+';
  color: var(--jawy-gold);
  font-size: 24px;
  font-weight: 400;
}

.jawy-faq details[open] summary:before {
  content: '−';
}

.jawy-faq details p {
  padding: 0 24px 24px;
  font-size: 14px;
  line-height: 2;
}

.jawy-faq details[open] {
  box-shadow: 0 5px 20px #0d1f4c10;
}

/* =========================================================
   CTA / Page Hero
   ========================================================= */

.jawy-final {
  background-image:
    linear-gradient(110deg, #0d1f4cbd, #16366acb),
    url('assets/cta.webp');
  padding: 112px 0;
}

.jawy-final h2 {
  font-size: 48px;
  line-height: 1.4;
}

.jawy-page-hero {
  height: 304px;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  background:
    linear-gradient(110deg, #0d1f4ccc, #16366acc),
    url('assets/services-hero.webp') center / cover;
}

.jawy-page-hero h1 {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.5;
}

.jawy-page-hero p {
  color: #ffffff80;
  font-size: 13px;
  margin: 8px auto;
  max-width: 650px;
}

.jawy-breadcrumb {
  font-size: 12px;
  color: #ffffff9c;
  margin-top: 16px;
}

.jawy-blog-hero {
  background-image:
    linear-gradient(110deg, #0d1f4ccc, #16366acc),
    url('assets/blog-hero.webp');
}

/* =========================================================
   Service Tabs / Feature
   ========================================================= */

.jawy-service-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.jawy-service-tabs button,
.jawy-filter button {
  border: 1px solid #dce3f4;
  border-radius: 40px;
  background: white;
  font-size: 13px;
  color: var(--jawy-navy);
  padding: 8px 20px;
}

.jawy-service-tabs button[aria-selected=true],
.jawy-filter button[aria-pressed=true] {
  background: var(--jawy-gradient);
  border-color: transparent;
  box-shadow: 0 4px 14px #c8a42840;
}

.jawy-service-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  background: white;
  overflow: hidden;
  box-shadow: 0 16px 40px #0d1f4c2b;
  min-height: 528px;
}

.jawy-service-feature-content {
  padding: 48px;
}

.jawy-service-feature-content h2 {
  font-size: 26px;
  margin: 16px 0;
}

.jawy-service-feature-content p {
  font-size: 15px;
  line-height: 2;
}

.jawy-service-feature img {
  width: 100%;
  height: 100%;
  max-height: 570px;
  object-fit: cover;
}

.jawy-checks {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  font-size: 13px;
  color: var(--jawy-muted);
}

.jawy-checks li {
  margin: 5px 0;
}

.jawy-checks li:before {
  content: '✓';
  background: var(--jawy-blue);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 10px;
  font-size: 11px;
}

.jawy-dark-steps {
  background: linear-gradient(135deg, #102350, #1e4094);
  color: white;
}

.jawy-dark-steps .jawy-step {
  border: 1px solid #ffffff30;
  background: #ffffff1f;
  padding: 24px;
  border-radius: 14px;
}

.jawy-dark-steps .jawy-step b {
  width: 48px;
  height: 48px;
  background: var(--jawy-gradient);
  color: var(--jawy-navy);
  font-size: 14px;
}

.jawy-dark-steps .jawy-step p {
  color: #ffffff80;
}

.jawy-dark-steps .jawy-step i {
  display: block;
  font-style: normal;
  font-size: 22px;
  margin-bottom: 12px;
}

.jawy-cta-small {
  text-align: center;
  padding: 64px 0;
  background: var(--jawy-pale);
}

.jawy-cta-small h2 {
  font-size: 32px;
}

.jawy-cta-small p {
  margin: 16px 0;
}

/* =========================================================
   Blog
   ========================================================= */

.jawy-featured-label {
  color: var(--jawy-gold);
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-align: left;
}

.jawy-featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  background: white;
  box-shadow: 0 16px 40px #0d1f4c29;
}

.jawy-featured-post > img {
  width: 100%;
  height: 392px;
  object-fit: cover;
}

.jawy-featured-post > div {
  padding: 64px 48px;
}

.jawy-featured-post h2 {
  font-size: 26px;
  line-height: 1.5;
  margin: 16px 0;
}

.jawy-featured-post p {
  font-size: 15px;
  line-height: 2;
}

.jawy-meta {
  font-size: 11px;
  color: #93a0bc;
}

.jawy-blog-tools {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.jawy-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jawy-filter button {
  background: #eff4ff;
  border: 0;
  padding: 6px 16px;
}

.jawy-search {
  border: 1px solid #dce3f4;
  border-radius: 12px;
  padding: 8px 14px;
  max-width: 240px;
  font-size: 13px !important;
  background: white;
  color: var(--jawy-navy);
}

.jawy-post {
  border: 1px solid #e2e6f0;
  border-radius: 18px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 2px #0d1f4c1c;
  position: relative;
  display: flex;
  flex-direction: column;
}

.jawy-post[hidden] {
  display: none;
}

.jawy-post img {
  width: 100%;
  height: 208px;
  object-fit: cover;
}

.jawy-post .jawy-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  margin: 0;
}

.jawy-post-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.jawy-post h3 {
  font-size: 17px;
  margin: 12px 0;
  line-height: 1.5;
}

.jawy-post p {
  font-size: 13px;
  line-height: 1.9;
}

.jawy-post-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
}

.jawy-post-bottom .jawy-person {
  font-size: 11px;
  color: var(--jawy-muted);
  gap: 8px;
}

.jawy-post-bottom .jawy-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.jawy-post-bottom button {
  font-size: 11px;
}

.jawy-no-results {
  padding: 50px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* =========================================================
   Newsletter
   ========================================================= */

.jawy-news-section {
  background: linear-gradient(135deg, #102350, #1e4094);
  padding: 80px 0;
  text-align: center;
  color: white;
}

.jawy-news-section h2 {
  font-size: 36px;
}

.jawy-news-section p {
  color: #ffffff80;
  margin: 20px 0 30px;
}

.jawy-news-section .jawy-newsletter {
  max-width: 460px;
  margin: auto;
}

.jawy-mail-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

/* =========================================================
   Footer
   ========================================================= */

.jawy-footer {
  background: linear-gradient(160deg, #0e204c, #060f29);
  color: white;
  padding: 64px 0 24px;
}

.jawy-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 40px;
}

.jawy-footer p {
  font-size: 14px;
  color: #ffffff66;
  line-height: 2;
}

.jawy-footer-brand > p {
  margin-top: 20px;
}

.jawy-footer .jawy-label {
  font-size: 12px;
  margin-top: 24px;
  color: #ffffffb3;
}

.jawy-footer h3 {
  font-size: 16px;
  border-right: 4px solid var(--jawy-gold);
  padding-right: 8px;
  margin-bottom: 20px;
}

.jawy-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.jawy-footer li {
  font-size: 13px;
  color: #ffffff70;
}

.jawy-footer li:before {
  content: '←';
  color: var(--jawy-gold);
  margin-left: 6px;
}

.jawy-footer button:not(.jawy-btn) {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

.jawy-footer a:hover,
.jawy-footer button:hover {
  color: var(--jawy-gold);
}

.jawy-newsletter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.jawy-newsletter input[type=email] {
  width: 0;
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border: 1px solid #ffffff26;
  background: #ffffff14;
  border-radius: 10px;
  color: white;
  font-size: 13px;
}

.jawy-newsletter input::placeholder {
  color: #ffffff55;
}

.jawy-newsletter .jawy-small {
  padding: 8px 16px;
  font-size: 12px !important;
}

.jawy-form-message {
  flex-basis: 100%;
  font-size: 13px;
}

.jawy-form-message:empty {
  display: none;
}

.jawy-social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.jawy-social button {
  border: 1px solid #ffffff26 !important;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
}

.jawy-contact {
  font-size: 13px;
  margin: 0;
}

.jawy-contact dt {
  font-size: 11px;
  color: #ffffff66;
  margin-top: 14px;
}

.jawy-contact dt:first-child {
  margin-top: 0;
}

.jawy-contact dd {
  margin: 2px 0 0;
  line-height: 1.8;
}

.jawy-footer-bottom {
  border-top: 1px solid #ffffff14;
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  color: #ffffff45;
}

.jawy-footer-bottom > div {
  display: flex;
  gap: 16px;
}

.jawy-footer-bottom p {
  font-size: 11px;
  color: #ffffff45;
}

/* =========================================================
   Dialog / Booking Popup
   ========================================================= */

.jawy-dialog {
  position: relative;

  border: 0;
  border-radius: 22px;

  max-width: 580px;
  width: calc(100% - 32px);
  max-height: 90vh;

  overflow: auto;

  color: var(--jawy-navy);
  background: white;

  padding: 40px;

  font: 400 14px/1.8 Cairo, sans-serif;
  direction: rtl;

  box-shadow: 0 20px 80px #0004;
}

.jawy-dialog::backdrop {
  background: #071535bb;
  backdrop-filter: blur(4px);
}

.jawy-dialog h2 {
  font-size: 28px;
}

.jawy-dialog p {
  margin: 12px 0;
}

/*
 * Booking / Info dialog close button
 * ---------------------------------------------------------
 * The larger hit area prevents pointer-click issues while
 * preserving the original visual appearance of the X.
 */

.jawy-close {
  position: absolute;
  top: 10px;
  left: 15px;

  z-index: 1000;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;

  background: transparent;
  color: var(--jawy-navy);

  font-family: inherit;
  font-size: 28px !important;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;
  pointer-events: auto;

  appearance: none;
  -webkit-appearance: none;
}

.jawy-close:hover {
  color: var(--jawy-blue);
}

.jawy-close:focus-visible {
  outline: 3px solid #cfaa32;
  outline-offset: 2px;
  border-radius: 8px;
}

.jawy-dialog form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.jawy-dialog label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.jawy-dialog input,
.jawy-dialog textarea {
  width: 100%;
  border: 1px solid #dce3f4;
  border-radius: 9px;
  padding: 9px 12px;
  background: #f9faff;
  color: var(--jawy-navy);
}

.jawy-dialog small {
  font-size: 11px;
  color: var(--jawy-muted);
}

.jawy-info-content img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
}

.jawy-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Responsive - Tablet
   ========================================================= */

@media (min-width: 1600px) {
  .jawy-hero {
    min-height: 823px;
  }
}

@media (max-width: 1024px) {
  .jawy-header nav {
    gap: 14px;
  }

  .jawy-header nav a,
  .jawy-header nav button {
    font-size: 12px;
  }

  .jawy-header-actions .jawy-btn {
    padding: 8px 14px;
  }

  .jawy-two {
    gap: 36px;
  }

  .jawy-offers {
    grid-template-columns: repeat(2, 1fr);
  }

  .jawy-footer-grid {
    gap: 24px;
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .jawy-footer-brand {
    grid-column: 1 / -1;
    max-width: 650px;
  }

  .jawy-grid3 {
    gap: 18px;
  }

  .jawy-service-card {
    padding: 24px;
  }

  .jawy-featured-post > div {
    padding: 32px;
  }

  .jawy-hero h1 {
    font-size: 48px;
  }
}

/* =========================================================
   Responsive - Mobile
   ========================================================= */

@media (max-width: 767px) {
  .jawy-wrap {
    padding-inline: 20px;
  }

  .jawy-header,
  .jawy-header-inner {
    height: 72px;
  }

  .jawy-brand {
    gap: 8px;
  }

  .jawy-brand img {
    width: 34px;
    height: 44px;
  }

  .jawy-brand strong {
    font-size: 14px;
  }

  .jawy-brand small {
    font-size: 9px;
  }

  .jawy-header-inner {
    gap: 10px;
  }

  .jawy-header-actions .jawy-btn {
    font-size: 10px !important;
    padding: 8px 12px;
  }

  .jawy-header-actions {
    gap: 6px;
    margin-right: auto;
  }

  .jawy-language {
    display: none;
  }

  .jawy-menu-toggle {
    display: block;
    order: 3;
  }

  .jawy-header nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: white;
    padding: 24px;
    box-shadow: 0 15px 25px #0d1f4c15;
    align-items: stretch;
    gap: 16px;
  }

  .jawy-header nav.open {
    display: flex;
    flex-direction: column;
  }

  .jawy-header nav a,
  .jawy-header nav button {
    font-size: 16px;
    text-align: right;
  }

  .jawy-section {
    padding: 64px 0;
  }

  .jawy-site h2 {
    font-size: 29px;
  }

  .jawy-heading {
    margin-bottom: 32px;
  }

  .jawy-heading p {
    font-size: 14px;
  }

  .jawy-hero {
    min-height: 760px;
    padding: 72px 0 100px;
    background-position: 40% center;
  }

  .jawy-hero h1 {
    font-size: 36px;
    line-height: 1.55;
    margin-top: 28px;
  }

  .jawy-hero p {
    font-size: 14px;
  }

  .jawy-hero .jawy-actions {
    gap: 10px;
  }

  .jawy-hero .jawy-btn {
    padding: 12px 20px;
    font-size: 13px;
  }

  .jawy-hero-stats {
    gap: 8px;
    margin-top: 44px;
  }

  .jawy-hero-stat {
    padding: 14px 4px;
  }

  .jawy-hero-stat b {
    font-size: 20px;
  }

  .jawy-hero-stat span {
    font-size: 11px;
  }

  .jawy-two {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .jawy-about p {
    font-size: 14px;
  }

  .jawy-benefit {
    padding: 16px;
  }

  .jawy-benefit h3 {
    font-size: 16px;
  }

  .jawy-benefit p {
    font-size: 12px;
  }

  .jawy-grid3 {
    grid-template-columns: 1fr;
  }

  .jawy-destinations {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }

  .jawy-destination.tall {
    grid-row: span 2;
  }

  .jawy-destination.wide {
    grid-column: span 2;
  }

  .jawy-dest-bottom .jawy-destination {
    height: 170px;
  }

  .jawy-destination h3 {
    font-size: 18px;
  }

  .jawy-destination p {
    font-size: 11px;
  }

  .jawy-destination > div {
    right: 14px;
    bottom: 14px;
  }

  .jawy-offers {
    gap: 16px;
  }

  .jawy-offer img {
    height: 150px;
  }

  .jawy-offer-content {
    padding: 14px;
  }

  .jawy-offer h3 {
    font-size: 17px;
  }

  .jawy-offer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 12px;
  }

  .jawy-price strong {
    font-size: 21px;
  }

  .jawy-banner {
    padding: 80px 0;
  }

  .jawy-why-image img {
    height: 430px;
  }

  .jawy-floating {
    left: 0;
    bottom: -15px;
    padding: 14px 22px;
  }

  .jawy-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }

  .jawy-step p {
    font-size: 12px;
  }

  .jawy-statbar {
    padding: 48px 0;
  }

  .jawy-statbar strong {
    font-size: 28px;
  }

  .jawy-statbar p {
    font-size: 11px;
  }

  .jawy-statbar .jawy-wrap {
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }

  .jawy-faq summary {
    font-size: 14px;
    padding: 18px;
  }

  .jawy-faq details p {
    font-size: 13px;
  }

  .jawy-page-hero {
    height: 270px;
  }

  .jawy-page-hero h1 {
    font-size: 36px;
  }

  .jawy-service-feature {
    grid-template-columns: 1fr;
  }

  .jawy-service-feature-content {
    padding: 28px;
  }

  .jawy-service-feature img {
    height: 280px;
    order: 2;
  }

  .jawy-service-tabs {
    gap: 8px;
    margin-bottom: 28px;
  }

  .jawy-service-tabs button {
    padding: 6px 12px;
    font-size: 11px;
  }

  .jawy-featured-post {
    grid-template-columns: 1fr;
  }

  .jawy-featured-post > img {
    height: 260px;
    order: -1;
  }

  .jawy-featured-post > div {
    padding: 28px;
  }

  .jawy-featured-post h2 {
    font-size: 23px;
  }

  .jawy-featured-label {
    text-align: right;
  }

  .jawy-blog-tools {
    gap: 20px;
  }

  .jawy-search {
    max-width: 100%;
    width: 100%;
    order: -1;
  }

  .jawy-filter {
    gap: 7px;
  }

  .jawy-filter button {
    font-size: 11px;
    padding: 6px 12px;
  }

  .jawy-post img {
    height: 230px;
  }

  .jawy-news-section {
    padding: 64px 0;
  }

  .jawy-news-section h2 {
    font-size: 28px;
  }

  .jawy-footer {
    padding-top: 48px;
  }

  .jawy-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  .jawy-footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .jawy-contact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
  }

  .jawy-contact dt {
    margin: 0;
  }

  .jawy-contact dd {
    margin: 0;
  }

  .jawy-footer-bottom {
    flex-direction: column;
    margin-top: 32px;
    gap: 16px;
  }

  .jawy-footer-bottom > div {
    gap: 12px;
    flex-wrap: wrap;
  }

  /*
   * Dialog mobile
   * Keep original spacing while preserving the larger X hit area.
   */

  .jawy-dialog {
    padding: 32px 24px;
  }

  .jawy-close {
    top: 8px;
    left: 10px;
    width: 40px;
    height: 40px;
  }

  .jawy-news-section p {
    font-size: 14px;
  }

  .jawy-review {
    padding: 24px;
  }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .jawy-site * {
    transition: none !important;
  }
}

/* =========================================================
   Typography
   ========================================================= */

.jawy-site h1,
.jawy-site h2,
.jawy-site h3,
.jawy-site h4 {
  font-family: Cairo, sans-serif;
  letter-spacing: normal;
}

.jawy-footer .jawy-social button:disabled {
  cursor: default;
  opacity: 0.65;
}

/* =========================================================
   New Sections
   ========================================================= */

.jawy-new-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.jawy-new-split > img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 24px;
}

.jawy-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.jawy-new-card {
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 8px 32px #10234a08;
}

.jawy-new-card > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
}

.jawy-new-card h2 {
  font-size: 25px;
}

.jawy-new-cta {
  background: #0d1f4c;
  border-radius: 24px;
  padding: 55px;
  text-align: center;
  color: white;
}

.jawy-new-cta h2 {
  color: white;
}

.jawy-contact-form {
  padding: 36px;
  border: 1px solid #e4e8ef;
  border-radius: 24px;
  background: #f8f9fc;
  display: grid;
  gap: 18px;
}

.jawy-contact-form label {
  display: grid;
  gap: 7px;
}

.jawy-contact-form input,
.jawy-contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dbe0e9;
  border-radius: 10px;
  font: inherit;
  background: white;
}

.jawy-contact-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 18px;
  margin-top: 24px;
}

/* =========================================================
   English
   ========================================================= */

html[lang=en] .jawy-hero {
  text-align: left;
}

html[lang=en] .jawy-header-inner {
  gap: 20px;
}

html[lang=en] #jawy-navigation {
  gap: 20px;
}

html[lang=en] .jawy-brand strong {
  font-size: 20px;
}

html[lang=en] .jawy-footer {
  text-align: left;
}

html[lang=en] .jawy-checks li {
  padding-left: 25px;
  padding-right: 0;
}

html[lang=en] .jawy-checks li:before {
  left: 0;
  right: auto;
}

html[lang=en] body.jawy-site {
  direction: ltr;
}

html[lang=en] .jawy-hero h1,
html[lang=en] .jawy-hero p {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

html[lang=en] .jawy-hero .jawy-btn {
  margin-top: 24px;
}

html[lang=en] .jawy-header .jawy-language {
  min-width: 62px;
}

/* =========================================================
   Additional Components
   ========================================================= */

.jawy-soft {
  background: var(--jawy-pale);
}

.jawy-new-split p {
  margin-top: 18px;
}

.jawy-new-split .jawy-btn {
  margin-top: 24px;
}

.jawy-new-card p {
  margin: 12px 0 20px;
}

.jawy-new-card h2 {
  font-size: 25px;
}

.jawy-new-cta p {
  margin: 16px 0 24px;
  color: #d7deed;
}

/* =========================================================
   New Sections - Responsive
   ========================================================= */

@media (max-width: 800px) {
  .jawy-new-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .jawy-new-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jawy-new-split > img {
    height: 300px;
  }

  .jawy-contact-form {
    padding: 24px;
  }

  .jawy-new-cta {
    padding: 32px 20px;
  }
}

@media (max-width: 540px) {
  .jawy-new-grid {
    grid-template-columns: 1fr;
  }

  html[lang=en] .jawy-header-actions .jawy-btn {
    display: none;
  }

  .jawy-new-card {
    padding: 20px;
  }

  .jawy-header-actions .jawy-language {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 36px;
    font-size: 11px;
  }

  .jawy-header-actions .jawy-btn {
    display: none !important;
  }

  .jawy-header-inner {
    gap: 10px;
  }
}
/* =========================================================
   FIX: Remove unwanted empty space around forms
   ========================================================= */

.jawy-dialog,
.jawy-dialog *,
.jawy-contact,
.jawy-contact *,
.jawy-form,
.jawy-form * {
  box-sizing: border-box;
}

.jawy-dialog {
  width: min(580px, calc(100vw - 32px)) !important;
  max-width: 580px !important;
  min-width: 0 !important;
}

.jawy-dialog form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.jawy-dialog label {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.jawy-dialog input,
.jawy-dialog textarea,
.jawy-dialog select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Prevent generic grid/flex rules from creating an empty column */
.jawy-dialog form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Close button stays inside the dialog */
.jawy-dialog .jawy-close {
  position: absolute !important;
  top: 10px !important;
  left: 15px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

/* Contact page form */
.jawy-contact form,
.jawy-contact-form,
.jawy-contact form > *,
.jawy-contact-form > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.jawy-contact form,
.jawy-contact-form {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Remove accidental empty grid/flex columns */
.jawy-contact,
.jawy-contact-form {
  overflow: hidden;
}

@media (max-width: 767px) {
  .jawy-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .jawy-dialog .jawy-close {
    top: 8px !important;
    left: 10px !important;
  }
}
/* =========================================================
   Single Article Page — صفحة المقال المنفرد (جديد 1.2.0)
   =========================================================
   خريطة الأقسام:
   10.1) توكنز خاصة بصفحة المقال
   10.2) شريط تقدم القراءة .jy-progress
   10.3) هيرو المقال .jy-hero
   10.4) جسم المقال والتخطيط .jy-body/.jy-layout
   10.5) تنسيقات المحتوى .jy-prose (+ callouts)
   10.6) عناصر ما بعد المقال (نهاية/وسوم/الكاتب)
   10.7) السايدبار: TOC + المشاركة + CTA
   10.8) جدول محتويات الموبايل .jy-toc-mobile
   10.9) التنقل بين المقالات .jy-postnav
   10.10) مقالات ذات صلة .jy-related
   10.11) دعوة النشرة .jy-news
   10.12) عناصر عائمة: .jy-top / .jy-lightbox / .jy-toast
   10.13) حالة 404 للمقال .jy-notfound
   10.14) ريسبونسف + قلل الحركة
   ========================================================= */

/* ---------------------------------------------------------
   10.1) توكنز خاصة بصفحة المقال
   (تكمّل توكنز الجذر: --jawy-navy/blue/gold/muted/pale)
   --------------------------------------------------------- */
:root {
  --jy-gold2: #e0bc55;                      /* الذهبي الفاتح للتدرّجات والنصوص على الداكن */
  --jy-line: #e5e9f5;                       /* لون الحدود الفاتحة */
  --jy-soft: #f7f8ff;                       /* خلفية ناعمة (نفس --jawy-pale) */
  --jy-shadow: 0 18px 50px rgba(13, 31, 76, 0.11);
  --jy-overlay: rgba(7, 26, 45, 0.92);      /* أعمق نقطة في تدرّج الهيرو */
}

/* ---------------------------------------------------------
   10.2) شريط تقدم القراءة
   شريط رفيع أعلى الشاشة يمتلئ ذهبيًا مع التمرير
   (يحرّكه initArticle في script.js عبر عرض #jy-progress-bar)
   --------------------------------------------------------- */
.jy-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  z-index: 1200;
  pointer-events: none;
}

.jy-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--jy-gold2), var(--jawy-gold));
  border-radius: 0 4px 4px 0;
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------
   10.3) هيرو المقال
   صورة كاملة الارتفاع (480px) + تدرّج داكن + بيانات المقال
   --------------------------------------------------------- */
.jy-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 480px;
  overflow: hidden;
  color: #fff;
}

.jy-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}

.jy-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 26, 45, 0.35) 0%,
    rgba(7, 26, 45, 0.55) 45%,
    var(--jy-overlay) 100%
  );
}

.jy-hero-content {
  position: relative;
  z-index: 2;
  padding-block: 72px 64px;
}

/* مسار التنقل: الرئيسية / المدونة / التصنيف */
.jy-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffffbf;
}

.jy-breadcrumb a {
  color: #ffffffbf;
  transition: color 0.18s;
}

.jy-breadcrumb a:hover {
  color: var(--jy-gold2);
}

.jy-breadcrumb em {
  color: var(--jy-gold2);
  font-style: normal;
}

/* شارة التصنيف الزجاجية الذهبية */
.jy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(228, 186, 47, 0.16);
  border: 1px solid rgba(228, 186, 47, 0.45);
  color: var(--jy-gold2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

.jy-title {
  margin: 0;
  max-width: 840px;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.5;
  font-weight: 900;
  color: #fff;
}

.jy-lead {
  margin: 18px 0 0;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.9;
  color: #ffffffd9;
}

/* سطر بيانات النشر: أفاتار + كاتب + تاريخ + مدة القراءة */
.jy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.jy-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jy-gold2), var(--jawy-gold));
  color: var(--jawy-navy);
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  flex: none;
}

.jy-author {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.jy-author strong {
  font-size: 15px;
  color: #fff;
}

.jy-author small {
  font-size: 12.5px;
  color: #ffffffb3;
}

.jy-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffffcc;
}

/* ---------------------------------------------------------
   10.4) جسم المقال والتخطيط
   شبكة: عمود المحتوى (مرن) + سايدبار 320px (يسار الشاشة في RTL)
   --------------------------------------------------------- */
.jy-body {
  padding: 72px 0 96px;
}

.jy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

/* عمود المحتوى: عرض قراءة مريح ~740px في وسط العمود */
.jy-content {
  max-width: 740px;
  width: 100%;
}

/* السايدبار: يلتصق تحت الهيدر الثابت أثناء التمرير */
.jy-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------------------------------------------------------
   10.5) تنسيقات متن المقال .jy-prose
   كل عناصر التحرير التي تكتب في articles.php
   --------------------------------------------------------- */
.jy-prose h2,
.jy-prose h3,
.jy-prose h4 {
  position: relative;
  color: var(--jawy-navy);
  scroll-margin-top: 110px;   /* التمرير السلس يقف بعد الهيدر الثابت */
}

.jy-prose h2 {
  margin: 56px 0 20px;
  padding-inline-start: 18px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.55;
}

/* شريط ذهبي عمودي بجانب h2 */
.jy-prose h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--jy-gold2), var(--jawy-gold));
}

.jy-prose h3 {
  margin: 40px 0 14px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.6;
}

.jy-prose h4 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.jy-prose p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--jawy-muted);
}

.jy-prose a {
  color: var(--jawy-gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* اقتباس بارز: خلفية ناعمة + حد ذهبي + علامة ❝ */
.jy-prose blockquote {
  position: relative;
  margin: 36px 0;
  padding: 28px 30px;
  background: var(--jy-soft);
  border-inline-start: 5px solid var(--jawy-gold);
  border-radius: 16px 4px 4px 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--jawy-navy);
}

.jy-prose blockquote::before {
  content: "❝";
  position: absolute;
  top: -18px;
  inset-inline-start: 22px;
  font-size: 34px;
  color: var(--jawy-gold);
}

/* قوائم: معينات ذهبية (ul) وأرقام بدوائر ذهبية (ol) */
.jy-prose ul,
.jy-prose ol {
  margin: 0 0 22px;
  padding-inline-start: 8px;
  list-style: none;
}

.jy-prose ul li,
.jy-prose ol li {
  position: relative;
  padding-inline-start: 30px;
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--jawy-muted);
}

.jy-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--jawy-gold);
  transform: rotate(45deg);
}

.jy-prose ol {
  counter-reset: jy-oli;
}

.jy-prose ol li {
  counter-increment: jy-oli;
}

.jy-prose ol li::before {
  content: counter(jy-oli);
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jy-soft);
  border: 1.5px solid var(--jawy-gold);
  color: var(--jawy-gold);
  font-size: 11.5px;
  font-weight: 800;
}

/* الصور داخل المقال + lightbox عند النقر */
.jy-prose figure {
  margin: 36px 0;
}

.jy-prose figure img {
  width: 100%;
  border-radius: var(--jawy-radius, 22px);
  box-shadow: var(--jy-shadow);
  cursor: zoom-in;
  transition: transform 0.25s;
}

.jy-prose figure img:hover {
  transform: scale(1.01);
}

.jy-prose figure img:focus-visible {
  outline: 3px solid var(--jawy-gold);
  outline-offset: 4px;
}

.jy-prose figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--jawy-muted);
}

/* جدول منسّق: رأس كحلي + صفوف متناوبة */
.jy-prose table {
  width: 100%;
  margin: 28px 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--jy-line);
  border-radius: 16px;
  overflow: hidden;
}

.jy-prose thead th {
  background: var(--jawy-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 18px;
  text-align: start;
}

.jy-prose tbody td {
  padding: 13px 18px;
  border-top: 1px solid var(--jy-line);
  font-size: 14.5px;
  color: var(--jawy-muted);
}

.jy-prose tbody tr:nth-child(even) {
  background: var(--jy-soft);
}

/* فاصل أفقي ذهبي قصير في المنتصف */
.jy-prose hr {
  margin: 44px auto;
  width: 140px;
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jawy-gold), transparent);
}

.jy-prose code {
  direction: ltr;
  unicode-bidi: embed;
  font-family: monospace;
  background: var(--jy-soft);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--jawy-navy);
}

/* صناديق التنبيه داخل المقال (tip ذهبي / info كحلي / warn أحمر) */
.jy-callout {
  display: flex;
  gap: 14px;
  margin: 30px 0;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid var(--jy-line);
  align-items: flex-start;
}

.jy-callout .jy-callout-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.jy-callout b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: var(--jawy-navy);
}

.jy-callout p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
}

.jy-callout.tip {
  background: rgba(200, 164, 40, 0.08);
  border-color: rgba(200, 164, 40, 0.4);
}

.jy-callout.tip .jy-callout-icon {
  background: rgba(200, 164, 40, 0.18);
}

.jy-callout.info {
  background: rgba(30, 64, 148, 0.06);
  border-color: rgba(30, 64, 148, 0.25);
}

.jy-callout.info .jy-callout-icon {
  background: rgba(30, 64, 148, 0.12);
}

.jy-callout.warn {
  background: rgba(217, 72, 62, 0.06);
  border-color: rgba(217, 72, 62, 0.3);
}

.jy-callout.warn .jy-callout-icon {
  background: rgba(217, 72, 62, 0.12);
}

/* ---------------------------------------------------------
   10.6) عناصر ما بعد المقال
   --------------------------------------------------------- */

/* علامة نهاية المقال بخطوط جانبية */
.jy-end {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 0;
  color: var(--jawy-gold);
}

.jy-end::before,
.jy-end::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--jy-line);
}

.jy-end span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* الوسوم: شارات حبّية */
.jy-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--jy-line);
}

.jy-tags::before {
  content: "الوسوم:";
  font-weight: 900;
  font-size: 14px;
  color: var(--jawy-navy);
}

.jy-tag {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--jy-soft);
  border: 1px solid var(--jy-line);
  color: var(--jawy-muted);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s;
}

.jy-tag:hover {
  border-color: var(--jawy-gold);
  color: var(--jawy-gold);
}

/* صندوق الكاتب */
.jy-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 36px;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  box-shadow: var(--jy-shadow);
}

.jy-author-box-avatar {
  width: 72px;
  height: 72px;
  font-size: 22px;
  box-shadow: none;
  border: 3px solid rgba(200, 164, 40, 0.35);
}

.jy-author-box-info strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--jawy-navy);
}

.jy-author-box-info em {
  display: block;
  margin: 2px 0 10px;
  color: var(--jawy-gold);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
}

.jy-author-box-info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--jawy-muted);
}

/* ---------------------------------------------------------
   10.7) السايدبار: TOC + بطاقة المشاركة + بطاقة CTA
   --------------------------------------------------------- */

/* جدول المحتويات (نسخة الديسكتوب) */
.jy-toc {
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--jy-shadow);
}

.jy-toc h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color: var(--jawy-navy);
}

.jy-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jy-toc li {
  margin: 2px 0;
}

.jy-toc a {
  display: block;
  padding: 8px 12px;
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--jawy-muted);
  transition: all 0.18s;
}

/* العناوين الفرعية h3 تأخذ مسافة أعمق */
.jy-toc li.jy-toc-h3 a {
  padding-inline-start: 26px;
  font-size: 12.5px;
}

.jy-toc a:hover {
  color: var(--jawy-navy);
  background: var(--jy-soft);
}

/* العنصر النشط (scroll-spy): حد ذهبي + خلفية ناعمة */
.jy-toc a.active {
  color: var(--jawy-navy);
  font-weight: 800;
  border-inline-start-color: var(--jawy-gold);
  background: var(--jy-soft);
}

/* بطاقة المشاركة */
.jy-share-card {
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--jy-shadow);
}

.jy-share-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color: var(--jawy-navy);
}

.jy-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jy-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}

.jy-share-btn:hover {
  transform: translateY(-3px);
}

.jy-share-btn:focus-visible {
  outline: 3px solid var(--jawy-gold);
  outline-offset: 3px;
}

.jy-share-wa { background: #25d366; }
.jy-share-tg { background: #229ed9; }
.jy-share-x  { background: #111; }
.jy-share-fb { background: #1877f2; }
.jy-share-copy { background: var(--jawy-navy); }

/* بطاقة CTA داكنة (تفتح حوار الحجز) */
.jy-cta-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, #102350, #1e4094);
  color: #fff;
}

.jy-cta-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.jy-cta-card p {
  margin: 0 0 18px;
  color: #ffffffbf;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ---------------------------------------------------------
   10.8) جدول محتويات الموبايل (يظهر < 1024px بدل السايدبار)
   --------------------------------------------------------- */
.jy-toc-mobile {
  display: none;
  margin: 0 0 28px;
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 16px;
  box-shadow: var(--jy-shadow);
}

.jy-toc-mobile summary {
  cursor: pointer;
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--jawy-navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jy-toc-mobile summary::-webkit-details-marker {
  display: none;
}

.jy-toc-mobile[open] summary {
  border-bottom: 1px solid var(--jy-line);
}

.jy-toc-mobile ol {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
}

.jy-toc-mobile a {
  display: block;
  padding: 9px 12px;
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jawy-muted);
}

.jy-toc-mobile li.jy-toc-h3 a {
  padding-inline-start: 26px;
  font-size: 13px;
}

.jy-toc-mobile a.active {
  color: var(--jawy-navy);
  font-weight: 800;
  border-inline-start-color: var(--jawy-gold);
  background: var(--jy-soft);
}

/* ---------------------------------------------------------
   10.9) التنقل بين المقالات (السابق/التالي)
   --------------------------------------------------------- */
.jy-postnav {
  padding: 24px 0 72px;
}

.jy-postnav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.jy-postnav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 48px 20px 22px;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  background: #fff;
  text-decoration: none;
  transition: all 0.2s;
}

/* البطاقة "التالية" تنعكس: النص ينتهي عند الحافة والسهم بالاتجاه الآخر */
.jy-postnav-card.is-next {
  align-items: flex-end;
  text-align: end;
  padding: 20px 22px 20px 48px;
}

.jy-postnav-card:hover {
  border-color: var(--jawy-gold);
  box-shadow: var(--jy-shadow);
  transform: translateY(-3px);
}

.jy-postnav-card small {
  font-size: 12px;
  font-weight: 800;
  color: var(--jawy-gold);
}

.jy-postnav-card strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.65;
  color: var(--jawy-navy);
}

.jy-postnav-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: 18px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--jawy-gold);
}

.is-next .jy-postnav-arrow {
  inset-inline-end: auto;
  inset-inline-start: 18px;
}

/* بطاقة فارغة تحفظ تناسق الشبكة عند حافة القائمة */
.jy-postnav-card.is-empty {
  visibility: hidden;
}

/* ---------------------------------------------------------
   10.10) مقالات ذات صلة (خلفية ناعمة + 3 بطاقات)
   --------------------------------------------------------- */
.jy-related {
  padding: 80px 0;
  background: var(--jy-soft);
}

.jy-related-head {
  text-align: center;
  margin-bottom: 40px;
}

.jy-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.jy-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--jy-shadow);
  text-decoration: none;
  transition: transform 0.22s, box-shadow 0.22s;
}

.jy-card:hover {
  transform: translateY(-6px);
}

.jy-card-img {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
}

.jy-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.jy-card:hover .jy-card-img img {
  transform: scale(1.06);
}

/* شارة التصنيف فوق صورة البطاقة */
.jy-card-img .jy-badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  margin: 0;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--jawy-navy);
  backdrop-filter: blur(4px);
}

.jy-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.jy-card-body h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.65;
  color: var(--jawy-navy);
}

.jy-card-body small {
  font-size: 12.5px;
  color: var(--jawy-muted);
}

/* ---------------------------------------------------------
   10.11) دعوة النشرة أسفل صفحة المقال
   (نفس هوية .jawy-news-section: تدرّج كحلي + نموذج مركزي)
   --------------------------------------------------------- */
.jy-news {
  padding: 80px 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #102350, #1e4094);
}

.jy-news-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.jy-news h2 {
  font-size: 36px;
  color: #fff;
}

.jy-news p {
  color: #ffffff80;
  margin: 20px 0 30px;
}

.jy-news .jawy-newsletter {
  max-width: 460px;
  margin: auto;
}

/* ---------------------------------------------------------
   10.12) عناصر عائمة: العودة للأعلى / اللايت بوكس / التوست
   --------------------------------------------------------- */

/* زر العودة للأعلى (يظهر بفئة .show بعد 600px تمرير) */
.jy-top {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 900;
  width: 46px;
  height: 46px;
  border: 1px solid var(--jy-line);
  border-radius: 50%;
  background: #fff;
  color: var(--jawy-navy);
  box-shadow: var(--jy-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s;
}

.jy-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.jy-top:hover {
  background: var(--jawy-gold);
  border-color: var(--jawy-gold);
}

/* اللايت بوكس: حوار بالحجم الكامل لصور المقال */
dialog.jy-lightbox {
  border: 0;
  background: transparent;
  padding: 0;
  max-width: none;
  max-height: none;
  width: fit-content;
  margin: auto;
}

dialog.jy-lightbox::backdrop {
  background: rgba(7, 26, 45, 0.88);
  backdrop-filter: blur(4px);
}

dialog.jy-lightbox img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.jy-lightbox-caption {
  margin-top: 14px;
  text-align: center;
  color: #ffffffcc;
  font-size: 13.5px;
}

dialog.jy-lightbox .jawy-close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
}

/* توست الرسائل (نسخ الرابط/النشرة) */
.jy-toast {
  position: fixed;
  bottom: 28px;
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(16px);
  z-index: 1300;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--jawy-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 14px 40px rgba(13, 31, 76, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.jy-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(50%) translateY(0);
}

/* ---------------------------------------------------------
   10.13) حالة 404 للمقال غير الموجود
   --------------------------------------------------------- */
.jy-notfound {
  max-width: 620px;
  margin: 40px auto;
  padding: 48px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--jy-line);
  border-radius: 22px;
  box-shadow: var(--jy-shadow);
}

.jy-notfound-code {
  display: block;
  font-size: 64px;
  font-weight: 900;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--jy-gold2), var(--jawy-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.jy-notfound h1 {
  margin: 8px 0 12px;
  font-size: 26px;
  font-weight: 900;
  color: var(--jawy-navy);
}

.jy-notfound p {
  color: var(--jawy-muted);
  line-height: 2;
}

.jy-notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* ---------------------------------------------------------
   10.14) ريسبونسف صفحة المقال + احترام قلل الحركة
   --------------------------------------------------------- */

/* التابلت وما دون: السايدبار يختفي ويظهر TOC الموبايل */
@media (max-width: 1023px) {
  .jy-layout {
    grid-template-columns: 1fr;
  }

  .jy-sidebar {
    display: none;
  }

  .jy-toc-mobile {
    display: block;
  }

  .jy-hero {
    min-height: 440px;
  }

  .jy-body {
    padding: 56px 0 72px;
  }
}

/* الموبايل: أعمدة مفردة وهيرو أقصر */
@media (max-width: 640px) {
  .jy-hero {
    min-height: 430px;
  }

  /* الجداول: تصبح صندوق تمرير أفقي حتى لا تكسر عرض الصفحة على الجوال */
  .jy-prose table {
    display: block;
    overflow-x: auto;
    min-width: 0;
  }

  .jy-hero-content {
    padding-block: 96px 44px;
  }

  .jy-title {
    font-size: clamp(26px, 8vw, 30px);
  }

  .jy-lead {
    font-size: 16px;
  }

  .jy-meta {
    gap: 10px;
  }

  .jy-postnav-grid,
  .jy-related-grid {
    grid-template-columns: 1fr;
  }

  .jy-related {
    padding: 56px 0;
  }

  .jy-prose h2 {
    font-size: 24px;
  }

  .jy-prose h3 {
    font-size: 20px;
  }

  .jy-prose p {
    font-size: 15.5px;
  }

  .jy-top {
    bottom: 16px;
    inset-inline-start: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jy-progress span,
  .jy-card,
  .jy-card-img img,
  .jy-share-btn,
  .jy-postnav-card,
  .jy-toast,
  .jy-top {
    transition: none;
  }
}