/* ============================================================
   ريزوفا — الافتتاحية السينمائية + لوحة الخيارات
   يُحمَّل بعد style.css ويتجاوزه عند التعارض.
   لا يعتمد على أي ملف فيديو: البرجر والشعار مرسومان ومتحرّكان بالكود.
   ============================================================ */

/* ============================================================
   ١ — المسرح
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 8%,  rgba(212,175,55,.13), transparent 58%),
    radial-gradient(110% 80% at 12% 100%, rgba(15,92,77,.30),  transparent 62%),
    radial-gradient(90%  70% at 92% 88%,  rgba(212,175,55,.08), transparent 60%),
    #050606;
  overflow: hidden;
  transition: opacity .75s ease, visibility .75s;
}
.intro.leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .22; filter: saturate(.75) contrast(1.05);
}
.intro-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,6,.55) 0%, rgba(5,6,6,.15) 40%, rgba(5,6,6,.85) 100%);
}

/* هالة ذهبية تتنفّس خلف المشهد */
.rz-aura {
  position: absolute; left: 50%; top: 42%;
  width: min(120vw, 940px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,175,55,.20) 0%, rgba(212,175,55,.06) 38%, transparent 68%);
  filter: blur(12px);
  animation: rz-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rz-breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
}

/* أشعة ضوئية ناعمة تدور ببطء */
.rz-rays {
  position: absolute; left: 50%; top: 40%;
  width: 180vmax; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,   rgba(212,175,55,.055) 12deg, transparent 24deg,
    transparent 90deg,  rgba(212,175,55,.045) 102deg, transparent 114deg,
    transparent 180deg, rgba(212,175,55,.055) 192deg, transparent 204deg,
    transparent 270deg, rgba(212,175,55,.045) 282deg, transparent 294deg);
  animation: rz-spin 46s linear infinite;
  pointer-events: none;
}
@keyframes rz-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ذرّات ذهبية متصاعدة — دقيقة ومضيئة، لا فقاعات ضبابية */
.intro-bokeh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.intro-bokeh span {
  background: #F5E3A8;
  box-shadow: 0 0 6px 1px rgba(212,175,55,.85), 0 0 14px rgba(212,175,55,.35);
  filter: none;
}

.intro-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 22px 20px;
  width: 100%;
}

/* أركان ذهبية */
.intro-corner {
  position: absolute; width: 74px; height: 74px;
  border: 2px solid rgba(212,175,55,.42);
  opacity: 0; animation: rz-corner .9s ease forwards;
}
.intro-corner.tl { top: 22px; left: 22px;  border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; animation-delay: 2.9s; }
.intro-corner.tr { top: 22px; right: 22px; border-left: 0;  border-bottom: 0; border-radius: 0 14px 0 0; animation-delay: 3.0s; }
.intro-corner.bl { bottom: 22px; left: 22px;  border-right: 0; border-top: 0; border-radius: 0 0 0 14px; animation-delay: 3.1s; }
.intro-corner.br { bottom: 22px; right: 22px; border-left: 0;  border-top: 0; border-radius: 0 0 14px 0; animation-delay: 3.2s; }
@keyframes rz-corner { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
   ٢ — البرجر يتركّب طبقة طبقة
   ============================================================ */
/* خارج التدفّق ومركزيّ على الشاشة: لو بقي داخل العمود لدفع العناصر المخفية
   تحته البرجرَ إلى الثلث العلوي وترك فراغاً كبيراً أسفله. */
.rz-stage {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: min(70vw, 290px);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.7));
  /* بعد اكتمال التركيب ينكمش المشهد ويسلّم الدور للشعار */
  animation: rz-stage-out .9s cubic-bezier(.55,.06,.68,.19) 2.75s forwards;
}
@keyframes rz-stage-out {
  to { opacity: 0; transform: translate(-50%, -62%) scale(.5); }
}
.rz-burger { width: 100%; height: auto; display: block; overflow: visible; }

/* كل طبقة تسقط من الأعلى وترتدّ ارتدادة خفيفة */
.rz-layer {
  opacity: 0;
  transform-box: fill-box; transform-origin: center bottom;
  animation: rz-drop .62s cubic-bezier(.2,1.5,.45,1) forwards;
}
@keyframes rz-drop {
  0%   { opacity: 0; transform: translateY(-190px) scaleY(1.14) scaleX(.9); }
  62%  { opacity: 1; transform: translateY(6px)    scaleY(.82)  scaleX(1.1); }
  82%  {             transform: translateY(-4px)   scaleY(1.05) scaleX(.97); }
  100% { opacity: 1; transform: translateY(0)      scaleY(1)    scaleX(1); }
}
.rz-l1 { animation-delay: .15s; }  /* الخبزة السفلية */
.rz-l2 { animation-delay: .48s; }  /* اللحم */
.rz-l3 { animation-delay: .81s; }  /* الجبنة */
.rz-l4 { animation-delay: 1.14s; } /* الطماطم */
.rz-l5 { animation-delay: 1.47s; } /* الخس */
.rz-l6 { animation-delay: 1.80s; } /* الخبزة العلوية */

/* هالة الطبق تتّسع مع كل ارتطام */
.rz-plate { opacity: 0; animation: rz-plate 2.4s ease-out .15s forwards; }
@keyframes rz-plate {
  0%   { opacity: 0; transform: scale(.55); }
  30%  { opacity: .9; }
  100% { opacity: .75; transform: scale(1); }
}

/* بريق ذهبي يعبر البرجر بعد اكتماله */
.rz-shine {
  opacity: 0;
  animation: rz-shine 1.15s cubic-bezier(.4,0,.2,1) 2.15s forwards;
}
@keyframes rz-shine {
  0%   { opacity: 0;   transform: translateX(0)    skewX(-18deg); }
  18%  { opacity: .95; }
  100% { opacity: 0;   transform: translateX(460px) skewX(-18deg); }
}

/* بخار يتصاعد */
.rz-steam {
  position: absolute; bottom: 62%;
  width: 9px; height: 44px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), transparent);
  filter: blur(5px); opacity: 0;
  animation: rz-steam 2.6s ease-in-out infinite;
}
.rz-steam.s1 { left: 32%; animation-delay: 2.0s; }
.rz-steam.s2 { left: 50%; animation-delay: 2.35s; height: 56px; }
.rz-steam.s3 { left: 66%; animation-delay: 2.6s; }
@keyframes rz-steam {
  0%   { opacity: 0; transform: translateY(10px) scaleX(.7); }
  35%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-70px) scaleX(1.5); }
}

/* ============================================================
   ٣ — الشعار والاسم
   ============================================================ */
.intro-logo {
  position: relative;
  width: clamp(120px, 30vw, 168px); aspect-ratio: 1;
  display: grid; place-items: center;
  margin-bottom: 16px;
  opacity: 0;
  animation: rz-logo-in 1.1s cubic-bezier(.16,1,.3,1) 3.0s forwards;
}
@keyframes rz-logo-in {
  0%   { opacity: 0; transform: scale(.55) rotate(-9deg); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1)   rotate(0);     filter: blur(0); }
}
.intro-logo .mark-img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  border: 2px solid rgba(212,175,55,.75);
  box-shadow: 0 0 0 6px rgba(212,175,55,.10), 0 18px 50px rgba(0,0,0,.75), 0 0 40px rgba(212,175,55,.22);
}
/* حلقتان ذهبيتان تدوران حول الشعار */
.intro-logo .ring {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.42);
  border-top-color: rgba(212,175,55,.95);
  border-right-color: transparent;
  animation: rz-ring 4.2s linear infinite;
}
.intro-logo::after {
  content: ""; position: absolute; inset: -26px;
  border-radius: 50%;
  border: 1px dashed rgba(212,175,55,.22);
  animation: rz-ring 9s linear infinite reverse;
}
@keyframes rz-ring { to { transform: rotate(360deg); } }

/* بلا letter-spacing: التباعد يكسر وصل الحروف العربية فتُقرأ «مرحبا بكم» مفكّكة */
.intro-kicker {
  color: var(--gold-400, #E8C86A);
  font-size: clamp(12.5px, 3.2vw, 15px); font-weight: 700;
  letter-spacing: 0; word-spacing: 3px;
  opacity: 0; animation: rz-up .8s ease 3.25s forwards;
}
.intro-title {
  font-family: var(--font-display, "Cinzel", serif);
  font-size: clamp(34px, 9vw, 62px);
  font-weight: 700; line-height: 1.14;
  margin-top: 6px;
  background: linear-gradient(100deg, #B98A22 0%, #F5E3A8 26%, #FFFDF3 42%, #E8C86A 58%, #B98A22 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(212,175,55,.30));
  opacity: 0;
  animation: rz-up .9s ease 3.4s forwards, rz-sheen 5.5s linear 4.3s infinite;
}
@keyframes rz-sheen { 0% { background-position: 260% 0; } 100% { background-position: -60% 0; } }

/* فاصل ذهبي بالماسة — كما في هوية العلامة */
.rz-rule {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 10px; width: min(78vw, 330px);
  opacity: 0; animation: rz-up .8s ease 3.6s forwards;
}
.rz-rule i {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.75), transparent);
}
.rz-rule span { color: #0F5C4D; font-size: 11px; text-shadow: 0 0 8px rgba(212,175,55,.9); }

.intro-tag {
  color: #CFC7B4;
  font-size: clamp(12px, 3.1vw, 15px); font-weight: 600;
  letter-spacing: 1.4px;
  opacity: 0; animation: rz-up .8s ease 3.75s forwards;
}

@keyframes rz-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ٤ — زر الدخول
   ============================================================ */
.intro-btn {
  position: relative; overflow: hidden;
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 38px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #E8C86A 0%, #D4AF37 50%, #B08D22 100%);
  color: #0A0A0B; font-size: clamp(15px, 3.8vw, 17px); font-weight: 900;
  font-family: inherit;
  box-shadow: 0 14px 40px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.5);
  opacity: 0;
  /* يظهر مبكراً — الزبون يقدر يدخل فوراً بلا انتظار انتهاء تركيب البرجر */
  animation: rz-up .7s ease .35s forwards, rz-pulse 2.6s ease-in-out 1.6s infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}
.intro-btn:hover  { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(212,175,55,.48); }
.intro-btn:active { transform: translateY(0) scale(.98); }
.intro-btn .arrow { font-size: 20px; transition: transform .2s ease; }
.intro-btn:hover .arrow { transform: translateX(-5px); }
.intro-btn .shine {
  position: absolute; top: 0; bottom: 0; width: 42px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-20deg);
  animation: rz-btn-shine 3.4s ease-in-out 1.9s infinite;
}
@keyframes rz-btn-shine { 0% { inset-inline-start: -60px; } 55%, 100% { inset-inline-start: 115%; } }
@keyframes rz-pulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.5); }
  50%      { box-shadow: 0 14px 54px rgba(212,175,55,.62), inset 0 1px 0 rgba(255,255,255,.5); }
}

.intro-hint {
  margin-top: 18px;
  color: #8E8675;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; animation: rz-up .7s ease .5s forwards;
}
.intro-hint .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #D4AF37; box-shadow: 0 0 10px #D4AF37;
  animation: rz-blink 1.7s ease-in-out infinite;
}
@keyframes rz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* الأجهزة القصيرة: نخفي البخار ونضغط المسافات */
@media (max-height: 700px) {
  .rz-stage { width: min(46vw, 190px); }
  .intro-logo { width: clamp(96px, 24vw, 128px); margin-bottom: 10px; }
  .intro-btn { margin-top: 18px; padding: 13px 30px; }
  .intro-hint { margin-top: 12px; }
}

/* احترام تفضيل تقليل الحركة: نعرض المشهد النهائي فوراً بلا أي أنيميشن */
@media (prefers-reduced-motion: reduce) {
  .rz-stage { display: none; }
  .rz-aura, .rz-rays, .rz-shine, .rz-steam { animation: none; }
  .intro-logo, .intro-kicker, .intro-title, .rz-rule, .intro-tag,
  .intro-btn, .intro-hint, .intro-corner, .rz-layer, .rz-plate {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================
   ٥ — لوحة اختيار الخيارات (الحجم · الوجبة · الإضافات)
   ============================================================ */
.opt-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4,5,6,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.opt-overlay.show { opacity: 1; visibility: visible; }

.opt-sheet {
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #17181C 0%, #101114 100%);
  border: 1px solid rgba(212,175,55,.26);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 70px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.16,1,.3,1);
}
.opt-overlay.show .opt-sheet { transform: translateY(0); }

.opt-grab {
  width: 46px; height: 4px; border-radius: 999px;
  background: rgba(212,175,55,.4);
  margin: 10px auto 2px; flex: none;
}

.opt-head {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid rgba(212,175,55,.16);
  flex: none;
}
.opt-thumb {
  width: 60px; height: 60px; flex: none;
  border-radius: 14px; overflow: hidden;
  background: #202126; display: grid; place-items: center; font-size: 26px;
  border: 1px solid rgba(212,175,55,.24);
}
.opt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.opt-title { flex: 1; min-width: 0; text-align: start; }
.opt-title h3 {
  font-size: 18px; font-weight: 800; color: #F7F4ED;
  margin: 0; line-height: 1.3;
}
.opt-en {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  color: #D4AF37; margin-top: 3px; text-transform: uppercase;
}
.opt-x {
  width: 38px; height: 38px; flex: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  background: rgba(255,255,255,.05); color: #CFC7B4;
  font-size: 15px; display: grid; place-items: center;
  transition: .18s;
}
.opt-x:hover { background: rgba(212,175,55,.16); color: #F5E3A8; }

.opt-body {
  padding: 6px 18px 14px;
  overflow-y: auto; flex: 1;
  -webkit-overflow-scrolling: touch;
}
.opt-group { padding: 14px 0 4px; }
.opt-group + .opt-group { border-top: 1px solid rgba(255,255,255,.06); }
.opt-group h4 {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 800; color: #F7F4ED;
  margin: 0 0 11px;
}
.opt-req, .opt-opt {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px;
}
.opt-req { background: rgba(212,175,55,.16); color: #E8C86A; border: 1px solid rgba(212,175,55,.3); }
.opt-opt { background: rgba(255,255,255,.06); color: #9C9486; border: 1px solid rgba(255,255,255,.1); }

.opt-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.opt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1.5px solid rgba(255,255,255,.1);
  color: #D9D3C6; font-family: inherit;
  font-size: 14px; font-weight: 700;
  transition: .18s ease;
}
.opt-chip:hover { border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.08); color: #F7F4ED; }
.opt-chip b {
  font-size: 12.5px; font-weight: 800;
  color: #E8C86A; opacity: .95;
}
.opt-chip.is-on {
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  border-color: #D4AF37;
  color: #FFF9E8;
  box-shadow: 0 4px 18px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.opt-chip.is-on b { color: #F5E3A8; }

.opt-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(212,175,55,.18);
  background: rgba(8,9,10,.72);
  flex: none;
}
.opt-total {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; font-weight: 700; color: #9C9486;
  white-space: nowrap;
}
.opt-total b {
  font-size: 24px; font-weight: 900; color: #E8C86A;
  text-shadow: 0 0 18px rgba(212,175,55,.3);
}
.opt-total small { font-size: 12px; color: #9C9486; font-weight: 700; }
.opt-add {
  flex: 1; padding: 14px 18px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #E8C86A, #D4AF37 55%, #B08D22);
  color: #0A0A0B; font-family: inherit;
  font-size: 15px; font-weight: 900;
  box-shadow: 0 10px 28px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.45);
  transition: .18s;
}
.opt-add:hover  { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(212,175,55,.44); }
.opt-add:active { transform: translateY(0) scale(.99); }

/* على الشاشات الكبيرة تصبح لوحة وسطية بدل شريحة سفلية */
@media (min-width: 720px) {
  .opt-overlay { align-items: center; }
  .opt-sheet {
    border-radius: 24px; border-bottom: 1px solid rgba(212,175,55,.26);
    max-height: 84vh;
    transform: translateY(24px) scale(.97);
  }
  .opt-overlay.show .opt-sheet { transform: translateY(0) scale(1); }
}

/* ============================================================
   ٦ — لمسات على بطاقة الصنف والسلة (نظام الخيارات)
   ============================================================ */
.dp-from {
  font-size: 10.5px; font-weight: 800;
  color: var(--muted, #9C9486);
  letter-spacing: .3px;
}
.dish-name-en {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--gold-500, #D4AF37); opacity: .85;
  text-transform: uppercase; margin-top: 2px;
}
.dish-spicy { margin-inline-start: 5px; font-size: .85em; }
.cr-opts {
  font-size: 11.5px; font-weight: 700;
  color: var(--gold-400, #E8C86A);
  margin: 2px 0 3px; line-height: 1.45;
}

/* بطاقة بلا صورة: تختفي منطقة الوسائط وتنتقل الشارات إلى المعلومات */
.dish.noimg .dish-media { display: none; }
.dish.noimg .dish-info { padding-top: 14px; }
.dish-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.dish-out.inline, .dish-disc-badge.inline {
  position: static; display: inline-block;
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
}

/* فرق السعر يُقرأ «+2,750» لا «2,750+» — العزل يمنع RTL من نقل الإشارة للنهاية */
.opt-chip b { direction: ltr; unicode-bidi: isolate; }

/* سطور الإجمالي المخفية: .co-line تحمل display:flex فتتجاوز سمة hidden
   فتظهر سطور «الخصم 0» و«التوصيل 0» رغم إخفائها من الكود. */
.co-line[hidden], .min-note[hidden], .dep-note[hidden],
.loyal-banner[hidden], .order-track[hidden], .ok-tray[hidden] { display: none !important; }

/* نص التوست عنصر واحد لا ثلاثة عناصر مرنة */
.note-toast .nt-txt { flex: 1; min-width: 0; }
.note-toast { flex-wrap: nowrap; }

/* ============================================================
   ٧ — منيو بلا إيموجي: أيقونات مرسومة وشارات نصّية
   ============================================================ */

/* رأس القسم: شريط ذهبي رفيع بدل فقاعة الأيقونة */
.section-head .rule {
  width: 4px; align-self: stretch; min-height: 42px;
  flex: none; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500) 50%, transparent);
  box-shadow: 0 0 14px rgba(212,175,55,.35);
}

/* شارة «حار» نصّية */
.dish-spicy {
  display: inline-block; margin-inline-start: 7px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(224,68,46,.14);
  border: 1px solid rgba(224,68,46,.42);
  color: #FF9A8E;
  font-size: 10px; font-weight: 800;
  vertical-align: middle; letter-spacing: .2px;
}

/* أيقونات SVG مرسومة (البحث · السلة · علامة النجاح) */
.search .ico svg { width: 19px; height: 19px; display: block; }
.search .ico { color: var(--gold-500); display: grid; place-items: center; }
.cart-fab .cf-ico svg { width: 21px; height: 21px; display: block; }
.cart-fab .cf-ico { display: grid; place-items: center; }
.ok-badge svg { width: 34px; height: 34px; display: block; }
.ok-badge { display: grid; place-items: center; }

/* علامة صح داخل توست الإضافة — مرسومة بالحدود لا بإيموجي */
.nt-ico.ok {
  width: 17px; height: 17px; flex: none; position: relative;
  border-radius: 50%; background: var(--gold-500);
}
.nt-ico.ok::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 8px;
  border: solid #0A0A0B; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* الصور الغائبة: علامة ذهبية خافتة بدل طبق إيموجي */
.opt-thumb:empty::after, .cr-thumb:empty::after {
  content: ""; width: 22px; height: 22px;
  border: 1.5px solid rgba(212,175,55,.4);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(212,175,55,.12);
}
.opt-thumb:empty, .cr-thumb:empty { display: grid; place-items: center; }

/* السلة الفارغة */
.cart-empty .ce-mark {
  display: block; width: 46px; height: 46px; margin: 0 auto 14px;
  border: 2px solid rgba(212,175,55,.35); border-radius: 14px;
  position: relative;
}
.cart-empty .ce-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 2px; border-radius: 2px;
  background: rgba(212,175,55,.45);
}

/* خطوات تتبّع الطلب صارت أرقاماً — نضبط حجم الرقم داخل الدائرة */
.tp-node { font-size: 14px; font-weight: 900; }

.empty-title { font-weight: 700; color: var(--gold-400); font-size: 18px; }