:root{
  --primaryColor:#4b00ff;
  --secondaryColor:#0f042a;
  --primaryBackground:#0f042a;
  --secondaryBackground:#0f042a;
  --textOnDark:#ffffff;
  --textOnLight:#0f042a;
  --shadowDeep:0 18px 40px rgba(0,0,0,.45);
  --shadowSoft:0 10px 24px rgba(0,0,0,.18);
  --radiusLg:16px;
  --fx-glow-size:2px;
  --fx-glow-shadow:0 0 14px rgba(75,0,255,.45);
  --fx-glow-speed:3.8s;
  --fx-stars-opacity:.55;
  --fx-stars-speed:3.2s;
  --fx-hover-boost:1.15;
}

html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  background-image:linear-gradient(var(--primaryBackground),var(--secondaryBackground));
  color:#fff;
  margin:0;padding:0;direction:rtl
}

/* فيديو الشعار */
.logo-video{width:300px;height:auto;display:block;margin:0 auto}

/* الهيدر */
header,.navbar,nav,header.bg-white,.navbar.bg-white{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(90deg,#4b00ff 0%,#2b0a90 50%,#0f042a 100%) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:0 !important;box-shadow:0 2px 14px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.12)
}
.bg-white:not(header):not(.navbar):not(nav){background-color:#0f042a !important}
header::after,.navbar::after,nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#0f042a,#4b00ff,#0f042a);opacity:.45
}
header a,.navbar a,nav a{
  color:#dfdde1 !important;text-decoration:none;font-weight:600;
  padding:8px 14px;position:relative;transition:color .2s ease
}
header a::after,.navbar a::after,nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#4b00ff;
  transform:scaleX(0);transform-origin:right;transition:transform .25s ease
}
header a:hover,.navbar a:hover,nav a:hover{color:#fff !important}
header a:hover::after,.navbar a:hover::after,nav a:hover::after{transform:scaleX(1);transform-origin:left}
header .btn,.navbar .btn,nav .btn,header button,.navbar button,nav button{
  background:transparent !important;color:#fff !important;border:1px solid rgba(255,255,255,.7) !important;
  border-radius:10px;padding:6px 14px;transition:background-color .2s,border-color .2s,transform .08s
}
header .btn:hover,.navbar .btn:hover,nav .btn:hover,header button:hover,.navbar button:hover,nav button:hover{
  background:rgba(255,255,255,.15) !important;border-color:#f4f3f9 !important
}
header .btn:active,.navbar .btn:active,nav .btn:active,header button:active,.navbar button:active,nav button:active{
  transform:translateY(1px)
}
header+*,.navbar+*,nav+*{border-top:0 !important}
header .container,.navbar .container,nav .container{padding:10px 16px}

/* عنوان داخل .my-10 */
.my-10>h3.text-black{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.15)}
.my-10>h3.text-black *{color:inherit !important}
.my-10 h3 p{margin:0}

/* أيقونات/قوائم */
.icon--check{color:var(--secondaryColor);border:1px solid var(--secondaryColor)}

/* الأزرار */
.btn--cta{
  background-color:var(--primaryColor);color:#fff;padding:12px 25px;border-radius:25px;border:none;cursor:pointer;
  font-weight:bold;transition:background-color .8s,color .8s
}
.btn--cta:hover{
  background-color:var(--secondaryColor);color:#fff;border:1px solid var(--secondaryColor);
  background-image:linear-gradient(to right,var(--primaryColor),var(--secondaryColor))
}
.btn--primary-outline{
  background-color:var(--secondaryColor);color:#fff;border-radius:25px;border:1px solid var(--secondaryColor);
  padding:12px 25px;cursor:pointer;transition:background-color .8s,color .8s
}
.btn--primary-outline:hover{
  background-color:var(--primaryColor);color:#fff;border:1px solid var(--primaryColor);
  background-image:linear-gradient(to right,var(--secondaryColor),var(--primaryColor))
}
.btn--custom{
  position:relative;display:flex;height:50px;width:160px;align-items:center;justify-content:center;overflow:hidden;
  background-color:var(--secondaryColor);color:#fff;border-radius:10px;box-shadow:0 10px 15px rgba(0,0,0,.25);transition:all .3s
}
.btn--custom::before{
  content:"";position:absolute;height:0;width:0;border-radius:50%;background-color:var(--primaryColor);
  transition:height .5s ease-out,width .5s ease-out
}
.btn--custom:hover{box-shadow:0 10px 15px rgba(75,0,255,.5)}
.btn--custom:hover::before{height:224px;width:224px}
.btn--login{background-color:var(--primaryColor);color:#fff;border-radius:25px;padding:10px 20px;cursor:pointer}

/* البطاقات العامة */
.card{border:2px solid var(--secondaryColor);border-radius:10px;background-color:var(--secondaryBackground);padding:15px;transition:all .3s}
.card:hover{border:2px solid var(--primaryColor);background-color:#fff;color:var(--secondaryColor)}
.testimonial-card{
  border-image:linear-gradient(to bottom,var(--secondaryColor) 0%,var(--primaryColor) 100%) 1;
  border-radius:8px;border-width:4px;border-style:solid;padding:15px;background-color:#fff;color:var(--secondaryColor)
}

/* نصوص وتأثيرات */
.text-gradient{
  background-image:linear-gradient(var(--secondaryColor),var(--primaryColor));
  color:transparent;background-clip:text;-webkit-background-clip:text;font-weight:bold
}
.footer-link:hover{color:var(--primaryColor)}
.link--accent,.heading--accent,.text--accent,.tag--icon{color:var(--primaryColor)}

/* أيقونات */
.feature__icon{
  border-radius:50%;width:4rem;height:4rem;display:flex;justify-content:center;align-items:center;
  background-color:var(--secondaryBackground);color:var(--primaryColor);box-shadow:0 4px 6px rgb(0 0 0);transition:background-color .8s,color .8s
}
.feature__icon:hover{background-color:var(--primaryColor);color:var(--secondaryBackground)}
.feature__description{color:var(--secondaryColor)}
.feature__description:hover{color:var(--primaryColor)}

/* الروابط */
.link{
  position:relative;color:var(--primaryColor);font-weight:500;transition:color .3s ease-in-out
}
.link::before,.link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--primaryColor);
  transition:transform .3s ease-in-out,background .3s ease-in-out;transform:scaleX(0)
}
.link::after{background:var(--secondaryColor);transition-delay:.1s}
.link:hover{color:var(--secondaryColor)}
.link:hover::before,.link:hover::after{transform:scaleX(1)}
.link i{color:var(--primaryColor);transition:transform .3s ease-in-out,color .3s ease-in-out}
.link:hover i{color:var(--secondaryColor);transform:translateX(-5px)}

/* السوشيال */
.social-icon{
  display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.75rem;
  color:var(--primaryColor);border-radius:50%;position:relative;overflow:hidden;transition:all .3s ease
}
.social-icon::before{
  content:"";position:absolute;inset:0;border-radius:50%;background-color:var(--secondaryColor);transform:scale(0);transition:transform .3s ease;z-index:-1
}
.social-icon:hover::before{transform:scale(1)}
.social-icon:hover{color:#fff;transform:translateY(-3px)}

/* صور صغيرة */
img.app--icon{position:relative;width:60px;height:60px;border-radius:10px;overflow:hidden}
img.app--icon::before,img.app--icon::after{
  content:"";position:absolute;inset:0;opacity:0;transition:transform .5s ease,opacity .5s ease
}
img.app--icon::before{background:rgba(75,0,255,.3);transform:scale(.8);z-index:1}
img.app--icon::after{background:rgba(15,4,42,.3);transform:scale(1.2);z-index:0}
img.app--icon:hover::before,img.app--icon:hover::after{opacity:1;transform:scale(1)}

/* خلفية الفوتر الممتد */
.max-w-7xl:last-of-type{
  background-color:#0f042a;color:#fff;max-width:100% !important;margin:0 !important;padding:40px 20px
}
a.link{color:#f4efef !important}
a.link i{color:#f2ecec !important}
div.text-sm.uppercase.font-bold.text-\[var\(--primaryColor\)\]{color:#f5efef !important}

/* صفحة تسجيل الدخول: خلفية مركزية */
div[class*="min-h-screen"]{
  min-height:100vh;background:linear-gradient(180deg,var(--primaryBackground),var(--secondaryBackground));
  display:flex;align-items:center;justify-content:center;padding:60px 16px;color:var(--textOnDark)
}

/* طبقات لونية للبطاقات المائلة */
.card{border-radius:24px !important;box-shadow:var(--shadowSoft)}
.card.transform.-rotate-6{background:var(--primaryColor) !important;filter:saturate(1.1)}
.card.transform.rotate-6{background:var(--secondaryColor) !important}

/* صندوق تسجيل الدخول الأبيض */
.relative.w-full.rounded-3xl.px-6.py-4.bg-gray-100.shadow-md{
  background:#fff !important;color:var(--textOnLight);border-radius:24px;padding:28px 24px !important;
  box-shadow:var(--shadowDeep);border:1px solid rgba(75,0,255,.12)
}
.relative.w-full.rounded-3xl.px-6.py-4.bg-gray-100.shadow-md label.block{
  display:block;margin-top:6px;font-weight:700;color:var(--secondaryColor)
}
#formAuthentication .mb-4 label{display:block;margin:10px 0 6px;font-weight:600;color:#4a4a4a}
#formAuthentication input[type="text"],
#formAuthentication input[type="email"],
#formAuthentication input[type="password"]{
  width:100%;height:48px;border-radius:14px;padding:0 14px;border:1px solid rgba(15,4,42,.18);
  background:#f6f7fb;color:#1a1a1a;outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s,transform .06s;
  box-shadow:0 6px 16px rgba(0,0,0,.06)
}
#formAuthentication input::placeholder{color:#9aa0a6}
#formAuthentication input:focus{border-color:var(--primaryColor);box-shadow:0 0 0 3px rgba(75,0,255,.18);background:#fff}
#formAuthentication .mb-4{margin-bottom:18px !important}
#formAuthentication a{color:var(--primaryColor) !important;text-decoration:none;font-weight:500;transition:color .2s ease,transform .12s ease}
#formAuthentication a:hover{color:#6f41ff;transform:translateX(-2px)}
#formAuthentication .mr-2{color:#6b7280;font-size:13px}
#formAuthentication .mt-7 button{
  width:100%;height:50px;border-radius:14px;border:0;cursor:pointer;font-weight:700;letter-spacing:.2px;color:#fff;
  background:linear-gradient(90deg,#4b00ff,#7a47ff);box-shadow:0 12px 24px rgba(75,0,255,.32);
  transition:transform .08s ease,box-shadow .2s ease,filter .18s ease
}
#formAuthentication .mt-7 button:hover{filter:brightness(1.07);box-shadow:0 14px 28px rgba(75,0,255,.36)}
#formAuthentication .mt-7 button:active{transform:translateY(1px)}
#formAuthentication .mt-7 button.secondary{background:linear-gradient(90deg,var(--secondaryColor),#24124f);box-shadow:0 12px 24px rgba(15,4,42,.35)}
#formAuthentication .mt-7 .flex{display:flex;align-items:center;justify-content:flex-start}

/* بدائل لبعض كلاسات Tailwind */
.shadow-lg{box-shadow:var(--shadowSoft)}
.rounded-3xl{border-radius:24px}
.bg-gray-100{background:#ffffff}
.w-full{width:100%}
.h-full{height:100%}
.transition{transition:all .25s ease}
.transform{transform:translateZ(0)}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:-translate-x:hover{transform:translateX(-4px)}
@media (max-width:480px){
  .relative.sm\:max-w-sm.w-96.mt-10{width:92vw}
  .relative.w-full.rounded-3xl.px-6.py-4.bg-gray-100.shadow-md{padding:22px 18px}
}
hr,.border-gray-300{border-color:rgba(15,4,42,.18) !important}

/* تلوين عناوين معينة */
h1.mb-12.text-4xl.font-bold.text-gray-900{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.12)}
h1.mb-12.text-4xl.font-bold.text-gray-900 *{color:inherit !important}
h1.mb-12.text-4xl.font-bold.text-gray-900>p{margin-top:.35rem;font-weight:500;opacity:.95}

/* وصف المنتجات للثيم الداكن */
p.text-gray-600.leading-relaxed.mb-6.line-clamp-3.group-hover\:text-gray-700.transition-colors.duration-300{
  color:#fff !important;white-space:pre-line;transition:none !important
}
.group:hover p.text-gray-600.leading-relaxed.mb-6.line-clamp-3.group-hover\:text-gray-700.transition-colors.duration-300{color:#fff !important}

/* عناوين داخل الباقات */
h4.text-gray-800.font-semibold.text-lg.mb-4{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.122)}
h4.text-gray-800.font-semibold.text-lg.mb-4 *{color:inherit !important}

/* تأثيرات للكروت + نجوم و توهج */
.card.rounded-3xl,.app-card,section#iphone .app-card,section#iphone article{
  outline:1px solid rgb(208,208,208) !important;position:relative;overflow:hidden;isolation:isolate;border-radius:1.5rem
}
@property --angle{syntax:"";initial-value:0deg;inherits:false}
.fx--glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--fx-glow-size);
  background:conic-gradient(from var(--angle),
    color-mix(in oklab,var(--primaryColor) 70%,transparent) 0turn,
    color-mix(in oklab,var(--secondaryColor) 70%,transparent) .25turn,
    color-mix(in oklab,var(--primaryColor) 70%,transparent) .5turn,
    color-mix(in oklab,var(--secondaryColor) 70%,transparent) .75turn,
    color-mix(in oklab,var(--primaryColor) 70%,transparent) 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:fx-spin var(--fx-glow-speed) linear infinite;filter:var(--fx-glow-shadow);pointer-events:none;will-change:transform,filter
}
@keyframes fx-spin{to{--angle:360deg}}
.fx--hover-boost:hover::before{filter:drop-shadow(0 0 22px rgba(75,0,255,.65));animation-duration:calc(var(--fx-glow-speed)/var(--fx-hover-boost))}
.fx--stars::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:var(--fx-stars-opacity);
  background:
    radial-gradient(1.6px 1.6px at 10% 15%,#fff8 40%,transparent 42%),
    radial-gradient(1.2px 1.2px at 20% 25%,#fff8 40%,transparent 42%),
    radial-gradient(1.8px 1.8px at 30% 35%,#fff8 40%,transparent 42%),
    radial-gradient(1.4px 1.4px at 40% 45%,#fff8 40%,transparent 42%),
    radial-gradient(1.2px 1.2px at 50% 55%,#fff8 40%,transparent 42%),
    radial-gradient(1.5px 1.5px at 60% 65%,#fff8 40%,transparent 42%),
    radial-gradient(1.3px 1.3px at 70% 75%,#fff8 40%,transparent 42%),
    radial-gradient(1.7px 1.7px at 80% 85%,#fff8 40%,transparent 42%),
    radial-gradient(1.2px 1.2px at 90% 20%,#fff8 40%,transparent 42%),
    radial-gradient(1.6px 1.6px at 15% 90%,#fff8 40%,transparent 42%);
  animation:fx-twinkle var(--fx-stars-speed) ease-in-out infinite alternate;will-change:opacity,filter
}
@keyframes fx-twinkle{0%{opacity:calc(var(--fx-stars-opacity) - .2);filter:brightness(.9)}50%{opacity:calc(var(--fx-stars-opacity) + .2);filter:brightness(1.35)}100%{opacity:var(--fx-stars-opacity);filter:brightness(1)}}
.fx-comet{
  position:absolute;top:-10%;left:-30%;width:160px;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.9));transform:rotate(-25deg);pointer-events:none;opacity:0;animation:fx-comet 6s ease-in-out infinite
}
.fx-comet::after{content:"";position:absolute;right:28%;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
@keyframes fx-comet{0%{transform:translate(-20%,-20%) rotate(-25deg);opacity:0}10%{opacity:1}45%{transform:translate(120%,120%) rotate(-25deg);opacity:1}60%{opacity:0}100%{transform:translate(180%,180%) rotate(-25deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .fx--glow::before{animation-duration:20s}
  .fx--stars::after,.fx--shimmer::after,.fx-comet{animation:none !important}
}

/* ألوان روابط أسفل الصفحة */
a.link,a.link i,div.text-sm.uppercase.font-bold.text-\[var\(--primaryColor\)\]{color:#000 !important}

/* بطاقات المنتجات فقط */
.product-card-enhanced{
  border-radius:12px;border:1px solid #eee;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.05);
  overflow:hidden;text-align:center;padding:0;transition:all .3s ease
}
.product-card-enhanced:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.product-card-enhanced img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#f7f7f7;border-radius:0
}
.product-card-enhanced .relative.overflow-hidden.rounded-t-2xl{position:relative}
.product-card-enhanced .relative.overflow-hidden.rounded-t-2xl::after{
  content:"وفر 38%";position:absolute;top:10px;right:10px;background:#e63946;color:#fff;
  font-size:13px;font-weight:700;padding:4px 8px;border-radius:6px;z-index:5
}
.product-card-enhanced h3{margin:12px 0 6px;font-size:16px;font-weight:600;color:#333 !important;line-height:1.4}
.product-card-enhanced p{display:none !important}
.product-card-enhanced h3::after{content:"★★★★★";display:block;margin-top:4px;font-size:14px;color:#f6c10a;letter-spacing:2px}
.product-card-enhanced .relative>.absolute.bottom-4.left-4.inline-flex{display:inline-flex !important}
.product-card-enhanced .space-y-3{display:flex;gap:8px;justify-content:center;margin-top:12px}
.product-card-enhanced a[href*="/product/"]{
  all:unset;display:inline-block;background:#4b00ffa6;color:#fff !important;padding:6px 12px;border-radius:6px;
  font-size:14px;font-weight:600;cursor:pointer;transition:background .3s
}
.product-card-enhanced a[href*="/product/"]:hover{background:#3a00cc}
.product-card-enhanced a[href*="/product/"]::before{content:"🛒 "}