/* ===========================================================================
 * Jazeel — packages.php "علبة الشوكولاتة" layer
 * نفس طابع صفحة تفاصيل البكج (package-details-luxe.css): خط جزيل، كروت كعلب
 * هدايا بحافة ذهبية بارزة، أزرار شوكولاتة تنضغط، أسعار بلون ورق الذهب.
 * يُحمَّل بعد الـ<style> المضمّن في الصفحة ولا يغيّر أي منطق.
 * =========================================================================== */

@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%);
  --brand-font:'TheSans Arabic',system-ui,sans-serif;
}

/* الخلفية تبقى لونًا واحدًا كما كانت: صورة الهيرو خلفيتها بيضاء وأي تدرّج يُظهر حوافها */
body{font-family:var(--brand-font)}
button,input,select,textarea{font-family:inherit}

/* ---------- الشعار والعناوين ---------- */
/* خلفية صورة الهيرو بيضاء: multiply يذيبها في لون الصفحة فلا تظهر لها حواف */
.logo-wrap{mix-blend-mode:multiply}
.orn-diamond{background:var(--foil-grad);box-shadow:0 0 0 3px var(--cream-100),0 0 0 4px rgba(185,139,54,.45)}
.hero-tagline strong{color:var(--foil-mid)}
.sec-title{
  font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:0;text-transform:none;
  color:var(--choc-2);text-shadow:0 1px 0 #fff,0 2px 0 rgba(220,181,99,.4);
}

/* ---------- شريط الخصم ---------- */
.promo-sleeve{
  box-shadow:0 6px 0 var(--choc-edge),0 26px 44px -20px rgba(35,19,6,.65),inset 0 1px 0 rgba(247,232,194,.13);
}
.promo-seal{
  box-shadow:0 5px 0 var(--foil-lo),0 14px 20px -9px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.5),inset 0 2px 1px rgba(255,255,255,.7);
}

/* ---------- كروت البكجات: علبة هدية بحافة ذهبية ---------- */
.grid{gap:22px}
a.card{
  border:0;border-radius:24px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--foil-grad) border-box;
  border:2px solid transparent;
  box-shadow:
    0 6px 0 #c9a45a,
    0 7px 0 var(--foil-lo),
    0 26px 40px -18px rgba(60,30,10,.45);
}
a.card::before,a.card::after{border-radius:22px}
a.card::after{border-color:rgba(255,250,241,.55)}
@media (hover:hover){
  a.card:hover{
    box-shadow:
      0 10px 0 #c9a45a,
      0 11px 0 var(--foil-lo),
      0 40px 56px -20px rgba(60,30,10,.5);
  }
}
a.card:active{
  transform:translateY(5px) scale(.99) translateZ(0);
  box-shadow:0 1px 0 #c9a45a,0 2px 0 var(--foil-lo),0 10px 18px -10px rgba(60,30,10,.4);
}

/* زر "عرض التفاصيل": قطعة شوكولاتة بنص ذهبي */
.card-cta{
  padding:13px 16px;font-size:.84rem;letter-spacing:.02em;color:var(--foil-hi);
  background:
    radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.22),transparent 55%),
    linear-gradient(170deg,var(--choc-1) 0%,var(--choc-2) 60%,var(--choc-3) 100%);
  border-top:1px solid rgba(220,181,99,.45);
  box-shadow:inset 0 1px 0 rgba(255,230,190,.2),inset 0 -2px 0 rgba(0,0,0,.35);
}
.card-cta i{color:var(--foil)}
@media (hover:hover){
  a.card:hover .card-cta{
    background:
      radial-gradient(120% 160% at 85% 0%,rgba(220,181,99,.32),transparent 55%),
      linear-gradient(170deg,#573620 0%,var(--choc-2) 60%,var(--choc-3) 100%);
  }
}

/* السعر داخل الكرت */
.card-price{background:linear-gradient(180deg,#fff 0%,var(--ivory) 100%);border-top:1px solid rgba(220,181,99,.35)}
.cp-new{
  font-size:1.35rem;
  background:linear-gradient(170deg,var(--foil-mid) 0%,var(--foil-lo) 60%,var(--foil-mid) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.cp-new small{-webkit-text-fill-color:var(--foil-mid);color:var(--foil-mid)}
.promo-tag{box-shadow:0 4px 0 var(--choc-edge),0 12px 20px -10px rgba(29,16,7,.75)}

/* ---------- الفاصل بين المجموعات ---------- */
.div-line{background:linear-gradient(90deg,transparent,var(--foil-mid),transparent)}
.div-badge{
  color:var(--foil-hi);letter-spacing:.02em;font-size:.82rem;padding:7px 20px;
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));
  border:1px solid rgba(220,181,99,.45);
  box-shadow:0 4px 0 var(--choc-edge),0 12px 20px -12px rgba(29,16,7,.7),inset 0 1px 0 rgba(255,230,190,.2);
}
.div-badge::before,.div-badge::after{color:var(--foil)}

/* ---------- تنبيه الصفحة ---------- */
.toast{
  background:linear-gradient(165deg,var(--choc-1),var(--choc-3));color:var(--foil-hi);
  border:1px solid rgba(220,181,99,.4);box-shadow:0 4px 0 var(--choc-edge),0 18px 30px -12px rgba(29,16,7,.6);
}

/* ---------- الجوال ---------- */
@media (max-width:640px){
  .grid{gap:14px}
  a.card{border-radius:18px;box-shadow:0 4px 0 #c9a45a,0 5px 0 var(--foil-lo),0 18px 28px -14px rgba(60,30,10,.45)}
  a.card::before,a.card::after{border-radius:16px}
  .card-cta{font-size:.74rem;padding:10px 8px}
  .cp-new{font-size:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  a.card:active{transform:none}
}