/* ══════════ سعر جديد بانتظار موافقة المستخدم (components/OfferCard.jsx) ══════════
   فشل المزوّد ولم يبقَ إلا مصدر أغلى: بطاقة هادئة واضحة فوق تفاصيل الطلب — الجملة، الوقت الباقي، وزرّان متساويان في
   الوزن البصري تقريباً (الموافقة أساسي، الاسترداد ثانوي). تدخل بانزلاق خفيف وحافّة بلون العلامة تتوهّج مرّة واحدة. */
.chip-ask { background: var(--accent-soft); color: var(--accent-text); }

.ofr {
  position: relative; gap: var(--s-4); overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 60%);
  animation: ofr-in var(--dur-4, .5s) var(--ease-spring, cubic-bezier(.2, .9, .3, 1.2)) both, ofr-glow 1.6s .35s var(--ease-out, ease-out) 1 both;
}
.ofr::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand-amber, #FCC300), var(--brand-teal, #02A1A5) 50%, var(--brand-red, #E5322D));
  transform-origin: center; animation: ofr-line .9s .15s var(--ease-out, ease-out) both;
}
.ofr-head { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.ofr-icon {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-text);
}
.ofr-icon svg { width: 22px; height: 22px; }
.ofr-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ofr-title { margin: 0; font: var(--t-title-3); color: var(--text); text-wrap: balance; }
.ofr-text { margin: 0; font: var(--t-body); color: var(--text-2); }
.ofr-text b { color: var(--text); font-weight: 700; }
.ofr-diff { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.ofr-time {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
  background: var(--surface-2); font: var(--t-callout); color: var(--text-2);
}
.ofr-time svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.ofr-time b { color: var(--text); }
.ofr-error {
  margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--danger-soft); color: var(--danger-text);
  font: var(--t-callout-strong);
}
.ofr-error .link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ofr-actions { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.ofr-actions .ui-btn { width: 100%; min-height: 48px; }
@media (min-width: 480px) { .ofr-actions { grid-template-columns: 1.3fr 1fr; } }
.ofr-pay { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ofr-pay > .buy-step { box-shadow: none; }
.ofr-sent { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--t-body-strong); color: var(--success-text); }
.ofr-sent svg { width: 20px; height: 20px; flex: none; }
.ofr[data-state="sent"] { border-color: color-mix(in srgb, var(--success-text) 35%, var(--border)); background: var(--success-soft); }

@keyframes ofr-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ofr-glow {
  0% { box-shadow: var(--shadow-1), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  60% { box-shadow: var(--shadow-1), 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: var(--shadow-1); }
}
@keyframes ofr-line { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ofr, .ofr::before { animation: none; }
}