/* صفحات الميزات الجديدة (batch-expiry-tracking، multi-company، online-menu): نماذج توضيحية وروابط «ميزات أخرى». نطاق الأسماء fp-.
   الأساسيات المشتركة (الواجهة، المقارنة، الشريط الداكن) في ai-data-entry.css. */

/* ميزات جديدة أخرى */
.fp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.fp-more__card { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: 1.25rem; background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.fp-more__card:hover { border-color: #93c5fd; box-shadow: 0 18px 36px -24px rgba(37, 99, 235, .55); transform: translateY(-2px); }
.fp-more__card:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.fp-more__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: #eff6ff; color: #1d4ed8; }
.fp-more__body b { display: block; color: #0f172a; font-size: 1.02rem; font-weight: 900; }
.fp-more__body small { display: block; margin-top: .2rem; color: #64748b; font-size: .85rem; line-height: 1.6; }
.fp-more__go { margin-top: auto; color: #1d4ed8; font-size: .85rem; font-weight: 800; }
.dark .fp-more__card { border-color: #334155; background: #1e293b; }
.dark .fp-more__body b { color: #f1f5f9; }
.dark .fp-more__go { color: #93c5fd; }
.dark .fp-more__ico { background: rgba(37, 99, 235, .2); color: #93c5fd; }
@media (prefers-reduced-motion: reduce) { .fp-more__card { transition: none; } .fp-more__card:hover { transform: none; } }

/* لقطة حقيقية من النظام داخل نافذة متصفح (تعدد الشركات، الباتشات) */
.fp-fig-wide { max-width: 36rem; }
.fp-win { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 1.1rem; background: #f8fafc; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .45), 0 12px 24px -16px rgba(37, 99, 235, .25); }
.fp-win__bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid #e2e8f0; background: #fff; }
.fp-win__bar i { width: .62rem; height: .62rem; border-radius: 50%; background: #e2e8f0; }
.fp-win__bar i:nth-child(1) { background: #f87171; } .fp-win__bar i:nth-child(2) { background: #fbbf24; } .fp-win__bar i:nth-child(3) { background: #34d399; }
.fp-win__bar span { margin-inline-start: .5rem; color: #64748b; font-size: .75rem; font-weight: 700; }
.fp-win picture, .fp-win img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .fp-win picture { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); } }
.fp-chip { display: flex; align-items: center; gap: .45rem; width: fit-content; max-width: 100%; margin: 1rem auto 0; padding: .55rem .9rem; border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; color: #1e3a8a; font-size: .82rem; font-weight: 800; }
.fp-chip svg { flex: none; width: 1.1rem; height: 1.1rem; color: #2563eb; }
.dark .fp-win { border-color: #334155; background: #0f172a; }
.dark .fp-win__bar { border-color: #334155; background: #1e293b; }
.dark .fp-win__bar span { color: #94a3b8; }
.dark .fp-chip { border-color: #1e3a8a; background: rgba(37, 99, 235, .15); color: #bfdbfe; }

/* المنيو: لقطة حقيقية داخل إطار جوال */
.fp-phone { position: relative; width: min(17rem, 78vw); margin: 0 auto; padding: .5rem; border-radius: 2.6rem; background: linear-gradient(160deg, #1e293b, #0f172a 55%); box-shadow: 0 0 0 1px rgba(148, 163, 184, .25) inset, 0 40px 70px -30px rgba(15, 23, 42, .65), 0 18px 30px -18px rgba(194, 65, 12, .35); }
.fp-phone::before { content: ''; position: absolute; z-index: 2; inset-block-start: 1.05rem; inset-inline-start: 50%; width: 4.6rem; height: 1.15rem; border-radius: 999px; background: #0b1220; transform: translateX(-50%); }
[dir="rtl"] .fp-phone::before { transform: translateX(50%); }
.fp-phone__screen { overflow: hidden; border-radius: 2.15rem; background: #fffaf5; aspect-ratio: 390 / 844; }
.fp-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-qr { position: absolute; z-index: 3; inset-block-end: 7rem; inset-inline-start: -5.4rem; display: grid; justify-items: center; gap: .3rem; padding: .6rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 18px 36px -20px rgba(15, 23, 42, .45); font-size: .66rem; font-weight: 800; color: #334155; }
.fp-qr svg { width: 4.2rem; height: 4.2rem; }
@media (max-width: 1023px) { .fp-qr { inset-block-start: 3.4rem; inset-block-end: auto; inset-inline-start: -1.4rem; padding: .45rem; font-size: .6rem; } .fp-qr svg { width: 3.2rem; height: 3.2rem; } }
.dark .fp-qr { border-color: #334155; background: #1e293b; color: #e2e8f0; }