/* ==========================================================================
 * Sun Ray — card-perf.css
 * تسريع بطاقات المنيو القلّابة + تبسيط وجه البطاقة.
 *
 * يُحمَّل **بعد** <style> الصفحة و«theme-unified.css» عمداً: القواعد هنا بنفس
 * تخصيص القواعد الأصلية، فالأسبقيّة تأتي من ترتيب المصدر لا من !important.
 * أي صفحة منيو تربط هذا الملف تُصلَح بلا لمس قوالبها الداخلية.
 *
 * ⛔ لا تنسخ هذه القواعد داخل <style> أي صفحة — تُعدَّل هنا مرّةً واحدة.
 * ========================================================================== */

/* ── ١) القلب على معالج الرسوميات وحده ──────────────────────────────────────
 * القاعدة: ما يتحرّك هو transform لا غير. أي عرض/ارتفاع/هامش متحرّك يُجبر
 * المتصفّح على إعادة تخطيط الصفحة في كل إطار — وهو سبب «التعليق» عند اللمس.
 */
.card-container {
  perspective: 1000px;
  touch-action: manipulation;        /* يُلغي مهلة انتظار «النقرة المزدوجة» على الجوال */
  -webkit-tap-highlight-color: transparent;
}

.flip-card-inner {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;            /* طبقةٌ جاهزة سلفاً ⇒ لا تأخّر عند أول لمسة */
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* ⚠️ لا تُعِد transform إلى قائمة الانتقال هنا: الوجهان لا يدوران بذاتهما،
   *    الدوران على .flip-card-inner وحده. إبقاؤه كان يُنشئ انتقالاً ميتاً. */
  transition: opacity 0s linear 0.2s, background-color 0.4s ease, color 0.4s ease;
}

.card-back { transform: rotateY(180deg); }

/* إصلاح iOS: بعض إصدارات سفاري تُظهر الوجه الخلفي رغم backface-visibility.
 * تبديل الشفافية عند منتصف القلب (0.2s = نصف 0.4s) يحسم الأمر بلا تكلفة. */
.card-back { opacity: 0; }
.card-container.flipped .card-front { opacity: 0; }
.card-container.flipped .card-back  { opacity: 1; }

/* ── ٢) لا فلاتر ثقيلة أثناء الحركة ─────────────────────────────────────────
 * js/card-ux.js يضع .sr-flipping طوال زمن القلب فقط.
 * ⚠️ فنّ المحاصيل SVG **ملوَّن بالفلتر نفسه** — إسقاط الفلتر كاملاً يُظهره أسود.
 *    لذلك نُسقط drop-shadow والطفو فقط، ونُبقي سلسلة إعادة التلوين كما هي.
 */
.card-container.sr-flipping .product-image { animation: none; }

.card-container.sr-flipping:not(.cup) .product-image {
  filter: brightness(0) saturate(100%) invert(82%) sepia(35%) saturate(560%)
          hue-rotate(345deg) brightness(98%) contrast(92%);
}
body.light-mode .card-container.sr-flipping:not(.cup) .product-image { filter: none; }
.card-container.sr-flipping:not(.cup) .product-image.is-photo { filter: none !important; }

/* النجيمات: ثمانية عناصر تُحرَّك بلا توقّف مع drop-shadow لكلٍّ منها.
 * الظلّ أغلى ما فيها ولا يكاد يُرى ⇒ يسقط دائماً، والحركة تتوقّف أثناء القلب. */
.sparkles .star { filter: none; }
.card-container.sr-flipping .sparkles { visibility: hidden; }

/* تلميح «للمزيد»: backdrop-filter فوق بطاقةٍ معتمة لا يُضيف شيئاً ويكلّف طبقةً
 * كاملة تُعاد رسمتها مع كل نبضة. الخلفية الصلبة تُعطي المظهر نفسه بلا ثمن. */
.card-front::after {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 0.68rem;
  opacity: 0.72;
}
.card-container.sr-flipping .card-front::after { animation: none; }

/* ── ٣) لا رندرة للوجه الخلفي قبل القلب (Render on Demand) ─────────────────
 * content-visibility: hidden يتخطّى تخطيط ورسم الشجرة الداخلية كلها، ويبقى
 * العنصر في الـDOM فتظلّ حقن allergens.js واستعلاماته تعمل كما هي.
 * المتصفّحات التي لا تدعمها تتجاهل السطر ⇒ لا انكسار. */
.card-container:not(.flipped) .card-back { content-visibility: hidden; }

/* ── ٤) وجه البطاقة: الحدّ الأدنى ───────────────────────────────────────────
 * السعرات ومسبّبات الحساسية تنتقلان إلى الخلف وحده.
 * (allergens.js توقّف عن حقن رقاقة الوجه؛ وهذا السطر يحرس الصفحات القديمة
 *  ونتائج الكاش التي قد تسبق تحديث السكربت.)
 */
.card-front .cal-chip,
.card-front .sr-alg-fchip { display: none !important; }

/* السعر وحده على الوجه ⇒ يستحقّ أن يُرى من بعيد. */
.card-front .price { border-top: none; padding-top: 6px; }
.card-front .pchip { font-size: 1.35rem; font-weight: 900; letter-spacing: 0.2px; }
.card-front .pchip .pk { font-size: 0.6rem; }

/* ── ٥) شريط الأقسام: ثابتٌ أعلى الصفحة والقسم النشط بارز ──────────────────
 * .topbar لاصقٌ أصلاً في assets/styles.css؛ هنا تمييز النشط وحده كي يكون
 * موحّداً في كل الصفحات (js/card-ux.js يضع .active-tab تلقائياً). */
nav.tabs a.active-tab {
  background: var(--gold);
  color: #111;
  border-color: var(--gold);
  font-weight: 900;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 35%, transparent);
  pointer-events: none;
}

/* ── ٦) شريط البحث: حدٌّ واضح وعدسة بارزة ─────────────────────────────────── */
.search-bar-container { position: relative; }
.search-bar-container .search-input {
  border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  padding-inline-start: 46px;
  font-weight: 700;
}
.search-bar-container .search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}
.search-bar-container .search-ico {
  position: absolute;
  inset-inline-start: 34px;          /* 20px حشو الحاوية + 14px داخل الحقل */
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 2;
}

/* ── ٧) قسم محاصيل المحمصة المختصة ────────────────────────────────────────── */
.crops-strip .section-title { color: var(--gold); }
.crops-strip .section-sub {
  padding: 0 20px 4px;
  margin: -8px 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

/* ── ١٠) خطوط الهوية على البطاقات ──────────────────────────────────────────
 * 🔴 [عهد 2026-09-11] كان اسمُ المنتج الإنجليزيّ بـ**Comic Sans** في ٥١ موضعاً
 *    عبر صفحات المنيو — خطُّ دفاترِ أطفالٍ على منيو قهوةٍ مختصّة، وليس من
 *    خطوط الهوية الثلاثة أصلاً.
 * ⇒ الإنجليزيّ = **Poppins** (الفرعيّ المعتمد)، والعربيّ = **Baloo Bhaijaan 2**.
 * 🔄 [2026-09-11 (٢)] تعريفُ الخطّ هنا لم يكفِ — بقي Comic Sans في السعر والمنشأ
 *    والوصف. ⇒ الخطُّ صار **مفروضاً مرّةً واحدة على كل عنصر** في
 *    `theme-unified.css`. ⛔ فلا `font-family` هنا ولا في أي صفحة — لن يكون له
 *    أثر. هنا الوزنُ وحده.
 */
.big-word.tl { font-weight: 700; letter-spacing: .2px; }
.big-word.br { font-weight: 800; }

/* ── ٩) اسمُ المنتج يتبع اللغة ─────────────────────────────────────────────
 * 🔴 [عهد 2026-09-11] «يظهر العربي لو اللغة عربي ويظهر انقلش لو غُيّرت اللغة».
 *
 * وجهُ البطاقة يحمل الاسمين معاً في كل صفحات الأقسام:
 *     `.big-word.tl` = الإنجليزي (أعلى)   ·   `.big-word.br` = العربي (أسفل)
 * فالاختيار هنا **إخفاءٌ بالـCSS لا إعادةُ رسم** — يقع قبل أوّل طلاء، فلا
 * يلمح القارئ الاسمين معاً ثم يختفي أحدهما.
 *
 * ⛔ ولا `!important`: الوسم `data-sr-lang` على `<html>` يرفع التخصيص وحده.
 * ⚠️ و`:not(:empty)` حارسٌ لازم: منتجٌ بلا اسمٍ إنجليزيّ يُخرج `.tl` فارغاً —
 *    فلولاه لأخفينا العربيَّ في الوضع الإنجليزيّ وتركنا **بطاقةً بلا اسم**.
 *    السقوط للعربية مقصود: نصٌّ صادق خيرٌ من فراغ. (العلاج: املئي `nameEn`.)
 */
html[data-sr-lang="ar"] .big-word.tl { display: none; }
html[data-sr-lang="en"] .big-word.tl:not(:empty) ~ .big-word.br { display: none; }

/* الإنجليزيّ حين يصير الاسمَ الوحيد: يأخذ حجم الاسم الرئيسي ويتنفّس أكثر —
   كان سطراً ثانوياً فوق الصورة، وصار هو الاسم. */
/* 📍 [عهد 2026-09-11: «مكان الاسم الانقليزي غلط يغطي عليه ملصق جديد، ابغاه بنفس
   مكان العربي»] `.tl` مكانُه في كل صفحة **أعلى اليمين** — وهو نفسُ موضع ملصقات
   «✨ New» و«☀️ Summer special»، فكان الملصقُ فوق الاسم. وبالإنجليزية لم يعد
   سطراً ثانوياً بل **الاسم** ⇒ يأخذ خانةَ العربي نفسها (أسفل اليسار) وحجمَه،
   فتبديلُ اللغة يبدّل النصَّ في مكانه لا مكانَه. ⛔ بالعربية `.tl` مخفيّ أصلاً. */
html[data-sr-lang="en"] .big-word.tl {
  top: auto; right: auto; bottom: 0; left: 0;
  font-size: 1.9rem; max-width: 92%;
}

/* 📝 وصفُ ظهر البطاقة بالإنجليزية.
 * 🔴 [عهد 2026-09-11] الأوصاف كانت عربيةً دائماً؛ صارت تُترجَم بالمطابقة من
 *    `js/sr_shop_phrases.js` (قسم «أوصاف المنتجات»). لكن بطاقات المحاصيل تحمل
 *    **وصفين** (`.desc-ar` + `.desc-en` من `descEn`) — فبعد ترجمة الأول تظهر
 *    جملتان إنجليزيتان متتاليتان. ⇒ حين يوجد `.desc-en` غيرُ فارغ يُخفى الأول.
 * ⛔ بالعربية يبقى الاثنان كما صُمّما. */
html[data-sr-lang="en"] .crop-description:has(> .desc-en:not(:empty)) > .desc-ar { display: none; }

/* 🌐 [عهد 2026-09-11: «بعض النصوص لازالت غير مترجمة»] نفسُ نمط الوصف أعلاه على
 * بقيّة الثنائيّ في البطاقة — كان العربيّ يظهر **بجوار** الإنجليزيّ:
 *   • سطر المنشأ: «COLOMBIAN | كولومبي» (`.strain-combo .ar`).
 *   • صفوف التفاصيل: «كولومبيا | Colombia» (`.v-ar` + `.v-sep` + `.v-en`).
 * ⚠️ `:has(> .v-en:not(:empty))` حارس: صفٌّ بلا إنجليزية يبقى عربياً (وتُترجمه
 *    العبارات إن عرفته) بدل صفٍّ فارغ. ⛔ بالعربية يبقى الثنائيّ كما صُمّم. */
html[data-sr-lang="en"] .strain-combo .ar { display: none; }
html[data-sr-lang="en"] .details-list .value:has(> .v-en:not(:empty)) > .v-ar,
html[data-sr-lang="en"] .details-list .value:has(> .v-en:not(:empty)) > .v-sep { display: none; }
/* ↔️ الصفوف مكتوبةٌ `direction:rtl` في كل صفحة؛ نصٌّ لاتينيٌّ في سياقٍ يمينيّ
   تنقلب علاماتُه وأرقامُه. بالإنجليزية تتبع اتجاه الصفحة. */
html[data-sr-lang="en"] .details-list { text-align: left; }
html[data-sr-lang="en"] .details-list .value { direction: ltr; text-align: right; }
/* ↔️ وبالعربية: الإنجليزيّ داخل سياقٍ يمينيّ تنقلب نقطتُه وأرقامُه — ظهرت على
   البطاقة «.chocolate in a captivating premium cup» و«m 2000 - 1900».
   عزلُه في اتجاهه يُبقيه كما كُتب. */
.crop-description .desc-en,
.details-list .value .v-en { direction: ltr; unicode-bidi: isolate; }
/* 🍵 نكهات الماتشا مكتوبةٌ `text-align:right` في صفحتها — بالإنجليزية بدت أسماءُ
   النكهات لاصقةً بالسعر بعيدةً عن وصفها. */
html[data-sr-lang="en"] .matcha-flavors { text-align: left; }
html[data-sr-lang="en"] .matcha-flavors .mf-end { text-align: right; }

/* ── ٨) احترام تفضيل تقليل الحركة ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition-duration: 0.01ms; }
  .sparkles, .card-front::after { animation: none !important; }
  .card-container:not(.cup) .product-image { animation: none !important; }
}