/* =========================================================
   AURORA NEO THEME — متجر حديث جذاب (فاتح) + تفاعلات
   - هيدر بتدرج لامع مميز
   - ألوان حديثة عالية التباين
   - حركات دقيقة لكل عنصر تقريبًا (Hover, Focus, Scroll, Ripple, Tilt, Parallax, Badges, Toasts)
   - RTL جاهز
   ========================================================= */

/* 0) Tokens */
:root{
  /* Base */
  --bg:#f8fbff;           /* خلفية عامة فاتحة */
  --surface:#ffffff;      /* أسطح */
  --border:#e7eef9;
  --text:#141a33;
  --text-soft:#5c688b;

  /* Brand */
  --brand-start:#7a5cff;  /* بنفسجي لافندر */
  --brand-end:#00d2ff;    /* سماوي */
  --brand:#5f7dff;        /* لون أساسي ثابت */
  --brand-600:#4968f0;
  --brand-700:#3c57d4;

  /* Accents */
  --mint:#38ef7d;
  --coral:#ff7e67;
  --amber:#ffb300;

  /* FX */
  --glass: rgba(255,255,255,.65);
  --shadow-sm: 0 6px 16px rgba(30,56,120,.08);
  --shadow:    0 14px 34px rgba(30,56,120,.12);
  --radius:16px;
  --radius-lg:22px;
  --transition:.22s cubic-bezier(.2,.8,.2,1);
  --grad-brand: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  --grad-mint:  linear-gradient(135deg, #84fab0, #8fd3f4);
  --grad-coral: linear-gradient(135deg, #f6d365, #fda085);
  --grad-hero:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,26,51,.25) 78%);
  --blur: blur(10px);
  --ring: 0 0 0 3px rgba(95,125,255,.25);
}

html,body{ background:var(--bg); color:var(--text); font-family:"Cairo","Tajawal",system-ui,Segoe UI,Roboto,Arial; }
*{ box-sizing:border-box; }
img{ max-width:100%; display:block; border-radius:14px; }
a{ color:var(--brand-700); text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--brand); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cfe0ff; border-radius:10px; }
::-webkit-scrollbar-track{ background:#eef4ff; }

/* 1) Header — Aurora Bar */
.header-aurora{
  position:sticky; top:0; z-index:1000;
  background: var(--grad-brand);
  color:#fff;
  box-shadow: var(--shadow);
}
.header-aurora .navbar{
  background: transparent!important; box-shadow:none; border:0;
}
.header-aurora .brand{
  display:flex; align-items:center; gap:.65rem; font-weight:900; letter-spacing:.2px; color:#fff;
}
.header-aurora .brand-badge{
  width:36px; height:36px; border-radius:11px; background:#fff;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.75));
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.header-aurora .nav-link{
  color:#e8f4ff!important; font-weight:800; padding:.7rem .9rem!important; border-radius:10px;
  transition: background var(--transition), transform var(--transition);
}
.header-aurora .nav-link:hover, .header-aurora .nav-link.active{
  background: rgba(255,255,255,.14); transform: translateY(-1px);
}

.header-search{
  display:flex; align-items:center; position:relative;
}
.header-search input{
  background: var(--glass); backdrop-filter: var(--blur);
  color:#0d1433; border:1px solid rgba(255,255,255,.35);
  border-radius:14px; height:48px; padding-inline:1rem 3rem;
  min-width: clamp(280px, 34vw, 520px);
  transition: box-shadow var(--transition), transform var(--transition);
}
.header-search input:focus{ outline:none; box-shadow: var(--ring); transform: translateY(-1px); }
.header-search .icon{ position:absolute; right:10px; left:auto; color:#1a254b; opacity:.8; }

/* 2) Badges / Buttons / Chips */
.btn{ border-radius:12px; font-weight:900; padding:.75rem 1rem; position:relative; overflow:hidden; transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.btn-primary{ color:#0a1230; background:var(--grad-mint); border:0; box-shadow:0 10px 22px rgba(56,239,125,.24); }
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-brand{ color:#fff; background:var(--brand); border:1px solid var(--brand-600); box-shadow:0 10px 22px rgba(95,125,255,.25); }
.btn-brand:hover{ background:var(--brand-600); transform: translateY(-1px); }
.btn-ghost{ color:var(--brand-700); background:#fff; border:1px solid var(--border); }
.btn-ghost:hover{ background:#f4f7ff; }

.badge{ border-radius:999px; padding:.4rem .7rem; font-weight:800; }
.badge.mint{ background:#e6fff1; color:#035a2b; border:1px solid #bdf0d1; }
.badge.coral{ background:#fff0ec; color:#7d1e12; border:1px solid #ffd7ce; }
.badge.brand{ background:#eef2ff; color:#2f3ea8; border:1px solid #d9e1ff; }

/* 3) Cards / Surfaces */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; }
.card-hover{ transition: transform var(--transition), box-shadow var(--transition); }
.card-hover:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }

/* 4) Hero */
.hero{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); background:var(--surface); border:1px solid var(--border); }
.hero img{ width:100%; height:440px; object-fit:cover; transform: translate3d(calc(var(--px,0px)*.02), calc(var(--py,0px)*.02), 0) scale(1.03); transition: transform .08s linear; }
.hero::after{ content:""; position:absolute; inset:0; background: var(--grad-hero); }
.hero .hero-content{ position:absolute; inset:auto 0 0 0; padding:2rem; color:#fff; z-index:2; transform: translate3d(calc(var(--px,0px)*-.02), calc(var(--py,0px)*-.02), 0); }
.hero .title{ font-size: clamp(28px,3.4vw,48px); font-weight:900; text-shadow:0 6px 24px rgba(0,0,0,.25); }
.hero .subtitle{ font-size: clamp(14px,1.6vw,18px); opacity:.97; }

/* 5) Collections */
.section-title{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0; }
.section-title h2{ font-weight:900; color:var(--text); }

.collection-tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:230px; border:1px solid var(--border); box-shadow: var(--shadow-sm); background:var(--surface); }
.collection-tile img{ width:100%; height:100%; object-fit:cover; transition: transform var(--transition), filter var(--transition); }
.collection-tile:hover img{ transform: scale(1.05); filter: saturate(1.12) contrast(1.05); }
.collection-tile .label{ position:absolute; bottom:16px; left:16px; right:16px; padding:.85rem 1rem; border-radius:12px; font-weight:900; background:var(--grad-coral); color:#2b0e09; box-shadow:0 10px 24px rgba(253,160,133,.25); }
.collection-tile .label.alt{ background:var(--grad-mint); color:#0b2b19; box-shadow:0 10px 24px rgba(132,250,176,.25); }

/* 6) Product Grid */
.product-card{ display:flex; flex-direction:column; height:100%; }
.product-card .card-img-top{ aspect-ratio: 1/1; object-fit:cover; background:#f1f5ff; border-bottom:1px solid var(--border); transition: transform var(--transition); }
.product-card:hover .card-img-top{ transform: scale(1.035); }
.product-card .card-body{ display:flex; flex-direction:column; gap:.25rem; }
.product-card .card-title{ font-weight:900; color:var(--text); }
.product-card .meta{ color:var(--text-soft); font-weight:700; }
.product-card .price{ color:var(--brand-700); font-weight:900; font-size:1.08rem; }
.product-card .currency{ color:#0d1738; font-weight:900; }
.product-card .actions{ position:relative; height:0; overflow:visible; }
.product-card .add-btn{ position:absolute; bottom:-14px; right:12px; transform: translateY(12px); opacity:0; transition: all var(--transition); }
.product-card:hover .add-btn{ transform: translateY(0); opacity:1; }

/* 7) Category chips */
.category-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:999px; background:#eef2ff; color:#2b378f; font-weight:800; border:1px solid #d9e2ff; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.category-chip:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(95,125,255,.18); background:#e6ebff; }

/* 8) Forms & Tables */
.form-control,.form-select{ background:#fbfdff; color:#141a33; border:1px solid #d9e2ff; border-radius:12px; transition: box-shadow var(--transition), border var(--transition); }
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow: var(--ring); }
.table{ color:#141a33; border-color:var(--border); background:var(--surface); }
.table thead th{ color:#141a33; background:#eef3ff; font-weight:900; }
.table tbody tr:hover{ background:#f6f9ff; }

/* 9) Footer */
footer.footer{ margin-top: 3rem; padding:2.2rem 0; background:var(--surface); border-top:1px solid var(--border); }
.footer .brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; color:#141a33; }
.footer .brand-badge{ width:34px; height:34px; border-radius:10px; background: var(--grad-brand); }
.footer .desc{ color:var(--text-soft); }
.footer .footer-title{ color:#141a33; font-weight:900; margin-bottom:.6rem; }
.footer a{ color: var(--brand-700); }
.footer a:hover{ color: var(--brand); text-decoration: underline; }

/* 10) Reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px) scale(.98); transition: transform .6s var(--transition), opacity .6s var(--transition); }
.reveal.in{ opacity:1; transform: translateY(0) scale(1); }
.delay-1{ transition-delay:.06s; } .delay-2{ transition-delay:.14s; } .delay-3{ transition-delay:.22s; }

/* 11) Tilt */
.tilt{ transform-style: preserve-3d; transition: transform .12s ease, box-shadow .12s ease; will-change: transform; }
.tilt:hover{ box-shadow: var(--shadow); }
.tilt .tilt-inner{ transform: translateZ(18px); }

/* 12) Tooltips / Toast (utility) */
.tooltip-aurora{ position:absolute; background:#101735; color:#fff; padding:.45rem .6rem; font-weight:800; border-radius:8px; font-size:.85rem; box-shadow:0 10px 24px rgba(16,23,53,.25); transform: translateY(-6px); }
.toast-aurora{ position:fixed; bottom:20px; left:20px; right:auto; z-index:1100; background:#101735; color:#fff; padding:.9rem 1rem; border-radius:12px; box-shadow: var(--shadow); display:none; }
.toast-aurora.show{ display:block; animation: slideIn .45s var(--transition) both; }
@keyframes slideIn{ from{ transform: translateY(16px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

/* 13) Skeleton */
.skeleton{ background: linear-gradient(90deg, #eef2ff 25%, #f6f9ff 37%, #eef2ff 63%); background-size: 400% 100%; animation: shimmer 1.2s infinite linear; border-radius:12px; min-height: 1rem; }
@keyframes shimmer{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }

/* Responsiveness */
@media (max-width: 992px){ .hero img{ height:380px; } }
@media (max-width: 768px){
  .header-search input{ min-width: 68vw; }
  .hero img{ height:320px; }
  .hero .hero-content{ padding:1.3rem; }
}
@media (max-width: 576px){
  .section-title{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .hero img{ height:260px; }
}





/* الوضع الداكن */
body.dark-mode {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}

body.dark-mode a {
  color: #9dc9ff !important;
}

body.dark-mode .card {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: #fff !important;
}

body.dark-mode footer {
  background-color: #0d0d0d !important;
  color: #ccc !important;
}

body.dark-mode .navbar {
  background-color: #222 !important;
  border-bottom: 1px solid #444 !important;
}










/* زر التبديل */
#theme-toggle { padding: 6px 10px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; }
.navbar-dark #theme-toggle { border-color: rgba(255,255,255,.3); color: #fff; }

/* متغيرات الضوء/الظلام */
:root{
  --bg:#ffffff; --fg:#111827;
  --card:#ffffff; --card-border:#e5e7eb;
  --nav:#ffffff; --footer:#0f172a;
}
html.dark{
  --bg:#0b0f1a; --fg:#e5e7eb;
  --card:#111827; --card-border:#1f2937;
  --nav:#0b0f1a; --footer:#0b0f1a;
}

/* تطبيق المتغيرات */
body{ background:var(--bg); color:var(--fg); }
.card{ background:var(--card)!important; border-color:var(--card-border)!important; color:var(--fg)!important; }
.navbar{ background:var(--nav)!important; }
footer{ background:var(--footer)!important; color:var(--fg)!important; }
a{ color:inherit; }