/* ============================================================
   متجر رقمي - التنسيقات الرئيسية
   لوحة ألوان خضراء + دعم الوضع الداكن + RTL
============================================================ */

:root {
    --brand: #2b6337;
    --brand-dark: #1d4526;
    --brand-light: #3a8049;
    --brand-soft: #e8f3ea;
    --accent: #f5a623;
    --bg: #f6f8f6;
    --surface: #ffffff;
    --text: #1f2a22;
    --text-muted: #6b7770;
    --border: #e3e9e4;
    --shadow: 0 4px 18px rgba(27, 60, 38, 0.08);
    --shadow-lg: 0 12px 40px rgba(27, 60, 38, 0.15);
    --radius: 14px;
    --radius-sm: 10px;
}

[data-theme="dark"] {
    --brand: #4caf68;
    --brand-dark: #3a8049;
    --brand-light: #5fc47d;
    --brand-soft: #1b2a1f;
    --bg: #10160f;
    --surface: #182117;
    --text: #e8efe9;
    --text-muted: #9bab9f;
    --border: #283324;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.7;
    transition: background .3s, color .3s;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-light); }

.container-x { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* ===== الهيدر ===== */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: var(--shadow);
}
.site-header .navbar-brand { font-weight: 800; color: var(--brand); display:flex; align-items:center; gap:.5rem; }
.site-header .navbar-brand img { height: 42px; width:auto; }
.brand-badge {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.2rem;
}

/* ===== شريط البحث ===== */
.search-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    overflow: hidden;
    display:flex;
}
.search-box input {
    border:0; background:transparent; padding:.7rem 1.2rem; flex:1; color:var(--text);
    outline:none; font-family:inherit;
}
.search-box button {
    border:0; background: var(--brand); color:#fff; padding:.6rem 1.4rem; cursor:pointer;
}
.search-box button:hover { background: var(--brand-dark); }

/* ===== السلايدر ===== */
.hero-slider { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.hero-slider .carousel-item img { width:100%; height:340px; object-fit:cover; }
.welcome-bar {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color:#fff; border-radius: var(--radius); padding: 1.4rem 1.8rem;
    margin-bottom:1.5rem; box-shadow: var(--shadow); text-align:center; font-size:1.15rem; font-weight:600;
}

/* ===== شبكة التصنيفات ===== */
.section-title {
    font-weight:800; position:relative; padding-bottom:.6rem; margin-bottom:1.4rem; color:var(--text);
}
.section-title::after {
    content:''; position:absolute; bottom:0; right:0; width:60px; height:4px;
    background: var(--brand); border-radius:4px;
}
.cat-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.7rem; background: var(--surface); border:1px solid var(--border);
    border-radius: var(--radius); padding:1.6rem 1rem; text-align:center;
    transition: transform .2s, box-shadow .2s, border-color .2s; height:100%; color:var(--text);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand); color:var(--brand); }
.cat-card .cat-icon {
    width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    background: var(--brand-soft); color: var(--brand); font-size:1.8rem;
}
.cat-card img.cat-img { width:64px; height:64px; object-fit:cover; border-radius:18px; }
.cat-card .cat-name { font-weight:700; font-size:.98rem; }

/* ===== بطاقات المنتجات ===== */
.product-card {
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    overflow:hidden; transition: transform .2s, box-shadow .2s; height:100%; display:flex; flex-direction:column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.product-card .p-img { aspect-ratio: 1/1; object-fit:cover; width:100%; background:var(--brand-soft); }
.product-card .p-img-fallback {
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    background: var(--brand-soft); color:var(--brand); font-size:2.4rem;
}
.product-card .p-body { padding:1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-card .p-name { font-weight:700; font-size:1rem; color:var(--text); }
.product-card .p-price { color: var(--brand); font-weight:800; font-size:1.05rem; }
.product-card .p-old { color: var(--text-muted); text-decoration: line-through; font-size:.85rem; }

.badge-soft { background: var(--brand-soft); color: var(--brand); padding:.25rem .6rem; border-radius:50px; font-size:.75rem; font-weight:700; }

/* ===== الأزرار ===== */
.btn-brand { background: var(--brand); color:#fff; border:0; border-radius:50px; padding:.6rem 1.5rem; font-weight:700; transition:.2s; }
.btn-brand:hover { background: var(--brand-dark); color:#fff; }
.btn-outline-brand { border:1.5px solid var(--brand); color:var(--brand); background:transparent; border-radius:50px; padding:.55rem 1.4rem; font-weight:700; }
.btn-outline-brand:hover { background:var(--brand); color:#fff; }

/* ===== الفوتر ===== */
.site-footer { background: var(--brand-dark); color:#d7e6da; margin-top:3rem; padding:2.5rem 0 1.2rem; }
.site-footer a { color:#cfe8d6; }
.site-footer a:hover { color:#fff; }
.site-footer .footer-title { color:#fff; font-weight:800; margin-bottom:1rem; }
.social-icons a {
    width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; background: rgba(255,255,255,.1); color:#fff; margin-inline-start:.4rem; transition:.2s;
}
.social-icons a:hover { background: var(--accent); color:#fff; transform: translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:1.6rem; padding-top:1rem; text-align:center; font-size:.9rem; }

/* ===== زر تبديل الوضع ===== */
.theme-toggle { background:transparent; border:1.5px solid var(--border); border-radius:50px; width:42px; height:42px; color:var(--text); cursor:pointer; }
.theme-toggle:hover { border-color: var(--brand); color:var(--brand); }

/* ===== لوحة المستخدم/التحكم ===== */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow); }
.stat-card .stat-num { font-size:1.8rem; font-weight:800; color:var(--brand); }
.stat-card .stat-label { color:var(--text-muted); font-size:.9rem; }

/* ===== المودال / النوافذ المنبثقة ===== */
.modal-content { border-radius: var(--radius); border:0; background:var(--surface); color:var(--text); }

/* ===== جداول الإدارة ===== */
.admin-table { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.admin-table th { background:var(--brand-soft); color:var(--brand); font-weight:700; }

@media (max-width: 768px) {
    .hero-slider .carousel-item img { height:200px; }
}

/* ===== شريط تبويبات الأقسام ===== */
.cat-tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0 1rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.cat-tabs::-webkit-scrollbar{height:5px}
.cat-tabs::-webkit-scrollbar-thumb{background:var(--brand,#2b6337);border-radius:4px}
.cat-tab{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.25rem;
  min-width:78px; padding:.6rem .5rem; border-radius:14px; text-decoration:none;
  background:var(--card-bg,#fff); border:1px solid rgba(0,0,0,.06);
  color:var(--text,#1d2b22); font-size:.78rem; font-weight:600; transition:.15s;
}
.cat-tab i{font-size:1.35rem; color:var(--brand,#2b6337)}
.cat-tab:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); color:var(--brand,#2b6337)}

/* ===== أقسام الصفحة الرئيسية مع المنتجات ===== */
.cat-section{margin:1.5rem 0 2rem; scroll-margin-top:80px}
.cat-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.see-all{
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--brand,#2b6337); white-space:nowrap;
}
.see-all:hover{text-decoration:underline}

/* ===== زر القائمة ===== */
.menu-btn{
  background:var(--card-bg,#fff); border:1px solid rgba(0,0,0,.08);
  width:48px; height:48px; border-radius:14px; font-size:1.5rem;
  color:var(--brand,#2b6337); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.menu-btn:hover{background:var(--brand,#2b6337); color:#fff}

/* ===== القائمة الجانبية المنزلقة ===== */
.side-menu{width:300px; max-width:85vw; border:0}
.side-head{
  background:linear-gradient(135deg, var(--brand,#2b6337), #1d472a);
  color:#fff; padding:1.25rem 1rem; display:flex; align-items:center; gap:.75rem;
}
.side-user{display:flex; align-items:center; gap:.75rem; flex:1}
.side-avatar{
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800;
}
.side-user-info{display:flex; flex-direction:column; line-height:1.3}
.side-user-info strong{font-size:1.05rem}
.side-balance{font-size:.85rem; opacity:.9}
.side-list{list-style:none; margin:0; padding:.5rem}
.side-list li a{
  display:flex; align-items:center; gap:.85rem; padding:.85rem .75rem;
  border-radius:12px; text-decoration:none; color:var(--text,#1d2b22);
  font-weight:600; font-size:.98rem; transition:.12s;
}
.side-list li a:hover{background:rgba(43,99,55,.08)}
.side-list .ic{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; color:#fff; flex:0 0 auto;
}
.ic-home{background:#2b9348}.ic-add{background:#0077b6}.ic-wallet{background:#f4a261}
.ic-orders{background:#e63946}.ic-acc{background:#7209b7}.ic-admin{background:#3a0ca3}
.ic-about{background:#118ab2}
.side-theme{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.25rem; border-top:1px solid rgba(0,0,0,.06); margin-top:.5rem; font-weight:600;
}
.side-auth{padding:1rem 1.25rem}
.side-social{display:flex; justify-content:center; gap:1rem; padding:.5rem 1rem 1.5rem}
.side-social a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; background:rgba(43,99,55,.1); color:var(--brand,#2b6337);
  text-decoration:none; transition:.15s;
}
.side-social a:hover{background:var(--brand,#2b6337); color:#fff}

/* ===== شبكة أقسام أصغر لتناسب 3 بالسطر ===== */
@media (max-width:575px){
  .cat-card{padding:.85rem .5rem}
  .cat-card .cat-icon{width:52px; height:52px; font-size:1.5rem}
  .cat-card img.cat-img{width:52px; height:52px}
  .cat-card .cat-name{font-size:.82rem}
}

/* ============================================================
   نظام الثيمات — يتحكم به إعداد site_theme من لوحة التحكم
   يُطبَّق عبر data-theme-color على <html>
   ============================================================ */
[data-theme-color="green"]{--brand:#2b6337;--brand-dark:#1d4526;--brand-light:#3a8049;--brand-soft:#e8f3ea;--accent:#f5a623}
[data-theme-color="blue"]{--brand:#1565c0;--brand-dark:#0d47a1;--brand-light:#42a5f5;--brand-soft:#e3f2fd;--accent:#ff9800}
[data-theme-color="purple"]{--brand:#6a1b9a;--brand-dark:#4a148c;--brand-light:#9c4dcc;--brand-soft:#f3e5f5;--accent:#ffc107}
[data-theme-color="red"]{--brand:#c62828;--brand-dark:#8e0000;--brand-light:#ef5350;--brand-soft:#ffebee;--accent:#ffa000}
[data-theme-color="orange"]{--brand:#e65100;--brand-dark:#ac1900;--brand-light:#ff833a;--brand-soft:#fff3e0;--accent:#2962ff}
[data-theme-color="teal"]{--brand:#00796b;--brand-dark:#004c40;--brand-light:#48a999;--brand-soft:#e0f2f1;--accent:#ff6f00}
[data-theme-color="pink"]{--brand:#ad1457;--brand-dark:#78002e;--brand-light:#e35183;--brand-soft:#fce4ec;--accent:#00bcd4}
[data-theme-color="navy"]{--brand:#1a237e;--brand-dark:#000051;--brand-light:#534bae;--brand-soft:#e8eaf6;--accent:#ffd600}

/* الوضع الداكن يبقى يعمل فوق أي ثيم (يعيد تعريف الخلفيات فقط) */

/* تأكيد أبعاد القائمة الجانبية (إصلاح ملء الشاشة) */
.offcanvas.side-menu{
  --bs-offcanvas-width:300px;
  width:300px !important; max-width:85vw !important;
  height:100% !important; visibility:hidden;
}
.offcanvas.side-menu.showing,
.offcanvas.side-menu.show{visibility:visible}
.ic-api{background:#0a9396}