/*
 * ============================================================
 *  header-footer.css — الهيدر، الفوتر، القائمة الجانبية
 * ============================================================
 *  يحتوي على:
 *    • .site-header  — الشريط العلوي الثابت
 *    • .brand        — اللوغو في الهيدر
 *    • .main-nav     — روابط التنقل الرئيسية
 *    • .header-actions — أزرار السلة والحساب والأدمن
 *    • .icon-btn     — الأزرار الدائرية في الهيدر
 *    • .menu-overlay — الخلفية الداكنة عند فتح القائمة
 *    • .side-menu    — القائمة الجانبية المنزلقة
 *    • .site-footer  — الفوتر السفلي
 *    • .footer-grid  — شبكة الفوتر
 *    • .footer-links — روابط الفوتر
 *    • .payment-icons — أيقونات الدفع في الفوتر
 * ============================================================
 */

/* ===== HEADER ===== */
.site-header{
position:fixed;
inset:0 0 auto 0;
height:var(--header-h);
z-index:1000;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:10px clamp(14px,4vw,48px);
background:rgba(16,3,31,.82);
border-bottom:1px solid var(--line);
backdrop-filter:blur(14px)
}

.brand img{
width:58px;
height:58px;
border-radius:50%;
object-fit:cover;
box-shadow:var(--shadow)
}

.main-nav{
display:flex;
align-items:center;
gap:clamp(10px,2.5vw,34px);
font-weight:800
}

.main-nav a{
color:var(--muted);
transition:.2s;
white-space:nowrap
}

.main-nav a:hover{
color:#fff;
text-shadow:0 0 16px var(--purple)
}

.header-actions{display:flex;gap:10px}

.icon-btn{
width:40px;
height:40px;
border:1px solid var(--line);
border-radius:14px;
background:rgba(255,255,255,.04);
color:#fff;
cursor:pointer
}

/* ===== SIDE MENU OVERLAY ===== */
.menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:none;
z-index:1998;
}

.menu-overlay.show{
display:block;
}

/* ===== SIDE MENU ===== */
.side-menu{
position:fixed;
top:0;
right:-320px;
width:300px;
height:100vh;
background:#14042c;
padding:25px;
transition:.3s ease;
z-index:1999;
display:flex;
flex-direction:column;
gap:12px;
overflow-y:auto;
}

.side-menu.open{
right:0;
}

.side-menu h2{
margin:25px 0 15px;
}

.side-menu a{
padding:12px;
background:rgba(255,255,255,.05);
border-radius:10px;
color:#fff;
font-weight:800;
}

.close-menu{
position:absolute;
top:10px;
left:10px;
background:none;
border:none;
color:#fff;
font-size:28px;
cursor:pointer;
}

/* ===== FOOTER ===== */
.site-footer{
margin-top:40px;
border-top:1px solid var(--line);
padding:70px 28px 45px;
color:var(--text);
background:linear-gradient(180deg,rgba(16,3,31,.2),rgba(81,15,120,.18));
}

.footer-grid {
  /* زدنا العرض هنا ليتناسب مع فخامة الموقع الجديد */
  width: min(1350px, 100%); 
  margin: 0 auto;
  display: grid;
  /* توزيع الأعمدة بشكل متساوي ومريح للعين */
  grid-template-columns: repeat(3, 1fr); 
  gap: 60px; /* زيادة المسافة بين أقسام الفوتر */
  align-items: start;
}

/* تعديل بسيط لجعل عناوين الفوتر أوضح */
.footer-box h3 {
  font-size: 26px;
  margin: 0 0 20px;
  color: var(--purple);
  text-shadow: 0 0 10px rgba(182, 89, 255, 0.3);
}

.footer-box{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.footer-box h3{
font-size:30px;
margin:0 0 25px;
}

.footer-links{
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 28px;
text-align:center;
}

.footer-links li{
margin:0;
}

.footer-links a{
color:#ffd700;
font-size:16px;
font-weight:800;
white-space:nowrap;
transition:.2s;
}

.footer-links a:hover{
color:#fff;
text-shadow:0 0 10px var(--purple);
}

.whatsapp-btn img{
width:55px;
height:55px;
object-fit:contain;
filter:drop-shadow(0 0 12px rgba(37,211,102,.6));
}

.payment-icons{
margin:0;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.payment-icons span{
background:#f5f0ff;
color:#1b1230;
font-size:12px;
font-weight:900;
padding:6px 12px;
border-radius:5px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:950px){
.site-header{height:auto;flex-wrap:wrap}
.main-nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
}

@media(max-width:900px){
.footer-grid{
grid-template-columns:1fr;
gap:45px;
}
.footer-links{
grid-template-columns:1fr;
}
.payment-icons{
order:3;
}
}
.payment-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.payment-icons img {
  height: 30px;
  object-fit: contain;
  background: #fff;
  padding: 4px 8px;
  border-radius: 8px;
}.cart-qty-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* الأزرار */
.qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, #2b1240, #1a0f2e);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.qty-btn:hover {
  background: linear-gradient(145deg, #3a1a55, #24123a);
  transform: scale(1.05);
}

/* عند الضغط */
.qty-btn:active {
  transform: scale(0.92);
}

/* الرقم */
.cart-qty-control span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #00ffcc;
}

/* زر الزيادة */
.qty-btn.plus {
  box-shadow: 0 0 10px rgba(0,255,200,0.2);
}

/* زر النقص */
.qty-btn.minus {
  box-shadow: 0 0 10px rgba(255,80,80,0.2);
}

/* تحسين داخل كرت المنتج */
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}