/* base.css — حرفي من الخطة قسم 8 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* شبكة أمان ضد الانزلاق الأفقي — clip مش hidden عشان ما ينكسر position:sticky */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--text);
  background: var(--paper);
}
html { background: var(--paper); }
::selection { background: var(--volt); color: #121417; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0; letter-spacing: var(--track-head); }
h1 { font-size: calc(36px * var(--scale-head)); font-weight: var(--fw-head); }
h2 { font-size: calc(28px * var(--scale-head)); font-weight: var(--fw-head); }
h3 { font-size: calc(22px * var(--scale-head)); font-weight: 600; }
p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; min-width: 0; }
/* ثِقل أيقونات الهيدر من التوكِن — var() لا تقبلها سمات SVG الظاهرة فانتقل الثِقل إلى CSS (الخطة 22.10)؛
   حُصر بالمحاوين .icon-btn/.tb-tel كي لا تلغى سمات 2.2/2.4 لأيقونتي الساعة والبحث (قاعدة CSS تتغلب على السمة) */
.icon-btn svg, .tb-tel svg { stroke-width: var(--icon-sw, 2); }

:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--ink); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: calc(var(--sp) * 6 * var(--dens)); }

/* أزرار — توكِنية بالوضعين: التعبئة --ink تنقلب ليلياً ونصّها --on-ink معها (خطة 23) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--bw-2) solid var(--ink); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--font-head); font-weight: 600; font-size: 16px; padding: var(--btn-pad);
  transition: background .15s;
}
.btn:hover { background: var(--ink-hover); }
.btn-volt { background: var(--volt); color: var(--on-volt); border-color: var(--ink); }
.btn-volt:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--edge); }
.btn-ghost:hover { background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
.btn-danger { background: var(--deal); color: var(--on-deal); border-color: var(--deal); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

/* حقول */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea {
  border: var(--bw-2) solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--edge); outline: none; }
.field .err { color: var(--deal); font-size: 13px; }
.form-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* صندوق الدخول — مشترك بين المتجر واللوحة */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { background: var(--white); border: var(--bw-2) solid var(--edge); border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 400px; }
.login-box .logo { display: block; margin: 0 auto 16px; height: 52px; }

/* شارات الحالة */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
}
.badge.pending_review { background: var(--st-pending_review-bg); color: var(--st-pending_review-tx); }
.badge.paid { background: var(--st-paid-bg); color: var(--st-paid-tx); }
.badge.preparing { background: var(--st-preparing-bg); color: var(--st-preparing-tx); }
.badge.shipped { background: var(--st-shipped-bg); color: var(--st-shipped-tx); }
.badge.delivered { background: var(--st-delivered-bg); color: var(--st-delivered-tx); }
.badge.cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-tx); }

/* جداول */
table { width: 100%; border-collapse: collapse; background: var(--white); }
th { text-align: start; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 10px 12px; border-bottom: var(--bw-2) solid var(--edge); }
td { padding: 10px 12px; border-bottom: var(--bw-1) solid var(--line); font-size: 14px; vertical-align: middle; }
tr:nth-child(even) td { background: var(--stripe); }

[x-cloak] { display: none !important; }

/* toast */
#toast {
  position: fixed; inset-inline: 0; bottom: 24px; display: flex; justify-content: center; z-index: 999;
  pointer-events: none;
}
#toast .t {
  background: var(--ink); color: var(--on-ink); padding: 10px 24px; border-radius: var(--radius-sm); font-size: 14px;
  box-shadow: var(--shadow-1);
}

/* == موبايل == */
@media (max-width: 960px) {
  /* جدول أعرض من الشاشة: الانزلاق داخل حاويته فقط، مش الصفحة */
  :is(.pb, .panel):has(> table) { overflow-x: auto; }
}
@media (max-width: 640px) {
  .form-2col { grid-template-columns: minmax(0, 1fr); }
  .login-box { padding: 24px 20px; }
  /* .t-cards عالموبايل: كل صف بطاقة مرتّبة بعمودين — العنوان الصغير فوق القيمة (بدل «العنوان: القيمة» متلاصقة)،
     الخلية الأولى عنوان البطاقة، وخلايا الأزرار بعرض كامل. الخلايا التقنية (.tech: معرّفات، IP، ترتيب رقمي)
     مخفية هون بس — موجودة عالكمبيوتر وبصفحات التعديل. */
  table.t-cards, .t-cards tbody { display: block; }
  .t-cards thead { display: none; }
  .t-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 6px 14px; padding: 12px 4px; border-bottom: var(--bw-1) solid var(--line); }
  .t-cards tr:nth-child(even) { background: none; }
  .t-cards td, .t-cards tr:nth-child(even) td { display: block; min-width: 0; padding: 0; border: 0; background: none; font-size: 14px; overflow-wrap: anywhere; }
  .t-cards td:first-child, .t-cards td.full, .t-cards td:not([data-l]), .t-cards td[data-l="إجراءات"] { grid-column: 1 / -1; }
  .t-cards td:first-child { font-size: 15px; }
  .t-cards td:not([data-l]), .t-cards td[data-l="إجراءات"] { display: flex; flex-wrap: wrap; gap: 6px; }
  .t-cards td:not([data-l]):empty { display: none; }
  .t-cards td[data-l]:not(:first-child):not(.full)::before { content: attr(data-l); margin-inline-end: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .t-cards td[data-l="إجراءات"]::before { display: none !important; }
  .t-cards .tech { display: none !important; }
  .t-cards td .btn, .t-cards td button.btn { min-height: 40px; padding-inline: 14px; }
}

/* == إنجليزي (LTR) — الخصائص المنطقية تكفّلت بالانقلاب؛ هنا فقط ما يعتمد على اللغة == */
html.ltr body { letter-spacing: 0; }
.lang-btn { background: none; border: var(--bw-1) solid currentColor; color: inherit; border-radius: var(--radius-sm); padding: 0 8px; font-size: 12px; line-height: 20px; margin-inline-start: auto; font-family: var(--font-head); }

/* شريط التمرير (المتجر واللوحة): رفيع ودائري ولونه من الهوية بالوضعين — بدل شريط المتصفح الرمادي.
   scrollbar-width لا يُورَّث ⇒ على * ؛ والقوائم اللي أخفت شريطها (scrollbar-width: none) بصنفها تبقى مخفية. */
html { scrollbar-color: transparent transparent; scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent; }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
  background-color: transparent;
  background-color: color-mix(in srgb, var(--text) 26%, transparent); }
::-webkit-scrollbar-thumb:hover { background-color: var(--volt); background-color: color-mix(in srgb, var(--volt) 75%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

/* شارة لون المنتج (ألوان المنتج 2026-10-09): دائرة اللون + الاسم — بالسلة والطلبات ولوحة الإدارة.
   اللون من --c (style)، وحلقة شعرية من لون النص حتى الأبيض يبان بالنهاري والأسود بالليلي */
.clr-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; width: fit-content; align-self: flex-start; justify-self: start; padding-block: 2px; padding-inline: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; line-height: 1.6; color: var(--text-2); white-space: nowrap; max-width: 100%; }
.clr-chip b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.clr-chip i { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: var(--c, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
[data-guide-replay][hidden] { display: none !important; }

/* ===== جرس الإشعارات — مشترك بين المتجر والإدارة ولوحات العمال (ص77: نفس الشكل بالضبط) ===== */
.ah-bell-w { position: relative; }
.nt-cnt { background: #25D366 !important; color: #fff !important; box-shadow: 0 0 0 2px var(--paper); }
.nt-pop { position: absolute; top: calc(100% + 8px); inset-inline-end: -8px; z-index: 80; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 18px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--volt) 28%, var(--line));
  box-shadow: 0 30px 70px -26px rgba(40, 30, 10, .45), 0 10px 24px -16px rgba(0, 0, 0, .3); overflow: hidden; }
.nt-h { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 9px 16px; padding-inline-end: 9px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--surface));
  background: linear-gradient(180deg, color-mix(in srgb, var(--volt) 8%, var(--surface)), var(--surface)); }
.nt-h b { font: 800 16px var(--font-head); margin-inline-end: auto; min-width: 0; }
/* ص92: زر إغلاق ثابت في طرف رأس اللوحة (نفس مكانه بكل اللوحات) — الإغلاق لا يغيّر حالة القراءة ولا ينقل لأي صفحة */
.nt-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer;
  transition: background-color .15s, color .15s; }
.nt-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nt-x:hover { background: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.nt-x:focus-visible { outline: 2px solid var(--volt); outline-offset: 1px; }
/* حالة التحميل والخطأ داخل اللوحة (لا قائمة فارغة صامتة) */
.nt-load { display: grid; gap: 0; }
.nt-sk { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.nt-sk i, .nt-sk b, .nt-sk s { display: block; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
.nt-sk i { width: 38px; height: 38px; border-radius: 50%; }
.nt-sk span { display: grid; gap: 8px; }
.nt-sk b { height: 11px; width: 72%; } .nt-sk s { height: 9px; width: 46%; }
@media (prefers-reduced-motion: no-preference) { .nt-sk i, .nt-sk b, .nt-sk s { animation: ntPulse 1.2s ease-in-out infinite alternate; } }
@keyframes ntPulse { from { opacity: .55; } to { opacity: 1; } }
.nt-err { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 26px 20px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.nt-err button { min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: 700 13px var(--font-body); cursor: pointer; }
.nt-err button:hover { border-color: var(--volt); }
.nt-all { border: 0; background: none; padding: 4px 0; color: var(--gold-ink); font: 700 12.5px var(--font-body); cursor: pointer; }
.nt-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.nt-all.nt-attn { padding: 5px 11px; border-radius: 999px; background: transparent; background: color-mix(in srgb, var(--volt) 16%, transparent); }
.nt-all.nt-attn:hover { text-decoration: none; background: transparent; background: color-mix(in srgb, var(--volt) 26%, transparent); }
.nt-list { overflow-y: auto; overscroll-behavior: contain; }
.nt-it { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: background-color .2s; }
.nt-it:hover { background: transparent; background: color-mix(in srgb, var(--text) 4%, transparent); }
.nt-it.un { background: transparent; background: color-mix(in srgb, var(--volt) 7%, transparent); }
.nt-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-2); background: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
/* لوحة الإدارة فيها .nt-ic آخر (مفاتيح الإشعارات في الإعدادات، 22px) يتغلّب على أيقونة الجرس ⇒ داخل الجرس دائماً 38px دائرية */
.nt-pop .nt-ic { width: 38px; height: 38px; border-radius: 50%; }
.nt-it.un .nt-ic { color: var(--gold-ink); background: transparent; background: color-mix(in srgb, var(--volt) 18%, transparent); }
.nt-t { display: grid; gap: 2px; min-width: 0; }
.nt-t b { font-size: 14px; line-height: 1.45; font-weight: 700; overflow-wrap: anywhere; }
.nt-it:not(.un) .nt-t b { font-weight: 600; color: var(--text-2); }
.nt-t span { font-size: 12.5px; line-height: 1.6; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-end { display: grid; justify-items: end; gap: 7px; padding-top: 2px; }
.nt-end small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-it.un .nt-end small { color: #1DAA61; font-weight: 700; }
.nt-end i { width: 10px; height: 10px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 3px transparent; box-shadow: 0 0 0 3px color-mix(in srgb, #25D366 18%, transparent); }
.nt-empty { margin: 0; padding: 28px 20px; text-align: center; font-size: 14px; line-height: 1.8; color: var(--text-3); }
@media (max-width: 767px) {
  .nt-pop { position: fixed; top: calc(var(--head-h, 64px) + 6px); inset-inline: 12px; width: auto; }
}
/* جرس لوحات العمال: نفس الجرس، بمكانه بالهيدر */
.fb-btn { position: relative; }
.fb-cnt { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font: 700 10.5px/18px var(--font-body, inherit); text-align: center; }
.fb-w .nt-it { width: 100%; border: 0; text-align: start; font: inherit; cursor: pointer; background-color: transparent; }
.fb-w .nt-it.un { background: transparent; background: color-mix(in srgb, var(--volt, #c9a227) 7%, transparent); }
.fb-w .nt-pop { color: var(--text); background: var(--surface); }

/* ص101: وصول من إشعار أو رابط عميق — العنصر المقصود يومض بإطار ذهبي ثم يهدأ (js/lib/deep-focus.js).
   .nt-hl للبطاقات (إطار خارجي وهالة)، .nt-hl-in لصف داخل قائمة مقصوصة الحواف (إطار داخلي وخلفية خفيفة) */
/* html + مضاعفة الصنف ⇒ تتقدّم على حركات الدخول الخاصة بالصفحات (مثل .drv-main > *) */
html .nt-hl.nt-hl, html .nt-hl-in.nt-hl-in { outline: 2px solid transparent; animation: ntHl 2.6s cubic-bezier(.22, 1, .36, 1) both; scroll-margin: 90px 0; }
html .nt-hl.nt-hl { outline-offset: 3px; }
html .nt-hl-in.nt-hl-in { outline-offset: -3px; animation-name: ntHlIn; }
@keyframes ntHl {
  0% { outline-color: transparent; }
  12%, 60% { outline-color: var(--volt); box-shadow: 0 0 0 7px transparent; box-shadow: 0 0 0 7px color-mix(in srgb, var(--volt) 22%, transparent); }
  100% { outline-color: transparent; box-shadow: 0 0 0 0 transparent; }
}
@keyframes ntHlIn {
  0% { outline-color: transparent; }
  12%, 60% { outline-color: var(--volt); background-color: transparent; background-color: color-mix(in srgb, var(--volt) 16%, transparent); }
  100% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { html .nt-hl.nt-hl, html .nt-hl-in.nt-hl-in { animation: none; outline-color: var(--volt); } }

/* ص101 — مكوّن رفع الإيصال المشترك (partials/receipt-file.html): صورة مصغّرة أو شارة PDF، الاسم والحجم،
   إزالة، شريط تقدّم (تجهيز = متحرّك، رفع = نسبة)، ملاحظة محايدة، خطأ. نفس الشكل في المتجر واللوحات */
.rf { --rf-acc: var(--gold, var(--volt)); --rf-line: color-mix(in srgb, var(--text) 14%, transparent); position: relative; display: grid; gap: 8px; min-width: 0; }
.rf-row { position: relative; min-width: 0; }
.rf-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px 14px; border-radius: 14px;
  border: 2px dashed var(--rf-acc);
  border: 2px dashed color-mix(in srgb, var(--rf-acc) 55%, var(--rf-line)); background: var(--surface); background: color-mix(in srgb, var(--rf-acc) 6%, var(--surface));
  cursor: pointer; transition: border-color .2s, background-color .2s; overflow: hidden; }
.rf-drop:hover, .rf.over .rf-drop { border-color: var(--rf-acc); background: var(--surface); background: color-mix(in srgb, var(--rf-acc) 12%, var(--surface)); }
.rf-drop:focus-within { outline: 2px solid var(--rf-acc); outline-offset: 2px; }
.rf.has .rf-drop { border-style: solid; border-color: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, var(--rf-line)); background: var(--surface); background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.rf.bad .rf-drop { border-color: var(--err-tx); }
.rf.busy .rf-drop { cursor: progress; }
.rf-thumb { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
  background: var(--surface);
  background: color-mix(in srgb, var(--rf-acc) 10%, var(--surface)); border: 1px solid var(--rf-line); }
.rf-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; }
.rf-ic { width: 30px; height: 30px; fill: none; stroke: var(--gold-ink, var(--text)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rf-pdf { display: grid; place-items: center; gap: 0; color: var(--text-2); }
.rf-pdf svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.rf-pdf b { font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1; color: var(--err-tx); }
.rf-spin { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.rf-spin::after { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border: 2.5px solid color-mix(in srgb, var(--rf-acc) 30%, transparent); border-top-color: var(--rf-acc); animation: rfSpin .8s linear infinite; }
.rf-t { display: grid; gap: 3px; min-width: 0; }
.rf-t b { font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.rf-t b[dir="auto"] { unicode-bidi: plaintext; text-align: right; }
[dir="ltr"] .rf-t b[dir="auto"] { text-align: left; }
.rf-t small { font-size: 12.5px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.rf-ok { position: absolute; inset-inline-start: 3px; top: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }
.rf-ok svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rf.has .rf-drop { padding-inline-end: 56px; }
.rf-x { position: absolute; inset-inline-end: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--rf-line); background: var(--surface); color: var(--text-2); cursor: pointer; transition: color .15s, border-color .15s; }
.rf-x:hover, .rf-x:focus-visible { color: var(--err-tx); border-color: var(--err-tx); }
.rf-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rf-bar { position: absolute; inset-inline: 12px; bottom: 6px; height: 3px; border-radius: 3px; overflow: hidden; background: transparent; background: color-mix(in srgb, var(--rf-acc) 18%, transparent); }
.rf-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rf-acc); transition: width .2s ease-out; }
.rf-bar.ind i { width: 35%; animation: rfInd 1.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.rf-note, .rf-err { margin: 0; font-size: 13px; line-height: 1.65; }
.rf-note { color: var(--text-2); }
.rf-err { color: var(--err-tx); font-weight: 600; }
@keyframes rfSpin { to { transform: rotate(360deg); } }
@keyframes rfInd { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
[dir="rtl"] .rf-bar.ind i { animation-name: rfIndR; }
@keyframes rfIndR { from { transform: translateX(110%); } to { transform: translateX(-310%); } }
@media (prefers-reduced-motion: reduce) { .rf-spin::after, .rf-bar.ind i { animation-duration: 3s; } }