/* ===========================================================================
 * Jazeel — productsjazeel.php (ops/products_cards_ar.php) "علبة الشوكولاتة" layer
 * نفس طابع الرئيسية وصفحات البكجات: خط جزيل، إطار ذهبي بارز، شوكولاتة وورق ذهب.
 * يحلّ أيضًا محل Bootstrap: الصفحة لا تستخدم منه إلا أساسيات التهيئة وبضع
 * أدوات (fw-bold / text-* / mb-*)، فنعرّفها هنا ونوفّر ملفًا كبيرًا يوقف الرسم.
 * =========================================================================== */

/* ---------- تهيئة أساسية (بديل Bootstrap reboot) ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;line-height:1.2}
p{margin-top:0;margin-bottom:1rem}
img,svg{vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
[hidden]{display:none!important}
.fw-bold{font-weight:700!important}
.text-dark{color:#212529!important}
.text-muted{color:#6c757d!important}
.mb-0{margin-bottom:0!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}

/* ---------- خط جزيل ---------- */
@font-face{font-family:"TheSans Arabic";src:url("../../fonts/ArbFONTS-TheSansArabic-Light.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"TheSans Arabic";src:url("../../fonts/The-Sans-Plain.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"TheSans Arabic";src:url("../../fonts/THESANSARABIC-BOLD.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --foil-hi:#fbf0d2;--foil:#dcb563;--foil-mid:#b98b36;--foil-lo:#7d5a1c;
  --choc-1:#4a2d17;--choc-2:#2e1a0c;--choc-3:#1b0e05;--choc-edge:#120902;
  --ivory:#fffaf1;
  --foil-grad:linear-gradient(160deg,var(--foil-hi) 0%,var(--foil) 30%,var(--foil-mid) 55%,var(--foil-hi) 78%,var(--foil) 100%);
}
body,.search-box input,.search-btn,.filter-btn,.btn-order,.btn-app{font-family:'TheSans Arabic',system-ui,sans-serif}

/* ---------- الهيرو ---------- */
.hero-eyebrow{
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));color:var(--foil-hi);
  border:1px solid rgba(220,181,99,.45);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 3px 0 var(--choc-edge),0 12px 20px -12px rgba(29,16,7,.6),inset 0 1px 0 rgba(255,230,190,.2);
}
.hero-eyebrow i{color:var(--foil)}
.hero-title{
  font-weight:900;letter-spacing:0;
  background:linear-gradient(120deg,var(--choc-2) 0%,var(--choc-1) 45%,var(--foil-mid) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(220,181,99,.35));
}
.hero-divider::before,.hero-divider::after{height:1.5px;width:clamp(50px,14vw,110px)}
.hero-divider::before{background:linear-gradient(90deg,transparent,var(--foil-mid))}
.hero-divider::after{background:linear-gradient(90deg,var(--foil-mid),transparent)}
.hero-divider i{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;
  color:var(--choc-3);background:var(--foil-grad);
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(185,139,54,.45),0 3px 0 4px #e3cc97;
}

/* ---------- البحث والتبويبات ---------- */
.controls-wrapper{
  background:linear-gradient(#fffdf9,#fffdf9) padding-box,var(--foil-grad) border-box;
  border:1.5px solid transparent;
  box-shadow:0 6px 0 #d9c08a,0 24px 44px -24px rgba(60,30,10,.45);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.search-box input{
  background:#fbf6ee;border-color:rgba(185,139,54,.28);
  box-shadow:inset 0 2px 4px rgba(60,30,10,.07),inset 0 -1px 0 rgba(255,255,255,.9);
}
.search-box input:focus{background:#fff;border-color:var(--foil-mid);box-shadow:inset 0 2px 4px rgba(60,30,10,.05),0 0 0 3px rgba(220,181,99,.28)}
.search-box i{color:var(--foil-mid)}
.search-btn{
  color:var(--foil-hi);
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.22),transparent 55%),linear-gradient(165deg,var(--choc-1),var(--choc-3));
  box-shadow:0 5px 0 var(--choc-edge),0 16px 26px -14px rgba(29,16,7,.7),inset 0 1px 0 rgba(255,230,190,.2);
  transition:transform .15s ease,box-shadow .15s ease;
}
.search-btn:hover{
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.32),transparent 55%),linear-gradient(165deg,#573620,var(--choc-3));
  transform:translateY(-2px);box-shadow:0 7px 0 var(--choc-edge),0 20px 30px -14px rgba(29,16,7,.72),inset 0 1px 0 rgba(255,230,190,.2);
}
.search-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--choc-edge)}

.filter-group{padding:4px 2px 14px}
.filter-btn{
  background:linear-gradient(180deg,#fff,var(--ivory));border:1px solid rgba(185,139,54,.35);color:var(--choc-1);
  box-shadow:0 3px 0 rgba(185,139,54,.4);
  transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s;
}
.filter-btn i{color:var(--foil-mid)}
.filter-btn:hover{background:linear-gradient(180deg,#fff,#f7eede);color:var(--choc-2);border-color:var(--foil-mid);transform:translateY(-1px)}
.filter-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(185,139,54,.4)}
.filter-btn.active{
  color:var(--foil-hi);border-color:rgba(220,181,99,.5);
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.22),transparent 55%),linear-gradient(165deg,var(--choc-1),var(--choc-3));
  box-shadow:0 4px 0 var(--choc-edge),0 12px 20px -10px rgba(29,16,7,.6),inset 0 1px 0 rgba(255,230,190,.2);
}
.filter-btn.active i{color:var(--foil)}
.filter-btn small{background:rgba(220,181,99,.18);color:var(--foil-lo)}
.filter-btn.active small{background:var(--foil-grad);color:var(--choc-3)}

.results-count{
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));color:rgba(251,240,210,.85);
  border:1px solid rgba(220,181,99,.45);box-shadow:0 3px 0 var(--choc-edge);
}
.results-count strong{color:var(--foil)}

/* ---------- كروت المنتجات: علب بإطار ذهبي بارز ---------- */
.products-grid{gap:16px}
@media (min-width:992px){.products-grid{gap:22px}}
.product-card{
  border:0;border-radius:20px;
  background:linear-gradient(#fff,#fff) padding-box,var(--foil-grad) border-box;
  border:1.5px solid transparent;
  box-shadow:0 5px 0 #d4b270,0 6px 0 var(--foil-lo),0 22px 34px -20px rgba(60,30,10,.45);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s;
}
.product-card::after{display:none}
@media (hover:hover){
  .product-card:hover{
    transform:translateY(-6px);border-color:transparent;
    box-shadow:0 9px 0 #d4b270,0 10px 0 var(--foil-lo),0 34px 44px -20px rgba(60,30,10,.5);
  }
}
.product-card:active{transform:translateY(3px);box-shadow:0 2px 0 #d4b270,0 3px 0 var(--foil-lo),0 10px 18px -10px rgba(60,30,10,.4)}
.card-img-wrap{border-radius:18px 18px 0 0}

/* التبويب يوضح التصنيف أصلًا، فشارة التصنيف على الصورة تكرار يغطي المنتج */
.product-item .type-badge{display:none}

/* السعر: شارة ذهبية بارزة */
.price-tag{
  background:var(--foil-grad);color:var(--choc-3);font-weight:900;
  border-radius:11px;border:1px solid rgba(255,250,241,.7);
  box-shadow:0 3px 0 var(--foil-lo),0 10px 18px -6px rgba(29,16,7,.5),inset 0 1px 0 rgba(255,255,255,.6);
}

.card-body-custom{gap:11px;padding:14px 13px 14px}
/* سطران كاملان بلا قصّ للحروف النازلة */
.prod-title{color:var(--choc-2);font-size:.95rem;line-height:1.6;height:3.2em}
.prod-footer{border-top:0;padding-top:0;position:relative}
.prod-footer::before{
  content:'';position:absolute;inset-inline:0;top:-6px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(185,139,54,.55),transparent);
}
.prod-more{color:var(--foil-lo)}

/* أزرار الطلب: شوكولاتة تنضغط، وواتساب بحافة */
.btn-order{
  color:var(--foil-hi);
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.2),transparent 55%),linear-gradient(165deg,var(--choc-1),var(--choc-3));
  box-shadow:0 4px 0 var(--choc-edge),0 12px 20px -12px rgba(29,16,7,.6),inset 0 1px 0 rgba(255,230,190,.2);
}
.btn-order i{color:var(--foil)}
.btn-order:hover{
  color:var(--foil-hi);
  background:radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.32),transparent 55%),linear-gradient(165deg,#573620,var(--choc-3));
  transform:translateY(-2px);box-shadow:0 6px 0 var(--choc-edge),0 16px 24px -12px rgba(29,16,7,.65),inset 0 1px 0 rgba(255,230,190,.2);
}
.btn-order:active{transform:translateY(3px);box-shadow:0 1px 0 var(--choc-edge)}
.btn-wa-icon{box-shadow:0 4px 0 #0f7a3a,0 12px 20px -10px rgba(37,211,102,.5)}
.btn-wa-icon:hover{transform:translateY(-2px);box-shadow:0 6px 0 #0f7a3a,0 16px 24px -10px rgba(37,211,102,.55)}
.btn-wa-icon:active{transform:translateY(3px);box-shadow:0 1px 0 #0f7a3a}

/* ---------- نافذة التفاصيل ---------- */
.pd-dialog{
  background:linear-gradient(#fff,#fff) padding-box,var(--foil-grad) border-box;
  border:1.5px solid transparent;
  box-shadow:0 8px 0 #d4b270,0 40px 80px -20px rgba(29,16,7,.55);
}
.pd-price{background:var(--foil-grad);color:var(--choc-3);box-shadow:0 3px 0 var(--foil-lo),0 10px 18px -6px rgba(29,16,7,.5)}
.pd-title{color:var(--choc-2)}
.pd-fill{border-color:rgba(185,139,54,.35)}

/* ---------- تركيز واضح ---------- */
.filter-btn:focus-visible,.search-btn:focus-visible,.btn-order:focus-visible,.btn-wa-icon:focus-visible,.btn-app:focus-visible{
  outline:2px solid var(--foil-mid);outline-offset:3px
}

/* ---------- الجوال ---------- */
@media (max-width:575.98px){
  .products-grid{gap:12px}
  .product-card{border-radius:16px;box-shadow:0 4px 0 #d4b270,0 5px 0 var(--foil-lo),0 16px 24px -16px rgba(60,30,10,.45)}
  .card-img-wrap{border-radius:14px 14px 0 0}
  .card-body-custom{padding:11px 10px 12px;gap:9px}
  .prod-title{font-size:.84rem}
  .price-tag{font-size:.74rem;padding:5px 9px;min-height:28px;left:8px;bottom:8px}
  .controls-wrapper{box-shadow:0 4px 0 #d9c08a,0 16px 30px -20px rgba(60,30,10,.4)}
}
@media (prefers-reduced-motion:reduce){
  .product-card,.btn-order,.search-btn,.filter-btn{transition:none}
}