/* =========================================================
   SEDN — Elegant Cream Luxury (v3)
   Goal:
   - Same exact cream tone like your image
   - Soft shadow gradients (light & luxe)
   - Header same as page
   - Footer NOT dark (logo clear)
   - High contrast readable typography (Cairo)
   - Premium WhatsApp button (new shape)
   ========================================================= */

/* --------- Variables --------- */
:root{
  /* لون مثل الصورة (سكّري دافي جدًا) */
  --sedn-cream: #F6F1EA;
  --sedn-cream-2:#F1EAE1;   /* أغمق شوي للظل */
  --sedn-cream-3:#FBF7F2;   /* أفتح شوي للضوء */

  /* نص */
  --sedn-ink: #141414;
  --sedn-ink-2: rgba(20,20,20,.78);

  /* فخامة ذهبية خفيفة */
  --sedn-gold: #D7B07A;
  --sedn-gold-2:#B98A4E;

  /* حدود/شفافية */
  --sedn-line: rgba(20,20,20,.08);
  --sedn-line-soft: rgba(20,20,20,.06);

  /* ظلال */
  --sedn-shadow-soft: 0 10px 26px rgba(0,0,0,.10);
  --sedn-shadow-card: 0 14px 34px rgba(0,0,0,.12);

  --sedn-radius: 18px;

  /* WhatsApp */
  --wa-green: #1FAF8E;     /* أخضر واتساب غني */
  --wa-green-deep:#15856E; /* غامق شوي */
}

/* --------- Font --------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

/* --------- Page background (lux soft shadows, NOT stripes) --------- */
html, body{
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  color: var(--sedn-ink) !important;
  line-height: 1.9;

  /* الخلفية: نفس اللون + ظلال إضاءة ناعمة */
  background:
    radial-gradient(1200px 520px at 20% -10%,
      rgba(0,0,0,.06), transparent 62%),
    radial-gradient(900px 520px at 90% 10%,
      rgba(255,255,255,.70), transparent 58%),
    radial-gradient(1100px 600px at 50% 120%,
      rgba(0,0,0,.05), transparent 65%),
    linear-gradient(180deg,
      var(--sedn-cream-3),
      var(--sedn-cream)) !important;
}

/* تحسين القراءة */
p, li, span, div{
  color: var(--sedn-ink-2);
}

/* تحديد النص */
::selection{
  background: rgba(215,176,122,.35);
  color: var(--sedn-ink);
}

/* روابط */
a{
  color: var(--sedn-ink) !important;
  text-decoration: none;
}
a:hover{ opacity:.85; }

/* --------- Header (same cream tone) --------- */
header, .site-header, .header, .app-header{
  background: rgba(246,241,234,.92) !important; /* نفس لون الصورة */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sedn-line) !important;
}

/* خط فخم رفيع تحت الهيدر */
header:after, .site-header:after, .header:after, .app-header:after{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(215,176,122,.55), transparent);
}

/* الشعار */
header .logo img,
.site-header .logo img,
.header__logo img,
.app-header .logo img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.14));
  transition: transform .25s ease, filter .25s ease;
}
header .logo:hover img,
.site-header .logo:hover img{
  transform: scale(1.05);
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.18));
}

/* --------- Titles --------- */
h1,h2,h3,h4{
  color: var(--sedn-ink) !important;
  letter-spacing: .25px;
}

/* --------- Cards / Products (clear + luxe) --------- */
.product, .product-item, .product-card, .s-product-card, .card{
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(20,20,20,.08) !important;
  border-radius: var(--sedn-radius) !important;
  box-shadow: var(--sedn-shadow-soft);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
}

/* لمعة ذهبية ناعمة على الكارد */
.product:before, .product-item:before, .product-card:before, .s-product-card:before, .card:before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent, rgba(215,176,122,.14), transparent);
  transform: rotate(12deg);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.product:hover, .product-item:hover, .product-card:hover, .s-product-card:hover, .card:hover{
  transform: translateY(-6px);
  box-shadow: var(--sedn-shadow-card);
  border-color: rgba(215,176,122,.26) !important;
}
.product:hover:before, .product-item:hover:before, .product-card:hover:before{
  opacity: 1;
}

/* صور */
.product img, .product-card img, .s-product-card img, .card img{
  transition: transform .35s ease;
}
.product:hover img, .product-card:hover img, .s-product-card:hover img, .card:hover img{
  transform: scale(1.03);
}

/* اسم المنتج والسعر */
.product-title, .product__title, .s-product-card-content h3, .card h3{
  color: var(--sedn-ink) !important;
}
.product-price, .price, .s-product-card-price{
  color: var(--sedn-ink) !important;
  font-weight: 700;
}

/* بادج */
.badge, .tag, .s-badge{
  border-radius: 999px !important;
  background: rgba(215,176,122,.18) !important;
  border: 1px solid rgba(215,176,122,.28) !important;
  color: var(--sedn-ink) !important;
}

/* --------- Buttons (premium, readable) --------- */
button, .btn, .s-button, .btn-primary, .button--primary{
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  font-weight: 600;
}

/* زر رئيسي: أسود نظيف مع لمسة ذهب */
.btn-primary, .button--primary, .s-button-primary{
  background: linear-gradient(135deg, #1B1B1B, #0C0C0C) !important;
  border: 1px solid rgba(215,176,122,.45) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.btn-primary:hover, .button--primary:hover, .s-button-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

/* زر ثانوي: سكّري واضح */
.btn-secondary, .button--secondary, .s-button-secondary{
  background: rgba(246,241,234,.95) !important;
  border: 1px solid rgba(20,20,20,.10) !important;
  color: var(--sedn-ink) !important;
}

/* --------- Inputs (واضحة مع الخلفية) --------- */
input, select, textarea{
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(20,20,20,.12) !important;
  border-radius: 14px !important;
  color: var(--sedn-ink) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(20,20,20,.45) !important;
}
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color: rgba(215,176,122,.55) !important;
  box-shadow: 0 0 0 4px rgba(215,176,122,.18) !important;
}

/* --------- Footer (NOT dark — logo clear) --------- */
footer, .footer, .site-footer{
  background:
    radial-gradient(900px 420px at 18% 0%,
      rgba(215,176,122,.16), transparent 60%),
    linear-gradient(180deg, var(--sedn-cream-3), var(--sedn-cream-2)) !important;

  border-top: 1px solid rgba(215,176,122,.35) !important;
  color: var(--sedn-ink) !important;
}

/* روابط الفوتر */
footer a, .footer a, .site-footer a{
  color: var(--sedn-ink) !important;
}
footer a:hover{ opacity:.85; }

/* --------- WhatsApp (NEW SHAPE + luxe animation) --------- */
#sednWhatsApp{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 999999;

  width: 62px;
  height: 62px;
  border-radius: 999px; /* رجعناه دائرة لكن فخمة */
  display: grid;
  place-items: center;

  /* زر زجاجي أخضر */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 40%),
    linear-gradient(135deg, var(--wa-green), var(--wa-green-deep));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);

  transform: translateZ(0);
  overflow: visible;
}

/* حلقة خارجية فخمة */
#sednWhatsApp:before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius: 999px;
  border: 1px solid rgba(21,133,110,.25);
  background: radial-gradient(circle, rgba(21,133,110,.12), transparent 60%);
  filter: blur(0.3px);
  animation: sednWaHalo 2.7s ease-in-out infinite;
}

/* نبض خفيف */
#sednWhatsApp:after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  animation: sednWaPulse 2.0s ease-out infinite;
}

#sednWhatsApp svg{
  width: 28px;
  height: 28px;
  fill: #fff;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
  animation: sednWaFloat 4.2s ease-in-out infinite;
}

/* Hover */
#sednWhatsApp:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(0,0,0,.26);
}

@keyframes sednWaPulse{
  0%{ transform: scale(.96); opacity: 0; }
  40%{ opacity: .55; }
  100%{ transform: scale(1.10); opacity: 0; }
}
@keyframes sednWaHalo{
  0%,100%{ transform: scale(1); opacity: .55; }
  50%{ transform: scale(1.06); opacity: .85; }
}
@keyframes sednWaFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

@media (max-width:480px){
  #sednWhatsApp{ left: 14px; bottom: 14px; width: 58px; height: 58px; }
  #sednWhatsApp svg{ width: 26px; height: 26px; }
}


____
/* ======================================
   SEDN — Fix Header + Video Overlap
   ====================================== */

/* نخلي الهيدر عمودي (شعار فوق، تصنيفات تحت) */
header .container,
.site-header .container,
.header .container,
.app-header .container{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* مسافة فخمة بين الشعار والتصنيفات */
header nav,
.site-header nav,
.header nav,
.app-header nav{
  margin-top: 14px !important;   /* المسافة المطلوبة */
}

/* نرفع الشعار شوي بدون ما يضغط على التصنيفات */
header .logo,
.site-header .logo,
.header__logo,
.app-header .logo{
  margin-top: -8px !important;
  margin-bottom: 8px !important;
}

/* لو فيه شريط تصنيفات أفقي */
.header__nav,
.site-header__nav,
.navbar,
.nav{
  padding-top: 35px !important;
}

/* موبايل — مسافة أقل عشان ما يكبر الهيدر */
@media (max-width: 768px){
  header nav,
  .site-header nav,
  .header nav,
  .app-header nav{
    margin-top: 10px !important;
  }

  header .logo img,
  .site-header .logo img{
    max-height: 68px !important;
  }
}


----------