/* ══════════════════════════════════════════════════════════════════════════
   صفحة الشراء والدفع دون حساب ومتابعة الطلب (2026-10-15)
   components/BuyPanel.jsx · OrderSummary.jsx · GuestPay.jsx · pages/checkout/Checkout.jsx · pages/Track.jsx
   يُحمَّل بعد store.css وmotion.css: يغيّر تخطيط صفحة الشراء (.buy.co-buy) بمحدّدات أقوى قليلاً، ولا يمسّ صفحات
   السجلّ التي تشاركها الأصناف (.buy-hero في /orders/:id…).
   التخطيط يتبع عرض الصفحة نفسها (container query) لا الشاشة: داخل الحساب يأخذ الشريط الجانبي جزءاً منها.
   الجوال: المنتج سطراً، ثم الخطوات، والإجمالي والزرّ في بطاقة سفلية عائمة لاصقة (داخل هامش الصفحة، لا لوح بعرض الشاشة).
   العريض (≥ 840px للصفحة): الخطوات في عمود، وبجانبها ملخّص لاصق تحت الشريط العلوي فيه الإجمالي والزرّ.
   الحركة: تحويل وشفافية فقط، مرّة واحدة؛ «تقليل الحركة» يوقفها (آخر الملف).
   ══════════════════════════════════════════════════════════════════════════ */

.co-page, .trk-wrap { container: co / inline-size; }
.co-page { gap: var(--s-4); }
/* هامش جانبي حقيقي (16px على الأقل) على الهاتف مهما كان هامش الغلاف: الصفحة لا تتجاوز عرض الشاشة ناقص 32px */
.co-flow, .trk-wrap, .track { width: min(100%, calc(100vw - 2 * var(--s-4))); margin-inline: auto; }
/* الجوال: بطاقة الزرّ تستقرّ في آخر الصفحة قريبة من التذييل (لا فراغ الحاشية السفلية كاملة تحتها) */
@media (max-width: 839.98px) { .co-flow { margin-bottom: calc(-1 * var(--s-16)); } }

/* ───── الشبكة ───── */
.buy.co-buy { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "hero" "main" "side"; gap: var(--s-4); column-gap: 0; }
.buy.co-checkout { grid-template-areas: "main" "side"; }
.co-buy > .co-hero { grid-area: hero; grid-row: auto; position: relative; top: auto; }
.co-buy > .co-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.co-buy > .co-side { grid-area: side; }
/* a short page (few packs, no fields): the bottom bar sat right under the last step, halfway up the screen. The page
   fills the screen and the bar's row is the last one, so it rests on the bottom edge and stays sticky when the page is longer. */
.buy.co-buy { min-height: calc(100dvh - var(--shell-offset, 112px) - var(--s-6)); grid-template-rows: auto auto 1fr; }
/* صفحتا الدفع: لا حشو حتى أسفل الشاشة — كان يترك فراغاً كبيراً فوق الشريط أو تحته قبل التذييل؛ الصفحة بطول محتواها */
.buy.co-checkout { min-height: 0; grid-template-rows: auto; }
.co-buy > .co-side { align-self: end; }

/* ───── المنتج: سطر واحد — الصورة بجانب الاسم والوصف ───── */
.co-buy > .co-hero { --pic: 84px; --ring-x: calc(var(--s-4) + var(--pic) / 2); --ring-y: 50%;
  flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: 24px; text-align: start; }
.co-hero .buy-pic { border-radius: 24px; }
.co-hero .buy-head { align-items: flex-start; gap: var(--s-1); max-width: 60ch; }
.co-hero .buy-title { font-size: 21px; line-height: 1.3; }
@container co (min-width: 640px) {
  .co-buy > .co-hero { --pic: 104px; --ring-x: calc(var(--s-6) + var(--pic) / 2); gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: 28px; }
  .co-hero .buy-pic { border-radius: 30px; }
  .co-hero .buy-title { font-size: 26px; }
}

/* ───── الملخّص ─────
   الجوال: شريط سفلي لاصق (الإجمالي والزرّ) — variant="card" لا يظهر (صفحة طريقة الدفع تعرض .co-mini) */
.co-side { position: sticky; bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; gap: var(--s-3); min-width: 0;
  margin: 0; padding-block: var(--s-2); padding-inline: var(--s-4) var(--s-2); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-3); animation: bar-up .5s var(--ease-emph) .15s backwards; }
/* صفحة الدفع: المبلغ قيل في بطاقته — الشريط زرّ واحد بعرضه */
.co-side[data-solo] { padding-inline: var(--s-2); }
.co-side[data-solo] .co-sum-action { flex: 1; }
.co-side[data-solo] .co-go { width: 100%; }
.co-side[data-variant="card"] { display: none; }
.co-sum-item, .co-sum-rows, .co-sum-foot { display: none; }
.co-sum-total { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.co-sum-label { font: var(--t-caption); color: var(--text-2); }
.co-sum-total > b { font: var(--t-title-3); font-weight: 800; color: var(--text); animation: sum-pop .4s var(--ease-back); transform-origin: 100% 50%; }
[dir="ltr"] .co-sum-total > b { transform-origin: 0 50%; }
.co-sum-none { font: var(--t-callout-strong); color: var(--text-3); }
.co-sum-sub { font: var(--t-caption); color: var(--text-3); white-space: nowrap; }
.co-sum-action { flex: none; }
.co-go { min-width: 128px; }
.co-go > svg { width: 18px; height: 18px; }
/* زرّ الشريط بارتفاع الضابط العادي (44px) لا الكبير — الشريط لا يعلو المحتوى */
.co-side .ui-btn-lg { --h: var(--control); padding-inline: var(--s-5); font: var(--t-body-strong); border-radius: var(--r-2); }
/* «متابعة»: السهم إلى الأمام (يسار الصفحة العربية) بعد الكلمة */
.co-next > svg { width: 18px; height: 18px; transform: scaleX(-1); transition: transform .35s var(--ease-back); }
[dir="ltr"] .co-next > svg { transform: none; }
@media (hover: hover) { .co-next:hover:not(:disabled) > svg { transform: scaleX(-1) translateX(-4px); } }

.co-sum-pic { position: relative; display: grid; place-items: center; flex: none; width: 52px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-3); color: var(--gray-4); }
.co-sum-pic > img { width: 100%; height: 100%; object-fit: cover; }
.co-sum-pic > svg { width: 22px; height: 22px; }
.co-sum-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-sum-name > b { font: var(--t-body-strong); overflow-wrap: anywhere; }
.co-sum-name > span { font: var(--t-callout); color: var(--text-2); overflow-wrap: anywhere; }

/* الجوال في صفحتي الدفع: المنتج والإجمالي سطراً واحداً */
.co-mini { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.co-mini > .co-sum-name { flex: 1; }
.co-mini .co-sum-pic { width: 44px; border-radius: var(--r-2); }
.co-mini-total { flex: none; font: var(--t-title-3); font-weight: 800; color: var(--accent-text); }

@container co (min-width: 840px) {
  .buy.co-buy { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); grid-template-areas: "hero side" "main side"; grid-template-rows: auto 1fr; column-gap: var(--s-8); row-gap: var(--s-4); }
  .buy.co-checkout { grid-template-areas: "main side"; grid-template-rows: auto; }
  .buy.co-buy { min-height: 0; }
  .co-buy > .co-side { align-self: start; }
  .co-side, .co-side[data-variant="card"] { position: sticky; top: var(--shell-offset, 112px); bottom: auto; align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-4);
    margin: 0; padding: var(--s-5); border-radius: 28px; border: 1px solid var(--border); box-shadow: var(--shadow-2); animation: co-side-in .55s var(--ease-emph) .1s backwards; }
  .co-sum-item { display: flex; align-items: center; gap: var(--s-3); }
  .co-sum-rows { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--border); }
  .co-sum-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-width: 0; }
  .co-sum-rows dt { flex: none; font: var(--t-callout); color: var(--text-2); }
  .co-sum-rows dd { margin: 0; min-width: 0; font: var(--t-callout-strong); text-align: end; overflow-wrap: anywhere; }
  .co-sum-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px; padding-top: var(--s-3); border-top: 1px solid var(--border); }
  .co-sum-total > b { font: var(--t-title-2); font-weight: 800; }
  .co-side[data-solo] { padding: var(--s-5); }
  .co-sum-sub { grid-column: 1 / -1; }
  .co-sum-action > * { width: 100%; }
  .co-sum-foot { display: block; margin: 0; font: var(--t-caption); color: var(--text-2); text-align: center; }
  .co-sum-foot .link { display: inline; min-height: 0; font-weight: 700; }
  .co-mini { display: none; }
}
@keyframes co-side-in { from { opacity: 0; transform: translate3d(-18px, 0, 0); } }
[dir="ltr"] .co-side { animation-name: bar-up; }

/* ───── ظهور الخطوة التالية: تصعد وتكبر، ورقمها «يُشحن» ───── */
.co-buy .buy-form > [data-fresh] { animation: co-reveal .6s var(--ease-emph) backwards; animation-delay: 0s; }
.co-buy .buy-form > [data-fresh] .buy-step-n { animation: co-num .55s var(--ease-back) .12s backwards; }
@keyframes co-reveal { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.96); } }
@keyframes co-num { from { opacity: 0; transform: scale(.6); } }
.co-buy .order-fields > * { animation: co-field .5s var(--ease-emph) backwards; animation-delay: 0s; }
@keyframes co-field { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

/* ───── رأس الخطوة: رجوع · العنوان · ثلاث شرطات (الطلب ← طريقة الدفع ← الدفع) ───── */
.co-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.co-back { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); color: var(--text); transition: background var(--dur-1), transform var(--dur-2) var(--ease-out); }
.co-back > svg { width: 18px; height: 18px; }
[dir="ltr"] .co-back > svg { transform: scaleX(-1); }
.co-back:hover { background: var(--surface-2); }
.co-back:active { transform: scale(.92); }
.co-title { flex: 1; min-width: 0; margin: 0; font: var(--t-title-3); font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; animation: m-rise .45s var(--ease-emph) .05s backwards; }
@container co (min-width: 640px) { .co-title { font: var(--t-title-2); } }
.co-steps { display: flex; gap: var(--s-1); flex: none; }
.co-steps > i { width: 14px; height: 4px; border-radius: 2px; background: var(--border-strong); transform-origin: 100% 50%; }
.co-steps > i[data-on] { background: var(--accent); }
.co-steps > i[data-on]:is(:last-child, :has(+ i:not([data-on]))) { animation: co-line .6s var(--ease-emph) .1s backwards; }
[dir="ltr"] .co-steps > i { transform-origin: 0 50%; }
@keyframes co-line { from { transform: scaleX(0); } }
@keyframes co-num { from { opacity: 0; transform: scale(.6); } }

/* ───── طريقة الدفع: صفوف كبيرة، كل صفّ يفتح صفحة الدفع بها ───── */
.co-methods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@container co (min-width: 560px) { .co-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }
.co-methods > li { animation: co-field .5s var(--ease-emph) backwards; animation-delay: calc(min(var(--i, 0), 8) * 50ms + 80ms); }
.co-method { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding-block: var(--s-2); padding-inline: var(--s-3) var(--s-4); border-radius: var(--r-4); text-align: start;
  background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-2) var(--ease-out); }
.co-method .gp-method-img { width: 44px; height: 44px; border-radius: var(--r-2); flex: none; }
.co-method-name { flex: 1; min-width: 0; font: var(--t-body-strong); overflow-wrap: anywhere; }
.co-method > svg { width: 18px; height: 18px; flex: none; color: var(--text-3); transform: scaleX(-1); transition: transform .35s var(--ease-back), color var(--dur-1); }
[dir="ltr"] .co-method > svg { transform: none; }
.co-method[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.co-method:active { transform: scale(.98); }
@media (hover: hover) {
  .co-method:hover { border-color: var(--accent); }
  .co-method:hover > svg { color: var(--accent-text); transform: scaleX(-1) translateX(-4px); }
}
.co-method:focus-visible { box-shadow: var(--focus); }

/* ───── الدفع: المبلغ أولاً — العنوان، الرقم بوحدته، العملة. نفس الكلمات بكل عملة؛ يتغيّر الرقم والوحدة فقط ───── */
.co-amount { align-items: center; text-align: center; gap: var(--s-2); border: 1.5px dashed var(--accent); }
.co-amount .gp-amount-value { min-height: 36px; font: var(--t-title-1); font-weight: 800; animation: co-num-pop .45s var(--ease-back); }
@keyframes co-num-pop { from { opacity: .2; transform: translateY(8px) scale(.9); } }
.co-amount .co-cur { width: min(100%, 288px); }
.co-amount > .field-error { justify-content: center; }
.co-amount > .field-error .link { display: inline; min-height: 0; font-weight: 700; color: inherit; }
.gp-rate-note { align-self: center; padding: var(--s-1) var(--s-3); border-radius: var(--r-full); }
.co-blocks .pay-blocks { margin: 0; }
.co-note { background: var(--accent-soft); color: var(--text); }
.co-main > .buy-step { animation: m-rise .45s var(--ease-emph) backwards; }
.co-main > .buy-step:nth-of-type(2) { animation-delay: 70ms; } .co-main > .buy-step:nth-of-type(n+3) { animation-delay: 130ms; }
.co-main .buy-note .link { display: inline; min-height: 0; color: inherit; font-weight: 700; }

/* ═══════════ متابعة الطلب (/track/:token) ═══════════
   كان .rec.track: ‎.track جعل الشبكة عموداً مرناً، فصارت بطاقة المنتج اللاصقة تمرّ فوق «حالة طلبك». الآن شبكة
   بعمودين حقيقيين: البطاقة لاصقة داخل عمودها فقط. */
.trk-wrap { max-width: 1080px; min-width: 0; }
.trk { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; gap: var(--s-4); align-items: start; }
.trk-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.trk-main > * { animation: m-rise .45s var(--ease-emph) backwards; }
.trk-main > :nth-child(2) { animation-delay: 70ms; } .trk-main > :nth-child(n+3) { animation-delay: 130ms; }

.trk-side { grid-area: side; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); animation: m-rise .45s var(--ease-emph) backwards; }
.trk-pic { display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-3); color: var(--gray-4); }
.trk-pic > img { width: 100%; height: 100%; object-fit: cover; }
.trk-pic > svg { width: 24px; height: 24px; }
.trk-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-name { font: var(--t-body-strong); overflow-wrap: anywhere; }
.trk-pack { font: var(--t-callout); color: var(--text-2); overflow-wrap: anywhere; }

.trk-status { gap: var(--s-4); }
.trk-head { display: flex; align-items: center; gap: var(--s-4); }
.trk-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trk-head h1 { font: var(--t-title-3); font-weight: 700; margin: 0; }
@container co (min-width: 640px) { .trk-head h1 { font: var(--t-title-2); } }
.trk-head p { margin: 0; font: var(--t-callout); color: var(--text-2); }
.trk-badge { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-3); background: var(--accent-soft); color: var(--accent-text);
  animation: co-num .6s var(--ease-back) .1s backwards; }
.trk-badge > svg { width: 22px; height: 22px; }
.trk-head .success-check { color: var(--teal); }
.trk-status[data-tone="bad"] .trk-badge { background: var(--danger-soft); color: var(--danger-text); }
.trk-status[data-tone="bad"] { border-color: var(--danger); }
.trk-code { background: var(--surface); border: 1.5px dashed var(--accent); box-shadow: var(--shadow-1); }
.trk-save { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.trk-save-text { flex: 1 1 220px; min-width: 0; font: var(--t-callout); color: var(--text-2); }
.trk-save-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.trk-saved { background: var(--accent-soft); color: var(--text); }

@container co (min-width: 840px) {
  .trk { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "main side"; column-gap: var(--s-8); }
  .trk-side { position: sticky; top: var(--shell-offset, 112px); grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-5);
    border-radius: 28px; text-align: center; box-shadow: var(--shadow-2);
    background: var(--surface); }
  .trk-pic { width: 120px; border-radius: 32px; box-shadow: 0 0 0 1px var(--border), 0 10px 24px -14px rgb(0 0 0 / .35); animation: pic-pop .6s var(--ease-back) backwards; }
  .trk-what { align-items: center; }
  .trk-name { font: var(--t-title-3); font-weight: 800; }
  .trk-pack { display: inline-flex; align-items: center; min-height: 26px; padding: 2px var(--s-3); border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font: var(--t-caption-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .co-side, .co-sum-total > b, .co-buy .buy-form > [data-fresh], .co-buy .buy-form > [data-fresh] .buy-step-n, .co-buy .order-fields > *,
  .co-steps > i, .co-title, .co-methods > li, .co-amount .gp-amount-value, .co-main > .buy-step, .trk-main > *, .trk-side, .trk-badge, .trk-pic { animation: none !important; }
  .co-next > svg, .co-method > svg, .co-back { transition: none; }
}