/*
 * الصفحة الرئيسية (views/public/index.php) — اتجاه «لوحة حيّة»: خلفية فاتحة، بطاقات بزوايا كبيرة بأحجام مختلفة،
 * عناوين بخط ريم كوفي، ولون أخضر بترولي مع دهبي فاتح وبنفسجي هادي. ملف واحد بدل index.css وlanding_soul.css
 * وindex_responsive_fix.css وlanding_sections.css. landing_base.css قبله فيه أساس Bootstrap Reboot.
 */

:root {
    --lp-bg: #f4f6f3;
    --lp-surface: #fff;
    --lp-ink: #10231f;
    --lp-text: #2c4440;
    --lp-muted: #56665f;
    --lp-line: #e1e8e4;
    --lp-teal: #0b6b60;
    --lp-teal-dark: #064c44;
    --lp-mint: #d3ece6;
    --lp-mint-ink: #0b5a50;
    --lp-gold: #fde9b8;
    --lp-gold-soft: #fdf3d8;
    --lp-gold-ink: #3d2a05;
    --lp-gold-text: #6b4d12;
    --lp-lav: #e3e8ff;
    --lp-lav-ink: #2d3f8f;
    --lp-on-dark: #b9d9d1;
    --lp-focus: #0a9b8b;
    --lp-radius: 30px;
    --lp-radius-sm: 18px;
    --lp-container: 1240px;
    --lp-shadow: 0 10px 30px rgba(16, 35, 31, .07);
    --lp-font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lp-display: "Reem Kufi", "Cairo", system-ui, sans-serif;
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body.public-index-v11 {
    margin: 0;
    padding: 0 !important;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--lp-text);
    background: var(--lp-bg);
    font-family: var(--lp-font);
    -webkit-font-smoothing: antialiased;
}
body.public-index-v11 :is(h3, h4, p, button, input, select, a) { font-family: var(--lp-font); letter-spacing: 0; }
body.public-index-v11 :is(h1, h2) { font-family: var(--lp-display); letter-spacing: 0; }
body.public-index-v11 :is(h1, h2, h3, h4) { color: var(--lp-ink); }
body.public-index-v11 a { color: inherit; }
body.public-index-v11 img { max-width: 100%; }
body.public-index-v11 .public-shell-backdrop,
body.public-index-v11 > .ui-skip-target { display: none !important; }
body.public-index-v11 > .ui-skip-link { position: fixed !important; inset-block-start: 0 !important; margin: 0 !important; }
body.public-index-v11 > .lp-page { margin-block-start: 0 !important; padding-block-start: 0 !important; }
[x-cloak] { display: none !important; }
main:focus, section:focus { outline: none; }
body.public-index-v11 :is(a, button, select, input, summary):focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 3px; }

.lp-page { min-height: 100vh; overflow: clip; background: var(--lp-bg); }
.lp-container { width: min(var(--lp-container), calc(100% - 40px)); margin-inline: auto; }
.lp-section { padding-block: 28px; }

.reveal-up { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d, 0s); }
.reveal-up.is-visible { opacity: 1; transform: none; }

/* عناوين الأقسام */
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-block-end: 22px; }
.lp-head > div { min-width: min(100%, 18rem); flex: 1 1 22rem; }
.lp-head h2,
.lp-page h2 { margin: 0; font-family: var(--lp-display); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 700; line-height: 1.25; }
.lp-head p { margin: 8px 0 0; max-width: 46rem; color: var(--lp-muted); font-size: 1rem; font-weight: 600; line-height: 1.9; }

/* البطاقة الأساسية وألوانها */
.lp-tile { position: relative; border-radius: var(--lp-radius); background: var(--lp-surface); }
.lp-tile--ink { background: var(--lp-ink); color: #fff; }
.lp-tile--teal { background: var(--lp-teal); color: #fff; }
.lp-tile--gold { background: var(--lp-gold); color: var(--lp-gold-ink); }
.lp-tile--mint { background: var(--lp-mint); color: var(--lp-ink); }
.lp-tile--lav { background: var(--lp-lav); color: #1d2a63; }
.lp-tile:is(.lp-tile--ink, .lp-tile--teal) :is(h2, h3) { color: #fff; }
.lp-tile__mark { position: absolute; inset-inline-end: -28px; inset-block-end: -60px; font-family: var(--lp-display); font-size: 200px; line-height: 1; color: rgba(255, 255, 255, .07); pointer-events: none; user-select: none; }
.lp-chip { display: inline-flex; width: fit-content; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .875rem; font-weight: 800; }

/* الأزرار */
.lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 16px; font-size: 1rem; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.lp-button:hover { transform: translateY(-2px); }
.lp-button--light { background: #fff; color: #0b3f39 !important; }
.lp-button--outline { border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff !important; }
.lp-button--outline:hover { background: rgba(255, 255, 255, .1); }
.lp-button--dark { background: var(--lp-ink); color: #fff !important; }
.lp-button--soft { background: #eef4f2; color: var(--lp-teal) !important; }
.lp-button--soft:hover { background: var(--lp-mint); }

/* ---------- التنقل: كبسولة عايمة ---------- */
.lp-skip { position: fixed; inset-block-start: -120px; inset-inline-start: 10px; z-index: 2000; padding: 10px 18px; border-radius: 12px; background: var(--lp-teal); color: #fff !important; font-weight: 900; text-decoration: none; }
.lp-skip:focus { inset-block-start: 10px; outline: 3px solid #e2c27a; outline-offset: 2px; }

/* القائمة بتنطوي حسب حجم الخط مش عرض الشاشة بس: em في استعلام الحاوية بيكبر مع تكبير النص (200%). */
.lp-nav { position: sticky; inset-block-start: 0; z-index: 1000; padding-block: 14px 0; container: lpnav / inline-size; }
.lp-nav__inner { position: relative; display: flex; align-items: center; gap: 10px 20px; min-height: 66px; padding: 10px 12px; padding-inline-start: 16px; border-radius: 24px; background: rgba(255, 255, 255, .96); box-shadow: var(--lp-shadow); transition: box-shadow .2s ease; }
.lp-nav.is-scrolled .lp-nav__inner { box-shadow: 0 14px 38px rgba(16, 35, 31, .13); }
.lp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--lp-ink); }
.lp-brand__mark { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--lp-mint); overflow: hidden; }
.lp-brand__mark img { width: 32px; height: 32px; object-fit: contain; }
.lp-brand__copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lp-brand__copy strong { font-family: var(--lp-display); font-size: 1.12rem; font-weight: 700; overflow-wrap: normal; word-break: keep-all; }
.lp-brand__copy small { color: var(--lp-muted); font-size: .75rem; font-weight: 700; }
.lp-nav__toggle { display: none; flex: 0 0 46px; width: 46px; height: 46px; margin-inline-start: auto; place-items: center; border: 0; border-radius: 14px; background: #eef4f2; color: var(--lp-ink); font-size: 1.35rem; cursor: pointer; }
.lp-nav__menu { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lp-nav__links { display: flex; flex-wrap: wrap; gap: 2px; margin-inline-start: auto; }
.lp-nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--lp-text); font-size: .95rem; font-weight: 800; text-decoration: none; word-break: keep-all; transition: background-color .15s ease; }
.lp-nav__links a:hover { background: #eef4f2; color: var(--lp-ink); }
.lp-access { position: relative; }
.lp-access-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--lp-ink); color: #fff; font-size: .9rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.lp-access-trigger .bi-person-circle { font-size: 1.1rem; }
.lp-access-trigger__chevron { font-size: .75rem; transition: transform .2s ease; }
.lp-access-trigger__chevron.is-open { transform: rotate(180deg); }
.lp-access-menu { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; z-index: 1200; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(16, 35, 31, .18); }
.lp-access-menu > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-height: 64px; padding: 10px; border-radius: 16px; color: var(--lp-text); text-decoration: none; transition: background-color .15s ease; }
.lp-access-menu > a:hover { background: var(--lp-bg); }
.lp-access-menu > a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-access-menu strong { color: var(--lp-ink); font-size: .9rem; font-weight: 800; }
.lp-access-menu small { color: var(--lp-muted); font-size: .75rem; font-weight: 600; }
.lp-access-menu > a > i { color: #7c8c88; font-size: .8rem; }
.lp-access-menu__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 1.05rem; }
.lp-access-menu__icon.is-student { background: var(--lp-mint); color: var(--lp-mint-ink); }
.lp-access-menu__icon.is-student-register { background: #e2f5ee; color: #13684f; }
.lp-access-menu__icon.is-supporter { background: #fbe7ec; color: #9b2c4a; }
.lp-access-menu__icon.is-staff { background: #edf0f3; color: #334155; }
.lp-access-menu__icon.is-register { background: var(--lp-gold-soft); color: var(--lp-gold-text); }

@container lpnav (max-width: 62em) {
    .lp-nav__toggle { display: grid; }
    .lp-nav__menu { position: absolute; inset-block-start: calc(100% + 10px); inset-inline: 0; display: none; flex-direction: column; align-items: stretch; gap: 12px; max-height: calc(100dvh - 100% - 36px); padding: 14px; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(16, 35, 31, .18); }
    .lp-nav__menu.is-open { display: flex; }
    .lp-nav__menu.has-access-open .lp-nav__links { display: none; }
    .lp-nav__links { flex-direction: column; margin: 0; }
    .lp-nav__links a { min-height: 48px; font-size: 1rem; }
    .lp-access-trigger { width: 100%; justify-content: center; min-height: 50px; }
    .lp-access-menu { position: static; width: 100%; max-height: none; overflow: visible; margin-top: 8px; padding: 0; box-shadow: none; }
}

/* ---------- الواجهة: شبكة بطاقات ---------- */
.lp-hero { padding-block: 20px 8px; }
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.lp-tile--lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 3.4vw, 46px); overflow: hidden; background: var(--lp-teal); color: #fff; }
.lp-tile--lead > :not(.lp-tile__mark) { position: relative; }
.lp-tile.lp-tile--lead h1 { margin: 0; color: #fff; font-family: var(--lp-display); font-size: clamp(2.6rem, 5.2vw, 4.9rem); font-weight: 700; line-height: 1.18; }
.lp-hero__lead { margin: 16px 0 0; max-width: 32rem; color: #d6eee8; font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 600; line-height: 1.95; }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-hero__actions .lp-button { min-height: 56px; }

.lp-bento > .lp-tile:not(.lp-tile--lead) { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 24px; }
.lp-tile__label { font-size: .875rem; font-weight: 800; color: var(--lp-muted); }
.lp-tile__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; line-height: 1; }
.lp-tile__big b { font-family: var(--lp-display); font-size: clamp(2.6rem, 3.6vw, 3.4rem); font-weight: 700; color: var(--lp-ink); }
.lp-tile__big small { font-size: .95rem; font-weight: 800; }
.lp-tile__note { font-size: .875rem; font-weight: 700; }
.lp-tile__say { margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--lp-ink); font-family: var(--lp-display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 700; line-height: 1.5; }
.lp-tile__say small { font-family: var(--lp-font); color: var(--lp-muted); font-size: .9rem; font-weight: 700; }
.lp-tile__label .lp-live-dot { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; vertical-align: middle; }
.lp-tile__link { display: inline-flex; align-items: center; gap: 6px; color: var(--lp-teal); font-weight: 800; }
.lp-tile--live { text-decoration: none; color: var(--lp-ink); transition: transform .15s ease, box-shadow .15s ease; }
.lp-tile--live:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); }
.lp-tile--live .lp-tile__big { align-items: baseline; gap: 10px; }
.lp-tile--live .lp-tile__big small { color: var(--lp-muted); }
.lp-live-dot { width: 12px; height: 12px; border-radius: 50%; background: #18b48f; box-shadow: 0 0 0 6px rgba(24, 180, 143, .18); animation: lpPulse 2s ease-in-out 3; }
@keyframes lpPulse { 50% { box-shadow: 0 0 0 10px rgba(24, 180, 143, .06); } }
.lp-tile--price { background: var(--lp-gold); color: var(--lp-gold-text); }
.lp-tile--price .lp-tile__label { color: var(--lp-gold-text); }
.lp-tile--price .lp-tile__big b { color: var(--lp-gold-ink); }
.lp-tile--after { background: var(--lp-ink); color: #fff; }
.lp-tile--after .lp-tile__label { color: var(--lp-on-dark); }
.lp-tile--after ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-tile--after li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 700; }
.lp-tile--after li i { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #7ff0d0; }
.lp-tile--team { justify-content: center !important; }
.lp-faces { display: flex; }
.lp-faces > span { width: 50px; height: 50px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; overflow: hidden; font-weight: 900; font-size: 1.1rem; }
.lp-faces > span + span { margin-inline-start: -12px; }
.lp-faces img { width: 100%; height: 100%; object-fit: cover; }
.lp-faces .is-c0 { background: var(--lp-mint); color: var(--lp-mint-ink); }
.lp-faces .is-c1 { background: var(--lp-gold); color: var(--lp-gold-text); }
.lp-faces .is-c2 { background: var(--lp-lav); color: var(--lp-lav-ink); }
.lp-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lp-hero__stats div { min-width: 0; }
.lp-hero__stats dt { font-family: var(--lp-display); font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--lp-ink); }
.lp-hero__stats dd { margin: 0; color: var(--lp-muted); font-size: .78rem; font-weight: 700; }

@media (max-width: 1100px) {
    .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-tile--lead { grid-row: auto; }
}
@media (max-width: 560px) {
    .lp-bento { gap: 12px; grid-auto-rows: auto; }
    .lp-tile--lead { gap: 22px; }
    .lp-bento > .lp-tile:not(.lp-tile--lead) { padding: 20px 18px; border-radius: 24px; }
    .lp-tile--after, .lp-tile--team { grid-column: span 2; }
    .lp-tile__big b { font-size: 2.4rem; }
    .lp-hero__actions .lp-button { flex: 1 1 100%; }
}

/* ---------- المتصدرون الآن: شريط قابل للسحب بدلاً من صف جامد ---------- */
.lp-topstrip { padding-block: 8px 0; }
.lp-topstrip__in {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    background: var(--lp-surface);
}
.lp-topstrip__title {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--lp-gold-text);
    font-size: .875rem;
    font-weight: 900;
    white-space: nowrap;
}
.lp-topstrip__viewport {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    max-width: 720px;
    padding-block: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--lp-line) transparent;
    cursor: grab;
}
.lp-topstrip.has-scroll .lp-topstrip__viewport { scrollbar-width: none; }
.lp-topstrip.has-scroll .lp-topstrip__viewport::-webkit-scrollbar { display: none; }
.lp-topstrip__viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.lp-topstrip__item {
    display: flex;
    flex: 0 0 clamp(185px, 18vw, 210px);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--lp-bg);
    scroll-snap-align: center;
    cursor: pointer;
}
.lp-topstrip__item em {
    flex: 0 0 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lp-gold);
    color: var(--lp-gold-ink);
    font-style: normal;
    font-size: .8rem;
    font-weight: 900;
}
.lp-topstrip__item:first-of-type em { background: var(--lp-gold-text); color: var(--lp-surface); }
.lp-topstrip__item strong {
    min-width: 0;
    overflow: hidden;
    color: var(--lp-ink);
    font-size: .875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-topstrip__item small {
    flex: 0 0 auto;
    color: var(--lp-teal);
    font-size: .78rem;
    font-weight: 800;
}
.lp-topstrip__controls { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.lp-topstrip__controls[hidden] { display: none; }
.lp-topstrip__controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    background: var(--lp-surface);
    color: var(--lp-teal-dark);
    cursor: pointer;
}
.lp-topstrip__controls button:hover { background: var(--lp-mint); }
.lp-topstrip__all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding-inline: 8px;
    color: var(--lp-teal) !important;
    font-size: .875rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .lp-topstrip__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .lp-topstrip__title { grid-row: 1; grid-column: 1; }
    .lp-topstrip__all { grid-row: 1; grid-column: 2; justify-self: end; }
    .lp-topstrip__viewport { grid-row: 2; grid-column: 1; width: 100%; max-width: none; }
    .lp-topstrip__controls { grid-row: 2; grid-column: 2; }
    .lp-topstrip__item { flex-basis: 190px; }
    .lp-topstrip__controls button { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-topstrip__viewport { scroll-behavior: auto; }
}

/* ---------- الباقات ---------- */
.lp-packages { padding-block-start: 48px; }
.lp-pkg__zone { display: inline-flex; align-items: center; gap: 6px; color: var(--lp-text); font-weight: 700; }
.lp-pkg__zone i { color: var(--lp-teal); }
.lp-pkg__zone b { font-weight: 900; }
.lp-seg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-line); }
.lp-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 18px; border: 0; border-radius: 14px; background: transparent; color: var(--lp-text); font-size: .95rem; font-weight: 800; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.lp-seg__btn:hover { background: var(--lp-bg); }
.lp-seg__btn.is-active { background: var(--lp-ink); color: #fff; }
.lp-seg.is-kind .lp-seg__btn.is-active { background: var(--lp-teal); }
.lp-seg.is-small .lp-seg__btn { padding: 0 14px; font-size: .875rem; }

.lp-filter { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px 18px; border-radius: 24px; background: #fff; }
.lp-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-filter__label { min-width: 6.5rem; color: var(--lp-ink); font-size: .95rem; font-weight: 900; }
.lp-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--lp-line); border-radius: 999px; background: #fff; color: var(--lp-text); font-size: .9rem; font-weight: 800; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.lp-opt:hover { border-color: #9fcbc2; }
.lp-opt.is-active { border-color: var(--lp-teal); background: var(--lp-teal); color: #fff; }
.lp-filter__hint { margin: 2px 0 0; color: var(--lp-muted); font-size: .9rem; font-weight: 700; }
.lp-filter__hint.is-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--lp-teal); font-weight: 900; }
.lp-filter__reset { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #eef4f2; color: var(--lp-teal); font-size: .875rem; font-weight: 800; cursor: pointer; }

/* ---------- اختيار الباقة: سؤال واحد في كل مرة ---------- */
.lp-wiz { display: grid; gap: 14px; margin-bottom: 16px; }
.lp-wiz__answers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-wiz__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--lp-line); border-radius: 999px; background: #fff; color: var(--lp-ink); font-size: .92rem; font-weight: 800; cursor: pointer; }
.lp-wiz__chip i { color: var(--lp-teal); font-size: .8rem; }
.lp-wiz__chip:hover { border-color: var(--lp-teal); }
.lp-wiz__restart { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--lp-muted); font-size: .88rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lp-wiz__card { padding: clamp(20px, 3vw, 32px); border-radius: var(--lp-radius); background: #fff; }
.lp-wiz__progress { height: 6px; margin-bottom: 12px; border-radius: 99px; background: #eaf0ed; overflow: hidden; }
.lp-wiz__progress span { display: block; height: 100%; border-radius: 99px; background: var(--lp-teal); transition: width .25s ease; }
.lp-wiz__count { margin: 0 0 6px; color: var(--lp-muted); font-size: .85rem; font-weight: 800; }
.lp-wiz__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-wiz__q { float: none; width: 100%; margin: 0 0 18px; padding: 0; color: var(--lp-ink); font-family: var(--lp-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.35; }
.lp-wiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.lp-wiz__opts.is-four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.lp-wiz__opt { display: grid; justify-items: start; align-content: start; gap: 6px; min-height: 64px; padding: 18px 20px; border: 1.5px solid var(--lp-line); border-radius: 22px; background: #fff; color: var(--lp-text); text-align: start; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.lp-wiz__opt:hover { border-color: var(--lp-teal); transform: translateY(-2px); }
.lp-wiz__opt.is-active { border-color: var(--lp-teal); background: #eef7f4; }
.lp-wiz__opt i { color: var(--lp-teal); font-size: 1.5rem; }
.lp-wiz__opt strong { color: var(--lp-ink); font-size: 1.12rem; font-weight: 900; }
.lp-wiz__opt small { color: var(--lp-muted); font-size: .88rem; font-weight: 700; line-height: 1.6; }
.lp-wiz__opt em { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--lp-gold-soft); color: var(--lp-gold-text); font-style: normal; font-size: .85rem; font-weight: 900; }
.lp-wiz__opt em:empty { display: none; }
.lp-wiz__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 6px; border: 0; background: none; color: var(--lp-teal); font-size: .92rem; font-weight: 800; cursor: pointer; }
.lp-wiz__results { display: grid; gap: 14px; }
.lp-wiz__results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.lp-wiz__results-head h3 { margin: 0; color: var(--lp-ink); font-family: var(--lp-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; }
.lp-wiz__results-head h3:focus { outline: none; }
.lp-wiz__results-head p { margin: 0; color: var(--lp-muted); font-size: .9rem; font-weight: 700; }
.lp-wiz__durations { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-wiz__durations > span { margin-inline-end: 4px; color: var(--lp-ink); font-size: .92rem; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .lp-wiz__opt, .lp-wiz__progress span { transition: none; } .lp-wiz__opt:hover { transform: none; } }
.lp-pkg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; align-items: stretch; }
.lp-pkg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; border-radius: var(--lp-radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.lp-pkg:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp-pkg h3.lp-pkg__days { margin: 0; font-family: var(--lp-display); font-size: 1.35rem; font-weight: 700; color: var(--lp-ink); }
.lp-pkg__days b { font-weight: 700; }
.lp-pkg__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: var(--lp-display); font-size: 2.6rem; font-weight: 700; line-height: 1.1; color: var(--lp-ink); }
.lp-pkg__price small { font-family: var(--lp-font); font-size: .9rem; font-weight: 800; color: var(--lp-muted); }
.lp-pkg__meta { margin: 0; color: var(--lp-text); font-size: .9rem; font-weight: 700; line-height: 1.7; }
.lp-pkg__age { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--lp-gold-soft); color: var(--lp-gold-text); font-size: .8rem; font-weight: 800; }
.lp-pkg__auds { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-pkg__auds span { padding: 4px 10px; border-radius: 999px; background: var(--lp-gold-soft); color: var(--lp-gold-text); font-size: .78rem; font-weight: 800; }
.lp-pkg__list { list-style: none; margin: 4px 0 6px; padding: 12px 0 0; border-top: 1px solid var(--lp-line); display: grid; gap: 8px; }
.lp-pkg__list li { position: relative; padding-inline-start: 18px; color: var(--lp-text); font-size: .9rem; font-weight: 700; line-height: 1.6; }
.lp-pkg__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-teal); }
.lp-pkg__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-radius: 16px; background: #eef4f2; color: var(--lp-teal) !important; font-size: .95rem; font-weight: 900; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.lp-pkg__cta:hover { background: var(--lp-mint); }
.lp-pkg.is-popular { background: var(--lp-teal); color: #fff; }
.lp-pkg.is-popular :is(.lp-pkg__days, .lp-pkg__price, .lp-pkg__meta, .lp-pkg__list li) { color: #fff; }
.lp-pkg.is-popular .lp-pkg__price small { color: #d6eee8; }
.lp-pkg.is-popular .lp-pkg__list { border-color: rgba(255, 255, 255, .2); }
.lp-pkg.is-popular .lp-pkg__list li::before { background: var(--lp-gold); }
.lp-pkg.is-popular .lp-pkg__cta { background: #fff; color: #0b3f39 !important; }
.lp-pkg__badge { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--lp-gold); color: var(--lp-gold-ink); font-size: .8rem; font-weight: 900; }
.lp-pkg__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; border-radius: var(--lp-radius); background: #fff; color: var(--lp-muted); text-align: center; font-weight: 700; }
.lp-pkg__empty i { font-size: 1.8rem; color: var(--lp-teal); }
.lp-pkg__empty p { margin: 0; max-width: 34rem; line-height: 1.9; }

.lp-pkg__extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 16px; }
.lp-pkg__placement { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 22px 24px; }
.lp-pkg__placement-icon { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--lp-gold-ink); color: var(--lp-gold); font-size: 1.25rem; }
.lp-pkg__placement > div { flex: 1 1 14rem; min-width: 0; }
.lp-pkg__placement strong { display: block; font-family: var(--lp-display); font-size: 1.3rem; font-weight: 700; }
.lp-pkg__placement p { margin: 4px 0 0; color: #5b420d; font-size: .92rem; font-weight: 700; line-height: 1.8; }
.lp-pkg__placement a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 16px; background: var(--lp-gold-ink); color: var(--lp-gold) !important; font-weight: 900; text-decoration: none; }
.lp-pkg__bundle { display: flex; align-items: center; gap: 14px; padding: 22px 24px; }
.lp-pkg__bundle > i { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: #fff; color: var(--lp-lav-ink); font-size: 1.3rem; }
.lp-pkg__bundle p { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.85; }
.lp-pkg__bundle b { color: var(--lp-lav-ink); font-weight: 900; }
@media (max-width: 560px) {
    .lp-packages { padding-block-start: 44px; }
    .lp-seg-row, .lp-seg { width: 100%; }
    .lp-seg__btn { flex: 1 1 0; padding: 0 10px; }
    .lp-filter { padding: 14px; }
    .lp-filter__label { min-width: 100%; }
    .lp-pkg__placement a { flex: 1 1 100%; }
}

/* Active family offer sits beside the compact placement prompt, without adding more package cards. */
.lp-offers-stage .lp-pkg__extras:has(.lp-pkg__family) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.lp-pkg__family {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 18px; min-width: 0; padding: 18px 22px;
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm);
    background: var(--lp-mint); color: var(--lp-ink);
}
.lp-pkg__family-copy { flex: 1 1 220px; min-width: 0; }
.lp-pkg__family-copy strong { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 900; line-height: 1.6; }
.lp-pkg__family-copy strong i { flex: none; color: var(--lp-teal-dark); }
.lp-pkg__family-copy p { margin: 4px 0 0; font-size: .86rem; line-height: 1.8; }
.lp-pkg__family-copy b { font-weight: 900; color: var(--lp-teal-dark); }
.lp-pkg__family-copy small { display: block; margin-block-start: 4px; font-size: .76rem; line-height: 1.8; color: var(--lp-text); }
.lp-pkg__family-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; min-width: 0; }
.lp-pkg__family-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding-inline: 16px; border-radius: 14px;
    background: var(--lp-teal-dark); color: var(--lp-surface) !important;
    font-size: .85rem; font-weight: 900; text-decoration: none;
}
.lp-pkg__family-cta:hover { background: var(--lp-teal); }
.lp-pkg__family-login { font-size: .8rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
    .lp-offers-stage .lp-pkg__extras:has(.lp-pkg__family) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .lp-pkg__family { padding: 16px; }
    .lp-pkg__family-actions, .lp-pkg__family-cta { width: 100%; }
}

/* Public landing: one audience-matched offer list, never a second price-range layer. */
.lp-packages { padding-block-start: 64px; }
.lp-packages__advanced { margin-block: 0 18px; }
.lp-packages__advanced > summary {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--lp-line); border-radius: 14px;
    background: var(--lp-surface); color: var(--lp-teal-dark);
    font-size: .86rem; font-weight: 800; cursor: pointer;
}
.lp-packages__advanced[open] > summary { margin-block-end: 12px; }
.lp-offers-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lp-offers-stage > .lp-pkg__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; min-width: 0;
}
.lp-offers-stage .lp-pkg { min-width: 0; gap: 14px; padding: 28px 24px; }
.lp-offers-stage .lp-pkg__price { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.lp-offers-stage .lp-pkg__meta { margin: 0; font-size: .87rem; }
.lp-offers-stage .lp-pkg__audience { margin: 0; color: var(--lp-muted); font-size: .78rem; font-weight: 700; line-height: 1.65; }
.lp-offers-stage .lp-pkg__cta { margin-block-start: auto; }
.lp-offers-stage > .lp-pkg__empty, .lp-offers-stage > .lp-offers-more, .lp-offers-stage > .lp-pkg__extras { grid-column: 1; min-width: 0; }
.lp-offers-stage > .lp-pkg__extras { display: block; margin: 0; }
.lp-offers-stage .lp-pkg__placement {
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 12px 18px;
    min-height: 0; height: auto; min-width: 0; padding: 18px 22px;
}
.lp-offers-stage .lp-pkg__placement-icon { display: none; }
.lp-offers-stage .lp-pkg__placement > div { flex: 1 1 260px; min-width: 0; }
.lp-offers-stage .lp-pkg__placement strong { font-size: 1.15rem; }
.lp-offers-stage .lp-pkg__placement p { margin-block-start: 4px; font-size: .84rem; }
.lp-offers-stage .lp-pkg__placement a {
    flex: 0 1 auto; inline-size: auto; margin-block-start: 0;
    min-height: 44px; max-inline-size: 100%;
}
.lp-pkg__preselect {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    min-width: 0; padding: 20px 22px; border: 1px solid var(--lp-line);
    border-radius: var(--ui-radius-lg); background: var(--lp-surface);
}
.lp-pkg__preselect > i { flex: 0 0 42px; display: grid; place-items: center; font-size: 1.35rem; color: var(--lp-teal-dark); }
.lp-pkg__preselect > div { flex: 1 1 230px; min-width: 0; }
.lp-pkg__preselect strong { color: var(--lp-ink); font-size: 1rem; }
.lp-pkg__preselect p { margin: 4px 0 0; color: var(--lp-muted); font-size: .86rem; line-height: 1.75; }
.lp-pkg__preselect button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding-inline: 18px;
    border: 0; border-radius: var(--ui-radius-md); color: var(--lp-surface);
    background: var(--lp-teal-dark); font: inherit; font-weight: 800; cursor: pointer;
}
.lp-pkg__preselect button:focus-visible,
.lp-offers-more button:focus-visible,
.lp-packages__selection-status button:focus-visible { outline: 2px solid var(--lp-teal); outline-offset: 3px; }
.lp-offers-more { display: flex; justify-content: center; }
.lp-offers-more button {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding-inline: 18px; border-radius: 14px;
    border: 1px solid var(--lp-line); background: var(--lp-surface);
    color: var(--lp-teal-dark); font-weight: 800; cursor: pointer;
}
.lp-offers-more button[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 720px) {
    .lp-offers-stage > .lp-pkg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .lp-offers-stage > .lp-pkg__grid { grid-template-columns: minmax(0, 1fr); }
    .lp-offers-stage .lp-pkg { padding: 24px; }
    .lp-offers-stage .lp-pkg__placement a, .lp-pkg__preselect button { flex: 1 1 100%; }
    .lp-packages { padding-block-start: 44px; }
}

/* Accessible chooser filters and detail disclosures. */
.lp-packages__subtitle { max-inline-size: 36rem; }
.lp-packages__chooser {
    display: grid;
    gap: 16px;
    min-inline-size: 0;
    margin-block-end: 20px;
    padding: clamp(16px, 2.4vw, 26px);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
}
.lp-packages__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.lp-packages__choice { display: grid; align-content: start; gap: 10px; min-inline-size: 0; }
.lp-packages__question {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-inline-size: 0;
    color: var(--lp-ink);
    font-weight: 900;
    font-size: .99rem;
}
.lp-packages__question b {
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 10px;
    background: var(--lp-mint);
    color: var(--lp-teal-dark);
    font-family: var(--lp-font);
    font-size: .84rem;
}
.lp-packages__choice .lp-seg {
    width: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    background: var(--lp-bg);
    box-shadow: none;
}
.lp-packages__choice .lp-seg__btn { flex: 1 0 auto; }
.lp-packages__choice-note { margin: 0; color: var(--lp-muted); font-size: .77rem; line-height: 1.7; }
.lp-packages__audience {
    display: grid;
    gap: 12px;
    scroll-margin-block-start: 115px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--lp-line);
}
.lp-packages__audience-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; }
.lp-packages__audience-heading small { color: var(--lp-muted); font-size: .78rem; font-weight: 700; line-height: 1.75; }
.lp-packages__audience .lp-filter__label { min-inline-size: 4.5rem; font-size: .84rem; }
.lp-packages__audience .lp-opt { min-height: 44px; padding-inline: 14px; font-size: .86rem; }
.lp-packages__selection-status {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--lp-teal-dark);
    font-weight: 800;
    font-size: .84rem;
    line-height: 1.65;
}
.lp-packages__selection-status button {
    min-block-size: 44px;
    padding-inline: 12px;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    background: var(--lp-bg);
    color: var(--lp-teal-dark);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}
.lp-packages__advanced { margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--lp-line); }
.lp-packages__advanced > summary { gap: 9px; }
.lp-packages__advanced[open] > summary { margin-block-end: 12px; }
.lp-packages__advanced .lp-filter__row { margin-block-start: 4px; }
.lp-packages__result-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 15px;
    margin-block: 0 14px;
}
.lp-packages__result-heading strong { font-size: 1.05rem; color: var(--lp-ink); }
.lp-packages__result-heading span { color: var(--lp-muted); font-size: .8rem; font-weight: 600; }
.lp-pkg__details {
    min-inline-size: 0;
    border-block-start: 1px solid var(--lp-line);
    padding-block-start: 8px;
}
.lp-pkg__details > summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-block-size: 44px;
    color: var(--lp-teal-dark);
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
}
.lp-pkg__details > summary i { transition: transform .15s ease; }
.lp-pkg__details[open] > summary i { transform: rotate(180deg); }
.lp-pkg__details ul {
    display: grid;
    gap: 7px;
    padding-inline-start: 19px;
    margin: 3px 0 8px;
    color: var(--lp-text);
    font-size: .81rem;
    font-weight: 650;
    line-height: 1.7;
}
.lp-pkg__details li { padding-inline-start: 1px; }
.lp-pkg.is-popular .lp-pkg__details { border-color: var(--lp-on-dark); }
.lp-pkg.is-popular .lp-pkg__details > summary,
.lp-pkg.is-popular .lp-pkg__details ul { color: var(--lp-surface); }
.lp-pkg.is-popular .lp-pkg__details > summary i { color: var(--lp-gold); }
@media (max-width: 760px) {
    .lp-packages__choices { grid-template-columns: minmax(0, 1fr); }
    .lp-packages__choice .lp-seg { width: 100%; }
}
@media (max-width: 560px) {
    .lp-packages__chooser { gap: 14px; padding: 16px; border-radius: 22px; }
    .lp-packages__choice .lp-seg__btn { flex: 1 1 auto; padding-inline: 10px; font-size: .82rem; }
    .lp-packages__audience .lp-filter__label { flex-basis: 100%; }
    .lp-packages__audience .lp-opt { flex: 1 1 auto; justify-content: center; }
    .lp-packages__advanced > summary { width: 100%; text-align: start; }
    .lp-packages__result-heading { margin-block-start: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-pkg__details > summary i { transition: none; }
}

/* ---------- كيف تبدأ ---------- */
.lp-start__card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 28px; align-items: start; padding: clamp(26px, 3.4vw, 42px); }
.lp-start__copy h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
.lp-start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; }
.lp-start__login { display: inline-flex; align-items: center; min-height: 44px; color: var(--lp-teal) !important; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-steps span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; font-family: var(--lp-display); font-size: 1.4rem; font-weight: 700; }
.lp-steps .is-c0 { background: var(--lp-mint); color: var(--lp-mint-ink); }
.lp-steps .is-c1 { background: var(--lp-gold); color: var(--lp-gold-text); }
.lp-steps .is-c2 { background: var(--lp-lav); color: var(--lp-lav-ink); }
.lp-steps h3 { margin: 14px 0 4px; font-size: 1.15rem; font-weight: 900; }
.lp-steps p { margin: 0; color: var(--lp-muted); font-weight: 600; line-height: 1.8; }
@media (max-width: 900px) { .lp-start__card { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
    .lp-steps { grid-template-columns: 1fr; gap: 14px; }
    .lp-steps li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: center; }
    .lp-steps span { grid-row: span 2; }
    .lp-steps h3 { margin: 0; }
}

/* ---------- المعلمون ولوحة الشرف: الصف المزدوج مطابق للمرجع ---------- */
.lp-teachers-community { padding-block: 40px; }
.lp-teachers-community__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; align-items: stretch;
}
.lp-teachers__panel,
.lp-honor { min-width: 0; padding: 34px; border-radius: 34px; }
.lp-teachers__panel h2,
.lp-honor h2 {
    margin: 0 0 20px; font-family: var(--lp-display);
    font-size: clamp(1.7rem, 2.6vw, 2.125rem); line-height: 1.3;
}
.lp-teachers__panel h2 { color: var(--lp-surface); }
.lp-teachers__heading {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-block-end: 20px;
}
.lp-teachers__heading h2 { margin: 0; }
.lp-teachers__controls { display: flex; align-items: center; gap: 6px; }
.lp-teachers__controls button {
    display: grid; place-items: center; flex: 0 0 44px;
    inline-size: 44px; block-size: 44px; padding: 0;
    border: 1px solid rgba(255,255,255,.24); border-radius: var(--ui-radius-pill);
    background: rgba(255,255,255,.08); color: var(--lp-surface);
    font: inherit; cursor: pointer;
}
.lp-teachers__controls button:hover { background: rgba(255,255,255,.17); }
.lp-teachers__controls button:focus-visible { outline: 2px solid var(--lp-mint); outline-offset: 2px; }
.lp-teachers__featured { display: flex; flex-direction: column; gap: 12px; }
.lp-teachers__featured-row {
    display: flex; align-items: center; gap: 14px; min-height: 88px;
    padding: 14px; border-radius: 20px; background: rgba(255,255,255,.07);
}
.lp-teachers__avatar {
    display: grid; place-items: center; overflow: hidden; flex: 0 0 54px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--lp-gold); color: var(--lp-gold-ink);
    font-size: 1.3rem; font-weight: 900;
}
.lp-teachers__featured-row:nth-child(3n+2) .lp-teachers__avatar {
    background: var(--lp-mint); color: var(--lp-mint-ink);
}
.lp-teachers__featured-row:nth-child(3n+3) .lp-teachers__avatar {
    background: var(--lp-lav); color: var(--lp-lav-ink);
}
.lp-teachers__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-teachers__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-teachers__identity strong { color: var(--lp-surface); font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; }
.lp-teachers__identity small { color: var(--lp-on-dark); font-size: .76rem; line-height: 1.6; }
.lp-teachers__featured-row a {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    min-height: 44px; padding-inline: 8px;
    color: var(--lp-mint); font-size: .84rem; font-weight: 800; text-decoration: none;
}
.lp-teachers__empty { color: var(--lp-on-dark); font-weight: 700; }
.lp-honor { display: flex; flex-direction: column; }
.lp-honor__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-honor__list li { min-width: 0; }
.lp-honor__row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px;
    padding: 12px 16px; border: 0; border-radius: 18px;
    background: var(--lp-bg); text-align: start; cursor: pointer;
}
.lp-honor__row.is-p1 { background: var(--lp-gold-soft); }
.lp-honor__rank {
    display: grid; place-items: center; flex: 0 0 36px; height: 36px;
    border-radius: 12px; background: var(--lp-gold-text); color: var(--lp-surface);
    font-weight: 900;
}
.lp-honor__row.is-p2 .lp-honor__rank { background: var(--lp-muted); }
.lp-honor__row.is-p3 .lp-honor__rank { background: var(--lp-gold-ink); }
.lp-honor__row strong {
    flex: 1; min-width: 0; color: var(--lp-ink); font-size: .9rem;
    font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-honor__points { flex: 0 0 auto; color: var(--lp-gold-text); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.lp-honor__empty { color: var(--lp-muted); font-size: .92rem; }
.lp-honor__ticker { margin-block-start: auto; padding-block-start: 12px; }
.lp-honor__ticker .lp-topstrip { padding: 0; }
.lp-honor__ticker .lp-topstrip .lp-container { width: 100%; }
.lp-honor__ticker .lp-topstrip__in {
    gap: 8px; padding: 8px 0; border: 0; border-top: 1px solid var(--lp-line); border-radius: 0;
}
.lp-honor__ticker .lp-topstrip__title { font-size: .76rem; }
.lp-honor__ticker .lp-topstrip__viewport { max-width: none; }
.lp-honor__ticker .lp-topstrip__item { flex-basis: 172px; }
.lp-honor__ticker .lp-topstrip__item strong { font-size: .76rem; }
.lp-honor__ticker .lp-topstrip__item small { font-size: .69rem; }
@media (max-width: 900px) {
    .lp-teachers-community__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .lp-teachers__panel, .lp-honor { padding: 22px; border-radius: 26px; }
    .lp-honor__row { padding-inline: 10px; gap: 9px; }
    .lp-honor__ticker .lp-topstrip__in { display: flex; flex-wrap: wrap; }
    .lp-honor__ticker .lp-topstrip__title { width: 100%; }
    .lp-honor__ticker .lp-topstrip__viewport { max-width: calc(100% - 138px); }
    .lp-honor__ticker .lp-topstrip__controls { display: flex; }
}


/* ---------- أسئلة شائعة ---------- */
.lp-faq__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; align-items: start; }
.lp-faq__item { border-radius: 22px; background: #fff; transition: box-shadow .15s ease; }
.lp-faq__item[open] { box-shadow: var(--lp-shadow); }
.lp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 14px 22px; color: var(--lp-ink); font-size: 1.02rem; font-weight: 900; cursor: pointer; list-style: none; }
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef4f2; color: var(--lp-teal); transition: transform .2s ease; }
.lp-faq__item[open] summary i { transform: rotate(45deg); background: var(--lp-teal); color: #fff; }
.lp-faq__item summary:focus-visible { outline-offset: -3px; border-radius: 22px; }
.lp-faq__item p { margin: 0; padding: 0 22px 20px; color: var(--lp-text); font-size: .95rem; font-weight: 600; line-height: 2; }

/* ---------- الفوتر المختصر كما في المرجع ---------- */
.lp-footer { padding-block: 28px 32px; }
.lp-footer__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    min-height: 72px; padding: 14px 26px; border-radius: 26px;
    color: var(--lp-on-dark);
}
.lp-footer__brand strong { color: var(--lp-surface); font-family: var(--lp-display); font-size: 1.1rem; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lp-footer__links a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--lp-on-dark); font-size: .84rem; font-weight: 700; text-decoration: none;
}
.lp-footer__links a:hover { color: var(--lp-gold); }
.lp-footer__copy { margin: 0; margin-inline-start: auto; color: var(--lp-on-dark); font-size: .8rem; }
@media (max-width: 720px) {
    .lp-footer__inner { padding: 20px; }
    .lp-footer__copy { flex-basis: 100%; margin-inline-start: 0; }
}


/* ---------- نافذة سجل الطالب ---------- */
.lp-dialog { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: min(86dvh, 760px); margin: auto; padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--lp-ink); box-shadow: 0 30px 80px rgba(9, 42, 37, .35); overflow: hidden; }
.lp-dialog[open] { display: flex; flex-direction: column; animation: lpDialogIn .2s ease-out; }
.lp-dialog::backdrop { background: rgba(9, 32, 29, .55); backdrop-filter: blur(2px); }
.lp-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--lp-line); }
.lp-dialog__head h2 { margin: 0; font-family: var(--lp-display); font-size: 1rem; font-weight: 700; }
.lp-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef4f2; color: var(--lp-ink); cursor: pointer; }
.lp-dialog__body { padding: 18px 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.lp-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0; color: var(--lp-muted); }
.lp-loading span { width: 30px; height: 30px; border: 3px solid var(--lp-mint); border-top-color: var(--lp-teal); border-radius: 50%; animation: lpSpin .8s linear infinite; }
.lp-loading p { margin: 0; font-size: .85rem; }
@keyframes lpDialogIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes lpSpin { to { transform: rotate(360deg); } }
@media (max-width: 420px) {
    .lp-dialog { width: calc(100vw - 12px); border-radius: 20px; }
    .lp-dialog__head { padding: 12px 14px; }
    .lp-dialog__body { padding: 14px 10px 16px; }
}

/* ---------- عرض الجوال العام ---------- */
@media (max-width: 560px) {
    .lp-container { width: calc(100% - 24px); }
    .lp-nav { padding-block-start: 10px; }
    .lp-nav__inner { min-height: 60px; padding: 8px; padding-inline-start: 10px; border-radius: 20px; }
    .lp-brand__mark { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
    .lp-section { padding-block: 20px; }
    .lp-tile { border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal-up { opacity: 1; transform: none; transition: none; }
    .lp-live-dot, .lp-loading span, .lp-dialog[open] { animation: none; }
    .lp-pkg, .lp-button, .lp-tile--live, .lp-podium__item { transition: none; }
    .lp-pkg:hover, .lp-button:hover, .lp-tile--live:hover, .lp-podium__item:hover { transform: none; }
}

@media print {
    .lp-nav, .lp-topstrip, .lp-more, .lp-dialog { display: none !important; }
    .reveal-up { opacity: 1; transform: none; }
}

/* TahfeezM shared nav motion: preserve landing's unique branded shell. 
   Mobile menu is always rendered, but hidden from pointer/focus until opened;
   unlike display:none, it can animate both entrance and exit. */
.lp-nav__toggle .bi{display:inline-block;transition:transform .21s cubic-bezier(.2,.8,.2,1)}
.lp-nav__toggle[aria-expanded="true"] .bi{transform:rotate(90deg)}
.lp-nav__links a,.lp-access-trigger{
 transition:background-color .18s cubic-bezier(.2,.8,.2,1),color .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1)
}
@container lpnav (max-width:62em) {
 .lp-nav__menu{
   display:flex;visibility:hidden;opacity:0;pointer-events:none;
   transform:translateY(-7px);
   transition:opacity .2s cubic-bezier(.2,.8,.2,1),transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;
 }
 .lp-nav__menu.is-open{
   visibility:visible;opacity:1;pointer-events:auto;
   transform:none;transition-delay:0s;
 }
}
@media(prefers-reduced-motion:reduce) {
 .lp-nav__toggle .bi,.lp-nav__menu,.lp-nav__links a,.lp-access-trigger{animation:none!important;transition:none!important}
 .lp-nav__toggle .bi{transform:none!important}
}
@media(forced-colors:active){.lp-nav__toggle:focus-visible,.lp-nav__links a:focus-visible{outline:2px solid Highlight}}