/*
 * store.mutadid.com — شاشات المتاجر داخل الموبايل.
 * كل شاشة مرسومة بمقاس موبايل حقيقي (375×812 نقطة CSS) ثم تُصغَّر داخل
 * الإطار — فتبقى نِسب الخط والأزرار ومنطقة الإبهام ومناطق الأمان حقيقية،
 * لا صفحة كمبيوتر مضغوطة. وكل مفهوم له تخطيطه الخاص لا لونه فقط.
 */

/* ─────────────── الجهاز ─────────────── */
.sl-device {
    --n: 280;
    position: relative;
    width: calc(var(--n) * 1px);
    padding: calc(var(--n) * .034px);
    border-radius: calc(var(--n) * .165px);
    background: linear-gradient(145deg, #30343F, #0A0C12 50%, #262A33);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 0 1px #000;
}
.sl-device::after { content: ""; position: absolute; top: calc(var(--n) * .062px); left: 50%; transform: translateX(-50%); width: 31%; height: calc(var(--n) * .078px); border-radius: 99px; background: #05060A; z-index: 5; }
.sl-device-screen { position: relative; width: 100%; aspect-ratio: 375 / 812; border-radius: calc(var(--n) * .132px); overflow: hidden; background: #fff; isolation: isolate; }
.sl-device-screen > .m-canvas { transform: scale(calc(var(--n) * .932 / 375)); }

.m-canvas {
    position: absolute; top: 0; left: 0; width: 375px; height: 812px; transform-origin: 0 0;
    overflow: hidden; direction: rtl; text-align: right; font-size: 14px; line-height: 1.45; color: #111;
    font-family: 'Tajawal', system-ui, sans-serif;
}
.m-canvas .ic { width: 22px; height: 22px; }
.m-canvas b, .m-canvas strong { font-weight: 800; }
.m-canvas em, .m-canvas i { font-style: normal; }

/* شريط الحالة — منطقة الأمان العلوية */
.m-status { direction: ltr; display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 12px 30px 0 34px; font-size: 15px; font-weight: 700; }
.m-status-icons { display: inline-flex; gap: 6px; align-items: center; }
.m-sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.m-sig b { width: 3px; background: currentColor; border-radius: 1px; }
.m-sig b:nth-child(1) { height: 4px; } .m-sig b:nth-child(2) { height: 6px; } .m-sig b:nth-child(3) { height: 8px; } .m-sig b:nth-child(4) { height: 10px; }
.m-wifi { width: 14px; height: 10px; border-radius: 14px 14px 0 0; border: 2.5px solid currentColor; border-bottom: 0; }
.m-batt { width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; opacity: .9; }
.m-batt b { display: block; width: 75%; height: 100%; background: currentColor; border-radius: 1.5px; }

/* شريط التنقّل السفلي — في متناول الإبهام، مع منطقة الأمان السفلية */
.m-tabbar { position: absolute; inset: auto 0 0 0; height: 86px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 30px; background: rgba(255, 255, 255, .94); border-top: 1px solid rgba(0, 0, 0, .07); backdrop-filter: blur(10px); z-index: 3; }
.m-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #8A8F99; }
.m-tab .ic { width: 24px; height: 24px; }
.m-tab b { font-size: 11px; font-weight: 700; }
.m-tab.is-on { color: var(--tab-on, #111); }
.m-home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 99px; background: currentColor; opacity: .85; color: #111; }

/* ═════════════ 1. موضة — تحريري ═════════════ */
.cx-fashion { background: #FBF8F4; color: #211A14; --tab-on: #211A14; }
.cxf-hero { position: relative; height: 470px; background: linear-gradient(180deg, #F3EBE1, #E7D8C6); overflow: hidden; }
.cxf-hero .m-status { position: relative; z-index: 2; }
.cxf-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 6px 22px; }
.cxf-word { font-family: 'Didot', 'Bodoni MT', Georgia, 'Times New Roman', serif; font-weight: 400 !important; font-size: 30px; letter-spacing: .32em; direction: ltr; margin-inline-start: .32em; }
.cxf-art { position: absolute; left: -34px; bottom: 0; width: 290px; height: 340px; }
.cxf-caption { position: absolute; right: 22px; bottom: 26px; z-index: 2; display: flex; flex-direction: column; max-width: 150px; }
.cxf-caption small { font-size: 12px; letter-spacing: .2em; opacity: .75; }
.cxf-caption strong { font-size: 30px; line-height: 1.12; font-weight: 800; margin-top: 4px; }
.cxf-caption em { margin-top: 10px; font-size: 13px; font-weight: 700; border-bottom: 1.5px solid currentColor; align-self: flex-start; padding-bottom: 2px; }
.cxf-sec { padding: 18px 0 0 0; }
.cxf-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 22px 10px; }
.cxf-head b { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.cxf-head span { font-size: 12px; opacity: .6; text-decoration: underline; }
.cxf-cols { display: flex; gap: 10px; padding: 0 22px; overflow: hidden; }
.cxf-col { flex: none; width: 128px; height: 150px; border-radius: 2px; background: linear-gradient(170deg, var(--c1), var(--c2)); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; position: relative; }
.cxf-col .ic { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; stroke-width: 1.1; opacity: .55; }
.cxf-col b { font-size: 14px; font-weight: 700; }
.cxf-col span { font-size: 11px; opacity: .7; }
.cxf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px; }
.cxf-card b { display: block; font-size: 13.5px; font-weight: 500; margin-top: 8px; }
.cxf-card span { font-size: 13px; font-weight: 700; }
.cxf-img { display: grid; place-items: center; height: 190px; background: linear-gradient(170deg, var(--c1), var(--c2)); }
.cxf-img .ic { width: 70px; height: 70px; stroke-width: 1; opacity: .5; }

/* ═════════════ 2. مكتبة — رفوف وأغلفة ═════════════ */
.cx-books { background: #FBF6EC; color: #2B1D0E; --tab-on: #8A4B12; }
.cxb-top { display: flex; align-items: center; gap: 10px; padding: 6px 20px 10px; }
.cxb-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #8A4B12; color: #FBF1E2; flex: none; }
.cxb-top b { display: block; font-size: 18px; line-height: 1.1; }
.cxb-top small { font-size: 12px; color: #7A6650; }
.cxb-acc { margin-inline-start: auto; }
.cxb-search { margin: 0 20px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid #EADBC4; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #8C7A63; font-size: 14px; }
.cxb-shelves { display: flex; gap: 6px; padding: 14px 20px 4px; overflow: hidden; }
.cxb-shelves span { flex: none; padding: 7px 14px; border-radius: 4px 4px 0 0; background: #EFE3CF; font-size: 13px; font-weight: 700; border-bottom: 3px solid #D8C2A0; }
.cxb-shelves span.is-on { background: #8A4B12; color: #FBF1E2; border-color: #5E310A; }
.cxb-sec { padding: 14px 0 0; position: relative; }
.cxb-head { display: flex; justify-content: space-between; padding: 0 20px 10px; }
.cxb-head b { font-size: 16px; }
.cxb-head span { font-size: 12px; color: #8A4B12; font-weight: 700; }
.cxb-rail { display: flex; gap: 12px; padding: 0 20px; overflow: hidden; }
.cxb-book { flex: none; width: 100px; }
.cxb-book > b { display: block; font-size: 12.5px; margin-top: 7px; line-height: 1.25; }
.cxb-book > span { font-size: 11px; color: #7A6650; }
.cxb-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 146px; padding: 10px 8px; border-radius: 3px 6px 6px 3px; background: var(--bg); color: var(--fg); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .5), inset 5px 0 0 rgba(0, 0, 0, .18); overflow: hidden; }
.cxb-cover i { position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; left: -18px; bottom: 26px; }
.cxb-cover b { position: relative; font-size: 14px; line-height: 1.2; }
.cxb-cover small { position: relative; font-size: 10px; opacity: .85; }
.cxb-plank { display: block; height: 10px; margin: -58px 14px 0; background: linear-gradient(#B98A5A, #8E6238); border-radius: 2px; position: relative; z-index: -1; }
.cxb-author { margin: 64px 20px 0; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #EADBC4; }
.cxb-avatar { width: 48px; height: 48px; border-radius: 50%; background: #2F5D50; color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; flex: none; }
.cxb-author small { display: block; font-size: 11px; color: #8A4B12; font-weight: 700; }
.cxb-author b { display: block; font-size: 15px; }
.cxb-author span { font-size: 12px; color: #7A6650; }
.cxb-author em { margin-inline-start: auto; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 99px; border: 1.5px solid #8A4B12; color: #8A4B12; }
.cxb-row { display: flex; align-items: center; gap: 12px; margin: 0 20px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid #EADBC4; }
.cxb-mini { width: 50px; height: 70px; padding: 0; flex: none; }
.cxb-row b { display: block; font-size: 14px; }
.cxb-row span { display: block; font-size: 12px; color: #7A6650; }
.cxb-row strong { font-size: 13px; color: #8A4B12; }
.cxb-row em { margin-inline-start: auto; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 12px; background: #8A4B12; color: #fff; }
.cx-books .m-tabbar { background: rgba(251, 246, 236, .96); }

/* ═════════════ 3. جيمنج — داكن وكثيف ═════════════ */
.cx-gaming { background: #0A0A12; color: #F4F4FA; --tab-on: #39FF9E; }
.cx-gaming .m-status { color: #fff; }
.cxg-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 10px; }
.cxg-logo { direction: ltr; display: flex; align-items: center; gap: 6px; font-size: 20px; letter-spacing: .06em; }
.cxg-logo i { width: 22px; height: 22px; border-radius: 6px; background: conic-gradient(from 45deg, #39FF9E, #7B2FF7, #FF3D71, #39FF9E); }
.cxg-logo span { color: #39FF9E; }
.cxg-icons { display: flex; gap: 14px; }
.cxg-platforms { direction: ltr; display: flex; gap: 6px; padding: 0 18px 12px; overflow: hidden; }
.cxg-platforms span { flex: none; padding: 7px 12px; border-radius: 8px; background: #17172A; font-size: 12px; font-weight: 700; color: #A6A6C8; border: 1px solid #25253F; }
.cxg-platforms span.is-on { background: #39FF9E; color: #06120C; border-color: #39FF9E; }
.cxg-feature { position: relative; margin: 0 18px; height: 236px; border-radius: 20px; overflow: hidden; background: #140F2E; }
.cxg-art { position: absolute; inset: 0; background: radial-gradient(160px 160px at 25% 30%, #FF3D71, transparent 70%), radial-gradient(200px 160px at 80% 80%, #7B2FF7, transparent 70%), linear-gradient(135deg, #1B0F3A, #05030F); }
.cxg-art i { position: absolute; background: linear-gradient(#39FF9E, transparent); opacity: .7; transform: skewX(-18deg); }
.cxg-art i:nth-child(1) { width: 6px; height: 180px; left: 40px; top: 20px; }
.cxg-art i:nth-child(2) { width: 3px; height: 140px; left: 70px; top: 60px; }
.cxg-art i:nth-child(3) { width: 90px; height: 90px; left: 20px; bottom: -20px; border-radius: 50%; background: radial-gradient(#FFB020, transparent 70%); }
.cxg-feature-txt { position: absolute; inset: auto 16px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cxg-feature-txt em { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: #FF3D71; }
.cxg-feature-txt strong { direction: ltr; text-align: right; font-size: 34px; line-height: .95; letter-spacing: .02em; font-weight: 800; }
.cxg-feature-txt span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #C9C9E6; }
.cxg-feature-txt span .ic { width: 16px; height: 16px; color: #39FF9E; }
.cxg-buy { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.cxg-buy b { font-size: 18px; }
.cxg-buy i { font-size: 13px; font-weight: 800; padding: 10px 18px; border-radius: 12px; background: #39FF9E; color: #06120C; }
.cxg-sec { padding: 14px 18px 0; }
.cxg-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.cxg-head b { font-size: 15px; }
.cxg-head span { font-size: 12px; color: #39FF9E; }
.cxg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cxg-cover { position: relative; height: 128px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--a), var(--b)); display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; }
.cxg-cover::before { content: ""; position: absolute; width: 90px; height: 90px; right: -20px; top: -10px; border: 10px solid rgba(255, 255, 255, .22); transform: rotate(35deg); }
.cxg-cover em { position: absolute; top: 7px; left: 7px; direction: ltr; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, .55); }
.cxg-cover b { position: relative; direction: ltr; text-align: right; font-size: 14px; line-height: 1; }
.cxg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cxg-cards span { border-radius: 12px; padding: 10px 8px; background: #15152A; border: 1px solid #25253F; display: flex; flex-direction: column; }
.cxg-cards b { direction: ltr; text-align: right; font-size: 13px; }
.cxg-cards small { font-size: 11px; color: #A6A6C8; }
.cxg-cards i { font-size: 12px; font-weight: 800; color: #39FF9E; margin-top: 4px; }
.cx-gaming .m-tabbar { background: rgba(12, 12, 22, .96); border-color: #1D1D33; }
.cx-gaming .m-tab { color: #6E6E90; }
.cx-gaming .m-home-ind { color: #fff; }

/* ═════════════ 4. اشتراكات — باقات ومدد ═════════════ */
.cx-subs { background: linear-gradient(180deg, #121833, #0D1126 40%, #F3F4F8 40.1%); color: #fff; --tab-on: #E5484D; }
.cxs-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px 12px; }
.cxs-logo { direction: ltr; display: flex; align-items: center; gap: 6px; font-size: 21px; letter-spacing: .04em; }
.cxs-logo i { width: 26px; height: 26px; border-radius: 8px; background: #E5484D; display: grid; place-items: center; font-size: 11px; }
.cxs-logo span { color: #E5484D; }
.cxs-mine { margin: 0 20px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.cxs-mine-row { display: flex; align-items: center; gap: 10px; }
.cxs-mine-row small { display: block; font-size: 11px; opacity: .7; }
.cxs-mine-row b { font-size: 15px; }
.cxs-mine-row em { margin-inline-start: auto; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.cxs-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 22%, transparent); color: var(--t); flex: none; }
.cxs-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); margin: 12px 0 8px; }
.cxs-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(to left, #E5484D, #FF8A65); }
.cxs-mine-foot { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .8; }
.cxs-h { padding: 18px 20px 8px; }
.cxs-h b { display: block; font-size: 18px; }
.cxs-h span { font-size: 12px; opacity: .7; }
.cxs-period { margin: 0 20px 12px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.cxs-period span { text-align: center; padding: 8px 0; border-radius: 9px; font-size: 13px; font-weight: 700; }
.cxs-period span.is-on { background: #fff; color: #121833; }
.cxs-plans { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; }
.cxs-plan { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; color: #111827; border-radius: 16px; padding: 12px; box-shadow: 0 6px 18px -10px rgba(17, 24, 39, .3); border: 1.5px solid transparent; }
.cxs-plan.is-hot { border-color: #E5484D; }
.cxs-badge { position: absolute; top: -9px; left: 14px; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: #E5484D; color: #fff; }
.cxs-plan-main { flex: 1; min-width: 0; }
.cxs-plan-main b { font-size: 14.5px; }
.cxs-plan-main ul { margin: 2px 0 0; padding: 0; list-style: none; }
.cxs-plan-main li { font-size: 11.5px; color: #6B7280; }
.cxs-plan-main li::before { content: "✓ "; color: #10B981; font-weight: 800; }
.cxs-price { text-align: left; }
.cxs-price b { display: block; font-size: 20px; line-height: 1; }
.cxs-price small { font-size: 10px; color: #6B7280; }
.cxs-cta { margin: 12px 20px 0; text-align: center; padding: 14px; border-radius: 14px; background: #E5484D; color: #fff; font-weight: 800; font-size: 15px; }

/* ═════════════ 5. إلكترونيات — مواصفات وعروض ═════════════ */
.cx-elec { background: #F2F4F7; color: #0F172A; --tab-on: #1D6FE0; }
.cx-elec .m-status { background: #fff; }
.cxe-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 18px 10px; background: #fff; }
.cxe-logo { direction: ltr; display: flex; align-items: center; gap: 7px; font-size: 18px; letter-spacing: .03em; }
.cxe-logo i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #1D6FE0, #00C2FF); }
.cxe-search { background: #fff; padding: 0 18px 12px; display: flex; align-items: center; gap: 8px; color: #64748B; font-size: 13.5px; }
.cxe-search .ic { color: #1D6FE0; }
.cxe-search span { flex: 1; padding: 11px 12px; border-radius: 12px; background: #F1F5F9; }
.cxe-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 14px 12px 6px; }
.cxe-cats span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #334155; }
.cxe-cats i { width: 50px; height: 50px; border-radius: 16px; background: #fff; display: grid; place-items: center; color: #1D6FE0; box-shadow: 0 2px 6px rgba(15, 23, 42, .06); }
.cxe-product { margin: 10px 14px 0; background: #fff; border-radius: 20px; padding: 12px; display: grid; grid-template-columns: 128px 1fr; gap: 12px; box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .35); }
.cxe-shot { position: relative; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #EEF4FF, #DCE6F5); display: grid; place-items: center; min-height: 190px; }
.cxe-shot em { position: absolute; top: 8px; right: 8px; direction: ltr; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 7px; background: #EF4444; color: #fff; }
.cxe-hp { width: 104px; }
.cxe-info b { font-size: 15px; line-height: 1.3; }
.cxe-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.cxe-price strong { font-size: 18px; color: #1D6FE0; }
.cxe-price s { font-size: 12px; color: #94A3B8; }
.cxe-colors { display: flex; gap: 7px; margin-bottom: 8px; }
.cxe-colors span { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #CBD5E1; }
.cxe-colors span.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1D6FE0; }
.cxe-specs { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.cxe-specs div { display: flex; justify-content: space-between; font-size: 11.5px; padding: 3px 0; border-bottom: 1px dashed #E2E8F0; }
.cxe-specs dt { color: #64748B; }
.cxe-specs dd { margin: 0; font-weight: 700; }
.cxe-list { margin: 10px 14px 0; background: #fff; border-radius: 18px; padding: 4px 12px; }
.cxe-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF2F7; }
.cxe-row:last-child { border-bottom: 0; }
.cxe-thumb { width: 46px; height: 46px; border-radius: 12px; background: #EEF4FF; color: #1D6FE0; display: grid; place-items: center; flex: none; }
.cxe-row b { display: block; font-size: 13.5px; }
.cxe-row small { font-size: 11px; color: #64748B; }
.cxe-row strong { margin-inline-start: auto; font-size: 14px; }

/* ═════════════ 6. خدمات ومنتجات رقمية — بورتفوليو وباقات ═════════════ */
.cx-digital { background: #FFF8F3; color: #2A140A; --tab-on: #D9480F; }
.cxd-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px 8px; }
.cxd-logo { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.cxd-logo i { width: 28px; height: 28px; border-radius: 50% 50% 50% 8px; background: linear-gradient(135deg, #FF7A45, #D9480F); }
.cxd-intro { padding: 4px 20px 12px; }
.cxd-intro strong { display: block; font-size: 25px; line-height: 1.2; }
.cxd-intro span { font-size: 13px; color: #8B5E4A; }
.cxd-work { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 88px 88px; gap: 8px; padding: 0 20px; }
.cxd-work span { border-radius: 16px; position: relative; overflow: hidden; }
.cxd-t1 { grid-row: 1 / 3; background: #1E1B4B; color: #FDE68A; display: grid; place-items: center; }
.cxd-t1 i { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 12px solid #FDE68A; top: 30px; opacity: .9; }
.cxd-t1 b { position: absolute; bottom: 14px; font-size: 20px; letter-spacing: .1em; direction: ltr; }
.cxd-t2 { background: #FFD6C2; }
.cxd-t2 i { position: absolute; inset: 20px 30px; background: #D9480F; border-radius: 6px 30px; }
.cxd-t3 { background: #0E9F6E; display: grid; place-items: center; color: #fff; }
.cxd-t3 b { font-size: 26px; letter-spacing: .05em; direction: ltr; transform: rotate(-8deg); }
.cxd-t4 { display: none; }
.cxd-h { padding: 16px 20px 8px; }
.cxd-h b { font-size: 16px; }
.cxd-pack { margin: 0 20px 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #F4DDD0; }
.cxd-pack.is-pro { background: #2A140A; color: #FFF1E8; border-color: #2A140A; }
.cxd-pack-head { display: flex; justify-content: space-between; align-items: baseline; }
.cxd-pack-head b { font-size: 15px; }
.cxd-pack-head strong { font-size: 17px; color: #D9480F; }
.cxd-pack.is-pro .cxd-pack-head strong { color: #FFB38A; }
.cxd-pack ul { margin: 6px 0 0; padding: 0; list-style: none; }
.cxd-pack li { font-size: 12px; padding: 1px 0; opacity: .85; }
.cxd-pack li::before { content: "• "; color: #D9480F; font-weight: 800; }
.cxd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cxd-actions i { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; border-radius: 12px; font-size: 12.5px; font-weight: 800; }
.cxd-order { background: #D9480F; color: #fff; }
.cxd-wa { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.cxd-wa .bi { width: 16px; height: 16px; }

/* ═════════════ حساب العميل (سطور) ═════════════ */
.cx-account { background: #FBF6EC; color: #2B1D0E; --tab-on: #8A4B12; }
.cxa-top { display: flex; align-items: center; gap: 10px; padding: 6px 20px 8px; }
.cxa-top b { display: block; font-size: 17px; line-height: 1.1; }
.cxa-top small { font-size: 12px; color: #7A6650; direction: ltr; }
.cxa-top > .ic { margin-inline-start: auto; }
.cxa-hello { padding: 6px 20px 12px; }
.cxa-hello small { display: block; font-size: 13px; color: #7A6650; }
.cxa-hello b { font-size: 24px; }
.cxa-order { margin: 0 20px; padding: 14px; border-radius: 18px; background: #8A4B12; color: #FBF1E2; }
.cxa-order-head { display: flex; justify-content: space-between; align-items: center; }
.cxa-order-head b { font-size: 16px; }
.cxa-order-head em { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #FBF1E2; color: #8A4B12; }
.cxa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }
.cxa-steps i { height: 6px; border-radius: 99px; background: rgba(251, 241, 226, .3); }
.cxa-steps i.is-done { background: #FBF1E2; }
.cxa-steps-l { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 11px; margin-top: 5px; opacity: .85; }
.cxa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px 0; }
.cxa-grid span { padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #EADBC4; display: flex; flex-direction: column; gap: 2px; }
.cxa-grid .ic { color: #8A4B12; margin-bottom: 4px; }
.cxa-grid b { font-size: 14.5px; }
.cxa-grid small { font-size: 11.5px; color: #7A6650; }
.cxa-coupon, .cxa-notif { margin: 10px 20px 0; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; border: 1.5px dashed #D8B98E; }
.cxa-notif { border-style: solid; border-color: #EADBC4; }
.cxa-coupon .ic, .cxa-notif .ic { color: #8A4B12; }
.cxa-coupon b, .cxa-notif b { display: block; font-size: 14px; }
.cxa-coupon small, .cxa-notif small { font-size: 11.5px; color: #7A6650; }
.cx-account .m-tabbar { background: rgba(251, 246, 236, .96); }

/* ─────────────── التبديل بين المفاهيم (تشكّل) ─────────────── */
[data-concepts] > .m-canvas { visibility: hidden; }
[data-concepts] > .m-canvas.is-active { visibility: visible; z-index: 2; }
.sl-motion [data-concepts] > .m-canvas.is-entering { visibility: visible; z-index: 3; animation: cx-reveal .75s cubic-bezier(.65, 0, .35, 1) both; }
.sl-motion [data-concepts] > .m-canvas.is-entering .cx-b { animation: cx-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.sl-motion [data-concepts] > .m-canvas.is-entering .cx-b:nth-of-type(2) { animation-delay: .08s; }
.sl-motion [data-concepts] > .m-canvas.is-entering .cx-b:nth-of-type(3) { animation-delay: .14s; }
.sl-motion [data-concepts] > .m-canvas.is-entering .cx-b:nth-of-type(4) { animation-delay: .2s; }
.sl-motion [data-concepts] > .m-canvas.is-entering .cx-b:nth-of-type(n+5) { animation-delay: .26s; }
.sl-motion [data-concepts] > .m-canvas.is-leaving { visibility: visible; z-index: 1; animation: cx-leave .75s ease both; }
@keyframes cx-reveal { from { clip-path: circle(0 at 50% 94%); } to { clip-path: circle(150% at 50% 94%); } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes cx-leave { to { transform: scale(.94); filter: brightness(.7); } }