/* ─── BAZAR AL-DHAFER — STORE CSS v2.1 ─────────────────────
   Colors: #004225 | #F5F5DC | #FFB000 | #FFCF9D
   Default: LIGHT MODE
──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;900&family=Vazirmatn:wght@300;400;500;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── CSS VARIABLES — LIGHT MODE (DEFAULT) ──────────────── */
:root {
  --P1: #004225;  --P2: #005a30;  --P3: #007540;
  --G1: #FFB000;  --G2: #FFC533;  --G3: #FFCF9D;
  --CREAM: #F5F5DC;

  /* LIGHT (default) */
  --BG:  #F5F5DC;  --BG2: #FFFEF5;
  --SF:  #FFFFFF;  --SF2: #F0EFE0;
  --TX:  #1A2A1E;  --TX2: #4A6A50;
  --BD:  #C8D8C0;  --SH:  rgba(0,66,37,.10);
  --CARD-BG: #FFFFFF;
  --CARD-BORDER: #D8E8D0;
  --CARD-SHADOW: 0 4px 20px rgba(0,66,37,.08);
  --CARD-SHADOW-HOVER: 0 12px 36px rgba(0,66,37,.16);

  --RED:  #E53935;
  --BLUE: #1565C0;
  --rad:  18px;
  --rad-sm: 12px;
}

/* ─── DARK MODE ──────────────────────────────────────────── */
body.dark {
  --BG:  #0A1A0E;  --BG2: #0F2416;
  --SF:  #162E1C;  --SF2: #1C3A22;
  --TX:  #F0F0E8;  --TX2: #90A890;
  --BD:  #1A3020;  --SH:  rgba(0,0,0,.5);
  --CARD-BG: #162E1C;
  --CARD-BORDER: #1E3A24;
  --CARD-SHADOW: none;
  --CARD-SHADOW-HOVER: 0 12px 36px rgba(0,0,0,.5);
}

body, html {
  background: var(--BG); color: var(--TX);
  font-family: 'Tajawal', sans-serif;
  direction: rtl; overflow-x: hidden; min-height: 100vh;
  transition: background .3s, color .3s;
}
body.lang-fa { font-family: 'Vazirmatn','Tahoma',sans-serif; line-height:1.85; }
.fa { font-family: 'Amiri', serif; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--BG); }
::-webkit-scrollbar-thumb { background: var(--P2); border-radius: 4px; }

/* ─── LOADER ─────────────────────────────────────────────── */
#root-loader {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100vh; background:var(--BG);
}
.loader-ring {
  width:70px; height:70px; border-radius:50%;
  border:4px solid var(--SF2); border-top-color:var(--G1);
  animation:spin .8s linear infinite; margin-bottom:20px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes pG      { 0%,100%{box-shadow:0 0 0 0 rgba(0,66,37,.3);}50%{box-shadow:0 0 0 18px rgba(0,66,37,0);} }
@keyframes flt     { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
@keyframes mIn     { from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);} }
@keyframes bkIn    { from{opacity:0;}to{opacity:1;} }
@keyframes shimmer { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }

.afu  { animation:fadeUp .5s ease forwards; }
.afu1 { animation:fadeUp .5s .1s ease both; }
.afu2 { animation:fadeUp .5s .2s ease both; }
.afu3 { animation:fadeUp .5s .3s ease both; }
.fl   { animation:flt 3s ease-in-out infinite; }

/* ─── GRADIENT TEXT ──────────────────────────────────────── */
.gTxt {
  background:linear-gradient(135deg,#FFB000,#CC8800,#FFB000);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.gTxt-green {
  background:linear-gradient(135deg,#004225,#005a30);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;font-weight:700;border:none;cursor:pointer;
  transition:all .3s;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:hover {
  background:linear-gradient(135deg,#005a30,#007540);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,66,37,.35);
}
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.5;cursor:not-allowed;transform:none; }

.btn-outline {
  background:transparent;border:2px solid var(--P1);
  color:var(--P1);cursor:pointer;transition:all .3s;font-family:inherit;
}
body.dark .btn-outline { color:#4CAF50;border-color:#4CAF50; }
.btn-outline:hover { background:rgba(0,66,37,.08);transform:translateY(-1px); }

.btn-gold {
  background:linear-gradient(135deg,#FFB000,#CC8800);
  color:#1A2A1E;font-weight:700;border:none;cursor:pointer;
  transition:all .3s;font-family:inherit;
}
.btn-gold:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,176,0,.3); }

.btn-ghost { background:none;border:none;cursor:pointer;color:var(--TX2);transition:color .2s;font-family:inherit; }
.btn-ghost:hover { color:var(--TX); }

/* ─── CARD — IMPROVED ────────────────────────────────────── */
.card {
  background:var(--CARD-BG);
  border:1px solid var(--CARD-BORDER);
  border-radius:var(--rad);
  box-shadow:var(--CARD-SHADOW);
  transition:all .35s cubic-bezier(.25,.8,.25,1);
}
.card-hover:hover {
  box-shadow:var(--CARD-SHADOW-HOVER);
  transform:translateY(-6px);
  border-color:rgba(0,66,37,.3);
}
body.dark .card-hover:hover {
  border-color:rgba(0,66,37,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
body.light .card { background:#fff; }

/* ─── PRODUCT CARD ───────────────────────────────────────── */
.prod-card {
  overflow:hidden;cursor:pointer;position:relative;
  border-radius:var(--rad)!important;
  transition:transform .3s ease, box-shadow .3s ease;
}
@media(max-width:600px){
  .prod-card { border-radius:14px!important; }
  .prod-card:active { transform:scale(.97); }
}
.prod-img-wrap {
  overflow:hidden;position:relative;
  height:190px;border-radius:var(--rad) var(--rad) 0 0;
  background:linear-gradient(145deg,var(--SF),var(--SF2));
}
/* Square on mobile */
@media(max-width:600px){
  .prod-img-wrap {
    height:auto !important;
    aspect-ratio:1/1;
    width:100%;
  }
  .prod-img-wrap .prod-img {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .prod-img-wrap .prod-img-skeleton {
    position:absolute !important;
    inset:0 !important;
  }
}
.prod-img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.prod-card:hover .prod-img { transform:scale(1.07); }
.prod-img-skeleton {
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--SF) 25%,var(--SF2) 50%,var(--SF) 75%);
  background-size:400% 100%;animation:shimmer 1.5s infinite;
}
/* Badge NEW */
.prod-badge-new {
  position:absolute;top:12px;right:12px;z-index:2;
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:20px;
  box-shadow:0 2px 8px rgba(0,66,37,.3);
}
/* Badge DISCOUNT */
.prod-badge-discount {
  position:absolute;top:12px;left:52px;z-index:2;
  background:linear-gradient(135deg,#E53935,#C62828);
  color:#fff;font-size:11px;font-weight:900;
  padding:4px 10px;border-radius:20px;
  box-shadow:0 2px 8px rgba(229,57,53,.35);
}
/* Fav btn */
.prod-fav-btn {
  position:absolute;top:12px;left:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s;backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.prod-body { padding:14px 16px 16px; }
.prod-name { transition:color .2s; }
.prod-card:hover .prod-name { color:var(--P1) !important; }
body.dark .prod-card:hover .prod-name { color:#4CAF50 !important; }
.prod-name { font-size:13px;font-weight:600;line-height:1.5;margin-bottom:8px;min-height:40px; }

/* Price with original price */
.prod-price-wrap { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.prod-price { color:var(--G1);font-weight:800;font-size:15px; }
.prod-price-old { color:var(--TX2);font-size:12px;text-decoration:line-through; }
.prod-pts   { color:var(--P2);font-size:11px;margin-top:3px; }
body.dark .prod-pts { color:#4CAF50; }
.stars { color:var(--G1);font-size:12px;letter-spacing:1px; }

/* ─── INPUT ──────────────────────────────────────────────── */
.inp {
  background:var(--SF);border:1.5px solid var(--BD);
  border-radius:var(--rad-sm);color:var(--TX);
  padding:13px 16px;width:100%;
  font-family:inherit;font-size:15px;
  transition:all .3s;outline:none;
}
.inp:focus { border-color:var(--P2);box-shadow:0 0 0 3px rgba(0,66,37,.12); }
.inp::placeholder { color:var(--TX2); }
select.inp option { background:var(--SF);color:var(--TX); }
.inp[readonly] { opacity:.7;cursor:not-allowed;background:var(--SF2); }
.inp-icon { position:relative; }
.inp-icon .inp { padding-right:46px; }
.inp-icon .icon { position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--TX2);pointer-events:none; }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.sidebar {
  position:fixed;top:0;right:0;width:270px;height:100vh;
  background:var(--BG2);border-left:1px solid var(--BD);
  z-index:100;overflow-y:auto;display:flex;flex-direction:column;
  transition:background .3s,border-color .3s;
  box-shadow:-4px 0 24px rgba(0,66,37,.06);
}
body.dark .sidebar { box-shadow:none; }

/* App Bar (mobile) — fixed sticky always visible */
.appbar {
  position:sticky;
  top:0;
  z-index:90;
  background:var(--BG2);
  border-bottom:1px solid var(--BD);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 12px rgba(0,66,37,.08);
  transition:background .3s, border-color .3s;
}
body.dark .appbar { box-shadow:0 2px 12px rgba(0,0,0,.3); }

.bnav {
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(245,245,220,.97);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--BD);z-index:100;
}
body.dark .bnav {
  background:rgba(10,26,14,.97);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
}

@media(min-width:768px) { .mob{display:none!important;} .dsk{display:flex!important;} .mc{margin-right:270px;} }
@media(max-width:767px) { .mob{display:flex!important;} .dsk{display:none!important;} .mc{margin-right:0!important;} }

.pg { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
@media(min-width:768px) { .pg{grid-template-columns:repeat(3,1fr);gap:20px;} }
@media(min-width:1200px){ .pg{grid-template-columns:repeat(4,1fr);} }

/* ─── STATUS / CHIPS ─────────────────────────────────────── */
.badge-dot { position:absolute;top:-4px;right:-4px;width:17px;height:17px;background:#E53935;border-radius:50%;border:2px solid var(--BG2);font-size:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700; }
.chip { padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block; }
.chip-green { background:rgba(0,66,37,.12);color:var(--P1); }
.chip-gold  { background:rgba(255,176,0,.15);color:#8A5E00; }
.chip-blue  { background:rgba(21,101,192,.12);color:var(--BLUE); }
.chip-red   { background:rgba(229,57,53,.12);color:var(--RED); }
body.dark .chip-green { background:rgba(0,66,37,.2);color:#4CAF50; }
body.dark .chip-gold  { background:rgba(255,176,0,.15);color:#FFB000; }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal-bg {
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;display:flex;align-items:flex-end;justify-content:center;
  animation:bkIn .2s ease;
}
@media(min-width:600px){ .modal-bg{align-items:center;} }
.modal {
  background:var(--BG2);border-radius:24px 24px 0 0;
  padding:28px;width:100%;max-width:500px;
  animation:mIn .3s ease;border:1px solid var(--BD);
  max-height:90vh;overflow-y:auto;
}
@media(min-width:600px){ .modal{border-radius:24px;} }

/* ─── SLIDER ─────────────────────────────────────────────── */
.slider-wrap {
  border-radius:18px;
  overflow:hidden;position:relative;
  height:200px;margin:14px 16px;
  box-shadow:0 10px 36px rgba(0,66,37,.22);
  border:1px solid rgba(255,255,255,.07);
}
body.dark .slider-wrap { box-shadow:0 10px 36px rgba(0,0,0,.5); }
.slide {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:22px 24px 22px 28px;
  transition:opacity .6s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
/* Fade in animation */
.slide[style*="opacity: 1"], .slide[style*="opacity:1"] {
  animation:slideIn .4s ease;
}
@keyframes slideIn { from{transform:scale(.98);opacity:.7} to{transform:scale(1);opacity:1} }
.slide-dot {
  height:7px;border-radius:4px;cursor:pointer;
  transition:all .4s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
@media(max-width:600px){
  .slider-wrap { height:190px; margin:12px; }
  .slide { padding:18px 20px; }
}

/* ─── LANG BUTTON ────────────────────────────────────────── */
.lbtn { display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--SF);border:2px solid var(--BD);border-radius:var(--rad-sm);padding:12px 16px;cursor:pointer;transition:all .3s;font-family:inherit; }
.lbtn:hover,.lbtn.act { border-color:var(--P2);background:rgba(0,66,37,.08);transform:translateY(-2px);box-shadow:0 5px 18px rgba(0,66,37,.15); }

/* ─── TOGGLE ─────────────────────────────────────────────── */
.tog { width:50px;height:27px;border-radius:14px;border:none;cursor:pointer;position:relative;transition:background .3s; }
.knob { width:21px;height:21px;border-radius:50%;background:white;position:absolute;top:3px;transition:all .3s;box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* ─── DARK TOGGLE in sidebar/appbar ─────────────────────── */
.dark-toggle-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-top:1px solid var(--BD);
}
.dark-toggle-label { display:flex;align-items:center;gap:8px;color:var(--TX2);font-size:14px; }

/* ─── TOAST ──────────────────────────────────────────────── */
.toast {
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#004225,#005a30);
  color:#fff;padding:13px 28px;border-radius:14px;z-index:400;
  font-family:inherit;font-size:14px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,66,37,.35);white-space:nowrap;
  animation:fadeUp .3s ease;
}

/* ─── NOTIF PANEL ────────────────────────────────────────── */
.notif-panel {
  position:absolute;top:52px;left:8px;width:320px;
  background:var(--BG2);border:1px solid var(--BD);
  border-radius:18px;box-shadow:0 12px 40px rgba(0,66,37,.15);
  z-index:150;overflow:hidden;
}
body.dark .notif-panel { box-shadow:0 12px 40px rgba(0,0,0,.5); }

/* ─── PATTERN BG ─────────────────────────────────────────── */
.isl-bg {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(0,66,37,0.06)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ─── DETAIL IMAGE ───────────────────────────────────────── */
.detail-img-wrap { margin:16px;border-radius:var(--rad);overflow:hidden;height:290px;position:relative;border:1px solid var(--BD);box-shadow:var(--CARD-SHADOW); }
.detail-img { width:100%;height:100%;object-fit:cover;display:block; }

/* ─── CAT PILL ───────────────────────────────────────────── */
.cat-pill {
  flex-shrink:0;border-radius:18px;
  padding:14px 16px;cursor:pointer;
  text-align:center;min-width:84px;
  transition:all .35s cubic-bezier(.25,.8,.25,1);
  border:1px solid transparent;
  box-shadow:var(--CARD-SHADOW);
}
.cat-pill:hover { transform:translateY(-5px); }

/* ─── PROFILE CARD ───────────────────────────────────────── */
.profile-card { border-radius:var(--rad);padding:22px;margin-bottom:18px;position:relative;overflow:hidden;border:1px solid rgba(0,66,37,.2); }
body:not(.dark) .profile-card { background:linear-gradient(135deg,#E8F2E0,#F5F5DC); }
body.dark .profile-card { background:linear-gradient(135deg,#0F2416,#081A0E); }

/* ─── EMPTY STATE ────────────────────────────────────────── */
.empty-state {
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:65vh;gap:18px;padding:24px;text-align:center;
}
.empty-state-icon { font-size:72px;opacity:.3; }
.empty-state-title { color:var(--TX2);font-size:18px;font-weight:600; }
.empty-state-sub { color:var(--TX2);font-size:14px;opacity:.7; }

/* ─── PAY OPTION ─────────────────────────────────────────── */
.pay-option { flex:1;padding:14px;border-radius:var(--rad-sm);cursor:pointer;text-align:center;border:2px solid var(--BD);transition:all .3s; }
.pay-option.selected { border-color:var(--P2);background:rgba(0,66,37,.06);box-shadow:0 4px 14px rgba(0,66,37,.1); }
body.dark .pay-option.selected { background:rgba(0,66,37,.12); }

/* ─── SIDEBAR DARK TOGGLE (desktop) ─────────────────────── */
.sidebar-footer {
  padding:14px 18px;border-top:1px solid var(--BD);
  display:flex;flex-direction:column;gap:10px;
}

/* ─── SECTION HEADER ─────────────────────────────────────── */
.section-header {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.section-title { color:var(--TX);font-size:17px;font-weight:700; }
.section-link  { color:var(--P2);font-size:13px;cursor:pointer;font-weight:600;transition:opacity .2s; }
.section-link:hover { opacity:.7; }
body.dark .section-link { color:#4CAF50; }

@media(max-width:400px) { .pg{grid-template-columns:repeat(2,1fr);gap:10px;} }