/* ═══════════════════════════════════════════════════════════════════
   صفحة إطلاق المتجر — نظام بصري مستقلّ (lx-*).

   لا يشترك مع portallayout.css ولا مع SALES: الصفحة تُقرأ من غريب لا
   من مستخدم داخل النظام، فهي أعرض وأهدأ وأكبر خطّا، وبيضاء يتخلّلها
   لون واحد. اللون الأخضر الزمردي يبقى هوية كوديكس فلا تُقرأ الصفحة
   غريبة عن بقية الموقع.
   ═══════════════════════════════════════════════════════════════════ */

.lx {
    --lx-brand: #047857;
    --lx-brand-d: #065f46;
    --lx-brand-l: #ecfdf5;
    --lx-ink: #0b1b16;
    --lx-body: #44504c;
    --lx-mut: #7a8884;
    --lx-line: #e6ece9;
    --lx-hair: #f2f6f4;
    --lx-bg: #ffffff;
    --lx-soft: #f7faf9;

    --lx-wrap: 1180px;
    --lx-r: 16px;

    background: var(--lx-bg);
    color: var(--lx-body);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.75;
}

.lx * { box-sizing: border-box; }

.lx h1, .lx h2, .lx h3, .lx h4, .lx h5, .lx h6 {
    color: var(--lx-ink);
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
    margin: 0;
}

/* انتبه: وزن هذين (0,1,1) أعلى من أي قاعدة بصنف واحد (0,1,0).
   فكل صنف يضبط هامشا على <p> أو لونا على <a> يجب أن يُضاعَف وزنه
   بـ `.lx` أمامه، وإلّا ابتلعه الأساس بصمت — لا خطأ ولا تحذير،
   فقط عنصر يقف في غير موضعه. */
.lx p { margin: 0; }
.lx a { text-decoration: none; color: inherit; }

.lx-wrap {
    inline-size: 100%;
    max-inline-size: var(--lx-wrap);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ───────────────────────── الأزرار ───────────────────────── */

.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    block-size: 52px;
    padding-inline: 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: .98rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.lx-btn:hover { transform: translateY(-1px); }

/* تعبئة واحدة للزرّ الذي يأخذ القرار، والبقية محدّدة لا معبّأة.

   الوزن مضاعف بـ `.lx` عمدا: القاعدة `.lx a { color: inherit }` وزنها
   (0,1,1) فتغلب `.lx-btn--brand` (0,1,0) ويرث الزرّ لون ما حوله —
   أبيض داخل الهيرو بالصدفة، وداكنا على الأخضر في بقية الصفحة. */
.lx .lx-btn--brand { background: var(--lx-brand); color: #fff; }
.lx .lx-btn--brand:hover { background: var(--lx-brand-d); color: #fff; }

.lx .lx-btn--ghost { background: #fff; border-color: var(--lx-line); color: var(--lx-ink); }
.lx .lx-btn--ghost:hover { border-color: var(--lx-brand); color: var(--lx-brand); }

.lx .lx-btn--light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; }
.lx .lx-btn--light:hover { background: rgba(255,255,255,.22); color: #fff; }

.lx-btn--sm { block-size: 42px; padding-inline: 1.1rem; font-size: .9rem; }
.lx-btn--block { inline-size: 100%; }

/* ───────────────────────── الترويسة ───────────────────────── */

/* بيضاء دائما لا شفافة فوق الهيرو: الروابط والشعار داكنان، فكانا
   يختفيان على الأخضر. والظلّ وحده يتغيّر بالتمرير. */
.lx-hd {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(160%) blur(10px);
    border-block-end: 1px solid var(--lx-line);
    transition: box-shadow .2s ease;
}
.lx-hd--solid { box-shadow: 0 6px 22px rgba(11,27,22,.07); }

.lx-hd__in {
    max-inline-size: var(--lx-wrap);
    margin-inline: auto;
    padding: .7rem 20px;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.lx-hd__brand { display: flex; align-items: center; gap: .55rem; flex: none; }
.lx-hd__brand img { block-size: 36px; inline-size: auto; }
.lx-hd__brand span { font-weight: 800; font-size: 1.12rem; color: var(--lx-ink); }

/* margin-inline: auto يوزّع الفراغ على الجهتين فتتوسّط الروابط؛
   ومع -end وحده كانت تلتصق بالشعار ويبقى الوسط فارغا. */
.lx-hd__nav { display: flex; align-items: center; gap: 1.5rem; margin-inline: auto; }
.lx-hd__nav a { font-size: .95rem; font-weight: 600; color: var(--lx-body); }
.lx-hd__nav a:hover { color: var(--lx-brand); }

.lx-hd__end { display: flex; align-items: center; gap: .7rem; flex: none; }
.lx .lx-hd__login { font-size: .95rem; font-weight: 700; color: var(--lx-ink); }
.lx .lx-hd__login:hover { color: var(--lx-brand); }

.lx-hd__burger {
    display: none;
    inline-size: 42px; block-size: 42px;
    border: 1px solid var(--lx-line);
    background: #fff;
    border-radius: 12px;
    color: var(--lx-ink);
    font-size: 1.15rem;
    cursor: pointer;
}

.lx-hd__sheet {
    border-block-start: 1px solid var(--lx-line);
    background: #fff;
    padding: .8rem 20px 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.lx-hd__sheet > a { padding: .7rem .2rem; font-weight: 600; border-block-end: 1px solid var(--lx-hair); }
.lx-hd__sheet > a:last-child { border: 0; margin-block-start: .6rem; }

/* ───────────────────────── الهيرو ───────────────────────── */

.lx-hero {
    position: relative;
    padding-block: 5.4rem 5rem;
    background:
        radial-gradient(70rem 34rem at 82% -12%, #0d9488 0%, transparent 58%),
        linear-gradient(160deg, #043d31 0%, #065f46 46%, #047857 100%);
    color: #fff;
    overflow: hidden;
}
.lx-hero::after {
    /* شبكة خافتة تعطي عمقا بلا صورة تُحمَّل */
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 100%);
    pointer-events: none;
}
.lx-hero__in { position: relative; z-index: 1; text-align: center; }

.lx-hero__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .95rem;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.1);
    border-radius: 999px;
    font-size: .84rem; font-weight: 700;
    margin-block-end: 1.3rem;
}

.lx-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    letter-spacing: -.01em;
    margin-block-end: 1rem;
}
.lx-hero h1 b { color: #6ee7b7; font-weight: 800; }

.lx .lx-hero__sub {
    max-inline-size: 640px;
    margin-inline: auto;
    font-size: 1.08rem;
    color: rgba(255,255,255,.88);
    margin-block-end: 2rem;
}

.lx-hero__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.lx-hero__note {
    margin-block-start: 1.1rem;
    font-size: .87rem;
    color: rgba(255,255,255,.72);
    display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
}
.lx-hero__note span { display: inline-flex; align-items: center; gap: .35rem; }

/* ───────────────────────── شريط الأرقام ───────────────────────── */

.lx-stats {
    background: #fff;
    border-block-end: 1px solid var(--lx-line);
    padding-block: 2.2rem;
}
.lx-stats__g {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.6rem;
    text-align: center;
}
.lx-stats__v {
    font-size: 1.9rem; font-weight: 800; color: var(--lx-brand);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.lx-stats__k { font-size: .88rem; color: var(--lx-mut); }

/* ───────────────────────── رأس القسم ───────────────────────── */

.lx-sec { padding-block: 4.6rem; }
.lx-sec--soft { background: var(--lx-soft); }

.lx-head { text-align: center; max-inline-size: 660px; margin: 0 auto 2.6rem; }
.lx-head__eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 800; letter-spacing: .06em;
    color: var(--lx-brand);
    background: var(--lx-brand-l);
    padding: .3rem .8rem; border-radius: 999px;
    margin-block-end: .9rem;
}
.lx-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-block-end: .7rem; }
.lx-head p { color: var(--lx-mut); font-size: 1.02rem; }

/* ───────────────────────── الأنشطة ───────────────────────── */

.lx-sect__g {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem;
}
.lx-sect__i {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-r);
    transition: border-color .16s ease, transform .16s ease;
}
.lx-sect__i:hover { border-color: var(--lx-brand); transform: translateY(-2px); }
.lx-sect__i i {
    inline-size: 42px; block-size: 42px; flex: none;
    display: grid; place-items: center;
    background: var(--lx-brand-l); color: var(--lx-brand);
    border-radius: 12px; font-size: 1.15rem;
}
.lx-sect__i span { font-weight: 700; color: var(--lx-ink); font-size: .95rem; }

/* ───────────────────────── الحلول (كتل متبادلة) ───────────────────────── */

.lx-sol { display: flex; flex-direction: column; gap: 3.4rem; }

.lx-sol__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
/* التبادل يمنع الرتابة: الصورة يمينا ثم يسارا */
.lx-sol__row:nth-child(even) .lx-sol__art { order: -1; }

.lx-sol__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 800; color: var(--lx-brand);
    margin-block-end: .7rem;
}
.lx-sol__c h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-block-end: .7rem; }
.lx-sol__c > p { color: var(--lx-mut); margin-block-end: 1.1rem; }

.lx-sol__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.lx-sol__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; }
.lx-sol__list i { color: var(--lx-brand); margin-block-start: .35rem; flex: none; }

/* اللوحة بدل لقطة شاشة: لا تتقادم ولا تُحمَّل بطيئة */
.lx-sol__art {
    background: linear-gradient(145deg, var(--lx-brand-l), #fff);
    border: 1px solid var(--lx-line);
    border-radius: 22px;
    padding: 1.6rem;
    min-block-size: 280px;
    display: flex; flex-direction: column; gap: .7rem; justify-content: center;
}
.lx-sol__card {
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 13px;
    padding: .8rem 1rem;
    display: flex; align-items: center; gap: .7rem;
    box-shadow: 0 6px 20px rgba(4,120,87,.06);
}
.lx-sol__card i {
    inline-size: 36px; block-size: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px; background: var(--lx-brand-l); color: var(--lx-brand);
}
.lx-sol__card b { display: block; font-size: .92rem; color: var(--lx-ink); }
.lx-sol__card small { color: var(--lx-mut); font-size: .8rem; }
.lx-sol__card--k { margin-inline-start: auto; font-weight: 800; color: var(--lx-brand); font-size: .95rem; }

/* ───────────────────────── الباقات ───────────────────────── */

.lx-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1.1rem;
    /* stretch لا start: بطاقات متفاوتة الطول تترك الأزرار على خطوط
       مختلفة فتبدو القائمة غير مرتّبة، والمقارنة بينها أصعب. */
    align-items: stretch;
}
.lx-plan {
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 20px;
    padding: 1.6rem 1.4rem;
    display: flex; flex-direction: column;
    position: relative;
}
/* الموصى به يعلو ويُحاط، فيُقرأ اختيارا لا زخرفة */
.lx-plan--hot {
    border-color: var(--lx-brand);
    box-shadow: 0 18px 44px rgba(4,120,87,.13);
}
.lx-plan__tag {
    position: absolute; inset-block-start: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--lx-brand); color: #fff;
    font-size: .76rem; font-weight: 800;
    padding: .25rem .85rem; border-radius: 999px;
    white-space: nowrap;
}
.lx-plan h3 { font-size: 1.12rem; margin-block-end: .2rem; }
.lx-plan__tag2 { font-size: .85rem; color: var(--lx-mut); margin-block-end: 1rem; }
.lx-plan__p { display: flex; align-items: baseline; gap: .35rem; margin-block-end: 1.2rem; }
.lx-plan__p b { font-size: 2.1rem; font-weight: 800; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-plan__p span { color: var(--lx-mut); font-size: .88rem; }
.lx-plan__f { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; flex: 1; }
.lx-plan__f li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.lx-plan__f i { color: var(--lx-brand); margin-block-start: .3rem; flex: none; font-size: .85rem; }

/* ───────────────────────── الأسئلة ───────────────────────── */

.lx-faq { max-inline-size: 820px; margin-inline: auto; display: grid; gap: .7rem; }
.lx-faq details {
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    padding: 0 1.1rem;
    transition: border-color .16s ease;
}
.lx-faq details[open] { border-color: var(--lx-brand); }
.lx-faq summary {
    cursor: pointer; list-style: none;
    padding-block: 1.05rem;
    font-weight: 700; color: var(--lx-ink); font-size: .99rem;
    display: flex; align-items: center; gap: .7rem;
}
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::after {
    content: "\f4fe";                 /* bi-plus-lg */
    font-family: "bootstrap-icons";
    margin-inline-start: auto;
    color: var(--lx-brand);
    font-size: .85rem;
    transition: transform .18s ease;
}
.lx-faq details[open] summary::after { transform: rotate(45deg); }
.lx-faq__a { padding-block-end: 1.05rem; color: var(--lx-body); font-size: .95rem; }

.lx .lx-trial {
    text-align: center;
    margin-block-start: 1.4rem;
    color: var(--lx-mut);
    font-size: .92rem;
}

/* ───────────────────────── نداء الختام ───────────────────────── */

.lx-cta {
    background: linear-gradient(150deg, #043d31, #047857);
    color: #fff;
    padding-block: 4.4rem;
    text-align: center;
}
.lx-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin-block-end: .8rem; }
.lx-cta p { color: rgba(255,255,255,.86); max-inline-size: 540px; margin: 0 auto 1.8rem; }
.lx-cta__b { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ───────────────────────── التذييل ───────────────────────── */

.lx-ft { background: #07100d; color: #9fb0aa; padding-block: 3.4rem 0; font-size: .92rem; }
.lx-ft__in {
    max-inline-size: var(--lx-wrap);
    margin-inline: auto;
    padding-inline: 20px;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 2rem;
}
.lx .lx-ft__logo { display: flex; align-items: center; gap: .55rem; margin-block-end: .9rem; }
.lx-ft__logo img { block-size: 34px; }
.lx-ft__logo span { font-weight: 800; font-size: 1.1rem; color: #fff; }
.lx-ft__brand p { margin-block-end: 1.2rem; max-inline-size: 320px; line-height: 1.8; }

.lx-ft__col h6 { color: #fff; font-size: .95rem; margin-block-end: .9rem; }
.lx-ft__col a { display: block; padding-block: .3rem; color: #9fb0aa; }
.lx-ft__col a:hover { color: #6ee7b7; }

.lx-ft__bar {
    margin-block-start: 2.6rem;
    border-block-start: 1px solid rgba(255,255,255,.09);
    padding-block: 1.2rem;
    font-size: .85rem;
}
.lx-ft__bar > * { display: block; }
.lx-ft__bar {
    max-inline-size: var(--lx-wrap);
    margin-inline: auto;
    padding-inline: 20px;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.lx-ft__where { display: inline-flex; align-items: center; gap: .35rem; }

/* ───────────────────────── الشاشات الصغيرة ───────────────────────── */

@media (max-width: 980px) {
    .lx-hd__nav, .lx-hd__login { display: none; }
    .lx-hd__burger { display: grid; place-items: center; }
    .lx-sol__row { grid-template-columns: 1fr; gap: 1.6rem; }
    .lx-sol__row:nth-child(even) .lx-sol__art { order: 0; }
    .lx-ft__in { grid-template-columns: 1fr 1fr; }
    .lx-ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .lx { font-size: 16px; }
    .lx-hero { padding-block: 3.6rem 3.4rem; }
    .lx-hd__end .lx-btn--sm { display: none; }
    .lx-sect__g { grid-template-columns: 1fr 1fr; }
    .lx-sect__i { flex-direction: column; text-align: center; gap: .5rem; }
    .lx-ft__in { grid-template-columns: 1fr; }
    .lx-sec { padding-block: 3.2rem; }
}


/* ══════════════════════════════════════════════════════
   شاشتا الدخول والتسجيل داخل اللايوت نفسه.
   نموذج وحيد بين ترويسة وتذييل يبدو ضائعا، فبجانبه لوحة
   تذكّر بما ينتظره خلف الباب.
   ══════════════════════════════════════════════════════ */

.lx-auth { background: var(--lx-soft); }

.lx-auth__g {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 2.6rem;
    align-items: center;
}

.lx-auth__card {
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 22px;
    padding: 2rem 1.8rem;
    box-shadow: 0 18px 44px rgba(11,27,22,.06);
}
.lx-auth__card h1 { font-size: 1.5rem; margin-block-end: .35rem; }
.lx .lx-auth__sub { color: var(--lx-mut); font-size: .93rem; margin-block-end: 1.4rem; }

.lx-auth__err {
    display: flex; align-items: flex-start; gap: .5rem;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 12px; padding: .7rem .85rem;
    font-size: .88rem; font-weight: 600;
    margin-block-end: 1rem;
}
.lx-auth__ok {
    display: flex; align-items: flex-start; gap: .5rem;
    background: var(--lx-brand-l); border: 1px solid #a7f3d0; color: var(--lx-brand-d);
    border-radius: 12px; padding: .7rem .85rem;
    font-size: .88rem; font-weight: 600;
    margin-block-end: 1rem;
}

.lx-auth__f { display: block; margin-block-end: 1rem; }
.lx-auth__f > span:first-child {
    display: block; font-size: .87rem; font-weight: 700;
    color: var(--lx-ink); margin-block-end: .4rem;
}

/* الغلاف هو من يرسم الحدّ والتركيز، والحقل داخله عارٍ */
.lx-auth__w {
    display: flex; align-items: center; gap: .55rem;
    background: #fff;
    border: 1px solid var(--lx-line);
    border-radius: 13px;
    padding-inline: .85rem;
    block-size: 50px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lx-auth__w:focus-within {
    border-color: var(--lx-brand);
    box-shadow: 0 0 0 3px rgba(4,120,87,.12);
}
.lx-auth__w > i { color: var(--lx-mut); font-size: .95rem; flex: none; }
.lx-auth__w input {
    flex: 1; min-inline-size: 0;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: .95rem; color: var(--lx-ink);
    block-size: 100%;
}
.lx-auth__w input::placeholder { color: var(--lx-faint, #9aa8a3); }
.lx-auth__eye {
    border: 0; background: transparent; cursor: pointer;
    color: var(--lx-mut); padding: .2rem; flex: none; font-size: .95rem;
}
.lx-auth__eye:hover { color: var(--lx-brand); }

.lx-auth__hint { display: block; font-size: .78rem; color: var(--lx-mut); margin-block-start: .35rem; }

.lx-auth__foot {
    margin-block-start: 1.2rem;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--lx-hair);
    display: flex; flex-direction: column; gap: .4rem;
    font-size: .88rem; color: var(--lx-mut);
}
.lx .lx-auth__foot a { color: var(--lx-brand); font-weight: 700; }
.lx .lx-auth__foot a:hover { color: var(--lx-brand-d); }

/* اللوحة الجانبية */
.lx-auth__side { padding-inline: .5rem; }
.lx-auth__ico {
    inline-size: 54px; block-size: 54px;
    display: grid; place-items: center;
    background: var(--lx-brand-l); color: var(--lx-brand);
    border-radius: 16px; font-size: 1.4rem;
    margin-block-end: 1rem;
}
.lx-auth__side h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-block-end: .6rem; }
.lx-auth__side > p { color: var(--lx-mut); margin-block-end: 1.3rem; }

.lx-auth__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .7rem; }
.lx-auth__list li { display: flex; gap: .65rem; align-items: center; font-size: .95rem; }
.lx-auth__list i {
    inline-size: 34px; block-size: 34px; flex: none;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--lx-line);
    border-radius: 10px; color: var(--lx-brand); font-size: .9rem;
}

@media (max-width: 900px) {
    /* النموذج أولا على الجوّال: الزائر جاء ليدخل لا ليقرأ */
    .lx-auth__g { grid-template-columns: 1fr; gap: 1.8rem; }
    .lx-auth__side { order: 2; }
}