/*!
 * core/luxe-ui.css — قواعد الواجهة المشتركة لـواجهة المتجر
 *
 * مولَّد من قواعد كانت مكرّرة **حرفياً** في ثلاثة ملفات أو أكثر.
 * كل قاعدة هنا كانت موجودة بنصّها في كل ملف استُخرجت منه، وحُذفت منه،
 * فالمظهر لم يتغيّر. الرقم بجانب كل قاعدة = عدد الملفات التي كانت تكرّرها.
 *
 * يُربط في <head> قبل أي <style> محلي، فأي قاعدة مختلفة في صفحة
 * بعينها تفوز على هذه كما كانت تماماً.
 *
 * ⚠️ لا يشمل ملفات Shadow DOM — الأنماط الخارجية لا تخترق shadow root.
 */

/* ── luxe-pagination ── */
.luxe-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:28px; flex-wrap:wrap; }

/* ── lx-add-btn ── */
.lx-add-btn { width:100%;height:34px;border-radius:var(--r-sm,8px); border:1.5px solid var(--brand-primary);background:var(--brand-primary); cursor:pointer;display:flex;align-items:center;justify-content:center; font-size:13px;flex-shrink:0;transition:all .2s;color:#fff; }   /* ×6 */
.lx-add-btn:hover { background:var(--brand-primary-dark,#3D2F5C);border-color:var(--brand-primary-dark,#3D2F5C);color:#fff; }   /* ×5 */

/* ── lx-bc ── */
.lx-bc .sep { color:var(--border); }   /* ×5 */
.lx-bc a { color:var(--text-m);text-decoration:none;cursor:pointer;transition:color .2s; }   /* ×5 */
.lx-bc .cur { color:var(--brand-primary);font-weight:600; }
.lx-bc a:hover { color:var(--brand-primary); }
.lx-bc { display:flex;align-items:center;gap:4px; font-size:12px;flex-wrap:wrap;margin-bottom:4px; }

/* ── lx-best-badge ── */
.lx-best-badge { position:absolute;top:-1.5px;inset-inline-start:-1.5px;z-index:6; background:linear-gradient(135deg,#f5a623,#c9820f); color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em; padding:7px 14px 7px 12px; border-start-start-radius:0; border-start-end-radius:0; border-end-start-radius:0; border-end-end-radius:var(--r-md); box-shadow:0 3px 10px rgba(0,0,0,.18); line-height:1.3;pointer-events:none; }

/* ── lx-brand ── */
.lx-brand:hover { text-decoration:underline; }

/* ── lx-card ── */
.lx-card:hover { box-shadow:0 8px 30px rgba(93,74,126,.15);transform:translateY(-4px);border-color:var(--brand-primary)40; }.lx-card:hover .lx-img-wrap img { transform:scale(1.04); }

/* ── lx-curr ── */
.lx-curr { font-family:'Tajawal',sans-serif;font-size:13px;font-weight:600;color:var(--text-m); }   /* ×6 */

/* ── lx-empty ── */
.lx-empty { text-align:center;padding:80px 20px;color:var(--text-m);grid-column:1/-1; }

/* ── lx-fpill ── */
.lx-fpill:hover,.lx-fpill.active { background:var(--brand-primary)15;border-color:var(--brand-primary);color:var(--brand-primary); }

/* ── lx-grid ── */
.lx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:16px;min-height:200px; }
.lx-grid.list-view { grid-template-columns:1fr !important;gap:12px; }
.lx-grid.list-view .lx-card { display:grid;grid-template-columns:100px 1fr auto;gap:0 12px; align-items:start;padding:12px;min-height:130px; }
.lx-grid.list-view .lx-card .lx-img-wrap { width:100px;height:100px;margin-bottom:0;grid-row:span 4;grid-column:1; }
.lx-grid.list-view .lx-card .lx-name { grid-column:2;grid-row:2;font-size:12px; }
.lx-grid.list-view .lx-card .lx-wish { position:absolute;top:4px;inset-inline-start:4px;inset-inline-end:auto; }

/* ── lx-hd-ctrl ── */
.lx-hd-ctrl { display:flex;align-items:center;gap:8px; }

/* ── lx-img-wrap ── */
.lx-img-wrap { width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; background:var(--bg-soft);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden; }   /* ×6 */
.lx-img-wrap img { width:100%;height:100%;object-fit:contain;transition:transform .3s; }

/* ── lx-mob-brand-item ── */
.lx-mob-brand-item { display:flex;align-items:center;gap:12px;padding:11px 4px; border-bottom:1px solid var(--border);cursor:pointer; }
.lx-mob-brand-item label { cursor:pointer;font-size:14px;color:var(--text-b);flex:1; }
.lx-mob-brand-item:last-child { border-bottom:none; }
.lx-mob-brand-item input { width:18px;height:18px;accent-color:var(--brand-primary);cursor:pointer; }

/* ── lx-mob-brand-list ── */
.lx-mob-brand-list { max-height:45vh;overflow-y:auto; }

/* ── lx-mob-brand-search ── */
.lx-mob-brand-search { width:100%;padding:10px 14px;border:1.5px solid var(--border); border-radius:var(--r-sm);font-size:14px;font-family:'Tajawal',sans-serif; background:var(--bg-soft);outline:none;margin-bottom:12px; transition:border-color .2s;box-sizing:border-box; }
.lx-mob-brand-search:focus { border-color:var(--brand-primary); }

/* ── lx-mob-close ── */
.lx-mob-close { background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-m); }

/* ── lx-mob-fhd ── */
.lx-mob-fhd { display:flex;justify-content:space-between;align-items:center; margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border); }

/* ── lx-mob-ftitle-static ── */
.lx-mob-ftitle-static { flex:1;text-align:center;font-size:16px;color:var(--text-h);font-weight:700;margin:0; }

/* ── lx-mob-sheet ── */
.lx-mob-sheet.on { transform:translateY(0); }
.lx-mob-sheet { position:fixed;bottom:0;left:0;right:0;background:var(--bg-card); border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px; max-height:80vh;overflow-y:auto; z-index:1000;box-shadow:0 -4px 20px rgba(0,0,0,.2); transform:translateY(100%);transition:transform .3s ease; }

/* ── lx-name ── */
.lx-name { font-size:13px;color:var(--text-b);line-height:1.5; margin-bottom:8px;min-height:40px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }   /* ×6 */

/* ── lx-offer-badge ── */
.lx-offer-badge { position:absolute;top:-1.5px;inset-inline-start:-1.5px;z-index:6; background:linear-gradient(135deg,#e6394f,#c81430); color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em; padding:7px 14px 7px 12px; border-start-start-radius:0; border-start-end-radius:0; border-end-start-radius:0; border-end-end-radius:var(--r-md); box-shadow:0 3px 10px rgba(0,0,0,.18); line-height:1.3;pointer-events:none; }

/* ── lx-overlay ── */
.lx-overlay.on { opacity:1;visibility:visible; }
.lx-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999; opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; }

/* ── lx-pagination ── */
.lx-pagination { display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap; }

/* ── lx-pg-btn ── */
.lx-pg-btn.active { background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);box-shadow:0 3px 10px var(--brand-primary)40; }
.lx-pg-btn { min-width:36px;height:36px;padding:0 8px;border:1.5px solid var(--border); background:var(--bg-card);color:var(--text-b);border-radius:var(--r-sm);cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600; font-family:'Tajawal',sans-serif;transition:all .18s;text-decoration:none; }

/* ── lx-pg-dots ── */
.lx-pg-dots { font-size:14px;color:var(--text-m);padding:0 4px; }   /* ×5 */

/* ── lx-price ── */
.lx-price { font-family:'Tajawal',sans-serif;font-size:20px;font-weight:700; color:var(--text-h);display:flex;align-items:baseline;gap:3px; }   /* ×6 */

/* ── lx-pricing ── */
.lx-pricing { display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto; }   /* ×6 */

/* ── lx-prod-area ── */
.lx-prod-area { flex:1;min-width:0; }

/* ── lx-prod-count ── */
.lx-prod-count { font-size:12px;color:var(--text-m); }

/* ── lx-prod-hd ── */
.lx-prod-hd { background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-md);padding:14px 18px;margin-bottom:16px; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:10px; }
.lx-prod-hd h2 { font-family:'Cormorant Garamond',serif; font-size:22px;font-weight:600;color:var(--text-h);margin:0; }

/* ── lx-qty ── */
.lx-qty.on { display:flex; }

/* ── lx-qty-btn ── */
.lx-qty-btn:hover { background:rgba(255,255,255,.45); }

/* ── lx-qty-num ── */
.lx-qty-num { font-size:13px;font-weight:800;color:#fff;min-width:16px;text-align:center; }

/* ── lx-sb-arr ── */
.lx-sb-arr { transition:transform .25s;color:var(--text-m); }

/* ── lx-sb-body ── */
.lx-sb-body.open { display:block; }

/* ── lx-sb-opt ── */
.lx-sb-opt { display:flex;align-items:center;gap:8px; padding:6px 14px;cursor:pointer;font-size:13px; color:var(--text-b);transition:background .12s; }
.lx-sb-opt span { flex:1;font-size:12.5px; }
.lx-sb-opt input { width:15px;height:15px;accent-color:var(--brand-primary);flex-shrink:0; }
.lx-sb-opt:hover { background:var(--brand-primary)10; }

/* ── lx-sb-scroll ── */
.lx-sb-scroll { overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border) transparent; }

/* ── lx-sb-sec ── */
.lx-sb-sec { border-bottom:1px solid var(--border); }
.lx-sb-sec:last-child { border-bottom:none; }

/* ── lx-sb-sec-hd ── */
.lx-sb-sec-hd { display:flex;align-items:center;justify-content:space-between; padding:12px 14px;cursor:pointer;font-size:13.5px;font-weight:700; color:var(--text-h);user-select:none;transition:background .15s; }
.lx-sb-sec-hd.open .lx-sb-arr { transform:rotate(180deg); }
.lx-sb-sec-hd:hover { background:var(--bg-soft); }

/* ── lx-sheet-apply ── */
.lx-sheet-apply { width:100%;background:var(--brand-primary);color:#fff; padding:14px;border:none;border-radius:var(--r-sm);font-size:15px; font-family:'Tajawal',sans-serif;cursor:pointer;margin-top:16px; font-weight:700;transition:opacity .2s; }
.lx-sheet-apply:hover { opacity:.88; }

/* ── lx-sheet-reset ── */
.lx-sheet-reset { background:none;border:none;font-size:14px;color:var(--text-m); cursor:pointer;font-family:'Tajawal',sans-serif;padding:0; }
.lx-sheet-reset:hover { color:var(--brand-primary); }

/* ── lx-sidebar ── */
.lx-sidebar { width:255px;flex-shrink:0; background:var(--bg-card);border:1px solid var(--border); border-radius:var(--r-lg);position:sticky;top:80px; max-height:calc(100vh - 100px); display:flex;flex-direction:column;overflow:hidden; }

/* ── lx-sort-opt ── */
.lx-sort-opt label { cursor:pointer;flex:1; }
.lx-sort-opt:last-child { border-bottom:none; }

/* ── lx-stock-tag ── */
.lx-stock-tag { display:none; }

/* ── lx-tree-label ── */
.lx-tree-label.selected { background:var(--brand-primary)18;color:var(--brand-primary);font-weight:700;border-radius:var(--r-sm); }
.lx-tree-label:hover { background:var(--brand-primary)10; }

/* ── lx-vbtn ── */
.lx-vbtn { width:34px;height:34px;border:1.5px solid var(--border); border-radius:var(--r-sm);background:var(--bg-card);cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--text-m);transition:all .2s; }
.lx-vbtn:hover,.lx-vbtn.active { border-color:var(--brand-primary);background:var(--brand-primary);color:#fff; }

/* ── lx-view-toggle ── */
.lx-view-toggle { display:flex;gap:5px; }

/* ── lx-wish ── */
.lx-wish svg,.lx-wish i { width:14px;height:14px;display:block; }   /* ×5 */
.lx-wish.active,.lx-wish:hover { color:#e84545;border-color:#e84545;background:#fff0f0; }   /* ×5 */
.lx-wish { position:absolute;top:-1.5px;inset-inline-end:-1.5px;z-index:6; width:28px;height:28px;padding:0;border-radius:10px; border:1.5px solid var(--border);background:var(--bg-card); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:all .2s;color:var(--text-m); box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* ── زر «نبّهني عند التوفر» ──────────────────────────────────────
   يحلّ محلّ زر السلة في بطاقة المنتج غير المتوفر. نفس مظهر
   .lxps-notify في الشرائح، معمَّماً على كل البطاقات. */
.lx-notify-btn { background:transparent; border-color:var(--brand-primary,#5D4A7E); color:var(--brand-primary,#5D4A7E); }
.lx-notify-btn:hover { background:var(--brand-primary,#5D4A7E); color:#fff; }
.lx-notify-btn.subscribed { background:var(--brand-primary,#5D4A7E); color:#fff; }
.lx-notify-btn.loading { opacity:.55; pointer-events:none; }

/* ── عناصر بطاقة العروض (وصف · سعر مشطوب · نسبة خصم · سطر البراند) ──
   كانت مضمّنة كأنماط سطرية داخل heredoc في OffersController. */
.lx-card .lx-desc {
    font-size:11px; color:var(--text-m); line-height:1.4; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.lx-card .lx-brand-line { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.lx-card .lx-old-line { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-m); }
.lx-card .lx-old-line .lx-old-price { text-decoration:line-through; }
.lx-card .lx-discount { color:#15803d; font-weight:700; }
