/*
 * ============================================================
 *  home.css — الصفحة الرئيسية
 * ============================================================
 *  يحتوي على:
 *    • .hero           — قسم الترحيب الكبير أعلى الصفحة
 *    • .eyebrow        — النص الصغير فوق العنوان الرئيسي
 *    • .hero-logo      — الصورة/اللوغو في قسم الهيرو
 *    • .features-grid  — شبكة مميزات المتجر (3 بطاقات)
 *    • .glass-card     — بطاقة المميزات الشفافة
 *    • .category-grid  — شبكة الأقسام (ديسكورد، اشتراكات، Xbox)
 *    • .category-card  — بطاقة القسم القابلة للضغط
 *    • .split-section  — قسم الأسئلة الشائعة
 *    • details/summary — عناصر الأكورديون للأسئلة
 *    • .contact-card   — بطاقة خدمة العملاء
 *    • .products-grid  — شبكة المنتجات داخل الأقسام
 *    • .product-card   — بطاقة المنتج في القوائم
 *    • .price          — سعر المنتج في القائمة
 * ============================================================
 */

/* ===== HERO ===== */
.hero{
min-height:calc(100vh - var(--header-h));
display:grid;
grid-template-columns:1fr 420px;
align-items:center;
gap:42px
}

.eyebrow{
color:var(--pink);
font-weight:900;
font-size:28px
}

.hero p,
.section-block p,
details{
color:var(--muted);
font-size:19px
}

.hero-logo{display:grid;place-items:center}

.hero-logo img{
width:min(100%,390px);
border-radius:50%;
filter:drop-shadow(0 0 42px rgba(191,61,255,.58))
}

/* ===== GRIDS ===== */
.features-grid,
.category-grid,
.products-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}

/* ===== GLASS CARD (مميزات المتجر) ===== */
.glass-card span{
font-size:42px;
display:block;
margin-bottom:14px
}

/* ===== CATEGORY CARD ===== */
.category-card{
color:#fff;
text-align:center;
cursor:pointer;
transition:transform .2s,border-color .2s;
padding:18px;
overflow:hidden
}

.category-card:hover,
.product-card:hover{
transform:translateY(-7px);
border-color:rgba(249,102,236,.85)
}

.category-card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:22px;
display:block;
margin-bottom:14px
}

.category-card strong{
display:block;
font-size:22px
}

.category-card small{color:var(--muted)}

/* ===== FAQ SECTION ===== */
.split-section{
display:grid;
grid-template-columns:1fr;
gap:24px;
align-items:start
}

.split-section > div:first-child{
align-items:start;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.split-section > div:first-child h2{
grid-column:1 / -1;
}

.split-section details{
width:100%;
margin-bottom:0;
height:max-content;
align-self:start;
}

summary{
color:#fff;
cursor:pointer;
font-weight:900
}

/* ===== PRODUCTS GRID ===== */
.products-grid{align-items:stretch}

.product-card{
display:flex;
flex-direction:column;
gap:14px;
min-height:100%;
transition:transform .2s,border-color .2s;
cursor:pointer
}

.product-card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:24px;
box-shadow:0 0 28px rgba(249,102,236,.28)
}

.product-card h3{
font-size:22px;
text-align:center
}

.price{
font-size:30px!important;
color:var(--cyan)!important;
font-weight:900;
text-align:center;
margin:0
}

.product-card button{
width:100%;
margin-top:auto
}

/* ===== RESPONSIVE ===== */
@media(max-width:950px){
.hero{grid-template-columns:1fr}
.features-grid,.category-grid,.products-grid{grid-template-columns:1fr}
}

@media(max-width:700px){
.split-section > div:first-child{
grid-template-columns:1fr;
}
}

@media(min-width:951px){
.sub-grid{
width:90%;
margin-inline:auto
}
}
/* PREMIUM GAMING + APPLE STYLE ICONS FOR WHY US */
#why-us .why-premium-grid{align-items:stretch}
#why-us .why-premium-card{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:34px 24px 28px !important;border-radius:30px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),radial-gradient(circle at 50% 0%,rgba(182,89,255,.28),transparent 43%),linear-gradient(180deg,rgba(31,7,54,.94),rgba(8,1,18,.96)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 18px 46px rgba(0,0,0,.34),0 0 34px rgba(182,89,255,.16) !important;
  transform:translateY(0);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease
}
#why-us .why-premium-card::before{
  content:"";position:absolute;inset:-2px;z-index:-2;
  background:conic-gradient(from 180deg,transparent,rgba(138,251,215,.28),rgba(249,102,236,.35),rgba(182,89,255,.28),transparent 72%);
  opacity:.55;filter:blur(18px);animation:whyAura 7s linear infinite
}
#why-us .why-premium-card::after{
  content:"";position:absolute;inset:1px;border-radius:29px;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 24%,transparent 68%,rgba(255,255,255,.06)),radial-gradient(circle at 50% 12%,rgba(255,255,255,.08),transparent 34%)
}
#why-us .why-premium-card.featured{transform:translateY(-8px);border-color:rgba(138,251,215,.28) !important}
#why-us .why-premium-card:hover{transform:translateY(-10px) scale(1.015);border-color:rgba(249,102,236,.62) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 56px rgba(0,0,0,.42),0 0 42px rgba(249,102,236,.22) !important}
#why-us .why-premium-card.featured:hover{transform:translateY(-14px) scale(1.018)}
.why-icon-orb{
  width:82px;height:82px;margin:0 auto 18px !important;display:grid !important;place-items:center;position:relative;border-radius:24px;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.045)),radial-gradient(circle at 30% 20%,rgba(255,255,255,.34),transparent 24%),linear-gradient(135deg,rgba(182,89,255,.9),rgba(249,102,236,.72));
  border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(182,89,255,.28),0 0 26px rgba(138,251,215,.12);
  transform:translateZ(0);animation:iconFloat 3.8s ease-in-out infinite
}
.why-icon-orb::before{content:"";position:absolute;inset:-7px;border-radius:30px;background:linear-gradient(135deg,rgba(138,251,215,.55),rgba(249,102,236,.45),rgba(182,89,255,.55));opacity:.38;filter:blur(13px);z-index:-1}
.why-icon-orb::after{content:"";position:absolute;top:10px;right:12px;width:26px;height:10px;border-radius:999px;background:rgba(255,255,255,.28);transform:rotate(-22deg)}
.why-icon-orb.shield{animation-delay:.18s}.why-icon-orb.loyalty{animation-delay:.36s}
.why-icon-orb svg{width:48px;height:48px;overflow:visible;filter:drop-shadow(0 0 12px rgba(255,255,255,.24))}
.why-icon-orb .icon-line{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.why-icon-orb .icon-line.small{stroke-width:3.2;opacity:.9}.why-icon-orb .icon-glow{fill:rgba(255,255,255,.15);stroke:none}
#why-us .why-premium-card:hover .why-icon-orb{animation-play-state:paused;transform:translateY(-4px) rotate(-2deg) scale(1.06)}
#why-us .why-premium-card h3{font-size:23px;margin-bottom:12px;letter-spacing:.2px}
#why-us .why-premium-card p{font-size:16px;line-height:1.85;color:rgba(217,200,235,.92);margin:0}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes whyAura{to{transform:rotate(360deg)}}
@media(max-width:900px){#why-us .why-premium-card.featured{transform:none}#why-us .why-premium-card:hover,#why-us .why-premium-card.featured:hover{transform:translateY(-7px)}.why-icon-orb{width:76px;height:76px;border-radius:22px}}

/* ==============================
   FAQ SAME SHAPE AS WHY-US CARDS
   نفس شيب وألوان كروت لماذا متجرنا بدون تغيير النصوص
   ============================== */
#faq.split-section{
  display:block !important;
}

#faq.split-section > div:first-child{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
}

#faq.split-section > div:first-child h2{
  grid-column:1 / -1 !important;
}

#faq details{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  min-height:100% !important;
  align-self:stretch !important;
  margin:0 !important;
  padding:26px 24px !important;
  border-radius:30px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0%,rgba(182,89,255,.28),transparent 43%),
    linear-gradient(180deg,rgba(31,7,54,.94),rgba(8,1,18,.96)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 18px 46px rgba(0,0,0,.34),
    0 0 34px rgba(182,89,255,.16) !important;
  transform:translateY(0) !important;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease !important;
}

#faq details::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  background:conic-gradient(from 180deg,transparent,rgba(138,251,215,.28),rgba(249,102,236,.35),rgba(182,89,255,.28),transparent 72%);
  opacity:.55;
  filter:blur(18px);
  animation:whyAura 7s linear infinite;
}

#faq details::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:29px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.12),transparent 24%,transparent 68%,rgba(255,255,255,.06)),
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.08),transparent 34%);
}

#faq details:hover{
  transform:translateY(-10px) scale(1.015) !important;
  border-color:rgba(249,102,236,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 24px 56px rgba(0,0,0,.42),
    0 0 42px rgba(249,102,236,.22) !important;
}

#faq details[open]{
  border-color:rgba(138,251,215,.28) !important;
}

#faq summary{
  list-style:none !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:21px !important;
  line-height:1.55 !important;
  font-weight:900 !important;
  padding-inline-start:34px !important;
  position:relative !important;
}

#faq summary::-webkit-details-marker{display:none !important;}

#faq summary::after{
  content:"+";
  position:absolute;
  left:0;
  top:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  transform:translateY(-50%);
  background:linear-gradient(135deg,rgba(182,89,255,.92),rgba(249,102,236,.76));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 20px rgba(182,89,255,.22);
  color:#fff;
  font-size:20px;
  line-height:1;
}

#faq details[open] summary::after{
  content:"−";
}

#faq details p{
  margin:16px 0 0 !important;
  color:rgba(217,200,235,.92) !important;
  font-size:16px !important;
  line-height:1.9 !important;
}

@media(max-width:900px){
  #faq.split-section > div:first-child{
    grid-template-columns:1fr !important;
  }
  #faq details:hover{
    transform:translateY(-7px) !important;
  }
}
.payment-section {
  text-align: center;
}

.payment-title {
  color: #c94cff;
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 26px;
  text-shadow: 0 0 14px rgba(201, 76, 255, 0.8);
}

.payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: transparent;
  padding: 10px 0;
}

.payment-badge {
  width: 78px;
  height: 44px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  box-sizing: border-box;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}

.payment-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* ضبط كل شعار لحاله */
.apple-logo {
  height: 21px;
  max-width: 58px;
}

.mada-logo {
  height: 18px;
  max-width: 54px;
}

.visa-logo {
  height: 18px;
  max-width: 56px;
}

.google-logo {
  height: 24px;
  max-width: 62px;
}

@media (max-width: 430px) {
  .payment-title {
    font-size: 30px;
    margin-bottom: 22px;
  }

  .payment-icons {
    gap: 12px;
  }

  .payment-badge {
    width: 68px;
    height: 40px;
    border-radius: 9px;
  }

  .google-logo {
    height: 22px;
  }

  .apple-logo {
    height: 20px;
  }

  .mada-logo,
  .visa-logo {
    height: 17px;
  }
}
.payment-badge {
  width: 86px;
  height: 48px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
}

.payment-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* تكبير حسب كل صورة */
.apple-logo {
  height: 22px;
  transform: scale(1.35);
}

.mada-logo {
  height: 20px;
  transform: scale(1.55);
}

.visa-logo {
  height: 20px;
  transform: scale(1.45);
}

.google-logo {
  height: 26px;
  transform: scale(1.25);
}