/*
 Theme Name: GeneratePress Child
 Theme URI: https://lootaragames.com
 Description: Yemen Game – clean UI with unified light identity (no dark mode)
 Author: l.g Dev
 Author URI: https://yemengame.com/
 Template: generatepress
 Version: 1.1.0
 Text Domain: generatepress-child
*/

/* =========================
   1) Tokens (Unified Light Identity)
   ========================= */
:root{
  /* Palette */
  --yg-bg:       #FFFFFF;   /* خلفية عامة */
  --yg-surface:  #FFFFFF;   /* بطاقات/أسطح */
  --yg-primary:  #FFB300;   /* أصفر – للأزرار والعناصر المهمة */
  --yg-key:      #4B1AB1;   /* بنفسجي داكن – إبراز الحدود والعناصر المميزة */
  --yg-text:     #000000;   /* أسود – النصوص */
  --yg-muted:    #6B7280;   /* نص خافت */

  /* Layout */
  --yg-radius:   18px;
  --yg-shadow:   0 6px 18px rgba(0,0,0,.06);
  --yg-container:1200px;
  --yg-gap:      16px;

  /* Effects */
  --yg-ring:     0 0 0 4px rgba(255,179,0,.15); /* تركيز أصفر خفيف */
  --yg-glow:     0 16px 36px rgba(75,26,177,.15); /* وهج بنفسجي ناعم */
}

/* =========================
   2) Base (Safe with GP/Woo)
   ========================= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--yg-bg);
  color:var(--yg-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Tajawal","Noto Sans Arabic",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

.container{ max-width:var(--yg-container); margin-inline:auto; padding-inline:clamp(12px,3vw,24px) }
main{ min-height:60vh }

/* Utilities */
.center{ display:grid; place-items:center }
.row{ display:flex; flex-wrap:wrap; gap:var(--yg-gap) }
.grid{ display:grid; gap:var(--yg-gap) }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .grid.cols-4{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:768px){
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr) }
  .grid.cols-2{ grid-template-columns:1fr }
}
.m-0{margin:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.p-1{padding:.5rem}.p-2{padding:1rem}
.muted{ color:var(--yg-muted) }
.hidden{ display:none }

/* =========================
   3) Primitives (Card / Button / Input / Badge)
   ========================= */
.yg-card{
  background:var(--yg-surface);
  border:2px solid var(--yg-key);
  border-radius:var(--yg-radius);
  box-shadow:var(--yg-shadow);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.yg-card:hover{ transform:translateY(-1px); box-shadow:var(--yg-glow); border-color:var(--yg-primary) }

.yg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:14px; font-weight:900; cursor:pointer; border:2px solid var(--yg-primary);
  background:var(--yg-primary); color:#111; transition:transform .12s ease, box-shadow .2s ease, filter .15s ease;
  box-shadow:0 10px 24px rgba(255,179,0,.25);
}
.yg-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(255,179,0,.35) }
.yg-btn:active{ transform:translateY(0) }
.yg-btn.secondary{ background:var(--yg-key); border-color:var(--yg-key); color:#fff; box-shadow:0 10px 24px rgba(75,26,177,.25) }

.yg-input{
  width:100%; padding:.75rem .9rem; border-radius:12px; outline:none;
  border:2px solid var(--yg-key); background:#fff; color:var(--yg-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.yg-input:focus{ border-color:var(--yg-primary); box-shadow:var(--yg-ring) }

.yg-badge{
  display:inline-block; padding:.35rem .65rem; border-radius:999px; font-size:.85rem; font-weight:900;
  background:#FFE08A; color:#111; border:1px solid #FFCF55;
}
.yg-badge.success{ background:linear-gradient(90deg,#FFB300,#FFD36E); color:#111; border-color:#FFCA3A }
.yg-badge.error{ background:#000; color:#fff; border-color:#000 }

/* =========================
   4) Header (namespaced) — استخدم class="yg-header" في قالب الهيدر
   ========================= */
.yg-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:2px solid var(--yg-key); backdrop-filter:saturate(1.1) blur(4px);
}
.yg-header .bar{
  min-height:64px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 0;
}
.yg-header .brand img{ height:40px; width:auto; display:block }
.yg-header .wallet-pill{
  font-size:.9rem; background:#000; color:#fff; padding:.45rem .9rem; border-radius:999px; white-space:nowrap;
}

/* Admin bar offset للوردبريس */
.admin-bar .yg-header{ top:32px }
@media (max-width:782px){ .admin-bar .yg-header{ top:46px } }

/* Tabs (قائمة رئيسية) */
.yg-tabs{ list-style:none; margin:0; padding:0; display:flex; gap:10px }
.yg-tabs li{ margin:0; padding:0 }
.yg-tabs a{
  display:inline-block; padding:.6rem .9rem; border-radius:12px; font-weight:900; color:#000;
  border:2px solid transparent; transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.yg-tabs a:hover{
  background:#FFE08A; border-color:var(--yg-primary);
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,179,0,.25);
}

/* Burger */
.yg-burger{
  width:40px; height:36px; border:0; border-radius:10px; background:#000; color:#fff; display:inline-grid; place-items:center; cursor:pointer;
}
.yg-burger .line{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative }
.yg-burger .line::before,.yg-burger .line::after{ content:""; position:absolute; inset-inline-start:0; width:22px; height:2px; background:#fff; border-radius:2px }
.yg-burger .line::before{ top:-6px } .yg-burger .line::after{ top:6px }

/* =========================
   5) Drawer (namespaced)
   ========================= */
.yg-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:.2s ease; z-index:98;
}
.yg-backdrop.show{ opacity:1; visibility:visible }

.yg-drawer{
  position:fixed; top:0; inset-inline-end:0; width:min(84vw, 320px); height:100vh; z-index:99;
  background:#fff; border-inline-start:3px solid var(--yg-key);
  transform:translateX(100%); transition:transform .25s ease; box-shadow:-14px 0 28px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
}
.yg-drawer.open{ transform:translateX(0) }
.yg-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08); font-weight:900 }
.yg-drawer__close{ width:36px; height:36px; border:none; background:#000; color:#fff; border-radius:10px; cursor:pointer }
.yg-drawer__nav{ display:flex; flex-direction:column; gap:.5rem; padding:14px 10px; text-align:center }
.yg-drawer__nav a{
  display:block; padding:.75rem .875rem; border-radius:.875rem; font-weight:900; border:2px solid transparent;
  transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.yg-drawer__nav a:hover{ background:#FFE08A; border-color:var(--yg-primary); transform:translateY(-1px); box-shadow:0 8px 18px rgba(255,179,0,.25) }

/* =========================
   6) Sections / Dividers
   ========================= */
.yg-section{ padding:clamp(12px,3vw,20px) 0 }
.yg-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.yg-title{ margin:0; font-weight:900; color:#000; font-size:clamp(1.1rem,2.6vw,1.4rem) }
.yg-divider{ width:88px; height:4px; margin:12px auto 16px; border-radius:999px; background:linear-gradient(90deg,var(--yg-key),var(--yg-primary)) }
.yg-section-surface{ background:rgba(75,26,177,.06); border:2px solid var(--yg-key); border-radius:18px; padding:clamp(12px,3vw,20px) }
.yg-section-alt{ background:rgba(255,179,0,.08); border:2px dashed var(--yg-primary); border-radius:16px }

/* =========================
   7) Product cards (generic)
   ========================= */
.yg-product-card{
  display:block; background:#fff; color:#000; border-radius:16px; border:2px solid var(--yg-key);
  box-shadow:var(--yg-shadow); overflow:hidden; transition:box-shadow .25s ease, transform .18s ease, border-color .2s ease;
}
.yg-product-card:hover{ box-shadow:var(--yg-glow); transform:translateY(-2px); border-color:var(--yg-primary) }

.yg-product-card__media{ background:#fff; display:flex; align-items:center; justify-content:center; position:relative }
.yg-product-card__media .box{ position:relative; width:100% }
.yg-product-card__media .box::before{ content:""; display:block; padding-top:60% }     /* 5:3 للموبايل */
@media (min-width:768px){ .yg-product-card__media .box::before{ padding-top:56.25% } } /* 16:9 للديسكتوب */
.yg-product-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }

.yg-product-card__title{
  margin:0; padding:10px 12px 12px; text-align:center; color:#111827; font-weight:700;
  font-size:clamp(.92rem,1.8vw,1rem); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-accent-bar{ height:4px; background:linear-gradient(90deg,var(--yg-key),var(--yg-primary)); width:0; transition:width .3s }
.yg-product-card:hover .yg-accent-bar{ width:100% }

/* شارة "HOT" اختيارية */
.yg-badge-hot{
  position:absolute; inset-inline-start:10px; top:10px; background:var(--yg-primary);
  color:#111; font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px; box-shadow:0 10px 24px rgba(255,179,0,.25)
}

/* =========================
   8) Single product helper scope (اختياري)
   - استخدم هذا فقط لو صفحتك تستخدم كلاس .ygsp
   ========================= */


/* =========================
   9) Footer (namespaced) — استخدم class="yg-footer" في قالب الفوتر
   ========================= */
.yg-footer{ border-top:2px solid var(--yg-key); background:#fff; color:#000 }
.yg-footer .bar{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0 }
.yg-footer small{ opacity:.85 }

/* =========================
   10) Page-specific helpers (اختياري)
   ========================= */
/* أقسام الدفع المتحركة — إن استُخدمت */
.payment-wave img{ height:32px; object-fit:contain; filter:grayscale(10%); opacity:.95; transition:transform .15s, filter .15s, opacity .15s }
.payment-wave img:hover{ transform:translateY(-2px); filter:none; opacity:1 }


/* =========================
   10) Normalize header height (اختياري)
   ========================= */
.yg-header > .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:6px !important; padding-bottom:6px !important; /* بدل py-3 */
  min-height:56px;
}
.yg-header img{ max-height:36px; height:auto; width:auto; display:block; }

/* إن ما تقدر تغيّر الـHTML للكبسولة، قلّل حشوها هكذا (حل سريع) */
.yg-header .text-sm.bg-black{ padding-top:.35rem !important; padding-bottom:.35rem !important; }

/* ============================================================================
 * SWIPER (Hero only) — محلي + بدون Tailwind
 * ========================================================================== */

/* أساسيات Swiper للسلايدر الرئيسي */
.swiper{ position:relative; overflow:hidden; }
.swiper-wrapper{ display:flex; }
.swiper-slide{ flex:0 0 auto; }

/* السلايدر الرئيسي .mySwiper */
.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; } }

/* (اختياري) بديل لكلاسات Tailwind aspect في حال استُخدمت */
.mySwiper .aspect-\[5\/3\], .mySwiper .aspect-\[16\/9\]{
  position:relative; width:100%; background:#fff;
}
.mySwiper .aspect-\[5\/3\]::before{ content:""; display:block; padding-top:60%; }
.mySwiper .aspect-\[16\/9\]::before{ content:""; display:block; padding-top:56.25%; }
.mySwiper .aspect-\[5\/3\] img, .mySwiper .aspect-\[16\/9\] img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}

/* ============================================================================
 * HOT DEALS (بدون Swiper) — تمرير أفقي طبيعي
 * ========================================================================== */

.yg-scroll-wrap{ position:relative; padding-inline:8px; }
.yg-scroll-row{
  display:flex; gap:12px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:6px 4px 12px;
}
.yg-scroll-row > .yg-hot-item{
  scroll-snap-align:start; flex:0 0 auto; text-decoration:none;
}

/* إخفاء سكرول (اختياري) */
.yg-scroll-row{ scrollbar-width:none; }
.yg-scroll-row::-webkit-scrollbar{ display:none; }

/* بطاقة العروض المصغّرة */
.yg-hot-card{
  width:210px; border:3px solid var(--yg-key); border-radius:16px; background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:box-shadow .25s, transform .15s, border-color .2s;
  padding:12px;
}
@media (min-width:768px){ .yg-hot-card{ width:240px; } }
.yg-hot-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(255,179,0,.28); border-color:var(--yg-primary); }
.yg-hot-card.opacity-55{ opacity:.55; }

/* صورة بنسبة 16:9 بدون Tailwind */
.yg-card__media{ position:relative; width:100%; background:#fff; }
.yg-card__media::before{ content:""; display:block; padding-top:56.25%; }
.yg-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

/* شارة HOT */
.yg-badge-hot{
  position:absolute; top:10px; inset-inline-start:10px;
  background:linear-gradient(90deg,#FFB300,#FFC94D);
  color:#111; font-weight:900; font-size:12px;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 14px rgba(255,179,0,.35), inset 0 0 0 2px #fff;
}

/* سعر حالي + قديم + بادجات مخزون */
.yg-price{ font-weight:900; font-size:15px; color:#000; display:flex; align-items:center; gap:8px; }
.yg-price-old{ text-decoration:line-through; opacity:.7; font-weight:800; }
.yg-stock-badge{
  font-size:10px; font-weight:900; padding:4px 8px; border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.yg-stock-badge--in{  background:linear-gradient(90deg,#FFB300,#FFC94D); color:#111; }
.yg-stock-badge--out{ background:#000; color:#fff; }

/* (اختياري) أزرار تمرير على الديسكتوب */
.yg-scroll-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:12px;
  border:2px solid var(--yg-key); background:#fff; color:#111; font-weight:900;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.08); cursor:pointer; z-index:2;
}
.yg-scroll-btn.prev{ left:6px; }
.yg-scroll-btn.next{ right:6px; }
@media (min-width:992px){ .yg-scroll-btn{ display:flex; } }

/* ==== Header layout fix ==== */
.yg-header { position: sticky; top: 0; z-index: 50; background: #fff; }
.yg-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 0; min-height:56px;
}
.yg-header .brand img{ max-height:36px; height:auto; width:auto; display:block; }

/* كبسولة المحفظة ومجموعة الأزرار */
.yg-header-actions{ display:flex; align-items:center; gap:.5rem; }
.yg-wallet-pill{
  font-size:.9rem; background:#000; color:#fff;
  padding:.45rem .9rem; border-radius:999px; white-space:nowrap;
}

/* أدوات الاستجابة (لإخفاء زر الجوال على الشاشات المتوسطة وفوق) */
.md\:hidden{ display:none; }
@media (min-width:768px){
  .md\:block{ display:block; } /* موجود عندك غالبًا، مكرر لا يضر */
}

/* ===== Fix mobile text oversize (lock & normalize) ===== */

/* منع تكبير النظام التلقائي للنصوص */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ثبّت أساس المقاس تحت 600px (غيّره 14.5–15.5 حسب ذوقك) */
@media (max-width: 600px){
  html { font-size: 15px; } /* يؤثر على rem كلها */
  body { font-size: 15px; } /* احتياط لو فيه عناصر بالـ px */
}

/* ضبط سريع لأهم العناصر عند الشاشات الصغيرة */
@media (max-width: 480px){
  .yg-title{ font-size: 1.05rem; }                 /* ≈ 15.75px */
  .yg-wallet-pill{ font-size: .85rem; }
  .yg-price{ font-size: .95rem; }
  .yg-product-card__title{ font-size: .9rem; }     /* عناوين كروت المنتجات */
  .yg-btn{ font-size: 1rem; padding: .6rem .9rem; }
  .yg-input{ font-size: 1rem; min-height: 40px; padding: .6rem .8rem; }
  .yg-badge{ font-size: .8rem; }
}

/* لو الثيم يفرض أحجام على أزرار/حقول Woo — نثبّتها داخل نطاقنا */
.yg-header, .yg-footer, .yg-section, .yg-product-card, .yg-scroll-row, .yg-auth{
  font-family: "Tajawal","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.yg-auth .button,
.yg-auth .woocommerce-Button,
.yg-auth .woocommerce-form .form-row input.input-text,
.yg-auth .woocommerce-form .form-row .input-text{
  font-size: 1rem !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* اخفاء كلمه لوحه حسابي من صفحات ماي اكاونت */
.woocommerce-account .entry-header,
.woocommerce-account .entry-title {
  display: none !important;
}
.woocommerce-account .inside-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}