/* Finishing touches — loaded LAST (after every other store stylesheet) so these corrections win over the shorthand `background` declarations
   scattered through the files above (a later `background: ...` would reset any longitudinal property set earlier). */

/* A gradient under a transparent border: paint it from the BORDER box. By default it starts at the padding box and tiles into the border, which
   draws a thin outline in the opposite end colour (a visible seam on themes whose primary and accent differ a lot, e.g. the violet nebula).
   The :hover twin is needed because the hover rule re-declares the `background` shorthand (which resets background-origin). */
.btn-primary, .btn-primary:hover, .filter-chip[aria-pressed="true"], .tab[aria-selected="true"], .ticker-label, .flag, .bn-link[aria-current="page"] .bn-ic { background-origin: border-box; }

/* Footer contact chips: each channel in its own colour (Telegram sky-blue, WhatsApp green; email follows the theme) with a round brand-coloured badge
   for the glyph, and a lift + coloured glow on hover. */
.contact-chip { --chip: var(--primary); --chip-on: var(--on-primary); display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 7px; padding-inline: 7px 16px; min-height: var(--foot-ctl-h); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--chip) 40%, var(--border)); background: color-mix(in srgb, var(--chip) 9%, var(--surface)); color: var(--text); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t); }
.contact-chip[data-ch="tg"] { --chip: #2aabee; --chip-on: #fff; }
.contact-chip[data-ch="wa"] { --chip: #25d366; --chip-on: #fff; }
.contact-chip[data-ch="dc"] { --chip: #5865f2; --chip-on: #fff; }
/* Per-product "files channel" button (product dialog, receipt, order detail): the same contact-chip look, on its own row, allowed to wrap on narrow screens. */
.pd-files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pd-files .contact-chip { max-inline-size: 100%; white-space: normal; }
/* بعد الشراء (الإيصال وتفاصيل الطلب): سطر توضيح فوق زر قناة الملفات والتسطيب */
.pd-files.files-after { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pd-files .files-hint { flex-basis: 100%; margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.contact-chip .chip-ic { inline-size: 26px; block-size: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--chip-on, #fff); background: linear-gradient(150deg, color-mix(in srgb, var(--chip) 78%, #fff), var(--chip)); box-shadow: 0 4px 12px -6px var(--chip); }
.contact-chip:hover, .contact-chip:focus-visible { transform: translateY(-2px); text-decoration: none; border-color: var(--chip); background: color-mix(in srgb, var(--chip) 17%, var(--surface)); box-shadow: 0 10px 24px -12px var(--chip); }
.contact-chip:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }

/* ارتفاع عناصر التحكّم في الفوتر (شرايح التواصل + اختيار العملة) واحد: الشريحة كانت ٤٠px والاختيار ٣٦px (بحدود وخلفية مختلفة). نفس الحدّ (1px مظلّل بلون القناة/اللون الأساسي) ونفس الخط. */
:root { --foot-ctl-h: 40px; }
.cur-select:hover { border-color: var(--primary); }
.cur-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* موبايل ضيّق: الشرايح في عمودين متساويين والفردية الأخيرة في النص (بدل سطر ٢+١ بعرض مختلف) — ٣ شرايح بتتساوى مع بعض لما بتتّسع في صف واحد (فوق ٤٤٠px) */
@media (max-width: 440px) {
  .footer-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; max-inline-size: 360px; }
  .footer-contacts .contact-chip { justify-content: center; min-inline-size: 0; padding-inline: 7px 12px; }
  .footer-contacts .contact-chip > span:not(.chip-ic) { overflow: hidden; text-overflow: ellipsis; }
  .footer-contacts .contact-chip:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
}

/* Display-currency selector: a clean pill, text centred vertically and horizontally, custom chevron (the native one sat off-centre) */
.cur-pick { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cur-select { appearance: none; -webkit-appearance: none; inline-size: auto; min-inline-size: 104px; min-block-size: var(--foot-ctl-h); block-size: var(--foot-ctl-h); padding: 0 34px; line-height: calc(var(--foot-ctl-h) - 2px); text-align: center; text-align-last: center; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); background-color: color-mix(in srgb, var(--primary) 9%, var(--surface)); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
html[dir="rtl"] .cur-select { background-position: 12px 50%, 17px 50%; }

/* Tajawal + نص لاتيني (إنجليزي): الأيقونة جنب النص بتقعد حوالي .17em أوطى من منتصف النص (مقاس على الخطوط الحقيقية) — بنرفعها. الخطوط التانية (Poppins · Cairo · Inter ·
   system) وTajawal مع نص عربي صفر فرق ⇒ مفيش أي تعديل. `html[data-font]` بيحطه applyTheme (`custom` لأي خط تاني). أزرار الأيقونة وحدها (الجرس · الصورة الرمزية · ✕ ·
   `.btn-icon`) مش في القايمة عمداً، ولا تنبيهات/توستات متعددة الأسطر (ليها margin خاص). أي حاوية جديدة فيها أيقونة + نص لازم تتضاف هنا — fs_ui_mobile بيفحص ده. */
html[data-font="tajawal"]:lang(en) :is(.btn:not(.btn-icon), .chip, .eyebrow, .hero-points li, .float-chip, .ticker-label, .menu-item, .nav-link, .contact-go, .flag, .stock-tag, .bal-pill, .pill, .panel-title, .approx, .rank-badge, .pd-block h4, .file-list li) > svg.ic { position: relative; top: -.17em; }
/* حقل البحث: الأيقونة absolute + transform ⇒ بنعدّل الـtransform (position: relative كانت بتكسر محاذاتها) */
html[data-font="tajawal"]:lang(en) .input-icon > .ic { transform: translateY(calc(-50% - .17em)); }
/* زر اللغة: النص فيه هو اسم اللغة التانية — في الصفحة الإنجليزي «عربي» (نص عربي ⇒ من غير تعديل) وفي العربي «EN» (لاتيني ⇒ الأيقونة بتتنزّل) ⇒ العكس من باقي القايمة.
   تحت ٣٨١px الكلمة بتختفي والأيقونة لوحدها (من غير تعديل). */
@media (min-width: 381px) { html[data-font="tajawal"]:lang(ar) .lang-btn > svg.ic { position: relative; top: -.17em; } }

/* اسم المتجر ↔ اللوجو (الهيدر): مركز ارتفاع الحروف (cap-height) لازم يتطابق مع مركز المربّع. مربّع سطر النص بيتحسب من ascent/descent الخط فبيختلف من خط للتاني
   (Tajawal كان بيقعد ~٣٫٦px أعلى من مركز اللوجو بـ١٨px، والباقي ±٠٫٥px) — `text-box` بيقصّ صندوق السطر على cap-height/الخط الأساسي فالتوسيط بيبقى على شكل الحروف
   نفسه لأي خط (حتى المخصّص). الـpadding المتماثل بيرجّع مكان لنزلات الحروف (ج · g) جوّه الـoverflow:hidden من غير ما يحرّك المركز. القص على الـspan الجوّاني `.bn-in`
   مش على `.brand-name`: الأخير على الموبايل `display:-webkit-box` (قص سطرين) وChrome مابيطبّق `text-box` عليه كامل (قيس: صندوق سطرين بيفضل بالارتفاع القديم تقريباً).
   المتصفح اللي مايدعمش `text-box` (Firefox) بيفضل على السلوك القديم. محروس في fs_ui_polish (الاسم مقابل اللوجو لكل لغة × عرض). */
@supports (text-box: trim-both cap alphabetic) {
  .brand-name > .bn-in { unicode-bidi: plaintext; text-align: start; } /* الاتجاه من أول حرف زي `.bidi-auto` على الأب (الـspan بقى بلوك بنفسه: من غيرها اسم لاتيني في صفحة عربي بيتحاذى يمين ونقطه على الشمال) */
  .brand-name > .bn-in { display: block; overflow: hidden; text-overflow: ellipsis; text-box: trim-both cap alphabetic; padding-block: .45em; }
  /* موبايل: القص بالسطرين (line-clamp) على `.brand-name` نفسه — أي overflow على الـspan الجوّاني بيكسر العدّ (الاسم بيطوّل من غير قص) فالـpadding بيتنقل للأب (وأقل: .3em) */
  @media (max-width: 480px) {
    .brand-name { padding-block: .3em; } /* مقاس بـCairo/Tajawal: نزلة الحرف ≤ .33em وقمة نقط السطر التالي بعد (lh 1.15) ≈ .30em ⇒ .3em بيحمي الذيل من غير ما سطر تالت يطلّ؛ أكبر من كده (.38em) ظهرت قمة حرف، وأقل من .15em بيقص ذيل g/y */
    .brand-name > .bn-in { overflow: visible; padding-block: 0; }
  }
  .brand-ch { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
}

/* أهداف اللمس ≥ ٤٠px على الموبايل/التابلت: `.btn-sm` (٣٤) · `.btn-icon` (٣٦) · `.filter-chip` (٣٧–٣٩ حسب الأفاتار) · `.tab` (٣٨) · شعار الهيدر (٣٤).
   من غير ما نغيّر الشكل فوق ٩٠٠px. أزرار الهيدر نفسها (٣٨px تحت ٤٨٠) قرار قديم موثّق في docs/frontend.md (الاسم بياخد المساحة) — مابنلمسهاش. */
@media (max-width: 899px) {
  .btn-sm, .filter-chip, .tab, .brand { min-block-size: 40px; }
  .btn-icon { inline-size: 40px; min-block-size: 40px; }
  .filter-chip, .tab { justify-content: center; }
  .dlg-x.icon-btn { inline-size: 40px; block-size: 40px; } /* كان ٣٨ من قاعدة أزرار الهيدر (≤٤٨٠) */
  .input-wrap .suffix-btn { width: 40px; }
  /* روابط النص (.link-btn): الـpadding السالب بيوسّع منطقة اللمس لـ٤٠px+ من غير ما يحرّك أي حاجة في التخطيط */
  .link-btn { padding-block: 9px; margin-block: -9px; }
}

/* أزرار الهيدر بنفس الارتفاع: «تسجيل الدخول» (.btn-sm) كان ٣٤px جنب أزرار الأيقونة ٤٠px (٣٨ تحت ٤٨٠ · ٣٦ تحت ٣٤١). بيمشي مع قيم layout.css نفسها. */
.header-actions > .btn-sm { min-block-size: 40px; }
@media (max-width: 480px) { .header-actions > .btn-sm { min-block-size: 38px; } }
@media (max-width: 340px) { .header-actions > .btn-sm { min-block-size: 36px; } }