/*
 * ============================================================
 *  base.css — الأساس العام للموقع
 * ============================================================
 *  الملف ده هو نقطة البداية لكل شيء في الموقع.
 *  يحتوي على:
 *    • متغيرات الألوان والخطوط والظلال (CSS Variables)
 *    • إعادة تعيين الافتراضيات (Reset)
 *    • تنسيق body والخلفية العامة
 *    • تنسيق العناوين h1 h2 h3
 *    • الأزرار العامة (primary-btn, secondary-btn, back-btn)
 *    • الكلاسات المشتركة بين أكثر من صفحة
 *  لا يحتوي على: هيدر، فوتر، أقسام خاصة، أدمن، حساب
 * ============================================================
 */

:root{
--bg:#10031f;
--card:rgba(37,9,58,.82);
--card2:rgba(81,15,120,.5);
--text:#fff;
--muted:#d9c8eb;
--purple:#b659ff;
--pink:#f966ec;
--cyan:#8afbd7;
--line:rgba(255,255,255,.16);
--shadow:0 0 45px rgba(177,54,255,.32);
--header-h:82px
}

*{box-sizing:border-box}

html{
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + 20px)
}

body{
margin:0;
font-family:Tajawal,Arial,sans-serif;
background:
radial-gradient(circle at 15% 0,rgba(180,60,255,.28),transparent 32%),
radial-gradient(circle at 90% 45%,rgba(122,0,180,.22),transparent 34%),
var(--bg);
color:var(--text);
min-height:100vh
}

a{color:inherit;text-decoration:none}
button{font:inherit}

/* MAIN */
main{padding-top:var(--header-h)}

.view {
  width: min(1400px, calc(100% - 40px)); /* زدنا العرض من 1180 إلى 1400 */
  margin: 0 auto;
}


.hidden-view{display:none}
.active-view{display:block}

.section-block{
padding:clamp(54px,8vw,100px) 0;
border-bottom:1px solid rgba(255,255,255,.08)
}

/* العناوين */
h1{
font-size:clamp(38px,7vw,84px);
line-height:1.05;
margin:0 0 18px
}

h2{
font-size:clamp(32px,5vw,58px);
text-align:center;
margin:0 0 36px;
text-shadow:0 0 20px rgba(182,89,255,.75)
}

h3{margin:0 0 10px}

/* BUTTONS */
.primary-btn,
.secondary-btn,
.back-btn,
.product-card button{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
padding:14px 26px;
background:linear-gradient(135deg,#8c38a8,#45066a);
color:#fff;
cursor:pointer;
box-shadow:var(--shadow);
font-weight:900
}

/* CARDS العامة */
.glass-card,
.category-card,
.product-card,
.support-box,
.contact-card,
details{
background:linear-gradient(180deg,var(--card2),rgba(20,4,40,.9));
border:1px solid rgba(225,150,255,.25);
border-radius:28px;
padding:24px;
box-shadow:var(--shadow)
}

/* STATUS PILL */
.status-pill{
display:inline-flex;
padding:8px 14px;
border-radius:999px;
background:rgba(65,255,170,.16);
color:#8afbd7;
border:1px solid rgba(138,251,215,.35);
font-weight:900;
}
.status-pill.unavailable{
background:rgba(255,80,110,.16);
color:#ff8aa0;
border-color:rgba(255,80,110,.35);
}

/* PAGES */
.page-view{
min-height:calc(100vh - var(--header-h));
padding:42px 0 80px
}

.page-title-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:28px
}

.page-title-row h1{
font-size:clamp(34px,6vw,72px);
text-shadow:0 0 24px var(--purple)
}

/* RESPONSIVE */
@media(max-width:950px){
main{padding-top:122px}
.page-title-row{flex-direction:column-reverse;align-items:flex-start}
}
/* 🔥 إجبار المربعات تشتغل */
.payment-methods-selector {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* المربع نفسه */
.pay-method-content {
  height: 55px !important;
  background: #fff !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}

/* الصورة */
.pay-method-content img {
  max-width: 100px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  display: block !important;
}