/* =============================================================================
 * Front Page Styles (GeneratePress Child)
 * بدون AJAX — يدعم Swiper محليًا
 * الهوية: --bg #FFFFFF | --primary #FFB300 | --text #000000 | --accent #4B1AB1
 * ============================================================================= */

/* 0) Tokens */
:root{
  --yg-bg:#FFFFFF;
  --yg-primary:#FFB300;
  --yg-text:#000000;
  --yg-accent:#4B1AB1;

  --yg-surface:#FFFFFF;
  --yg-surface-alt:#F9F7FF;

  --yg-ring:rgba(0,0,0,0.06);
  --yg-hover-glow:rgba(255,179,0,0.35);
}

/* 1) أساسيات الصفحة (يفضل إضافة body_class: front-page) */
body.front-page{
  background-color:var(--yg-bg);
  color:var(--yg-text);
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans Arabic",Arial,sans-serif;
  direction:rtl;
}

/* 2) عناوين الأقسام + فاصل */
.front-page .yg-title,
body.front-page .yg-title{
  font-size:24px; margin:20px 0 8px; font-weight:800; color:var(--yg-text); text-align:center;
}
.front-page .yg-divider,
body.front-page .yg-divider{
  width:64px; height:4px; border-radius:6px; margin:0 auto 24px;
  background:linear-gradient(90deg,var(--yg-accent),var(--yg-primary));
}

/* 3) أسطح الأقسام */
.front-page .yg-section-surface,
body.front-page .yg-section-surface{
  background:var(--yg-surface);
  border:1px solid var(--yg-ring);
  border-radius:16px;
  padding:24px;
}
.front-page .yg-section-alt,
body.front-page .yg-section-alt{
  background:var(--yg-surface-alt);
  border:1px solid var(--yg-ring);
  border-radius:16px;
  padding-left:16px; padding-right:16px;
}

/* 4) زر أساسي */
.front-page .yg-button-primary,
body.front-page .yg-button-primary{
  background:var(--yg-primary); color:#111;
  padding:10px 24px; border-radius:12px; border:2px solid var(--yg-primary);
  font-weight:800; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  transition:transform .15s, box-shadow .2s, background .2s;
  box-shadow:0 8px 22px rgba(255,179,0,.25);
}
.front-page .yg-button-primary:hover,
body.front-page .yg-button-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,179,0,.35) }

/* 5) كروت عامة (استخدام اختياري) */
.front-page .yg-card,
body.front-page .yg-card{
  background:#fff; border-radius:18px; overflow:hidden; position:relative;
  border:2px solid var(--yg-accent);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:box-shadow .25s, transform .15s, border-color .2s;
}
.front-page .yg-card:hover,
body.front-page .yg-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px var(--yg-hover-glow);
}
.front-page .yg-card__title,
body.front-page .yg-card__title{ padding:10px 12px; text-align:center; font-size:15px; font-weight:800; color:var(--yg-text) }

/* 6) شارة HOT (اختيارية) */
.front-page .yg-badge-hot,
body.front-page .yg-badge-hot{
  position:absolute; top:10px; inset-inline-start:10px;
  background:linear-gradient(90deg,var(--yg-primary),#FFC94D);
  color:#111; font-weight:900; font-size:12px; letter-spacing:.3px;
  padding:6px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 14px rgba(255,179,0,.35), inset 0 0 0 2px #fff;
}

/* 7) شريط تمييز أسفل البطاقة (اختياري) */
.front-page .yg-accent-bar,
body.front-page .yg-accent-bar{
  height:4px; width:0; background:linear-gradient(90deg,var(--yg-accent),var(--yg-primary));
  transition:width .3s ease;
}
.front-page .yg-card:hover .yg-accent-bar,
body.front-page .yg-card:hover .yg-accent-bar{ width:100% }

/* 8) سويبر الهيرو (محلي) */
.swiper{ position:relative; overflow:hidden; }
.swiper-wrapper{ display:flex; }
.swiper-slide{ flex:0 0 auto; }
.mySwiper{ border-radius:16px; overflow:hidden; }
.mySwiper .swiper-slide{ width:100%; }
.mySwiper .swiper-pagination{ position:absolute; inset-inline:0; bottom:8px; }
.mySwiper .swiper-slide img{ width:100%; height:auto; display:block; object-fit:cover; }
/* ارتفاعات مرنة */
@media (min-width:768px){
  .mySwiper{ height:280px; }
  .mySwiper .swiper-wrapper,.mySwiper .swiper-slide{ height:100%; }
  .mySwiper .swiper-slide img{ height:100%; object-fit:cover; }
}
@media (min-width:1024px){ .mySwiper{ height:320px } }
@media (min-width:1280px){ .mySwiper{ height:360px } }

/* 9) شريط شعارات الدفع (اختياري) */
/*@keyframes yg-home-waveMove{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.front-page .payment-wave img,
body.front-page .payment-wave img{ animation:yg-home-waveMove 2.5s ease-in-out infinite }
.front-page .payment-wave img:nth-child(1){animation-delay:0s}
.front-page .payment-wave img:nth-child(2){animation-delay:.2s}
.front-page .payment-wave img:nth-child(3){animation-delay:.4s}
.front-page .payment-wave img:nth-child(4){animation-delay:.6s}
.front-page .payment-wave img:nth-child(5){animation-delay:.8s}
.front-page .payment-wave img:nth-child(6){animation-delay:1s}*/
@media (min-width:768px){
  .front-page .payment-wave,
  body.front-page .payment-wave{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:14px }
  .front-page .payment-wave img,
  body.front-page .payment-wave img{ height:clamp(22px,2.2vw,40px)!important; width:auto; object-fit:contain }
}
@media (max-width:767px){
  .front-page .payment-wave,
  body.front-page .payment-wave{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px }
  .front-page .payment-wave img,
  body.front-page .payment-wave img{ height:clamp(16px,5.6vw,28px)!important; width:auto; object-fit:contain }
}

/* 10) أدوات مساعدة */
.front-page .line-clamp-2,
body.front-page .line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
[dir="rtl"] .front-page .ms-2,[dir="rtl"] body.front-page .ms-2{ margin-right:.5rem }
[dir="rtl"] .front-page .ms-1,[dir="rtl"] body.front-page .ms-1{ margin-right:.25rem }

/* === Harmonize Hotbar inside yg-section-surface (front-page) === */
.front-page .yg-section-surface .yg-hotbar{
  background:transparent;   /* خلي الخلفية شفافة لأن المستطيل الخارجي هو السطح */
  border:0;                 /* لا نكرر الحد */
  padding:0;                /* لا نكرر الحشوات */
  margin:0;
}

/* لو تبي نفس عرض العنوان والفاصل للسيكشن الخارجي، خفّف مسافة العنوان داخل الهوت بار */
.front-page .yg-section-surface .yg-hotbar .yg-title{ margin:8px 0 6px; }
.front-page .yg-section-surface .yg-hotbar .yg-divider{ margin:0 auto 12px; }