/* =====================================================================
   Point B Academy — Modern Design System
   ===================================================================== */
:root {
    /* Brand colours. Admin → Settings → Appearance overrides these on every page (partials/theme). */
    --lf-primary: #4f46e5;
    --lf-primary-rgb: 79,70,229;
    --lf-primary-2: #7c3aed;
    --lf-primary-2-rgb: 124,58,237;
    --lf-primary-dark: #4338ca;
    --lf-primary-mid: color-mix(in srgb, var(--lf-primary) 50%, var(--lf-primary-2));
    --bs-primary: var(--lf-primary);
    --bs-primary-rgb: var(--lf-primary-rgb);
    --bs-link-color: var(--lf-primary);
    --bs-link-color-rgb: var(--lf-primary-rgb);
    --bs-link-hover-color: var(--lf-primary-dark);
    --bs-link-hover-color-rgb: var(--lf-primary-rgb);
    --lf-ink: #0f172a;
    --lf-muted: #64748b;
    --lf-bg: #f7f8fc;
    --lf-card: #ffffff;
    --lf-border: #eceef3;
    --lf-radius: 16px;
    --lf-radius-lg: 22px;
    --lf-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
    --lf-shadow: 0 10px 34px rgba(15,23,42,.07);
    --lf-shadow-lg: 0 24px 60px rgba(var(--lf-primary-rgb),.16);
    --lf-grad: linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-2) 100%);
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--lf-ink);
    background-color: var(--lf-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold { font-weight: 700; letter-spacing: -0.02em; }
/* Website templates (public/css/templates/*.css) set --lf-font-heading on <body>; the default inherits the body face. */
h1, h2, h3, h4, h5, h6 { font-family: var(--lf-font-heading, inherit); }
.display-1, .display-2, .display-3, .display-4, .display-5 { font-weight: 800; letter-spacing: -0.035em; }
a { text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--lf-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 12px; padding: .6rem 1.3rem; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn-lg { padding: .85rem 1.8rem; border-radius: 14px; }
.btn-sm { border-radius: 9px; padding: .4rem .85rem; }
.btn-primary, .bg-primary { background-color: var(--lf-primary) !important; border-color: var(--lf-primary) !important; }
.btn-primary { background-image: var(--lf-grad); border: 0 !important; box-shadow: 0 8px 20px rgba(var(--lf-primary-rgb),.28); }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--lf-primary-rgb),.38); background-image: var(--lf-grad); }
.btn-light { box-shadow: 0 6px 18px rgba(15,23,42,.08); border: 0; }
.btn-light:hover { transform: translateY(-2px); }
.text-primary { color: var(--lf-primary) !important; }
.btn-outline-primary { color: var(--lf-primary); border-color: var(--lf-primary); border-width: 1.5px; }
.btn-outline-primary:hover { background-color: var(--lf-primary); border-color: var(--lf-primary); transform: translateY(-2px); }
.btn-outline-light:hover { transform: translateY(-2px); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); box-shadow: var(--lf-shadow-sm); }
.shadow-sm { box-shadow: var(--lf-shadow-sm) !important; }
.shadow, .shadow-lg { box-shadow: var(--lf-shadow) !important; }
.rounded-4 { border-radius: var(--lf-radius-lg) !important; }

/* ---------- Brand ---------- */
.navbar-brand { font-weight: 800; letter-spacing: -0.03em; }
.brand-logo { color: var(--lf-primary); }

/* ---------- Storefront header ---------- */
/* Utility strip above the header — only templates that ask for one render it (partials/frontend/topbar). */
.lf-topstrip { background: #0f172a; color: #cbd5e1; font-size: .8rem; }
.lf-topstrip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.lf-topstrip-contact, .lf-topstrip-links { display: flex; align-items: center; gap: 1.25rem; }
.lf-topstrip a { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; opacity: .85; transition: opacity .15s ease; }
.lf-topstrip a:hover { opacity: 1; color: #fff; }
.lf-topstrip-cta { font-weight: 700; }
.lf-header {
    position: sticky; top: 0; z-index: 1030;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* Only once the page has moved does the bar separate itself from the hero. */
.lf-header.is-scrolled { border-bottom-color: var(--bs-border-color); box-shadow: 0 6px 24px rgba(15,23,42,.06); }

.lf-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 76px; }

.lf-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: 0 0 auto; }
.lf-brand img { height: 48px; width: auto; max-width: 240px; object-fit: contain; }
@media (max-width: 575.98px) { .lf-brand img { height: 40px; max-width: 180px; } }
/* Uploaded logos (Admin → Settings → General). The light/dark pair swaps with the theme toggle. */
.lf-logo-dark { display: none; }
[data-bs-theme="dark"] .lf-logo-light { display: none; }
[data-bs-theme="dark"] .lf-logo-dark { display: inline-block; }
/* Toned action buttons: a soft tint of one colour that fills in on hover. */
.lf-btn-tone { --tone: 99,102,241; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; border-radius: 12px; padding: .55rem 1rem;
    color: rgb(var(--tone)); background: rgba(var(--tone), .1); border: 1px solid rgba(var(--tone), .22); transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.lf-btn-tone i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--tone), .14); font-size: .95rem; }
.lf-btn-tone:hover, .lf-btn-tone:focus-visible { color: #fff; background: rgb(var(--tone)); border-color: rgb(var(--tone)); box-shadow: 0 8px 20px rgba(var(--tone), .3); transform: translateY(-1px); }
.lf-btn-tone:hover i, .lf-btn-tone:focus-visible i { background: rgba(255,255,255,.2); }
.lf-tone-sky { --tone: 14,165,233; } .lf-tone-violet { --tone: 139,92,246; } .lf-tone-emerald { --tone: 16,185,129; }
.lf-tone-amber { --tone: 217,119,6; } .lf-tone-rose { --tone: 225,29,72; } .lf-tone-slate { --tone: 71,85,105; }
[data-bs-theme="dark"] .lf-tone-slate { --tone: 148,163,184; }
/* Waving hand beside "Welcome back": a few waves, a pause, again. */
.lf-wave { display: inline-block; transform-origin: 70% 70%; animation: lf-wave 2.6s ease-in-out infinite; }
@keyframes lf-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    6% { transform: rotate(16deg); } 12% { transform: rotate(-10deg); } 18% { transform: rotate(16deg); }
    24% { transform: rotate(-6deg); } 30% { transform: rotate(12deg); } 36% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .lf-wave { animation: none; } }
.lf-auth-logo { max-height: 64px; max-width: 280px; width: auto; object-fit: contain; }
.lf-logo-knockout { filter: brightness(0) invert(1); } /* no dark logo uploaded: knock the light one out to white */
.lf-footer-logo img { max-height: 56px; max-width: 260px; width: auto; object-fit: contain; }
.lf-site-logo { max-height: 48px; max-width: 240px; width: auto; object-fit: contain; vertical-align: middle; }
.lf-brand-mark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
    background: var(--lf-grad); color: #fff; font-size: 1.05rem;
}
.lf-brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.12rem; color: var(--bs-emphasis-color); }

.lf-nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: .5rem; }
.lf-nav-link {
    padding: .5rem .8rem; border-radius: 10px; font-weight: 600; font-size: .92rem;
    color: var(--bs-secondary-color); text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.lf-nav-link:hover { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }
.lf-nav-link.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .10); }

.lf-header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; min-width: 0; }
/* When the bar gets tight the search box gives way; the chips (EN · USD, the user's name) never break onto two lines. */
.lf-header-actions .lf-searchbox { flex: 0 1 210px; min-width: 130px; }
.lf-header-actions .lf-searchbox:focus-within { flex-basis: 300px; }
.lf-nav-btn-text, .lf-user-name { white-space: nowrap; }
.lf-nav { flex: 0 0 auto; }

/* Search: a pill that grows when it has focus. */
.lf-searchbox {
    display: flex; align-items: center; gap: .5rem;
    background: var(--bs-tertiary-bg); border: 1px solid transparent; border-radius: 999px;
    padding: .4rem .7rem .4rem .85rem; width: 210px;
    transition: width .18s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lf-searchbox:focus-within {
    width: 300px; background: var(--bs-body-bg);
    border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14);
}
.lf-searchbox i { color: var(--bs-secondary-color); font-size: .9rem; }
.lf-searchbox input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-size: .9rem; color: var(--bs-body-color);
}
.lf-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lf-searchbox kbd {
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 6px;
    color: var(--bs-secondary-color); font-size: .68rem; padding: .05rem .35rem; line-height: 1.4;
}
.lf-searchbox:focus-within kbd { display: none; }

/* Public demo: "Home ▾" lists the website templates as homepage styles (partials/frontend/demo-menu).
   ONE background on the group — the link and the caret are transparent inside it — so it reads as a single pill. */
.lf-nav-demos { position: relative; display: inline-flex; align-items: stretch; border-radius: 10px; transition: background .15s ease; }
.lf-nav-demos .lf-nav-link, .lf-nav-demos .lf-nav-link.is-active { background: transparent; border-radius: 0; padding-inline-end: .3rem; }
.lf-nav-caret {
    display: inline-grid; place-items: center; align-self: stretch; padding: 0 .5rem 0 .1rem; border: 0; border-radius: 0; background: transparent;
    color: var(--bs-secondary-color); font-size: .7rem; transition: color .15s ease, transform .15s ease;
}
.lf-nav-demos:hover, .lf-nav-demos:has(.lf-nav-caret[aria-expanded="true"]) { background: var(--bs-tertiary-bg); }
.lf-nav-demos:hover .lf-nav-link, .lf-nav-demos:hover .lf-nav-caret, .lf-nav-caret[aria-expanded="true"] { color: var(--bs-emphasis-color); }
.lf-nav-demos.is-active, .lf-nav-demos.is-active:hover { background: rgba(var(--bs-primary-rgb), .10); }
.lf-nav-demos.is-active .lf-nav-link, .lf-nav-demos.is-active .lf-nav-caret, .lf-nav-demos.is-active:hover .lf-nav-link, .lf-nav-demos.is-active:hover .lf-nav-caret { color: var(--bs-primary); }
.lf-nav-demos:hover .lf-nav-caret i, .lf-nav-caret[aria-expanded="true"] i { transform: translateY(1px); }
.lf-demo-menu { min-width: 260px; padding: .4rem; border-radius: 14px; margin-top: .35rem !important; }
/* Positioned by CSS, not Popper (the toggle is data-bs-display="static"), so hover and click open it in the same place:
   directly under "Home". Without this an absolutely-positioned child of the flex group sits at its static position — vertically centred on the link. */
.lf-nav-demos > .lf-demo-menu { top: 100%; inset-inline-start: 0; inset-inline-end: auto; bottom: auto; }
/* Hover opens on a mouse; Bootstrap's toggle still handles touch and keyboard. */
@media (hover: hover) and (min-width: 992px) {
    .lf-nav-demos:hover > .lf-demo-menu { display: block; }
    .lf-nav-demos::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; } /* bridge the gap so the menu does not close on the way down */
}
.lf-demo-menu-head { display: flex; flex-direction: column; padding: .45rem .6rem .35rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); }
.lf-demo-menu-head span { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .72rem; }
.lf-demo-item { display: flex; align-items: center; gap: .7rem; border-radius: 9px; padding: .5rem .6rem; }
.lf-demo-item.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }
.lf-demo-item.is-active small { color: var(--bs-primary) !important; opacity: .8; }
.lf-demo-swatch { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.lf-chip .lf-demo-swatch { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; margin-inline-end: .35rem; vertical-align: -2px; }
.lf-drawer-demos .lf-chip { display: inline-flex; align-items: center; }

/* Icon buttons in the header cluster. */
.lf-nav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 38px; height: 38px; padding: 0 .55rem;
    border: 0; border-radius: 11px; background: transparent;
    color: var(--bs-secondary-color); font-size: 1rem; font-weight: 600; text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.lf-nav-btn:hover, .lf-nav-btn:focus-visible, .lf-nav-btn[aria-expanded="true"] {
    color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg);
}
.lf-nav-btn-text { font-size: .8rem; letter-spacing: .01em; }

.lf-cart { position: relative; }
.lf-cart-count {
    position: absolute; top: 3px; inset-inline-end: 2px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--bs-body-bg);
}

/* Auth buttons: a quiet one and a loud one. */
.lf-btn-ghost, .lf-btn-solid {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 1rem; border-radius: 11px;
    font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lf-btn-ghost { color: var(--bs-emphasis-color); background: transparent; border: 1px solid var(--bs-border-color); }
.lf-btn-ghost:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.lf-btn-solid {
    color: #fff; border: 0;
    background: var(--lf-grad);
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), .28);
}
.lf-btn-solid:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--bs-primary-rgb), .34); }

/* Signed-in chip. */
.lf-user {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 .5rem 0 .35rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--bs-emphasis-color); font-weight: 600; font-size: .88rem;
}
.lf-user:hover, .lf-user[aria-expanded="true"] { background: var(--bs-tertiary-bg); }
.lf-user img { border-radius: 50%; object-fit: cover; }
.lf-user i { font-size: .7rem; color: var(--bs-secondary-color); }
.lf-user-menu { min-width: 250px; padding: .4rem; border-radius: 14px; }
.lf-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 9px; padding: .5rem .6rem; }
.lf-user-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; }
.lf-user-head img { border-radius: 50%; object-fit: cover; }

/* Language + currency menu. */
.lf-region-menu { min-width: 240px; border-radius: 14px; overflow: hidden; }
.lf-region-sec { padding: .4rem; }
.lf-region-sec + .lf-region-sec { border-top: 1px solid var(--bs-border-color); }
.lf-region-head {
    padding: .35rem .6rem; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color);
}
.lf-region-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: .5rem .6rem; border: 0; border-radius: 9px;
    background: transparent; color: var(--bs-body-color); font-size: .88rem; text-align: start;
}
.lf-region-item:hover { background: var(--bs-tertiary-bg); }
.lf-region-item.is-active { color: var(--bs-primary); font-weight: 600; background: rgba(var(--bs-primary-rgb), .08); }
.lf-region-code { font-weight: 700; }

/* Inline variant used inside the drawer. */
.lf-region-group + .lf-region-group { margin-top: .9rem; }
.lf-region-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.lf-region-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lf-chip {
    border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-body-color);
    border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 600;
}
.lf-chip.is-active { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }

/* Mobile drawer. */
.lf-drawer { width: min(340px, 88vw); }
.lf-drawer .offcanvas-header { border-bottom: 1px solid var(--bs-border-color); }
.lf-drawer .lf-searchbox { width: 100%; }
.lf-drawer .lf-searchbox:focus-within { width: 100%; }
.lf-drawer-nav { display: flex; flex-direction: column; gap: .1rem; }
.lf-drawer-nav a {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .75rem; border-radius: 10px;
    color: var(--bs-body-color); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.lf-drawer-nav a:hover { background: var(--bs-tertiary-bg); }
.lf-drawer-nav a.is-active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .10); }
.lf-drawer-foot { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; }

/* Laptop widths: the desktop nav is still shown, so trim what can be trimmed rather than let the bar overflow. */
@media (max-width: 1399.98px) {
    .lf-user-name { display: none; } /* avatar + caret; the name is in the menu head */
    .lf-header-actions .lf-searchbox { flex-basis: 170px; }
}
@media (max-width: 1199.98px) {
    .lf-header-inner { gap: .6rem; }
    .lf-nav { margin-inline-start: 0; gap: 0; }
    .lf-nav-link { padding: .5rem .55rem; font-size: .88rem; }
    .lf-header-actions { gap: .2rem; }
    .lf-header-actions .lf-searchbox { flex-basis: 140px; min-width: 120px; }
}
@media (max-width: 991.98px) {
    .lf-header-inner { min-height: 60px; gap: .5rem; }
    .lf-searchbox { width: 180px; }
    .lf-searchbox:focus-within { width: 220px; }
}

@media (max-width: 575.98px) {
    .lf-brand-name { display: none; }
}

/* Rounded pill input, used by the newsletter form. */
.lf-search { background: var(--bs-tertiary-bg); border: 1px solid transparent; border-radius: 999px; }
.lf-search:focus {
    background: var(--bs-body-bg); border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    color: #fff;
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(var(--lf-primary-2-rgb),.55) 0%, transparent 60%),
        radial-gradient(50% 70% at 10% 90%, rgba(56,189,248,.35) 0%, transparent 55%),
        linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%);
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 22px 22px; opacity: .4; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); border-radius: 999px; }

/* Hero v2 — aurora orbs, glass search, social proof, floating course card */
.hero--v2 { --hero-ink: #fff; isolation: isolate; }
.hero--v2::after { opacity: .28; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; animation: lfOrb 14s ease-in-out infinite alternate; }
.hero-orb--a { width: 560px; height: 560px; right: -140px; top: -220px; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(var(--lf-primary-2-rgb),.0) 65%); }
.hero-orb--b { width: 460px; height: 460px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(56,189,248,.6), transparent 65%); animation-delay: -7s; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%); }
@keyframes lfOrb { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px,30px,0) scale(1.12); } }

.hero-badge--live { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: lfPulse 1.8s ease-out infinite; }
@keyframes lfPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.65); } 100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); } }

.hero-title { line-height: 1.05; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.hero-hl { position: relative; color: #fde68a; white-space: nowrap; }
.hero-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .32em; z-index: -1; border-radius: 4px;
    background: rgba(253,230,138,.16); transform: skewX(-8deg); }
.hero-lede { color: rgba(255,255,255,.78); max-width: 560px; font-size: 1.15rem; }

.hero-search { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); box-shadow: 0 22px 50px rgba(0,0,0,.22), 0 0 0 6px rgba(255,255,255,.12); max-width: 560px; align-items: center; transition: box-shadow .2s, transform .2s; }
.hero-search:focus-within { box-shadow: 0 26px 60px rgba(0,0,0,.28), 0 0 0 6px rgba(255,255,255,.22); transform: translateY(-1px); }
.hero-search-ico { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lf-primary); font-size: 1.05rem; flex: 0 0 40px; margin-left: .35rem; }
.hero-search .form-control { box-shadow: none; padding-left: .25rem; font-size: 1rem; }
.hero-search .btn { box-shadow: 0 8px 20px rgba(var(--lf-primary-rgb),.35); }
.hero-chip { display: inline-flex; align-items: center; padding: .28rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); transition: background .15s, transform .15s; }
.hero-chip:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-1px); }

.hero-faces { align-items: center; }
.hero-faces img, .hero-face-more { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.9); object-fit: cover; margin-left: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.hero-faces img:first-child { margin-left: 0; }
.hero-face-more { display: grid; place-items: center; background: #0f172a; color: #fff; font-size: .68rem; font-weight: 800; }
.hero-stars { color: #fbbf24; letter-spacing: -1px; }
.hero-stat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }

.hero-visual { position: relative; padding: 28px 24px 52px; perspective: 1400px; }
.hero-glow { position: absolute; inset: 10% 8%; border-radius: 40px; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); filter: blur(30px); }
.hero-card { position: relative; display: block; width: min(420px, 100%); margin: 0 auto; background: #fff; color: var(--lf-ink); border-radius: 24px; padding: 10px;
    box-shadow: 0 40px 90px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.35) inset; transform: rotateY(-10deg) rotateX(4deg) rotate(1.5deg); transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; animation: lfFloat 7s ease-in-out infinite; }
.hero-card:hover { transform: rotateY(0) rotateX(0) rotate(0) translateY(-6px); box-shadow: 0 50px 100px rgba(0,0,0,.4); }
.hero-card-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; }
.hero-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.hero-card:hover .hero-card-media img { transform: scale(1.04); }
.hero-card-pill { position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,.92); color: var(--lf-primary); font-weight: 700; font-size: .72rem; padding: .28rem .65rem; border-radius: 999px; backdrop-filter: blur(4px); }
.hero-card-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: var(--lf-primary);
    background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(0,0,0,.28); padding-left: 4px; }
.hero-card-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: lfRing 2.2s ease-out infinite; }
@keyframes lfRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.hero-card-body { padding: .9rem .6rem .5rem; }
.hero-card-rating { color: #f59e0b; font-weight: 700; }
.hero-card-title { font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hero-card-price { font-weight: 800; color: var(--lf-primary); font-size: 1.05rem; }

.hero-float { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem .7rem .7rem; border-radius: 18px; color: var(--lf-ink);
    background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 44px rgba(0,0,0,.22); animation: lfFloat 6s ease-in-out infinite; }
.hero-float--tr { top: 0; right: -6px; animation-delay: -2s; }
.hero-float--bl { bottom: 22px; left: -10px; animation-delay: -4s; }
.hero-float--br { bottom: -6px; right: -2px; animation-delay: -1s; }
.hero-float-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: var(--lf-grad); box-shadow: 0 8px 18px rgba(var(--lf-primary-rgb),.35); }
.hero-float-ico--green { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 8px 18px rgba(16,185,129,.35); }
.hero-float-ring { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--lf-primary);
    background: conic-gradient(var(--lf-primary) calc(var(--p) * 1%), rgba(var(--lf-primary-rgb),.12) 0); }
.hero-float-ring span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
@keyframes lfFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .hero-card, .hero-float, .hero-orb, .hero-dot, .hero-card-play::before { animation: none; } }
[data-bs-theme="dark"] .hero-card, [data-bs-theme="dark"] .hero-float, [data-bs-theme="dark"] .hero-float-ring span { background: #131c31; color: #e2e8f0; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .hero-float .text-muted, [data-bs-theme="dark"] .hero-card .text-muted { color: #8b95ab !important; }
[data-bs-theme="dark"] .hero-search { background: rgba(19,28,49,.94); }
[data-bs-theme="dark"] .hero-search .form-control { color: #e2e8f0 !important; }

/* Hero layouts (Admin → Homepage → Hero → Layout) */
.hero-card--flat { transform: none; animation: none; width: 100%; box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.hero-card--flat:hover { transform: translateY(-4px); }
.hero-card--sm { width: 100%; padding: 8px; border-radius: 20px; animation: none; }
.hero-card--sm .hero-card-media { border-radius: 14px; }
.hero-card--sm .hero-card-body { padding: .7rem .4rem .3rem; }
.hero-card--sm .hero-card-title { font-size: .95rem; }
.hero-card--sm .hero-card-play { width: 46px; height: 46px; font-size: 1.3rem; }

/* Centered: three cards fanned out, the middle one lifted */
.hero--centered .container { padding-bottom: 0 !important; }
.hero-showcase { display: flex; justify-content: center; align-items: flex-end; gap: 1.25rem; margin: 3rem auto 0; max-width: 1040px; perspective: 1600px; position: relative; z-index: 1; }
.hero-showcase .hero-card { flex: 1 1 0; max-width: 340px; transform-style: preserve-3d; }
.hero-showcase .hero-card--n1 { transform: rotateY(14deg) translateY(28px); }
.hero-showcase .hero-card--n2 { transform: translateY(0) scale(1.06); z-index: 2; box-shadow: 0 46px 90px rgba(0,0,0,.4); }
.hero-showcase .hero-card--n3 { transform: rotateY(-14deg) translateY(28px); }
.hero-showcase .hero-card:hover { transform: translateY(-8px) scale(1.06); z-index: 3; }
.hero-statbar { position: relative; z-index: 2; margin-top: 3.5rem; padding: 1.4rem 0; background: rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.hero-statbar .hero-stats { gap: 2.5rem 4rem !important; }
@media (max-width: 767.98px) { .hero-statbar { margin-top: 2rem; } }

/* Photo: full-bleed image with a dark-to-brand shade and a glass panel */
.hero--photo { background: #0f172a; }
.hero--photo::after { display: none; }
.hero-photo-bg { position: absolute; inset: 0; background: var(--hero-photo) center / cover no-repeat; transform: scale(1.04); animation: lfKen 24s ease-in-out infinite alternate; }
@keyframes lfKen { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero-photo-shade { position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.72) 45%, rgba(var(--lf-primary-rgb),.35) 100%),
                linear-gradient(0deg, rgba(15,23,42,.6) 0%, transparent 40%); }
.hero--photo .hero-lede { color: rgba(255,255,255,.72); }
.hero-glass { padding: 1.25rem; border-radius: 28px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.35); color: #fff; }
.hero-glass-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .4rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .74rem; font-weight: 600; text-align: center; }
.hero-glass-tile i { font-size: 1.15rem; color: #fde68a; }

/* Bento: light surface, gradient headline, tile grid */
.hero--bento { color: var(--lf-ink); background: radial-gradient(60% 70% at 90% 0%, rgba(var(--lf-primary-2-rgb),.16) 0%, transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(56,189,248,.14) 0%, transparent 55%), var(--lf-bg); }
.hero--bento::after { background-image: radial-gradient(rgba(var(--lf-primary-rgb),.16) 1px, transparent 1px); opacity: .5; }
.hero--bento .hero-orb { opacity: .35; }
.hero--bento .hero-orb--a { background: radial-gradient(circle, rgba(var(--lf-primary-2-rgb),.5), transparent 65%); }
.hero--bento .hero-badge { background: rgba(var(--lf-primary-rgb),.08); border-color: rgba(var(--lf-primary-rgb),.18); color: var(--lf-primary); box-shadow: none; }
.hero--bento .hero-title { color: var(--lf-ink); }
.hero--bento .hero-hl { color: transparent; background: var(--lf-grad); -webkit-background-clip: text; background-clip: text; }
.hero--bento .hero-hl::after { background: rgba(var(--lf-primary-rgb),.14); }
.hero--bento .hero-lede { color: var(--lf-muted); }
.hero--bento .hero-search { box-shadow: 0 18px 44px rgba(var(--lf-primary-rgb),.16), 0 0 0 1px var(--lf-border); }
.hero--bento .hero-chip { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); border-color: rgba(var(--lf-primary-rgb),.16); }
.hero--bento .hero-chip:hover { background: rgba(var(--lf-primary-rgb),.16); color: var(--lf-primary); }
.hero--bento .hero-faces img, .hero--bento .hero-faces .hero-face-more { border-color: var(--lf-card); }
.hero--bento .opacity-75 { color: var(--lf-muted); opacity: 1 !important; }
.hero-bento { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto auto; gap: .9rem; }
.hero-bento-tile { position: relative; overflow: hidden; padding: 1.1rem; border-radius: 20px; background: var(--lf-card); border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow-sm); transition: transform .2s, box-shadow .2s; }
.hero-bento-tile:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); }
.hero-bento-tile--course { grid-row: 1 / 3; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hero-bento-tile--course:hover { transform: none; box-shadow: none; }
.hero-bento-tile--grad { grid-column: 2 / 4; color: #fff; background: var(--lf-grad); border: 0; box-shadow: 0 16px 34px rgba(var(--lf-primary-rgb),.3); }
.hero-bento-tile--wide { grid-column: 1 / 4; }
.hero-bento-tile--grad .opacity-75 { color: rgba(255,255,255,.82); }
.hero-bento-bg { position: absolute; right: -10px; bottom: -18px; font-size: 6rem; opacity: .16; }
.hero--bento .hero-card { border: 1px solid var(--lf-border); }
[data-bs-theme="dark"] .hero--bento { background: radial-gradient(60% 70% at 90% 0%, rgba(var(--lf-primary-2-rgb),.22) 0%, transparent 60%), #0b1120; }
[data-bs-theme="dark"] .hero--bento .hero-search { box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px var(--lf-border); }

/* ---------- Section helpers ---------- */
.section { padding: 5rem 0; }
.eyebrow { color: var(--lf-primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.text-gradient { background: var(--lf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Category tiles ---------- */
.category-tile { background:#fff; border:1px solid var(--lf-border); border-radius: var(--lf-radius); padding: 1.25rem; transition: transform .15s, box-shadow .15s, border-color .15s; height: 100%; }
.category-tile:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); border-color: transparent; }
.category-ico { width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 1.4rem; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); }

/* ---------- Course card ---------- */
.course-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; background: var(--lf-card); }
.course-card:hover { transform: translateY(-6px); box-shadow: var(--lf-shadow-lg); }
.course-thumb-wrap { position: relative; overflow: hidden; }
.course-thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .4s ease; }
.course-card:hover .course-thumb { transform: scale(1.06); }
.course-cat-pill { position:absolute; top:.7rem; left:.7rem; background: rgba(255,255,255,.92); color: var(--lf-primary); font-weight:600; font-size:.72rem; padding:.25rem .6rem; border-radius:999px; backdrop-filter: blur(4px); }
.price-pill { font-weight: 800; color: var(--lf-ink); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Avatars / misc ---------- */
.avatar-ring { padding: 3px; background: var(--lf-grad); border-radius: 50%; }
.avatar-ring img { border: 2px solid #fff; border-radius: 50%; }
.stat-bubble { font-weight: 800; }

/* =====================================================================
   PANEL (dashboard / admin / instructor / student) — modern shell
   ===================================================================== */
:root {
    --lf-sb-w: 268px;
    --lf-sb-w-min: 78px;
    --lf-sb-bg: linear-gradient(180deg, #0f172a 0%, #111a33 100%);
    --lf-sb-text: #b7c0d3;
    --lf-topbar-h: 68px;
    --lf-input-border: #dfe3ec;
}
html.lf-sb-collapsed { --lf-sb-w: var(--lf-sb-w-min); }

body.lf-panel { background: var(--lf-bg); color: var(--lf-ink); }

/* Sidebar */
.lf-sidebar {
    width: var(--lf-sb-w); height: 100vh; position: fixed; top: 0; left: 0; z-index: 1040;
    background: var(--lf-sb-bg); color: #fff; display: flex; flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06); transition: width .2s ease, transform .22s ease;
}
[dir="rtl"] .lf-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid rgba(255,255,255,.06); }
.lf-sb-brand { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.25rem .9rem; color: #fff; min-height: var(--lf-topbar-h); }
.lf-sb-brand .lf-brand-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--lf-grad); display: grid; place-items: center; font-size: 1.25rem; box-shadow: 0 10px 24px rgba(var(--lf-primary-rgb),.45); }
.lf-sb-brand .lf-brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; white-space: nowrap; color: #fff; }
.lf-sb-brand img { max-height: 36px; max-width: 170px; }
.lf-sb-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.lf-sb-scroll::-webkit-scrollbar { width: 6px; } .lf-sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
.lf-sidebar .sidebar-heading { color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 1.1rem .75rem .35rem; white-space: nowrap; }
.lf-sidebar .nav { display: block; }
.lf-sidebar .nav li { list-style: none; }
.lf-sidebar .nav-link {
    display: flex; align-items: center; gap: .65rem; color: var(--lf-sb-text); border-radius: 12px; padding: .58rem .75rem; margin: .1rem 0;
    font-size: .92rem; font-weight: 500; white-space: nowrap; position: relative; transition: background .15s, color .15s;
}
.lf-sidebar .nav-link i { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; font-size: 1.02rem; background: rgba(255,255,255,.04); transition: background .15s, color .15s; }
.lf-sidebar .nav-link:hover, .lf-sidebar .nav-link:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.lf-sidebar .nav-link:hover i { background: rgba(255,255,255,.1); }
.lf-sidebar .nav-link.active { background: var(--lf-grad); color: #fff; box-shadow: 0 10px 24px rgba(var(--lf-primary-rgb),.35); }
.lf-sidebar .nav-link.active i { background: rgba(255,255,255,.18); }
.lf-sidebar .nav-link .lf-nav-badge { margin-left: auto; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.14); border-radius: 999px; padding: .12rem .5rem; }
.lf-sb-user { border-top: 1px solid rgba(255,255,255,.07); padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; }
.lf-sb-user img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: 0 0 40px; }
.lf-sb-user .lf-sb-user-name { font-weight: 700; font-size: .9rem; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.lf-sb-user .lf-sb-user-role { font-size: .72rem; color: #8b95ab; text-transform: capitalize; }
.lf-sb-user .lf-icon-btn { color: #8b95ab; background: transparent; margin-left: auto; }
.lf-sb-user .lf-icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Sidebar styles (Admin → Settings → Appearance) */
html[data-lf-sidebar="primary"] { --lf-sb-bg: linear-gradient(180deg, var(--lf-primary-dark) 0%, var(--lf-primary-2) 100%); --lf-sb-text: rgba(255,255,255,.82); }
html[data-lf-sidebar="primary"] .lf-sidebar .sidebar-heading { color: rgba(255,255,255,.55); }
html[data-lf-sidebar="primary"] .lf-sidebar .nav-link.active { background: rgba(255,255,255,.16); box-shadow: none; }
html[data-lf-sidebar="primary"] .lf-sb-user .lf-sb-user-role, html[data-lf-sidebar="primary"] .lf-sb-user .lf-icon-btn { color: rgba(255,255,255,.7); }
html[data-lf-sidebar="light"] { --lf-sb-bg: var(--lf-card); --lf-sb-text: #475569; }
html[data-lf-sidebar="light"] .lf-sidebar { color: var(--lf-ink); border-right-color: var(--lf-border); }
html[data-lf-sidebar="light"][dir="rtl"] .lf-sidebar { border-left-color: var(--lf-border); }
html[data-lf-sidebar="light"] .lf-sb-brand, html[data-lf-sidebar="light"] .lf-sb-brand .lf-brand-name, html[data-lf-sidebar="light"] .lf-sb-user .lf-sb-user-name { color: var(--lf-ink); }
html[data-lf-sidebar="light"] .lf-sb-brand .lf-logo-dark { display: none; } html[data-lf-sidebar="light"] .lf-sb-brand .lf-logo-light { display: inline-block; }
html[data-lf-sidebar="light"] .lf-sidebar .sidebar-heading { color: #94a3b8; }
html[data-lf-sidebar="light"] .lf-sidebar .nav-link i { background: rgba(var(--lf-primary-rgb),.06); }
html[data-lf-sidebar="light"] .lf-sidebar .nav-link:hover, html[data-lf-sidebar="light"] .lf-sidebar .nav-link:focus-visible { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); }
html[data-lf-sidebar="light"] .lf-sidebar .nav-link:hover i { background: rgba(var(--lf-primary-rgb),.12); }
html[data-lf-sidebar="light"] .lf-sidebar .nav-link .lf-nav-badge { background: rgba(var(--lf-primary-rgb),.12); color: var(--lf-primary); }
html[data-lf-sidebar="light"] .lf-sidebar .nav-link.active .lf-nav-badge { background: rgba(255,255,255,.2); color: #fff; }
html[data-lf-sidebar="light"] .lf-sb-user { border-top-color: var(--lf-border); }
html[data-lf-sidebar="light"] .lf-sb-user .lf-sb-user-role, html[data-lf-sidebar="light"] .lf-sb-user .lf-icon-btn { color: var(--lf-muted); }
html[data-lf-sidebar="light"] .lf-sb-user .lf-icon-btn:hover { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); }
html[data-lf-sidebar="light"] .lf-sb-scroll { scrollbar-color: rgba(15,23,42,.18) transparent; }
html[data-lf-sidebar="light"] .lf-sb-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); }
html[data-lf-sidebar="light"].lf-sb-collapsed .lf-sidebar .sidebar-heading::before { background: var(--lf-border); }
[data-bs-theme="dark"] html[data-lf-sidebar="light"], html[data-lf-sidebar="light"][data-bs-theme="dark"] { --lf-sb-bg: #131c31; --lf-sb-text: #b7c0d3; }

/* Collapsed (desktop) */
@media (min-width: 992px) {
    html.lf-sb-collapsed .lf-sidebar .lf-nav-text,
    html.lf-sb-collapsed .lf-sidebar .sidebar-heading,
    html.lf-sb-collapsed .lf-sidebar .lf-brand-name,
    html.lf-sb-collapsed .lf-sidebar .lf-nav-badge,
    html.lf-sb-collapsed .lf-sb-user > div,
    html.lf-sb-collapsed .lf-sb-user .lf-icon-btn { display: none; }
    html.lf-sb-collapsed .lf-sidebar .nav-link { justify-content: center; padding: .55rem 0; }
    html.lf-sb-collapsed .lf-sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    html.lf-sb-collapsed .lf-sb-user { justify-content: center; }
    html.lf-sb-collapsed .lf-sidebar .sidebar-heading + li { margin-top: .6rem; }
    html.lf-sb-collapsed .lf-sidebar .sidebar-heading::before { content: ""; display: block; height: 1px; background: rgba(255,255,255,.08); margin: 0 .5rem; }
    html.lf-sb-collapsed .lf-sidebar .sidebar-heading { display: block; padding: .5rem 0; font-size: 0; }
    html.lf-sb-collapsed .lf-sidebar .nav-link .lf-nav-text { display: none; }
}
.lf-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); z-index: 1035; display: none; }
@media (max-width: 991.98px) {
    .lf-sidebar { transform: translateX(-100%); width: 280px; box-shadow: 0 0 60px rgba(0,0,0,.4); }
    [dir="rtl"] .lf-sidebar { transform: translateX(100%); }
    .lf-sidebar.show { transform: translateX(0); }
    .lf-sidebar.show ~ .lf-sidebar-backdrop { display: block; }
    .lf-content { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Content + topbar */
.lf-content { margin-left: var(--lf-sb-w); min-height: 100vh; transition: margin .2s ease; }
[dir="rtl"] .lf-content { margin-left: 0; margin-right: var(--lf-sb-w); }
.lf-topbar {
    position: sticky; top: 0; z-index: 1020; min-height: var(--lf-topbar-h); display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem;
    background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--lf-border);
}
.lf-topbar .lf-page-title h1 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.lf-crumbs { font-size: .74rem; color: var(--lf-muted); display: flex; align-items: center; gap: .35rem; }
.lf-crumbs a { color: var(--lf-muted); } .lf-crumbs a:hover { color: var(--lf-primary); }
.lf-icon-btn {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent;
    color: #475569; font-size: 1.1rem; position: relative; transition: background .15s, color .15s, transform .15s; text-decoration: none; padding: 0;
}
.lf-icon-btn:hover { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); }
/* Bootstrap Icons vary in how much of the em box they fill; pin the glyph box
   so every topbar control reads as the same size. */
.lf-icon-btn > .bi { font-size: 1.1rem; line-height: 1; display: block; }
.lf-icon-btn .lf-dot { position: absolute; top: 8px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.lf-topbar .btn-light.border { background: #f1f3f9; border-color: transparent !important; box-shadow: none; border-radius: 10px; font-weight: 600; }
.lf-topsearch { display: flex; align-items: center; gap: .5rem; background: #f1f3f9; border: 1px solid transparent; border-radius: 12px; padding: .35rem .5rem .35rem .85rem; width: 300px; transition: all .15s; }
.lf-topsearch:focus-within { background: #fff; border-color: var(--lf-primary); box-shadow: 0 0 0 .2rem rgba(var(--lf-primary-rgb),.12); }
.lf-topsearch input { border: 0; background: transparent; outline: none; flex: 1; font-size: .9rem; color: var(--lf-ink); min-width: 0; }
.lf-topsearch i { color: var(--lf-muted); }
.lf-topsearch kbd { font-size: .68rem; background: #fff; border: 1px solid var(--lf-input-border); color: var(--lf-muted); border-radius: 6px; padding: .1rem .4rem; }
.lf-user-chip { display: flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .3rem; border-radius: 12px; color: inherit; }
.lf-user-chip:hover { background: rgba(var(--lf-primary-rgb),.08); }
.lf-user-chip img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; }
.lf-user-chip .name { font-weight: 700; font-size: .86rem; line-height: 1.1; }
.lf-user-chip .role { font-size: .7rem; color: var(--lf-muted); text-transform: capitalize; }
.lf-page { padding: 1.5rem 1.25rem 3rem; }
@media (min-width: 992px) { .lf-page { padding: 1.75rem 1.75rem 3rem; } .lf-topbar { padding: .6rem 1.75rem; } }
.lf-page > .lf-alerts .alert { margin-bottom: 1.25rem; }

/* Panel components (scoped) */
body.lf-panel .card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); box-shadow: var(--lf-shadow-sm); background: var(--lf-card); }
body.lf-panel .card.border-0 { border: 1px solid var(--lf-border) !important; }
body.lf-panel .card-header { background: transparent !important; border-bottom: 1px solid var(--lf-border); padding: .95rem 1.25rem; font-weight: 700; letter-spacing: -.01em; }
body.lf-panel .card-header:first-child { border-radius: var(--lf-radius) var(--lf-radius) 0 0; }
body.lf-panel .card-footer { background: transparent; border-top: 1px solid var(--lf-border); }
body.lf-panel .card-body { padding: 1.25rem; }
body.lf-panel .card > .table-responsive:last-child, body.lf-panel .card > .list-group:last-child { border-radius: 0 0 var(--lf-radius) var(--lf-radius); overflow: hidden; }
body.lf-panel .card > .table-responsive:first-child { border-radius: var(--lf-radius) var(--lf-radius) 0 0; }
body.lf-panel .table { --bs-table-border-color: var(--lf-border); margin-bottom: 0; }
body.lf-panel .table > thead th, body.lf-panel .table-light th, body.lf-panel .table > :not(caption) > * > th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lf-muted); font-weight: 700; border-bottom-width: 1px;
    background: #f7f8fc; padding: .8rem 1rem; white-space: nowrap;
}
body.lf-panel .table-light { --bs-table-bg: #f7f8fc; --bs-table-color: var(--lf-muted); }
body.lf-panel .table > tbody > tr > td { padding: .85rem 1rem; vertical-align: middle; }
body.lf-panel .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(var(--lf-primary-rgb),.035); }
body.lf-panel .table tbody tr:last-child td { border-bottom: 0; }
body.lf-panel .badge { border-radius: 999px; font-weight: 600; padding: .38em .72em; letter-spacing: .01em; }
body.lf-panel .badge.bg-primary { background: rgba(var(--lf-primary-rgb),.12) !important; color: var(--lf-primary) !important; }
body.lf-panel .badge.bg-success { background: rgba(16,185,129,.14) !important; color: #047857 !important; }
body.lf-panel .badge.bg-warning { background: rgba(245,158,11,.16) !important; color: #b45309 !important; }
body.lf-panel .badge.bg-danger { background: rgba(239,68,68,.13) !important; color: #b91c1c !important; }
body.lf-panel .badge.bg-info { background: rgba(14,165,233,.14) !important; color: #0369a1 !important; }
body.lf-panel .badge.bg-secondary { background: rgba(100,116,139,.14) !important; color: #475569 !important; }
body.lf-panel .badge.bg-dark { background: rgba(15,23,42,.9) !important; color: #fff !important; }
body.lf-panel .badge.bg-light { background: #f1f3f9 !important; color: #334155 !important; }
body.lf-panel .badge.text-dark { color: #334155; }
body.lf-panel .form-control, body.lf-panel .form-select { border-radius: 11px; border-color: var(--lf-input-border); padding: .58rem .9rem; font-size: .93rem; }
body.lf-panel .form-control-sm, body.lf-panel .form-select-sm { padding: .38rem .7rem; border-radius: 9px; font-size: .85rem; }
/* Room for the select arrow (the padding shorthand above would put the text under it). */
body.lf-panel .form-select, .lf-auth-card .form-select { padding-inline-end: 2.5rem; background-position: right .85rem center; }
body.lf-panel .form-select-sm { padding-inline-end: 2.1rem; background-position: right .6rem center; }
[dir="rtl"] body.lf-panel .form-select, [dir="rtl"] .lf-auth-card .form-select { background-position: left .85rem center; }
[dir="rtl"] body.lf-panel .form-select-sm { background-position: left .6rem center; }
body.lf-panel .form-select[multiple], body.lf-panel .form-select[size]:not([size="1"]) { padding-inline-end: .9rem; }
body.lf-panel .form-control:focus, body.lf-panel .form-select:focus { border-color: var(--lf-primary); box-shadow: 0 0 0 .22rem rgba(var(--lf-primary-rgb),.12); }
body.lf-panel .form-label { font-weight: 600; font-size: .86rem; color: #334155; margin-bottom: .4rem; }
body.lf-panel .form-text { font-size: .78rem; }
body.lf-panel .input-group-text { border-radius: 11px; border-color: var(--lf-input-border); background: #f7f8fc; }
body.lf-panel .form-check-input { border-color: #c7cddb; } body.lf-panel .form-check-input:checked { background-color: var(--lf-primary); border-color: var(--lf-primary); }
body.lf-panel .form-switch .form-check-input { width: 2.4em; height: 1.3em; }
body.lf-panel .btn-light { background: #f1f3f9; border: 1px solid transparent; color: #334155; box-shadow: none; }
body.lf-panel .btn-light:hover { background: #e6e9f2; transform: none; color: var(--lf-ink); }
body.lf-panel .btn-outline-secondary { border-color: var(--lf-input-border); color: #475569; }
body.lf-panel .btn-outline-secondary:hover { background: #f1f3f9; color: var(--lf-ink); border-color: var(--lf-input-border); }
body.lf-panel .btn-primary:hover { transform: translateY(-1px); }
body.lf-panel .btn-success { background: #10b981; border-color: #10b981; } body.lf-panel .btn-danger { background: #ef4444; border-color: #ef4444; }
body.lf-panel .btn-group-sm > .btn, body.lf-panel .btn-sm { border-radius: 9px; }
body.lf-panel .list-group-item { border-color: var(--lf-border); padding: .9rem 1.25rem; background: transparent; }
body.lf-panel .list-group-item-action:hover { background: rgba(var(--lf-primary-rgb),.035); }
body.lf-panel .nav-tabs { border-bottom: 1px solid var(--lf-border); gap: .25rem; }
body.lf-panel .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--lf-muted); font-weight: 600; padding: .65rem 1rem; border-radius: 0; margin-bottom: -1px; }
body.lf-panel .nav-tabs .nav-link:hover { color: var(--lf-ink); }
body.lf-panel .nav-tabs .nav-link.active { color: var(--lf-primary); border-bottom-color: var(--lf-primary); background: transparent; }
body.lf-panel .card-header-tabs { margin: -.95rem -1.25rem -.96rem; padding: 0 1rem; }
body.lf-panel .nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: #475569; padding: .5rem .95rem; }
body.lf-panel .nav-pills .nav-link:hover { background: rgba(var(--lf-primary-rgb),.07); color: var(--lf-primary); }
body.lf-panel .nav-pills .nav-link.active { background: var(--lf-grad); color: #fff; box-shadow: 0 8px 18px rgba(var(--lf-primary-rgb),.28); }
body.lf-panel .pagination { gap: .3rem; } body.lf-panel .page-link { border-radius: 10px !important; border-color: var(--lf-border); color: #475569; font-weight: 600; min-width: 38px; text-align: center; }
body.lf-panel .page-item.active .page-link { background: var(--lf-grad); border-color: transparent; color: #fff; }
body.lf-panel .alert { border: 0; border-radius: 14px; padding: .9rem 1.1rem; font-weight: 500; }
body.lf-panel .alert-success { background: rgba(16,185,129,.12); color: #047857; } body.lf-panel .alert-danger { background: rgba(239,68,68,.1); color: #b91c1c; }
body.lf-panel .alert-info { background: rgba(14,165,233,.12); color: #0369a1; } body.lf-panel .alert-warning { background: rgba(245,158,11,.14); color: #b45309; }
body.lf-panel .alert-light { background: var(--lf-card); border: 1px dashed var(--lf-input-border) !important; color: var(--lf-muted); }
body.lf-panel .dropdown-menu { border-radius: 14px; border: 1px solid var(--lf-border); box-shadow: var(--lf-shadow); padding: .4rem; }
body.lf-panel .dropdown-item { border-radius: 9px; padding: .5rem .75rem; font-weight: 500; font-size: .9rem; }
body.lf-panel .dropdown-item:hover, body.lf-panel .dropdown-item:focus { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); }
body.lf-panel .dropdown-item.active { background: var(--lf-grad); }
body.lf-panel .modal-content { border: 0; border-radius: 20px; box-shadow: var(--lf-shadow-lg); }
body.lf-panel .modal-header, body.lf-panel .modal-footer { border-color: var(--lf-border); }
body.lf-panel .progress { height: 8px; border-radius: 999px; background: rgba(var(--lf-primary-rgb),.1); }
body.lf-panel .progress-bar { background: var(--lf-grad); border-radius: 999px; }
body.lf-panel .progress-bar.bg-success { background: #10b981 !important; }
body.lf-panel .accordion-item { border-color: var(--lf-border); } body.lf-panel .accordion-button { font-weight: 600; }
body.lf-panel .accordion-button:not(.collapsed) { background: rgba(var(--lf-primary-rgb),.06); color: var(--lf-primary); box-shadow: none; }
body.lf-panel h5.mb-0, body.lf-panel .h5 { letter-spacing: -.02em; }
body.lf-panel .text-muted { color: var(--lf-muted) !important; }
body.lf-panel .bg-light:not(.badge):not(.alert) { background-color: #f7f8fc !important; }
body.lf-panel .border-0.shadow-sm { box-shadow: var(--lf-shadow-sm) !important; }
body.lf-panel .object-fit-cover, body.lf-panel img.rounded { object-fit: cover; }
body.lf-panel .table img.rounded { border-radius: 8px !important; }

/* Stat tiles */
.stat-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius); transition: transform .15s, box-shadow .15s; position: relative; overflow: hidden; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow); }
.stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--lf-primary-rgb),.08), transparent 70%); pointer-events: none; }
.stat-card .stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat-card .stat-label { color: var(--lf-muted); font-size: .8rem; font-weight: 600; }
.stat-card .stat-trend { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .15rem .5rem; }
.stat-card .stat-trend.up { background: rgba(16,185,129,.14); color: #047857; } .stat-card .stat-trend.down { background: rgba(239,68,68,.12); color: #b91c1c; } .stat-card .stat-trend.flat { background: #f1f3f9; color: var(--lf-muted); }
.stat-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 15px; font-size: 1.35rem; flex: 0 0 52px; }
.stat-icon.bg-primary { background: var(--lf-grad) !important; color: #fff !important; box-shadow: 0 10px 22px rgba(var(--lf-primary-rgb),.3); }
.stat-icon.bg-success { background: linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(16,185,129,.28); }
.stat-icon.bg-warning { background: linear-gradient(135deg,#f59e0b,#f97316) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(245,158,11,.28); }
.stat-icon.bg-info { background: linear-gradient(135deg,#0ea5e9,#6366f1) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(14,165,233,.28); }
.stat-icon.bg-danger { background: linear-gradient(135deg,#ef4444,#ec4899) !important; color:#fff !important; box-shadow: 0 10px 22px rgba(239,68,68,.28); }
.stat-icon.bg-secondary, .stat-icon.bg-dark { background: linear-gradient(135deg,#334155,#0f172a) !important; color:#fff !important; }
.stat-icon.bg-opacity-10 { opacity: 1; }

/* Welcome / hero band inside panel */
.lf-welcome { position: relative; overflow: hidden; border-radius: var(--lf-radius-lg); color: #fff; padding: 1.75rem 1.75rem; background:
    radial-gradient(70% 90% at 90% 0%, rgba(var(--lf-primary-2-rgb),.6) 0%, transparent 60%),
    radial-gradient(50% 70% at 5% 100%, rgba(56,189,248,.35) 0%, transparent 55%),
    linear-gradient(135deg, var(--lf-primary-dark) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%); box-shadow: var(--lf-shadow-lg); }
.lf-welcome::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 20px 20px; opacity: .35; pointer-events: none; }
.lf-welcome > * { position: relative; z-index: 1; }
.lf-welcome .btn-light { background: #fff; color: var(--lf-primary); border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.lf-welcome .btn-light:hover { background: #fff; transform: translateY(-2px); }
.lf-welcome .btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.lf-welcome .btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.lf-welcome .lf-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .25rem .75rem; font-size: .78rem; font-weight: 600; backdrop-filter: blur(6px); }

@media (max-width: 767.98px) {
    .lf-welcome { padding: 1.35rem 1.25rem; }
    .lf-welcome h2 { font-size: 1.3rem; }
}

@media (max-width: 575.98px) {
    .lf-welcome { padding: 1.15rem 1rem; }
    .lf-welcome h2 { font-size: 1.15rem; }
    .lf-welcome p.opacity-75 { font-size: .85rem; }
    /* Quick actions share the row evenly instead of trailing off into a lone
       button on its own line. */
    .lf-welcome .d-flex.flex-wrap.gap-2 .btn { flex: 1 1 auto; font-size: .8rem; }
    /* The three stat pills get squeezed hardest — shrink type and padding so
       longer values (currency amounts) don't clip or force a second line. */
    .lf-welcome .row.g-2.text-center .h4 { font-size: 1rem; }
    .lf-welcome .row.g-2.text-center .rounded-4 { padding: .6rem .35rem !important; }
    .lf-welcome .row.g-2.text-center .small { font-size: .66rem; }
}
.lf-ring { --p: 0; --size: 92px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.22) 0); }
.lf-ring > span { width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); border-radius: 50%; background: rgba(67,56,202,.85); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }

/* Misc panel helpers */
.lf-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.lf-section-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: .5rem; }
.lf-empty { text-align: center; color: var(--lf-muted); padding: 2.5rem 1rem; }
.lf-empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: #c7cddb; }
.lf-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.lf-avatar-sm { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; }
.lf-course-mini { display: flex; gap: .85rem; align-items: center; }
.lf-course-mini img { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; flex: 0 0 84px; }
/* The enrollment badge must never shrink below its own number — otherwise a
   longer count (e.g. "1,532") gets squeezed narrower than its text and the
   overflow spills past the card's rounded-corner clip instead of wrapping. */
.lf-course-mini .badge { flex-shrink: 0; }
.lf-kpi-chart { height: 280px; }
.lf-timeline { position: relative; padding-left: 1.25rem; } .lf-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--lf-border); }
.lf-timeline-item { position: relative; padding-bottom: 1rem; } .lf-timeline-item::before { content: ""; position: absolute; left: -1.25rem; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--lf-grad); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(var(--lf-primary-rgb),.2); }
.lf-soft-primary { background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); }
.lf-soft-success { background: rgba(16,185,129,.12); color: #047857; }
.lf-soft-warning { background: rgba(245,158,11,.14); color: #b45309; }
.lf-soft-info { background: rgba(14,165,233,.12); color: #0369a1; }
.lf-soft-danger { background: rgba(239,68,68,.1); color: #b91c1c; }
.lf-ico-tile { width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 1.15rem; flex: 0 0 42px; }
.lf-course-progress-card { border-radius: var(--lf-radius); overflow: hidden; border: 1px solid var(--lf-border); background: var(--lf-card); transition: transform .15s, box-shadow .15s; height: 100%; display: flex; flex-direction: column; }
.lf-course-progress-card:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); }
.lf-course-progress-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* Auth pages */
.lf-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .lf-auth { grid-template-columns: minmax(380px, 46%) 1fr; } }
.lf-auth-side { position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; background:
    radial-gradient(60% 80% at 85% 10%, rgba(var(--lf-primary-2-rgb),.55) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(56,189,248,.35) 0%, transparent 55%),
    linear-gradient(135deg, var(--lf-primary) 0%, var(--lf-primary-mid) 55%, var(--lf-primary-2) 100%); }
.lf-auth-side::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; opacity: .4; pointer-events: none; }
.lf-auth-side > * { position: relative; z-index: 1; }
.lf-auth-feature { display: flex; gap: .9rem; align-items: flex-start; }
.lf-auth-feature i { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-size: 1.15rem; }
.lf-auth-quote { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 1.25rem; backdrop-filter: blur(8px); }
.lf-auth-main { display: flex; flex-direction: column; padding: 1.5rem; min-width: 0; }
.lf-auth-card { width: 100%; max-width: 460px; margin: auto; }
.lf-auth-card .form-control, .lf-auth-card .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: var(--lf-input-border); font-size: .95rem; }
.lf-auth-card .form-select { padding-inline-end: 2.5rem; }
.lf-auth-card .form-control:focus, .lf-auth-card .form-select:focus { border-color: var(--lf-primary); box-shadow: 0 0 0 .22rem rgba(var(--lf-primary-rgb),.12); }
.lf-auth-card .form-label { font-weight: 600; font-size: .86rem; }
/* Students | Teachers switch on the learners' sign-in and sign-up. */
.lf-door-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .35rem; border-radius: 16px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
.lf-door-tab { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem .5rem; border-radius: 12px; font-weight: 700; color: var(--bs-secondary-color); text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
.lf-door-tab i { font-size: 1.15rem; }
.lf-door-tab:hover { color: var(--lf-primary); }
.lf-door-tab.is-active { background: var(--bs-body-bg); color: var(--lf-primary); box-shadow: 0 6px 16px rgba(15,23,42,.08), 0 0 0 1px rgba(var(--lf-primary-rgb),.18); }
.lf-door-tab.is-active i { color: var(--lf-primary); }
/* "or sign in with" divider + method tiles (mobile, Nafath). */
.lf-or { display: flex; align-items: center; gap: .75rem; color: var(--bs-secondary-color); font-size: .82rem; }
.lf-or::before, .lf-or::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }
.lf-method { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .75rem .9rem; border-radius: 14px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.lf-method:hover { border-color: rgba(var(--lf-primary-rgb),.45); box-shadow: 0 8px 20px rgba(15,23,42,.07); transform: translateY(-1px); color: var(--bs-body-color); }
.lf-method .lf-brand-tile { flex-shrink: 0; border-radius: 9px; }
.lf-method .small { line-height: 1.25; }
/* Link from one sign-in door to the other. */
.lf-door-switch { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 14px; border: 1px dashed rgba(var(--lf-primary-rgb),.35); background: rgba(var(--lf-primary-rgb),.04); color: var(--bs-body-color); text-decoration: none; transition: background .15s; }
.lf-door-switch:hover { background: rgba(var(--lf-primary-rgb),.08); color: var(--bs-body-color); }
.lf-door-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--lf-primary-rgb),.12); color: var(--lf-primary); font-size: 1.15rem; }
.lf-auth-card .btn-lg { padding: .8rem 1.4rem; border-radius: 13px; }
.lf-pass-wrap { position: relative; } .lf-pass-wrap .form-control { padding-right: 3rem; }
.lf-pass-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--lf-muted); padding: .3rem; }
.lf-role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.lf-role-pick label { border: 1.5px solid var(--lf-input-border); border-radius: 14px; padding: .9rem; cursor: pointer; transition: all .15s; display: flex; gap: .75rem; align-items: center; }
.lf-role-pick label i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.08); color: var(--lf-primary); font-size: 1.1rem; flex: 0 0 38px; }
.lf-role-pick input { display: none; }
.lf-role-pick input:checked + label { border-color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); box-shadow: 0 0 0 3px rgba(var(--lf-primary-rgb),.12); }
.lf-demo-chip { border: 1px dashed var(--lf-input-border); background: transparent; border-radius: 999px; padding: .25rem .7rem; font-size: .75rem; font-weight: 600; color: #475569; transition: all .15s; }
.lf-demo-chip:hover { border-color: var(--lf-primary); color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.06); }

/* ---------- Animations ---------- */
@keyframes lfFadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: none; } }
.lf-fade-up { animation: lfFadeUp .6s ease both; }

/* ---------- Dark mode ---------- */
[data-bs-theme="dark"] {
    --lf-bg: #0b1120; --lf-card: #131c31; --lf-ink: #e2e8f0; --lf-border: #24304a;
}
[data-bs-theme="dark"] body.bg-light,
[data-bs-theme="dark"] .bg-light { background-color: #0b1120 !important; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-topbar { background: #131c31 !important; border-color: #24304a !important; }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .navbar.bg-white { background-color: #131c31 !important; }
[data-bs-theme="dark"] .card { background-color: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .category-tile { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .table { --bs-table-bg: #131c31; --bs-table-color: #e2e8f0; }
[data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border { border-color: #24304a !important; }
[data-bs-theme="dark"] .course-cat-pill { background: rgba(19,28,49,.9); }

/* ---------- Dark mode: panel ---------- */
[data-bs-theme="dark"] { --lf-input-border: #2b3650; --lf-muted: #8b95ab; --lf-sb-bg: linear-gradient(180deg, #0a1020 0%, #0d1428 100%); }
[data-bs-theme="dark"] body.lf-panel { background: #0b1120; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-topbar { background: rgba(19,28,49,.85) !important; border-color: #24304a !important; }
[data-bs-theme="dark"] .lf-icon-btn { color: #cbd5e1; }
[data-bs-theme="dark"] .lf-icon-btn .lf-dot { border-color: #131c31; }
[data-bs-theme="dark"] .lf-topsearch, [data-bs-theme="dark"] .lf-topbar .btn-light.border { background: #0b1120; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-topsearch:focus-within { background: #0b1120; }
[data-bs-theme="dark"] .lf-topsearch kbd { background: #131c31; border-color: #2b3650; }
[data-bs-theme="dark"] .lf-topbar .lf-page-title h1 { color: #f1f5f9; }
[data-bs-theme="dark"] body.lf-panel .card-header { border-color: #24304a; }
[data-bs-theme="dark"] body.lf-panel .table > thead th, [data-bs-theme="dark"] body.lf-panel .table > :not(caption) > * > th { background: #0f172a; color: #8b95ab; }
[data-bs-theme="dark"] body.lf-panel .table-light { --bs-table-bg: #0f172a; }
[data-bs-theme="dark"] body.lf-panel .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255,255,255,.03); }
[data-bs-theme="dark"] body.lf-panel .badge.bg-success { color: #34d399 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-warning { color: #fbbf24 !important; }
[data-bs-theme="dark"] body.lf-panel .badge.bg-danger { color: #f87171 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-info { color: #38bdf8 !important; }
[data-bs-theme="dark"] body.lf-panel .badge.bg-primary { color: #a5b4fc !important; background: rgba(129,140,248,.18) !important; }
[data-bs-theme="dark"] body.lf-panel .badge.bg-secondary { color: #cbd5e1 !important; } [data-bs-theme="dark"] body.lf-panel .badge.bg-light { background: #1e293b !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] body.lf-panel .badge.text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] body.lf-panel .form-label { color: #cbd5e1; }
[data-bs-theme="dark"] body.lf-panel .input-group-text { background: #0f172a; }
[data-bs-theme="dark"] body.lf-panel .btn-light { background: #1e293b; color: #e2e8f0; } [data-bs-theme="dark"] body.lf-panel .btn-light:hover { background: #273449; color: #fff; }
[data-bs-theme="dark"] body.lf-panel .btn-outline-secondary { color: #cbd5e1; } [data-bs-theme="dark"] body.lf-panel .btn-outline-secondary:hover { background: #1e293b; }
[data-bs-theme="dark"] body.lf-panel .bg-light:not(.badge):not(.alert) { background-color: #0f172a !important; }
[data-bs-theme="dark"] body.lf-panel .alert-success { color: #34d399; } [data-bs-theme="dark"] body.lf-panel .alert-danger { color: #f87171; }
[data-bs-theme="dark"] body.lf-panel .alert-info { color: #38bdf8; } [data-bs-theme="dark"] body.lf-panel .alert-warning { color: #fbbf24; }
[data-bs-theme="dark"] body.lf-panel .alert-light { background: #131c31; }
[data-bs-theme="dark"] body.lf-panel .nav-pills .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] body.lf-panel .page-link { background: #131c31; color: #cbd5e1; border-color: #24304a; }
[data-bs-theme="dark"] body.lf-panel .list-group-item { color: #e2e8f0; border-color: #24304a; }
[data-bs-theme="dark"] body.lf-panel .dropdown-menu { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] body.lf-panel .dropdown-item { color: #e2e8f0; }
[data-bs-theme="dark"] body.lf-panel .modal-content { background: #131c31; }
[data-bs-theme="dark"] body.lf-panel .progress { background: rgba(129,140,248,.15); }
[data-bs-theme="dark"] .stat-card::after { background: radial-gradient(circle, rgba(129,140,248,.12), transparent 70%); }
[data-bs-theme="dark"] .stat-card .stat-trend.flat { background: #1e293b; }
[data-bs-theme="dark"] .lf-empty i { color: #334155; }
[data-bs-theme="dark"] .lf-timeline-item::before { border-color: #131c31; }
[data-bs-theme="dark"] .lf-course-progress-card { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .lf-soft-primary { background: rgba(129,140,248,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .lf-soft-success { color: #34d399; } [data-bs-theme="dark"] .lf-soft-warning { color: #fbbf24; } [data-bs-theme="dark"] .lf-soft-info { color: #38bdf8; } [data-bs-theme="dark"] .lf-soft-danger { color: #f87171; }
[data-bs-theme="dark"] .lf-user-chip .name { color: #f1f5f9; }
[data-bs-theme="dark"] .lf-demo-chip { color: #cbd5e1; }
[data-bs-theme="dark"] .lf-role-pick label { border-color: #2b3650; }
[data-bs-theme="dark"] body.lf-panel .card-header.bg-white, [data-bs-theme="dark"] body.lf-panel .bg-white { background-color: transparent !important; }
[data-bs-theme="dark"] body.lf-panel .text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .lf-auth-main { background: #0b1120; }

/* =====================================================================
   HOMEPAGE — section system
   Every homepage section renders inside .lf-sec. Admins pick the surface
   (page / surface / tint / dark) and the spacing per section from
   Admin > Homepage, so the page rhythm is editable without code.
   ===================================================================== */
.lf-sec { position: relative; padding: 5.5rem 0; }
.lf-sec--compact { padding: 3.25rem 0; }
.lf-sec--roomy { padding: 7.5rem 0; }
.lf-sec--surface { background: var(--lf-card); }
.lf-sec--tint { background: linear-gradient(180deg, rgba(var(--lf-primary-rgb),.05) 0%, rgba(var(--lf-primary-2-rgb),.03) 100%); }
.lf-sec--dark { background: #0f172a; color: #e2e8f0; }
.lf-sec--dark .text-muted { color: #94a3b8 !important; }
.lf-sec--dark .lf-sec-title, .lf-sec--dark h2, .lf-sec--dark h3, .lf-sec--dark h5, .lf-sec--dark h6 { color: #f8fafc; }
.lf-sec--dark .card, .lf-sec--dark .lf-tile { background: #172033; border-color: #24304a; }
/* Hairline between two same-coloured sections so the page never looks like one long slab. */
.lf-sec + .lf-sec:not(.lf-sec--dark)::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(1140px, 90%); height: 1px; background: var(--lf-border); opacity: .8;
}
.lf-sec--surface + .lf-sec--surface::before, .lf-sec--tint + .lf-sec--tint::before { opacity: 1; }
.lf-sec--surface + .lf-sec:not(.lf-sec--surface)::before,
.lf-sec:not(.lf-sec--surface) + .lf-sec--surface::before,
.lf-sec--tint + .lf-sec:not(.lf-sec--tint)::before,
.lf-sec:not(.lf-sec--tint) + .lf-sec--tint::before { display: none; }
.lf-sec--dark + .lf-sec::before { display: none; }

/* ---------- Section header ---------- */
.lf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.lf-sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.lf-sec-head--center .lf-sec-lead { margin-inline: auto; }
.lf-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .85rem;
    background: rgba(var(--lf-primary-rgb),.09); color: var(--lf-primary);
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem;
    padding: .35rem .8rem; border-radius: 999px;
}
.lf-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lf-sec--dark .lf-eyebrow { background: rgba(129,140,248,.18); color: #a5b4fc; }
.lf-sec-title { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: 0; }
.lf-sec-lead { color: var(--lf-muted); margin: .8rem 0 0; max-width: 620px; font-size: 1.02rem; }
.lf-sec-link { font-weight: 700; color: var(--lf-primary); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.lf-sec-link i { transition: transform .18s ease; }
.lf-sec-link:hover i { transform: translateX(4px); }

/* ---------- Generic tile ---------- */
.lf-tile {
    background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg);
    padding: 1.6rem; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lf-tile--hover:hover { transform: translateY(-5px); box-shadow: var(--lf-shadow); border-color: rgba(var(--lf-primary-rgb),.25); }
.lf-ico {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem;
    background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); flex: 0 0 54px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.lf-ico--grad { background: var(--lf-grad); color: #fff; box-shadow: 0 12px 26px rgba(var(--lf-primary-rgb),.3); }
.lf-tile--hover:hover .lf-ico { transform: scale(1.06) rotate(-3deg); }
.lf-sec--dark .lf-ico { background: rgba(129,140,248,.16); color: #a5b4fc; }

/* ---------- Feature cards ---------- */
.lf-feature { display: flex; flex-direction: column; gap: .9rem; }
.lf-feature h3 { font-size: 1.06rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.lf-feature p { color: var(--lf-muted); font-size: .93rem; margin: 0; line-height: 1.6; }

/* ---------- Category tiles ---------- */
.lf-cat {
    display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; height: 100%;
    background: var(--lf-card); border: 1px solid var(--lf-border); border-radius: var(--lf-radius);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lf-cat:hover { transform: translateY(-4px); box-shadow: var(--lf-shadow); border-color: rgba(var(--lf-primary-rgb),.3); }
.lf-cat .lf-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; font-size: 1.2rem; }
.lf-cat-name { font-weight: 700; font-size: .96rem; color: var(--lf-ink); margin: 0; line-height: 1.25; }
.lf-cat-count { font-size: .8rem; color: var(--lf-muted); }
.lf-cat-go { margin-left: auto; color: var(--lf-muted); opacity: 0; transform: translateX(-6px); transition: all .18s ease; }
.lf-cat:hover .lf-cat-go { opacity: 1; transform: none; color: var(--lf-primary); }

/* ---------- Course card ---------- */
.course-card { display: flex; flex-direction: column; }
.course-card:hover { border-color: transparent; }
.lf-badge-row {
    position: absolute; top: .75rem; left: .75rem; right: .75rem; z-index: 1;
    display: flex; gap: .5rem; align-items: flex-start;
    pointer-events: none;
}
.lf-badge-group {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start;
    max-width: calc(100% - 4.5rem);
}
.lf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 9.4rem; min-height: 1.7rem;
    font-size: .7rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px; line-height: 1.05;
    background: rgba(255,255,255,.94); color: var(--lf-primary); backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lf-badge--free { background: #10b981; color: #fff; }
.lf-badge--deal { background: #f43f5e; color: #fff; }
.lf-badge--auto { position: absolute; top: 0; right: 0; min-width: 3.25rem; }

/* Wishlist heart on course cards + detail button */
.lf-wishlist-form { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; pointer-events: auto; }
.course-thumb-wrap > .lf-wishlist-btn { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }
.lf-wishlist-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.96); color: #475569; font-size: .95rem; line-height: 1;
    backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(15,23,42,.12);
    cursor: pointer; text-decoration: none;
    transition: transform .12s ease, color .12s ease, background .12s ease;
}
.lf-wishlist-btn .bi { color: currentColor; }
.lf-wishlist-btn:hover { transform: scale(1.08); color: #f43f5e; }
.lf-wishlist-btn:active { transform: scale(.94); }
.lf-wishlist-btn.is-wishlisted { color: #f43f5e; }
.lf-wishlist-btn:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; }
.lf-wishlist-detail.is-wishlisted { color: #f43f5e; border-color: #f43f5e; }
.lf-wishlist-detail.is-wishlisted:hover { color: #fff; background: #f43f5e; border-color: #f43f5e; }
.lf-course-meta { display: flex; align-items: center; gap: .8rem; font-size: .78rem; color: var(--lf-muted); font-weight: 600; }
.lf-course-meta i { font-size: .82rem; margin-right: .2rem; }
.lf-rating { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; }
.lf-rating .bi { color: #f59e0b; font-size: .76rem; }
.lf-rating .lf-rating-count { color: var(--lf-muted); font-weight: 500; }
.lf-course-title { font-size: .98rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; margin: 0; }
.lf-course-title a { color: var(--lf-ink); }
.course-card:hover .lf-course-title a { color: var(--lf-primary); }
.lf-price { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.lf-price-old { font-size: .82rem; color: var(--lf-muted); text-decoration: line-through; font-weight: 500; }
.lf-play {
    position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.1), rgba(15,23,42,.45)); transition: opacity .2s ease;
}
.lf-play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--lf-primary); display: grid; place-items: center; font-size: 1.3rem; transform: scale(.85); transition: transform .2s ease; }
.course-card:hover .lf-play { opacity: 1; }
.course-card:hover .lf-play span { transform: none; }

/* ---------- Steps (how it works) ---------- */
.lf-steps { counter-reset: lfstep; position: relative; }
.lf-step { text-align: center; position: relative; }
.lf-step-num {
    width: 68px; height: 68px; margin: 0 auto 1.15rem; border-radius: 22px; display: grid; place-items: center;
    font-size: 1.7rem; background: var(--lf-grad); color: #fff; box-shadow: 0 14px 30px rgba(var(--lf-primary-rgb),.32); position: relative;
}
.lf-step h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.lf-step p { color: var(--lf-muted); margin: 0; font-size: .93rem; line-height: 1.65; }
/* dashed connector between steps on wide screens */
@media (min-width: 768px) {
    .lf-step::after {
        content: ""; position: absolute; top: 34px; left: calc(50% + 52px); right: calc(-50% + 52px); height: 2px;
        background-image: linear-gradient(90deg, var(--lf-border) 55%, transparent 0);
        background-size: 11px 2px; background-repeat: repeat-x;
    }
    .lf-step:last-child::after { display: none; }
}

/* ---------- Stats band ---------- */
.lf-stats { display: grid; gap: 1px; background: var(--lf-border); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); overflow: hidden; }
.lf-stat { background: var(--lf-card); padding: 2rem 1.25rem; text-align: center; }
.lf-stat-num { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lf-stat-label { color: var(--lf-muted); font-size: .84rem; font-weight: 600; margin-top: .5rem; }
.lf-stat .lf-ico { margin: 0 auto .9rem; }

/* ---------- Instructor card ---------- */
.lf-person { text-align: center; padding: 1.75rem 1rem; }
.lf-person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.lf-person .avatar-ring { display: inline-block; margin-bottom: 1rem; }
.lf-person h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; color: var(--lf-ink); }
.lf-person .lf-person-role { font-size: .82rem; color: var(--lf-muted); display: block; }
.lf-person .lf-person-stat { font-size: .78rem; font-weight: 700; color: var(--lf-primary); margin-top: .6rem; display: inline-block; }

/* ---------- Testimonials ---------- */
.lf-quote { position: relative; padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; height: 100%; }
.lf-quote::before {
    content: "\201C"; position: absolute; top: .35rem; right: 1.25rem; font-size: 5rem; line-height: 1;
    font-family: Georgia, serif; color: var(--lf-primary); opacity: .12;
}
.lf-quote p { font-size: .97rem; line-height: 1.75; flex: 1 1 auto; margin: 0 0 1.5rem; }
.lf-quote-stars { color: #f59e0b; font-size: .85rem; margin-bottom: .9rem; letter-spacing: .1em; }
.lf-quote-person { display: flex; align-items: center; gap: .8rem; }
.lf-quote-person img, .lf-quote-person .lf-initial { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; }
.lf-initial { display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); font-weight: 800; }

/* ---------- Partner marquee ---------- */
.lf-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lf-marquee-track { display: flex; gap: 3.5rem; align-items: center; width: max-content; animation: lfMarquee 32s linear infinite; }
.lf-marquee:hover .lf-marquee-track { animation-play-state: paused; }
.lf-marquee img { height: 34px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
.lf-marquee a:hover img { filter: none; opacity: 1; }
.lf-marquee-name { font-weight: 700; color: var(--lf-muted); font-size: 1.05rem; white-space: nowrap; }
@keyframes lfMarquee { to { transform: translateX(-50%); } }

/* ---------- CTA / newsletter bands ---------- */
.lf-band { position: relative; overflow: hidden; border-radius: var(--lf-radius-lg); padding: 3.25rem 2rem; }
.lf-band--gradient { background: var(--lf-grad); color: #fff; box-shadow: var(--lf-shadow-lg); }
.lf-band--dark { background: #0f172a; color: #fff; }
.lf-band--light { background: var(--lf-card); border: 1px solid var(--lf-border); }
.lf-band--gradient::after, .lf-band--dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 20px 20px; opacity: .4;
}
.lf-band > * { position: relative; z-index: 1; }
.lf-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .6rem; }
.lf-band--gradient p, .lf-band--dark p { color: rgba(255,255,255,.78); }

/* ---------- Storefront footer ---------- */
.lf-footer { background: #0b1120; color: #cbd5e1; }
.lf-footer-newsletter { background: var(--lf-grad); }
.lf-footer-newsletter-copy { color: #ede9fe; font-weight: 500; }
.lf-footer-heading { color: #f8fafc; letter-spacing: .02em; }
.lf-footer-copy,
.lf-footer-link {
    color: #cbd5e1;
    font-weight: 500;
    line-height: 1.65;
}
.lf-footer-link { transition: color .15s ease; }
.lf-footer-link:hover,
.lf-footer-link:focus-visible { color: #fff; }
.lf-footer-copy i { color: #a5b4fc; }
.lf-footer-social {
    width: 38px; height: 38px; border-radius: 10px;
    color: #f8fafc; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.10);
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.lf-footer-social:hover,
.lf-footer-social:focus-visible {
    color: #fff; background: rgba(255,255,255,.20); transform: translateY(-2px);
}
.lf-footer-divider { border-color: #475569; opacity: .65; }
.lf-footer-copyright { color: #aeb9ca; font-weight: 500; }

/* ---------- FAQ ---------- */
.lf-faq .accordion-item { border: 1px solid var(--lf-border); border-radius: var(--lf-radius) !important; margin-bottom: .8rem; overflow: hidden; background: var(--lf-card); }
.lf-faq .accordion-button { font-weight: 700; padding: 1.15rem 1.35rem; background: transparent; box-shadow: none; }
.lf-faq .accordion-button:not(.collapsed) { color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); }
.lf-faq .accordion-body { color: var(--lf-muted); padding-top: 0; line-height: 1.75; }

/* ---------- Scroll reveal ---------- */
.lf-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.lf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lf-reveal { opacity: 1; transform: none; transition: none; }
    .lf-marquee-track { animation: none; }
    .course-card:hover, .lf-tile--hover:hover, .lf-cat:hover { transform: none; }
}

/* ---------- Homepage dark mode ---------- */
[data-bs-theme="dark"] .lf-sec--surface { background: #131c31; }
[data-bs-theme="dark"] .lf-sec--tint { background: linear-gradient(180deg, rgba(99,102,241,.1) 0%, rgba(var(--lf-primary-2-rgb),.05) 100%); }
[data-bs-theme="dark"] .lf-sec--dark { background: #080d18; }
[data-bs-theme="dark"] .lf-tile, [data-bs-theme="dark"] .lf-cat, [data-bs-theme="dark"] .lf-stat { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .lf-stats { background: #24304a; border-color: #24304a; }
[data-bs-theme="dark"] .lf-eyebrow { background: rgba(129,140,248,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .lf-ico { background: rgba(129,140,248,.16); color: #a5b4fc; }
[data-bs-theme="dark"] .lf-ico--grad { background: var(--lf-grad); color: #fff; }
[data-bs-theme="dark"] .lf-badge { background: rgba(19,28,49,.94); color: #a5b4fc; }
[data-bs-theme="dark"] .lf-badge--free { background: #10b981; color: #fff; }
[data-bs-theme="dark"] .lf-badge--deal { background: #f43f5e; color: #fff; }
[data-bs-theme="dark"] .lf-wishlist-btn { background: rgba(255,255,255,.96); color: var(--lf-primary); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
[data-bs-theme="dark"] .lf-wishlist-btn:hover { color: #f43f5e; }
[data-bs-theme="dark"] .lf-cat-name, [data-bs-theme="dark"] .lf-course-title a, [data-bs-theme="dark"] .lf-person h3 { color: #e2e8f0; }
[data-bs-theme="dark"] .lf-band--light { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .lf-faq .accordion-item { background: #131c31; border-color: #24304a; }
[data-bs-theme="dark"] .lf-faq .accordion-button { background: transparent; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-faq .accordion-button:not(.collapsed) { background: rgba(129,140,248,.1); color: #a5b4fc; }
[data-bs-theme="dark"] .lf-initial { background: rgba(129,140,248,.16); color: #a5b4fc; }

/* ---------- "See all" filler tile (completes a short grid row) ---------- */
.lf-more {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .85rem;
    border-style: dashed; border-width: 1.5px; background: transparent; text-align: left;
}
.lf-more:hover { background: var(--lf-card); border-style: solid; }
.lf-more-label { font-weight: 700; font-size: 1.02rem; color: var(--lf-ink); letter-spacing: -.02em; }
.lf-more-note { color: var(--lf-muted); font-size: .88rem; line-height: 1.55; }
.lf-cat--more { border-style: dashed; border-width: 1.5px; background: transparent; }
.lf-cat--more:hover { background: var(--lf-card); border-style: solid; }
[data-bs-theme="dark"] .lf-more:hover, [data-bs-theme="dark"] .lf-cat--more:hover { background: #131c31; }
[data-bs-theme="dark"] .lf-more-label { color: #e2e8f0; }

/* ---------- Stacked bands (CTA + newsletter) ---------- */
/* Two full-width bands in a row would otherwise sit ~11rem apart. */
.lf-sec--band + .lf-sec--band { padding-top: 0; }
.lf-sec--band + .lf-sec--band::before { display: none; }
.lf-sec--band + .lf-sec--band > .container > .lf-band { margin-top: 1.5rem; }
.lf-sec--band:last-child { padding-bottom: 3.5rem; }

/* ---------- SweetAlert2 confirmations ---------- */
.lf-swal.swal2-popup {
    border-radius: var(--lf-radius-lg);
    border: 1px solid var(--lf-border);
    box-shadow: 0 30px 70px rgba(15,23,42,.22);
    padding: 2rem 2rem 1.5rem;
    font-family: var(--bs-body-font-family);
    max-width: 440px;
}
.lf-swal .lf-swal-title { font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; padding: 0; }
.lf-swal .lf-swal-text { font-size: .96rem; color: var(--lf-muted); line-height: 1.65; margin: .6rem 0 0; }
.lf-swal .swal2-actions { margin-top: 1.75rem; gap: .5rem; }
.lf-swal .swal2-icon { width: 62px; height: 62px; margin: .25rem auto 1.1rem; border-width: 3px; }
.lf-swal .swal2-icon .swal2-icon-content { font-size: 2.2rem; }
.lf-swal .swal2-icon.swal2-warning { border-color: rgba(245,158,11,.4); color: #f59e0b; }
.lf-swal .swal2-icon.swal2-question { border-color: rgba(var(--lf-primary-rgb),.35); color: var(--lf-primary); }
.lf-swal .btn-light { background: #f1f3f9; color: #334155; }
.lf-swal .btn-light:hover { background: #e6e9f2; color: var(--lf-ink); }
.lf-swal .btn-danger { background: linear-gradient(135deg,#ef4444,#dc2626); border: 0; box-shadow: 0 8px 20px rgba(239,68,68,.3); }
.lf-swal .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(239,68,68,.38); }
.swal2-container { backdrop-filter: blur(3px); }
/* Toasts are transient and non-blocking — never blur the page behind them
   (the blur above is only wanted for modal confirmations). Swal tags toast
   containers (and <body>) with swal2-toast-shown; cover both selectors. */
.swal2-container.swal2-toast-shown,
body.swal2-toast-shown .swal2-container { backdrop-filter: none; }
/* Flash messages: hidden until learnify-toast.js turns them into toasts (it un-hides them when SweetAlert is missing). */
.lf-flash-pending { display: none !important; }
.lf-flash-wrap:empty { display: none; }
/* Toasts (top right): a card with a coloured rail per type. */
.lf-toast.swal2-popup { border-radius: 14px; padding: .9rem 1rem .9rem 1.1rem; box-shadow: 0 18px 44px rgba(15,23,42,.18), 0 0 0 1px var(--lf-border); border-inline-start: 4px solid var(--lf-primary); width: auto; max-width: min(420px, calc(100vw - 32px)); }
.lf-toast--success.swal2-popup { border-inline-start-color: #10b981; }
.lf-toast--error.swal2-popup { border-inline-start-color: #ef4444; }
.lf-toast--warning.swal2-popup { border-inline-start-color: #f59e0b; }
.lf-toast--info.swal2-popup { border-inline-start-color: #0ea5e9; }
.lf-toast .swal2-icon { width: 26px; height: 26px; min-width: 26px; margin: 0 .75rem 0 0; border-width: 2px; }
.lf-toast .swal2-icon .swal2-icon-content { font-size: 1rem; }
.lf-toast .swal2-icon.swal2-success [class^="swal2-success-line"] { height: 2px; }
.lf-toast .swal2-icon.swal2-success .swal2-success-line-tip { width: .5em; left: .3em; top: .85em; }
.lf-toast .swal2-icon.swal2-success .swal2-success-line-long { width: .9em; right: .15em; top: .7em; }
.lf-toast .lf-toast-text { margin: 0; padding: 0 1.5rem 0 0; font-size: .92rem; font-weight: 600; line-height: 1.45; text-align: start; }
.lf-toast .lf-toast-list { margin: 0; padding-inline-start: 1.1rem; font-weight: 500; }
.lf-toast .lf-toast-list li + li { margin-top: .2rem; }
.lf-toast .lf-toast-close { position: absolute; top: .35rem; inset-inline-end: .35rem; width: 1.6rem; height: 1.6rem; font-size: 1.3rem; color: var(--lf-muted); }
.lf-toast .lf-toast-close:hover { color: var(--lf-ink); background: transparent; }
.lf-toast .swal2-timer-progress-bar { background: rgba(var(--lf-primary-rgb), .35); height: 3px; }
.swal2-container.swal2-top-end { padding-top: 84px; } /* clear the sticky header */
@media (max-width: 575.98px) { .swal2-container.swal2-top-end { padding-top: 70px; } }
[data-bs-theme="dark"] .lf-toast.swal2-popup { box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px #24304a; }
[data-bs-theme="dark"] .lf-swal.swal2-popup { border-color: #24304a; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
[data-bs-theme="dark"] .lf-swal .lf-swal-text { color: #94a3b8; }
[data-bs-theme="dark"] .lf-swal .btn-light { background: #1e293b; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-swal .btn-light:hover { background: #273449; color: #fff; }

/* ==========================================================================
   Responsive layer
   --------------------------------------------------------------------------
   The storefront and panel were built desktop-first; everything below tunes
   them for phones and tablets and stops any single element from pushing the
   page sideways.
   ========================================================================== */

/* ---------- Overflow safety ---------- */
html { -webkit-text-size-adjust: 100%; }

/* `clip` rather than `hidden`: it stops sideways scroll without breaking
   position:sticky. The panel is scoped to its own content column so the fixed
   sidebar is never affected. */
body:not(.lf-panel) { overflow-x: clip; }
body.lf-panel .lf-content { overflow-x: clip; }

img, svg, video, canvas, iframe { max-width: 100%; }
img, svg, video { height: auto; }

/* A long unbroken word (a URL, an email, a German noun) must wrap rather than
   widen the page. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, label, .lf-course-title, .lf-sec-title {
    overflow-wrap: break-word;
}

pre, code { overflow-x: auto; max-width: 100%; }

/* Bootstrap tables do not shrink; any table that was not already wrapped gets
   its own scroller instead of stretching the layout. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Fluid display headings ---------- */
/* Bootstrap's .display-* are fixed rem sizes, which are far too big on a phone. */
.display-1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); }
.display-2 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.5rem); }
.display-3 { font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4rem); }
.display-4 { font-size: clamp(1.9rem, 1.25rem + 3vw, 3.5rem); }
.display-5 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem); }
.display-6 { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem); }

@media (max-width: 575.98px) {
    .lead { font-size: 1rem; }
}

/* ---------- Section rhythm ---------- */
@media (max-width: 991.98px) {
    .lf-sec { padding: 3.5rem 0; }
    .section { padding: 3.5rem 0; }
    .lf-sec-head { margin-bottom: 1.75rem; }
}

@media (max-width: 575.98px) {
    .lf-sec { padding: 2.75rem 0; }
    .section { padding: 2.75rem 0; }
    .lf-stat { padding: 1.5rem 1rem; }
}

/* ---------- Hero ---------- */
@media (max-width: 991.98px) {
    .hero .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .hero .row { --bs-gutter-y: 2rem; }
}

@media (max-width: 575.98px) {
    /* Search collapses to a stacked field + full-width button. */
    .hero form.rounded-pill {
        border-radius: var(--lf-radius, 14px) !important;
        flex-direction: column;
        gap: .5rem;
        padding: .75rem !important;
    }
    .hero form.rounded-pill .form-control { text-align: center; }
    .hero form.rounded-pill .btn { width: 100%; border-radius: 999px; }

    .hero .d-flex.flex-wrap.gap-4 { gap: 1.25rem !important; margin-top: 2rem !important; }
    .hero-search { border-radius: var(--lf-radius, 14px) !important; flex-direction: column; gap: .5rem; padding: .75rem !important; }
    .hero-search-ico { display: none; }
    .hero-search .form-control { text-align: center; }
    .hero-search .btn { width: 100%; }
    .hero-title { font-size: 2.6rem; }
    .hero-orb { display: none; }
    .hero-glass { padding: .9rem; }
}
@media (max-width: 991.98px) {
    .hero-bento { grid-template-columns: 1fr 1fr; }
    .hero-bento-tile--course { grid-column: 1 / 3; grid-row: auto; }
    .hero-bento-tile--grad, .hero-bento-tile--wide { grid-column: 1 / 3; }
}

/* ---------- Cards & grids ---------- */
@media (max-width: 575.98px) {
    .card-body { padding: 1rem; }
    .lf-tile { padding: 1.1rem; }
    .lf-person { padding: 1.25rem .75rem; }
}

/* ---------- Panel (dashboard) ---------- */
@media (max-width: 767.98px) {
    .lf-page { padding: 1rem 1rem 2.5rem; }
    .lf-topbar { padding: .5rem .85rem; }
    .lf-page-title h1 { font-size: 1.05rem; }

    /* Toolbars above a table wrap instead of squeezing. */
    .lf-page .card-header { flex-wrap: wrap; gap: .5rem; }

    /* Action buttons in a table row keep their tap target. */
    .table .btn-sm { padding: .3rem .5rem; }
}

@media (max-width: 575.98px) {
    .lf-user-chip .name, .lf-user-chip .role { display: none; }
    .lf-page > .d-flex.justify-content-between { flex-wrap: wrap; gap: .6rem; }
    .pagination { flex-wrap: wrap; }
}

/* Panel filter toolbars: wrap and let fixed-width controls shrink. */
@media (max-width: 575.98px) {
    .lf-page form.d-flex { flex-wrap: wrap; }
    .lf-page form.d-flex > *,
    .lf-page form.d-flex .form-control,
    .lf-page form.d-flex .form-select { min-width: 0 !important; }
}

/* "All My Courses" rows: on a narrow phone the course title, status badge,
   and Open button all fighting for one line leaves almost nothing for the
   title. Let the course info take its own line and the badge/button wrap
   to the next instead of truncating hard. */
@media (max-width: 575.98px) {
    .lf-enrollment-row { flex-wrap: wrap; }
    .lf-enrollment-row .lf-course-mini { flex: 1 1 100%; }
}

/* ---------- Forms ---------- */
@media (max-width: 575.98px) {
    /* iOS zooms the page when a field's text is under 16px. */
    .form-control, .form-select { font-size: 16px; }
    .form-control-sm, .form-select-sm { font-size: 15px; }

    /* Stacked button groups read better than a squashed row. */
    .card-footer .btn + .btn { margin-top: .4rem; }
}

/* ---------- Auth & explainer ---------- */
@media (max-width: 575.98px) {
    .lf-auth-card { padding-inline: 0; }
    .lf-hiw-toggle { padding: .6rem .7rem; }
}

/* ---------- Demo accounts box (login screen) ---------- */
/* Amber on purpose: it must read as a temporary, non-production aid and stand
   apart from the indigo UI without competing with the Login button. */
.lf-demo-box {
    position: relative;
    border: 1.5px solid rgba(245, 158, 11, .45);
    background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
    border-radius: var(--lf-radius);
    padding: 1.1rem 1rem .9rem;
}
.lf-demo-tag {
    position: absolute; top: -.65rem; left: 1rem;
    background: #f59e0b; color: #fff;
    font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: .18rem .55rem; border-radius: 999px;
    box-shadow: 0 4px 10px rgba(245,158,11,.35);
}
.lf-demo-head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .85rem; }
.lf-demo-head > i {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(245,158,11,.18); color: #b45309; font-size: 1rem;
}
.lf-demo-head strong { display: block; font-size: .92rem; line-height: 1.3; }
.lf-demo-head span { display: block; font-size: .78rem; color: var(--lf-muted); line-height: 1.45; }
.lf-demo-head code { background: rgba(245,158,11,.16); color: #b45309; padding: 0 .3rem; border-radius: 5px; font-weight: 700; }

.lf-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.lf-demo-box .lf-demo-chip {
    display: flex; align-items: center; gap: .6rem; text-align: left; width: 100%;
    border: 1px solid rgba(245,158,11,.35); border-radius: 11px; background: var(--lf-card);
    padding: .55rem .7rem; color: var(--lf-ink); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lf-demo-box .lf-demo-chip:disabled { opacity: .55; cursor: default; }
.lf-demo-box .lf-demo-chip.is-busy { opacity: 1; border-color: var(--lf-primary); color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.08); }
.lf-demo-box .lf-demo-chip:hover {
    border-color: #f59e0b; transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(245,158,11,.22); background: var(--lf-card); color: var(--lf-ink);
}
.lf-demo-box .lf-demo-chip > i {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(245,158,11,.15); color: #b45309; font-size: .95rem;
}
.lf-demo-box .lf-demo-chip .role { display: block; font-weight: 700; font-size: .82rem; line-height: 1.2; }
.lf-demo-box .lf-demo-chip .desc { display: block; font-size: .68rem; color: var(--lf-muted); line-height: 1.3; }

[data-bs-theme="dark"] .lf-demo-box { border-color: rgba(245,158,11,.4); background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.05)); }
[data-bs-theme="dark"] .lf-demo-head > i,
[data-bs-theme="dark"] .lf-demo-box .lf-demo-chip > i,
[data-bs-theme="dark"] .lf-demo-head code { color: #fbbf24; }
[data-bs-theme="dark"] .lf-demo-box .lf-demo-chip { background: #131c31; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-demo-box .lf-demo-chip:hover { background: #172033; color: #f1f5f9; }

/* ===== Certificate designer (Admin → Certificate Templates → Visual designer) ===== */
.cert-canvas-editor { position: relative; width: 100%; aspect-ratio: 1000 / 700; background: #fff center / cover no-repeat; container-type: inline-size; overflow: hidden; outline: none; box-shadow: 0 6px 24px rgba(17,24,39,.12); border-radius: 4px; user-select: none; }
.cert-canvas-editor .ce { position: absolute; box-sizing: border-box; cursor: move; word-wrap: break-word; min-height: 4px; }
.cert-canvas-editor .ce:hover { outline: 1px dashed rgba(var(--lf-primary-rgb),.6); }
.cert-canvas-editor .ce.ce-selected { outline: 2px solid var(--lf-primary); }
.cert-canvas-editor .ce img { width: 100%; height: auto; display: block; pointer-events: none; }
.cert-canvas-editor .ce-ph { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 6px, #e5e7eb 6px, #e5e7eb 12px); color: #6b7280; font: 600 1.2cqw/1 Arial, sans-serif; letter-spacing: .1em; border: 1px dashed #9ca3af; }
.cert-canvas-editor .ce-resize { position: absolute; right: -6px; top: 50%; width: 10px; height: 18px; margin-top: -9px; background: var(--lf-primary); border-radius: 3px; cursor: ew-resize; display: none; }
.cert-canvas-editor .ce.ce-selected .ce-resize { display: block; }
.cert-canvas-editor .ce-line { pointer-events: auto; }
.cert-canvas-editor .ce-line::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; } /* easier to grab a 2px line */
[data-bs-theme=dark] .cert-canvas-editor { box-shadow: 0 6px 24px rgba(0,0,0,.5); }

/* ===== Checkout (cart → payment) ===== */
.lf-checkout-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lf-checkout-head h1 { margin: 0; }
.lf-checkout-head .lf-checkout-sub { font-size: .88rem; color: var(--lf-muted); margin: .2rem 0 0; }
.lf-secure-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #15803d; background: rgba(34,197,94,.12); border-radius: 999px; padding: .4rem .8rem; white-space: nowrap; }

/* Stepper: Cart → Payment → Done */
.lf-steps { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; font-weight: 600; color: var(--lf-muted); }
.lf-steps li { display: flex; align-items: center; gap: .45rem; }
.lf-steps li + li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--lf-border); margin: 0 .35rem; }
.lf-steps li.done + li::before { background: #22c55e; }
.lf-steps li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--lf-card); border: 1.5px solid var(--lf-border); }
.lf-steps li.done > span { background: rgba(34,197,94,.14); border-color: transparent; color: #15803d; }
.lf-steps li.active { color: var(--lf-ink); }
.lf-steps li.active > span { background-image: var(--lf-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(var(--lf-primary-rgb),.3); }

/* Card shell used by every checkout panel */
.lf-checkout-card { border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); background: var(--lf-card); box-shadow: var(--lf-shadow-sm); }
.lf-checkout-stack > * + * { margin-top: 1.25rem; } /* cards in a column, whether or not a <form> wraps one */
.lf-cc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--lf-border); }
.lf-cc-head h2 { font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: .65rem; }
.lf-cc-head h2 > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--lf-primary-rgb),.1); color: var(--lf-primary); font-size: .95rem; }
.lf-cc-head .lf-cc-hint { font-size: .8rem; color: var(--lf-muted); }
.lf-cc-body { padding: 1.4rem; }

/* Order bump */
.lf-bump { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-radius: var(--lf-radius-lg); border: 1px solid rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03) 60%, transparent); }
.lf-bump img { width: 84px; height: 56px; object-fit: cover; border-radius: 12px; box-shadow: var(--lf-shadow-sm); }
.lf-bump .lf-bump-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; background: rgba(245,158,11,.18); border-radius: 999px; padding: .2rem .6rem; margin-bottom: .3rem; }
.lf-bump .lf-bump-title { font-weight: 700; line-height: 1.3; }
.lf-bump .lf-bump-price { font-size: .84rem; color: var(--lf-muted); }
.lf-bump .lf-bump-actions { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.lf-bump .lf-bump-dismiss { color: var(--lf-muted); font-weight: 600; text-decoration: none; padding: .1rem .5rem; }
.lf-bump .lf-bump-dismiss:hover { color: var(--lf-ink); text-decoration: underline; }
.lf-bump .lf-bump-price s { margin-right: .3rem; }
.lf-bump .lf-bump-price strong { color: #15803d; }
.lf-bump .btn { white-space: nowrap; }

/* Payment method picker */
.lf-pay-group-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--lf-muted); margin: 1.25rem 0 .65rem; }
.lf-pay-group-title:first-child { margin-top: 0; }
.lf-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lf-pay-option { position: relative; display: flex; align-items: center; gap: .85rem; margin: 0; padding: .85rem 1rem; border: 1.5px solid var(--lf-border); border-radius: 14px; background: var(--lf-card); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s; }
.lf-pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lf-pay-option:hover { border-color: rgba(var(--lf-primary-rgb),.45); transform: translateY(-1px); box-shadow: var(--lf-shadow-sm); }
.lf-pay-option:has(input:focus-visible) { outline: 3px solid var(--lf-primary); outline-offset: 2px; }
/* Brand logos of a payment method (Moyasar + mada, Tabby, Tamara) on a white chip so they read in dark mode too. */
.lf-pay-logos { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--lf-border, #e6e8f0); }
.lf-pay-logos img { height: 24px; width: auto; max-width: 88px; object-fit: contain; display: block; }
.lf-gw-nav-logo { height: 18px; width: 36px; object-fit: contain; flex: 0 0 36px; }
.lf-pay-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: #f1f3f9; color: var(--lf-ink); transition: background .15s, color .15s; }
.lf-pay-text { min-width: 0; flex: 1; }
.lf-pay-label { display: block; font-weight: 700; font-size: .92rem; line-height: 1.25; }
.lf-pay-sub { display: block; font-size: .75rem; color: var(--lf-muted); margin-top: .15rem; line-height: 1.35; }
.lf-pay-check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1.5px solid var(--lf-border); display: grid; place-items: center; color: #fff; font-size: .7rem; transition: background .15s, border-color .15s; }
.lf-pay-check::before { content: "\f633"; font-family: "bootstrap-icons"; opacity: 0; transition: opacity .15s; }
.lf-pay-option.is-selected,
.lf-pay-option:has(input:checked) { border-color: var(--lf-primary); background: rgba(var(--lf-primary-rgb),.05); box-shadow: 0 0 0 3px rgba(var(--lf-primary-rgb),.12); }
.lf-pay-option.is-selected .lf-pay-ico,
.lf-pay-option:has(input:checked) .lf-pay-ico { background-image: var(--lf-grad); color: #fff; }
.lf-pay-option.is-selected .lf-pay-check,
.lf-pay-option:has(input:checked) .lf-pay-check { background-image: var(--lf-grad); border-color: transparent; }
.lf-pay-option.is-selected .lf-pay-check::before,
.lf-pay-option:has(input:checked) .lf-pay-check::before { opacity: 1; }
.lf-pay-option.is-disabled { opacity: .55; cursor: not-allowed; }
.lf-pay-option.is-disabled:hover { transform: none; border-color: var(--lf-border); box-shadow: none; }
.lf-pay-option .lf-pay-flag { position: absolute; top: -9px; right: 12px; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .18rem .5rem; border-radius: 999px; background-image: var(--lf-grad); color: #fff; }

/* Extra fields that belong to one method (invoice / PO) */
.lf-pay-panel { display: none; margin-top: 1rem; padding: 1.1rem 1.2rem; border: 1px dashed rgba(var(--lf-primary-rgb),.4); border-radius: 14px; background: rgba(var(--lf-primary-rgb),.03); }
.lf-pay-panel.show { display: block; animation: lfFadeUp .3s ease both; }
.lf-pay-panel .form-label { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }

/* Trust chips under the picker */
.lf-trust-row { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--lf-border); font-size: .78rem; color: var(--lf-muted); }
.lf-trust-row span { display: inline-flex; align-items: center; gap: .4rem; }
.lf-trust-row i { color: #16a34a; }

/* Items in this order */
.lf-order-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--lf-border); }
.lf-order-item:first-child { padding-top: 0; }
.lf-order-item:last-child { border-bottom: 0; padding-bottom: 0; }
.lf-order-item .lf-order-price { font-weight: 700; white-space: nowrap; }

/* Summary column (sticky on desktop) */
.lf-summary { position: sticky; top: 96px; }
.lf-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; font-size: .92rem; }
.lf-summary-row .lf-sr-label { color: var(--lf-muted); display: inline-flex; align-items: center; gap: .5rem; }
.lf-summary-row.is-discount { color: #15803d; }
.lf-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .9rem; margin-top: .5rem; border-top: 1px solid var(--lf-border); }
.lf-summary-total .lf-total-amt { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.lf-summary-total small { display: block; font-size: .74rem; color: var(--lf-muted); margin-top: .35rem; font-weight: 500; }
.lf-coupon-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; background: rgba(34,197,94,.14); color: #15803d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.lf-coupon-toggle { background: none; border: 0; padding: 0; font-size: .84rem; font-weight: 600; color: var(--lf-primary); display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; }
.lf-coupon-toggle i { transition: transform .2s; }
.lf-coupon-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.lf-coupon-form { margin-top: .75rem; }
.lf-coupon-form .form-control { border-radius: 12px 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.lf-coupon-form .btn { border-radius: 0 12px 12px 0; }
.lf-pay-btn { padding: .9rem 1.2rem; font-size: 1rem; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.lf-summary-foot { text-align: center; font-size: .76rem; color: var(--lf-muted); margin-top: .85rem; }
.lf-summary-foot a { color: var(--lf-muted); text-decoration: underline; }

/* What the buyer gets — fills the column under the summary */
.lf-perks { display: grid; gap: .9rem; }
.lf-perk { display: flex; gap: .85rem; align-items: flex-start; }
.lf-perk > i { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; }
.lf-perk strong { display: block; font-size: .88rem; line-height: 1.3; }
.lf-perk span { display: block; font-size: .78rem; color: var(--lf-muted); line-height: 1.4; margin-top: .1rem; }
.lf-help-line { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--lf-border); font-size: .8rem; color: var(--lf-muted); }
.lf-help-line a { font-weight: 600; }

/* Sticky pay bar on phones (the summary card scrolls away) */
.lf-checkout-bar { display: none; position: sticky; bottom: 0; z-index: 1020; margin: 1rem -12px 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--lf-border); box-shadow: 0 -10px 30px rgba(15,23,42,.08); }
.lf-checkout-bar .lf-bar-total { line-height: 1.15; }
.lf-checkout-bar .lf-bar-total small { display: block; font-size: .7rem; color: var(--lf-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.lf-checkout-bar .lf-bar-total strong { font-size: 1.15rem; }

@media (max-width: 991.98px) {
    .lf-summary { position: static; }
    .lf-checkout-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
}
@media (max-width: 575.98px) {
    .lf-pay-grid { grid-template-columns: 1fr; }
    .lf-cc-body, .lf-cc-head { padding-left: 1rem; padding-right: 1rem; }
    .lf-steps li > em { display: none; }
    .lf-steps li.active > em { display: inline; }
    .lf-bump .btn { width: 100%; }
}

[data-bs-theme="dark"] .lf-pay-ico { background: #1c2640; color: #e2e8f0; }
[data-bs-theme="dark"] .lf-pay-option:has(input:checked),
[data-bs-theme="dark"] .lf-pay-option.is-selected { background: rgba(var(--lf-primary-rgb),.12); }
[data-bs-theme="dark"] .lf-pay-panel { background: rgba(var(--lf-primary-rgb),.08); }
[data-bs-theme="dark"] .lf-secure-tag, [data-bs-theme="dark"] .lf-coupon-tag, [data-bs-theme="dark"] .lf-steps li.done > span { color: #4ade80; background: rgba(34,197,94,.16); }
[data-bs-theme="dark"] .lf-summary-row.is-discount { color: #4ade80; }
[data-bs-theme="dark"] .lf-coupon-toggle { color: #a5b4fc; }
[data-bs-theme="dark"] .lf-bump { border-color: rgba(245,158,11,.4); background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.04) 60%, transparent); }
[data-bs-theme="dark"] .lf-bump .lf-bump-tag { color: #fbbf24; }
[data-bs-theme="dark"] .lf-bump .lf-bump-price strong { color: #4ade80; }
[data-bs-theme="dark"] .lf-checkout-bar { background: rgba(19,28,49,.92); }

/* Language flags in the switchers (Arabic → Saudi Arabia, English → USA) */
.lf-flag{width:20px;height:15px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.1);flex:0 0 auto;display:inline-block;vertical-align:middle}
.lf-flag-lg{width:24px;height:18px}

/* Rich-text content (pages + "Text block" sections), written with the editor */
.lf-prose-narrow{max-width:760px}
.lf-prose-normal{max-width:960px}
.lf-prose{font-size:1.04rem;line-height:1.85;color:var(--bs-body-color);overflow-wrap:anywhere}
.lf-prose>*:first-child{margin-top:0}
.lf-prose h1,.lf-prose h2,.lf-prose h3,.lf-prose h4{font-weight:800;letter-spacing:-.02em;margin:1.8rem 0 .8rem;line-height:1.3}
.lf-prose h2{font-size:1.7rem}.lf-prose h3{font-size:1.35rem}.lf-prose h4{font-size:1.15rem}
.lf-prose p{margin:0 0 1rem}
.lf-prose a{color:var(--lf-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lf-prose ul,.lf-prose ol{padding-inline-start:1.4rem;margin:0 0 1rem}
.lf-prose li{margin-bottom:.35rem}
.lf-prose li[data-list=bullet]{list-style-type:disc}
.lf-prose blockquote{margin:1.4rem 0;padding:1rem 1.25rem;border-inline-start:4px solid var(--lf-primary);background:rgba(var(--lf-primary-rgb),.06);border-radius:.75rem;font-size:1.08rem}
.lf-prose img{max-width:100%;height:auto;border-radius:1rem;margin:1rem 0;box-shadow:0 10px 30px -18px rgba(15,23,42,.45)}
.lf-prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:1rem;margin:1rem 0}
.lf-prose pre{background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:.75rem;direction:ltr;text-align:left}
.lf-prose table{width:100%;border-collapse:collapse;margin:1rem 0}
.lf-prose th,.lf-prose td{border:1px solid var(--bs-border-color);padding:.55rem .75rem}
.lf-prose th{background:var(--bs-tertiary-bg)}
.lf-prose .ql-align-center{text-align:center}.lf-prose .ql-align-right{text-align:right}.lf-prose .ql-align-left{text-align:left}.lf-prose .ql-align-justify{text-align:justify}
.lf-prose .ql-direction-rtl{direction:rtl}
.lf-prose .ql-size-small{font-size:.85em}.lf-prose .ql-size-large{font-size:1.35em}.lf-prose .ql-size-huge{font-size:1.9em}
.lf-prose .ql-indent-1{padding-inline-start:2em}.lf-prose .ql-indent-2{padding-inline-start:4em}.lf-prose .ql-indent-3{padding-inline-start:6em}
/* Page header for website pages */
.lf-page-hero{padding:3.2rem 0 2.4rem;background:radial-gradient(900px 300px at 15% -40%,rgba(var(--lf-primary-rgb),.18),transparent),var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color-translucent)}
.lf-page-hero h1{font-weight:800;letter-spacing:-.03em;margin:0}
.lf-page-crumbs{font-size:.85rem;margin-bottom:.6rem}
.lf-page-crumbs a{color:var(--bs-secondary-color);text-decoration:none}
.lf-subpage-card{display:block;height:100%;padding:1.25rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);color:inherit;text-decoration:none;transition:all .15s}
.lf-subpage-card:hover{border-color:var(--lf-primary);transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(var(--lf-primary-rgb),.6)}

/* ── Learning paths (/tracks) — client catalogue, Oct 2026 ─────────────────── */
.lf-track-card{display:flex;flex-direction:column;border:1px solid var(--bs-border-color);border-radius:22px;overflow:hidden;background:var(--bs-body-bg);transition:box-shadow .2s,transform .2s}
.lf-track-card:hover{box-shadow:0 18px 40px -22px rgba(15,23,42,.35);transform:translateY(-2px)}
.lf-track-cover{display:block;aspect-ratio:16/7;background:linear-gradient(135deg,var(--lf-primary),var(--lf-primary-2,var(--lf-primary)));position:relative;overflow:hidden}
.lf-track-cover img{width:100%;height:100%;object-fit:cover}
.lf-track-cover-ico{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.92);font-size:3.2rem}
.lf-track-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 160px at 85% 0%,rgba(255,255,255,.18),transparent)}
.lf-track-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.lf-track-body .btn{align-self:flex-start;margin-top:auto}
.lf-track-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .75rem;border-radius:999px;font-size:.84rem;background:var(--bs-tertiary-bg);color:var(--bs-body-color);text-decoration:none;border:1px solid transparent;transition:all .15s}
.lf-track-chip:hover{border-color:rgba(var(--lf-primary-rgb),.4);color:var(--lf-primary)}
.lf-track-hero-ico{width:58px;height:58px;flex-shrink:0;display:grid;place-items:center;border-radius:16px;background:rgba(var(--lf-primary-rgb),.12);color:var(--lf-primary);font-size:1.6rem}
.lf-track-subnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}
.lf-track-subnav-item{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border:1px solid var(--bs-border-color);border-radius:16px;background:var(--bs-body-bg);color:var(--bs-body-color);text-decoration:none;transition:all .15s}
.lf-track-subnav-item:hover{border-color:var(--lf-primary);box-shadow:0 10px 24px -16px rgba(var(--lf-primary-rgb),.6);color:var(--bs-body-color)}
.lf-track-subnav-ico{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:rgba(var(--lf-primary-rgb),.1);color:var(--lf-primary);font-size:1.15rem}
.lf-track-search{position:relative;display:flex;align-items:center;gap:.5rem;max-width:620px;padding:.4rem .4rem .4rem 1rem;border:1px solid var(--bs-border-color);border-radius:999px;background:var(--bs-body-bg);box-shadow:0 10px 30px -22px rgba(15,23,42,.4)}
[dir=rtl] .lf-track-search{padding:.4rem 1rem .4rem .4rem}
.lf-track-search>i{color:var(--bs-secondary-color)}
.lf-track-search input{flex:1;border:0;outline:0;background:transparent;min-width:0;padding:.45rem .25rem;color:var(--bs-body-color)}
.lf-track-search .btn{border-radius:999px;padding-inline:1.3rem}
/* Course card (client design): snipped corner, picture, two separate actions. */
.lf-ccard{display:flex;flex-direction:column;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:18px;overflow:hidden;position:relative;transition:box-shadow .2s,transform .2s;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
[dir=rtl] .lf-ccard{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
/* Page numbers in the brand colour. */
.pagination{--bs-pagination-active-bg:var(--lf-primary);--bs-pagination-active-border-color:var(--lf-primary);--bs-pagination-color:var(--lf-primary);--bs-pagination-hover-color:var(--lf-primary);--bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(var(--lf-primary-rgb),.2)}
.lf-ccard:hover{box-shadow:0 18px 38px -22px rgba(15,23,42,.4);transform:translateY(-3px)}
.lf-ccard-media{display:block;aspect-ratio:16/10;background:var(--bs-tertiary-bg);position:relative;overflow:hidden}
.lf-ccard-media>a{display:block;width:100%;height:100%}
.lf-ccard-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
/* Flag at the end corner (the snipped corner is at the start), heart at the bottom. */
.lf-ccard-flag{inset-inline-start:auto!important;inset-inline-end:.75rem}
.lf-ccard-media .lf-wishlist-form{position:absolute;top:auto;bottom:.75rem;inset-inline-end:.75rem;left:auto}
[dir=rtl] .lf-ccard-media .lf-wishlist-form{left:.75rem;right:auto}
[dir=ltr] .lf-ccard-media .lf-wishlist-form{right:.75rem;left:auto}
.lf-ccard:hover .lf-ccard-media img{transform:scale(1.04)}
.lf-ccard-flag{position:absolute;top:.75rem;inset-inline-start:.75rem;display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:999px;font-size:.76rem;font-weight:700;color:#fff;background:var(--lf-primary)}
.lf-ccard-flag.is-soon{background:#b7791f}
.lf-ccard-flag.is-deal{background:#dc2626}
.lf-ccard-body{display:flex;flex-direction:column;flex:1;padding:1.05rem 1.15rem 1.15rem;gap:.45rem}
.lf-ccard-cat{font-size:.76rem;font-weight:700;color:var(--lf-primary)}
.lf-ccard-title{font-size:1.02rem;font-weight:800;line-height:1.45;margin:0;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lf-ccard-title a{color:inherit;text-decoration:none}
.lf-ccard-title a:hover{color:var(--lf-primary)}
.lf-ccard-text{font-size:.86rem;color:var(--bs-secondary-color);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lf-ccard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font-size:.8rem;color:var(--bs-secondary-color);margin-top:auto;padding-top:.35rem}
.lf-ccard-meta i{margin-inline-end:.25rem}
.lf-ccard-price{font-weight:800;font-size:1rem;color:var(--bs-body-color)}
.lf-ccard-price del{font-weight:500;font-size:.8rem;color:var(--bs-secondary-color);margin-inline-start:.4rem}
.lf-ccard-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding-top:.75rem;border-top:1px dashed var(--bs-border-color)}
.lf-ccard-actions .btn{border-radius:12px;font-weight:700;padding:.5rem .6rem}

/* ── Two-row header: logo · search · account, then the menu (client design) ── */
.lf-header--rows .lf-header-inner{min-height:78px}
.lf-searchbox--center{flex:1 1 auto;max-width:560px;margin-inline:auto;height:46px;border-radius:999px}
.lf-header--rows .lf-header-actions{margin-inline-start:0}
.lf-header-navrow{border-top:1px solid var(--bs-border-color-translucent)}
.lf-mnav{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:.25rem}
.lf-mnav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.85rem 1rem;font-weight:700;font-size:.95rem;color:var(--bs-body-color);text-decoration:none;position:relative;white-space:nowrap;transition:color .15s}
.lf-mnav-link::after{content:"";position:absolute;inset-inline:1rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--lf-primary);transform:scaleX(0);transition:transform .2s}
.lf-mnav-link:hover,.lf-mnav-item:hover>.lf-mnav-link,.lf-mnav-item:focus-within>.lf-mnav-link{color:var(--lf-primary)}
.lf-mnav-link.is-active{color:var(--lf-primary)}
.lf-mnav-link.is-active::after,.lf-mnav-item:hover>.lf-mnav-link::after{transform:scaleX(1)}
.lf-mnav-caret{font-size:.7rem;transition:transform .2s}
.lf-mnav-item{position:relative;display:flex}
.lf-mnav-item:hover .lf-mnav-caret,.lf-mnav-item:focus-within .lf-mnav-caret{transform:rotate(180deg)}
.lf-mnav-panel{position:absolute;top:100%;inset-inline-start:50%;z-index:1050;min-width:240px;padding:.6rem;border-radius:18px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);box-shadow:0 24px 50px -20px rgba(15,23,42,.35);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s}
[dir=rtl] .lf-mnav-panel{transform:translate(50%,8px)}
.lf-mnav-item:hover>.lf-mnav-panel,.lf-mnav-item:focus-within>.lf-mnav-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
[dir=rtl] .lf-mnav-item:hover>.lf-mnav-panel,[dir=rtl] .lf-mnav-item:focus-within>.lf-mnav-panel{transform:translate(50%,0)}
.lf-mnav-list{list-style:none;margin:0;padding:0}
.lf-mnav-list a{display:block;padding:.55rem .8rem;border-radius:10px;color:var(--bs-body-color);text-decoration:none;font-weight:600;font-size:.92rem}
.lf-mnav-list a:hover,.lf-mnav-list a.is-active{background:rgba(var(--lf-primary-rgb),.08);color:var(--lf-primary)}
.lf-mnav-item.is-mega>.lf-mnav-panel{min-width:min(860px,92vw);padding:1.25rem}
.lf-mnav-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem 1.5rem}
.lf-mnav-head{display:block;font-weight:800;color:var(--bs-emphasis-color);text-decoration:none;padding:.35rem .5rem .5rem;border-bottom:2px solid rgba(var(--lf-primary-rgb),.15);margin-bottom:.35rem}
.lf-mnav-head:hover,.lf-mnav-head.is-active{color:var(--lf-primary)}
.lf-mnav-col ul{list-style:none;margin:0;padding:0}
.lf-mnav-col li a{display:flex;align-items:center;gap:.4rem;padding:.38rem .5rem;border-radius:9px;font-size:.88rem;color:var(--bs-body-color);text-decoration:none}
.lf-mnav-col li a i{font-size:.65rem;color:var(--lf-primary);opacity:.6}
.lf-mnav-col li a:hover,.lf-mnav-col li a.is-active{background:rgba(var(--lf-primary-rgb),.07);color:var(--lf-primary)}
/* Drawer: sub-pages fold under their parent. */
.lf-drawer-group summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:.7rem .85rem;border-radius:12px;font-weight:600}
.lf-drawer-group summary::-webkit-details-marker{display:none}
.lf-drawer-group summary i{font-size:.75rem;transition:transform .2s}
.lf-drawer-group[open]>summary{color:var(--lf-primary)}
.lf-drawer-group[open]>summary i{transform:rotate(180deg)}
.lf-drawer-group .lf-drawer-sub{padding-inline-start:1.6rem!important;font-size:.92rem}
.lf-drawer-group--sub summary{padding-inline-start:1.6rem;font-size:.92rem}
.lf-drawer-group--sub .lf-drawer-sub{padding-inline-start:2.4rem!important}

/* ── Footer (client design): two link columns + emblem, then a gold bar ─────── */
.lf-footer.lf-footer--pb{background:radial-gradient(900px 260px at 50% -40%,rgba(255,255,255,.08),transparent),linear-gradient(180deg,#0e3b2e,#0a2c22);color:#d6e4dd;padding:0}
.lf-footer--pb .lf-footer-heading{color:#fff;font-weight:800;font-size:1.05rem;padding-bottom:.75rem;margin-bottom:1rem;border-bottom:2px solid rgba(212,175,55,.55);display:inline-block;min-width:70%}
.lf-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.lf-footer--pb .lf-footer-link{color:#d6e4dd;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .15s,transform .15s}
.lf-footer--pb .lf-footer-link::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid #d4af37;flex-shrink:0}
.lf-footer--pb .lf-footer-link:hover{color:#fff;transform:translateX(-3px)}
[dir=ltr] .lf-footer--pb .lf-footer-link:hover{transform:translateX(3px)}
.lf-footer-emblem{width:132px;height:132px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 6px rgba(212,175,55,.35),0 18px 40px -16px rgba(0,0,0,.6)}
.lf-footer-emblem img{width:84px;height:auto}
.lf-footer-contact{display:grid;gap:.4rem;margin-top:1.25rem;font-size:.9rem}
.lf-footer-contact a{color:#d6e4dd;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.lf-footer-contact a:hover{color:#fff}
.lf-footer-bar{background:linear-gradient(90deg,#c9a227,#e6c45a 50%,#c9a227);color:#3a2a00}
.lf-footer-bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:.7rem}
.lf-footer--pb .lf-footer-copyright{color:#3a2a00;font-weight:700;font-size:.88rem;text-align:center;flex:1 1 260px}
.lf-footer-pay{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.lf-pmark{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:46px;padding:0 .5rem;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lf-pmark img{display:block;width:auto;max-width:70px;object-fit:contain}
.lf-pmark--text{font-weight:800;font-size:.85rem;color:#111;gap:.15rem}
.lf-pmark--text i{font-size:.95rem}
.lf-footer-socials{display:flex;flex-wrap:wrap;gap:.4rem}
.lf-soc{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:#fff;text-decoration:none;font-size:1rem;transition:transform .15s}
.lf-soc:hover{color:#fff;transform:translateY(-2px)}
.lf-soc--facebook{background:#1877f2}.lf-soc--x{background:#111}.lf-soc--instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.lf-soc--tiktok{background:#111}.lf-soc--linkedin{background:#0a66c2}.lf-soc--snapchat{background:#fffc00;color:#111}.lf-soc--snapchat:hover{color:#111}
.lf-soc--youtube{background:#ff0000}.lf-soc--whatsapp{background:#25d366}
@media (max-width:767.98px){.lf-footer-bar-inner{justify-content:center}.lf-footer--pb .lf-footer-heading{min-width:100%}}

/* ── Showcase hero (client design): text + map, devices picture ───────────── */
.lf-showcase{position:relative;overflow:hidden;padding-block:clamp(2.5rem,6vw,5rem)}
.lf-showcase-glow{position:absolute;inset:-30% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--lf-primary-rgb),.10),transparent);pointer-events:none}
[dir=rtl] .lf-showcase-glow{inset:-30% auto auto -10%}
.lf-showcase-title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.25;color:var(--lf-ink);margin-bottom:.6rem;animation:lfRise .7s both}
.lf-showcase-brand{font-weight:800;letter-spacing:.14em;color:var(--lf-primary);font-size:clamp(1rem,1.8vw,1.3rem);animation:lfRise .7s .1s both}
.lf-showcase-brand::after{content:"";display:block;width:64px;height:3px;margin:.65rem auto 0;border-radius:3px;background:linear-gradient(90deg,#c9a227,#e6c45a)}
.lf-showcase-text{color:var(--lf-primary);font-weight:600;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.9;max-width:560px;margin:1rem auto 0;animation:lfRise .7s .2s both}
.lf-showcase-map{margin-top:2rem;animation:lfRise .9s .3s both}
.lf-showcase-map img{width:100%;max-width:560px;height:auto;animation:lfFloat 9s ease-in-out infinite}
.lf-showcase-devices{position:relative;aspect-ratio:1.25;max-width:620px;margin-inline:auto;animation:lfRise .8s .15s both}
.lf-showcase-devices.has-image{aspect-ratio:auto}
.lf-showcase-img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(15,23,42,.18))}
@keyframes lfRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Drawn devices */
.lf-dv{position:absolute;direction:ltr}
.lf-dv-screen{position:absolute;overflow:hidden;background:#fff}
.lf-dv--monitor{inset:0 0 auto 8%;width:88%;aspect-ratio:1.6;background:#1d232f;border-radius:14px;padding:2.2%;box-shadow:0 30px 60px rgba(15,23,42,.22)}
.lf-dv--monitor .lf-dv-screen{inset:2.2%;border-radius:4px}
.lf-dv-neck{position:absolute;left:44%;width:12%;top:100%;height:13%;background:linear-gradient(90deg,#b8bec8,#e3e7ed 50%,#b8bec8)}
.lf-dv-foot{position:absolute;left:34%;width:32%;top:calc(100% + 13%);height:3.5%;border-radius:6px 6px 2px 2px;background:linear-gradient(#e3e7ed,#aeb5c0)}
.lf-dv--tablet{left:0;bottom:4%;width:34%;aspect-ratio:.75;background:#1d232f;border-radius:16px;padding:3.5%;box-shadow:0 20px 40px rgba(15,23,42,.25);animation:lfFloat 7s ease-in-out infinite}
.lf-dv--tablet .lf-dv-screen{inset:4%;border-radius:6px}
.lf-dv--phone{left:27%;bottom:0;width:15%;aspect-ratio:.5;background:#1d232f;border-radius:14px;padding:3%;box-shadow:0 16px 30px rgba(15,23,42,.3);animation:lfFloat 6s 1s ease-in-out infinite}
.lf-dv--phone .lf-dv-screen{inset:5% 7%;border-radius:8px}
[dir=rtl] .lf-dv--monitor{inset:0 8% auto 0}
[dir=rtl] .lf-dv--tablet{left:auto;right:0}
[dir=rtl] .lf-dv--phone{left:auto;right:27%}
/* The miniature UI inside the devices */
.lf-dvui{position:absolute;inset:0;display:flex;flex-direction:column;gap:6%;padding:5%;background:#f7f8fb;font-size:0}
[dir=rtl] .lf-dvui{direction:rtl}
.lf-dvui-bar{display:flex;align-items:center;gap:6%;height:9%;flex-shrink:0}
.lf-dvui-bar img{height:100%;width:auto;max-width:30%;object-fit:contain}
.lf-dvui-dot{height:100%;aspect-ratio:1;border-radius:50%;background:var(--lf-primary)}
.lf-dvui-search{flex:1;height:70%;border-radius:99px;background:#e6e9ef}
.lf-dvui-nav{display:flex;gap:3%;height:4%;flex-shrink:0}
.lf-dvui-nav span{flex:1;border-radius:3px;background:rgba(var(--lf-primary-rgb),.75)}
.lf-dvui-hero{position:relative;height:24%;flex-shrink:0;border-radius:6px;background:linear-gradient(120deg,var(--lf-primary),#0a2c22);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10%;padding:0 6%}
.lf-dvui-hero span{display:block;height:12%;width:45%;border-radius:3px;background:rgba(255,255,255,.85)}
.lf-dvui-hero span+span{width:30%;background:#e6c45a}
.lf-dvui-hero i{position:absolute;inset-inline-end:-8%;top:-30%;width:45%;aspect-ratio:1;border-radius:50%;background:rgba(212,175,55,.25)}
.lf-dvui-cards{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:5%;flex:1;min-height:0}
.lf-dvui-card{display:flex;flex-direction:column;gap:6%;background:#fff;border-radius:5px;padding:5%;box-shadow:0 1px 3px rgba(15,23,42,.08);min-height:0;clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,0 100%)}
[dir=rtl] .lf-dvui-card{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 12%)}
.lf-dvui-card b{flex:1.4;border-radius:3px;background:linear-gradient(135deg,var(--lf-primary),#0a2c22)}
.lf-dvui-card span{height:7%;border-radius:2px;background:#d9dde5}
.lf-dvui-card span+span{width:60%}
.lf-dvui-card em{height:10%;width:45%;border-radius:3px;background:#e6c45a}
@media (max-width:991.98px){.lf-showcase-devices{max-width:520px}}

/* ── News & events slider ───────────────────────────────────────────────── */
.lf-news-slider{position:relative;padding-inline:clamp(0rem,3vw,2.75rem)}
.lf-news-track{display:grid}
.lf-news-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .5s,transform .5s,visibility 0s .5s}
[dir=rtl] .lf-news-slide{transform:translateX(-24px)}
.lf-news-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .5s}
.lf-news-media,.lf-news-body{height:100%;background:var(--lf-card);border:1px solid var(--lf-border);border-radius:var(--lf-radius-lg);box-shadow:var(--lf-shadow-sm)}
.lf-news-media{padding:.75rem;display:flex;flex-direction:column;gap:.6rem}
.lf-news-pics{position:relative;flex:1;min-height:280px;border-radius:calc(var(--lf-radius-lg) - 6px);overflow:hidden;background:#eef1f5}
.lf-news-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s,transform 6s}
.lf-news-pics img.is-on{opacity:1;transform:scale(1)}
.lf-news-pics.is-empty{display:grid;place-items:center;background:radial-gradient(circle at 85% 15%,rgba(212,175,55,.35),transparent 40%),linear-gradient(135deg,var(--lf-primary),#0a2c22);color:#fff;font-size:4rem}
.lf-news-logo{display:grid;place-items:center;width:min(70%,320px);padding:1.5rem 2rem;border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.lf-news-logo img{position:static;opacity:1;transform:none;width:100%;height:auto;max-height:120px;object-fit:contain}
.lf-news-thumbs{display:flex;gap:.5rem;overflow-x:auto}
.lf-news-thumbs button{flex:0 0 64px;height:48px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;opacity:.6;transition:.2s}
.lf-news-thumbs button.is-on,.lf-news-thumbs button:hover{opacity:1;border-color:var(--lf-primary)}
.lf-news-thumbs img{width:100%;height:100%;object-fit:cover}
.lf-news-body{padding:clamp(1.25rem,2.5vw,2rem);display:flex;flex-direction:column}
.lf-news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;color:var(--lf-muted);font-size:.875rem;margin-bottom:.75rem}
.lf-news-tag{background:rgba(var(--lf-primary-rgb),.1);color:var(--lf-primary);font-weight:700;padding:.2rem .7rem;border-radius:99px}
.lf-news-title{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;line-height:1.6;margin-bottom:.75rem}
.lf-news-title a{color:var(--lf-ink);text-decoration:none}
.lf-news-title a:hover{color:var(--lf-primary)}
.lf-news-text{color:var(--lf-muted);line-height:1.95;flex:1}
.lf-news-text p{margin-bottom:.6rem}
.lf-news-more{align-self:flex-start;font-weight:700;color:var(--lf-primary);text-decoration:none;margin-top:.5rem}
.lf-news-more:hover{text-decoration:underline}
.lf-news-arrow{position:absolute;top:45%;width:44px;height:44px;border-radius:50%;border:1px solid var(--lf-border);background:var(--lf-card);color:var(--lf-ink);box-shadow:var(--lf-shadow-sm);display:grid;place-items:center;transition:.2s;z-index:2}
.lf-news-arrow:hover{background:var(--lf-primary);color:#fff;border-color:var(--lf-primary)}
.lf-news-arrow.is-prev{inset-inline-start:-.5rem}.lf-news-arrow.is-next{inset-inline-end:-.5rem}
.lf-news-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.25rem}
.lf-news-dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:#cfd5df;transition:.3s}
.lf-news-dots button.is-on{width:28px;background:var(--lf-primary)}
@media (max-width:767.98px){.lf-news-arrow{top:140px}.lf-news-pics{min-height:220px}}

/* ── Our numbers ───────────────────────────────────────────────────────── */
.lf-counters-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:1rem}
.lf-counter-card{position:relative;text-align:center;padding:1.75rem 1rem 1.5rem;border-radius:var(--lf-radius-lg);background:var(--lf-card);border:1px solid var(--lf-border);box-shadow:var(--lf-shadow-sm);overflow:hidden;transition:transform .25s,box-shadow .25s}
.lf-counter-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--lf-primary),#e6c45a)}
.lf-counter-card:hover{transform:translateY(-4px);box-shadow:var(--lf-shadow)}
.lf-counter-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:.75rem;background:rgba(var(--lf-primary-rgb),.1);color:var(--lf-primary);font-size:1.45rem}
.lf-counter-num{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--lf-primary);line-height:1.1}
.lf-counter-suffix{color:#c9a227;margin-inline-start:.1rem}
.lf-counter-label{margin-top:.5rem;color:var(--lf-ink);font-weight:600;line-height:1.6}
@media (max-width:991.98px){.lf-counters-grid{grid-template-columns:repeat(min(var(--n),3),1fr)}}
@media (max-width:575.98px){.lf-counters-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Story in steps (About) ────────────────────────────────────────────── */
.lf-story-stage{position:relative}
.lf-stp.is-active .lf-stp-card{animation:lfStepIn .6s both}
.lf-stp.is-active .lf-stp-visual{animation:lfStepPic .8s both}
.lf-stp-card{position:relative;overflow:hidden;background:#eceef1;border-radius:clamp(28px,5vw,64px);padding:clamp(1.75rem,4vw,3.25rem)}
.lf-stp-ghost{position:absolute;inset-inline-end:clamp(1rem,3vw,2.5rem);bottom:-1.5rem;font-size:clamp(6rem,14vw,10rem);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(var(--lf-primary-rgb),.12);pointer-events:none}
.lf-stp-title{display:inline-flex;margin-bottom:1.5rem}
.lf-stp-title span{display:inline-grid;place-items:center;min-width:92px;min-height:92px;padding:.5rem 1rem;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 6px rgba(var(--lf-primary-rgb),.08);color:var(--lf-primary);font-size:1.35rem;font-weight:800}
.lf-stp-text p{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600;line-height:2.1;color:var(--lf-ink);margin-bottom:.75rem;animation:lfRise .6s calc(.12s + var(--d) * .08s) both}
.lf-stp-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.lf-stp-list li{position:relative;padding-inline-start:1.6rem;animation:lfRise .6s calc(.12s + var(--d) * .08s) both}
.lf-stp-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:11px;height:11px;border-radius:50%;border:2px solid var(--lf-primary);background:#fff}
.lf-stp-list strong{display:block;color:var(--lf-primary);font-size:1.08rem}
.lf-stp-list span{color:var(--lf-ink);line-height:1.9}
.lf-stp-visual{--rx:0deg;--ry:0deg;position:relative;aspect-ratio:1;max-width:420px;margin-inline:auto;display:grid;place-items:center;perspective:900px}
.lf-stp-img,.lf-stp-emblem{position:relative;z-index:1;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.lf-stp-img{width:82%;height:82%;object-fit:cover;border-radius:32px;box-shadow:0 30px 60px rgba(15,23,42,.2)}
.lf-stp-emblem{width:58%;aspect-ratio:1;border-radius:36% 64% 58% 42%/42% 38% 62% 58%;display:grid;place-items:center;background:linear-gradient(135deg,var(--lf-primary),#0a2c22);color:#fff;font-size:clamp(3rem,7vw,5rem);box-shadow:0 30px 60px rgba(var(--lf-primary-rgb),.35);animation:lfBlob 12s ease-in-out infinite}
.lf-stp-emblem i{transform:translateZ(40px)}
.lf-stp-ring{position:absolute;inset:6%;border-radius:50%;border:2px dashed rgba(var(--lf-primary-rgb),.25);animation:lfSpin 40s linear infinite}
.lf-stp-orb{position:absolute;border-radius:50%;z-index:2}
.lf-stp-orb--a{width:18px;height:18px;top:12%;inset-inline-end:16%;background:#e6c45a;box-shadow:0 0 0 8px rgba(230,196,90,.18);animation:lfFloat 5s ease-in-out infinite}
.lf-stp-orb--b{width:12px;height:12px;bottom:14%;inset-inline-start:12%;background:var(--lf-primary);box-shadow:0 0 0 7px rgba(var(--lf-primary-rgb),.15);animation:lfFloat 6s 1s ease-in-out infinite}
.lf-story-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:2.25rem}
.lf-story-pager button{position:relative;display:flex;align-items:center;gap:.55rem;padding:.45rem .95rem .45rem .5rem;border:1px solid var(--lf-border);border-radius:99px;background:var(--lf-card);color:var(--lf-muted);font-weight:700;overflow:hidden;transition:.25s}
[dir=rtl] .lf-story-pager button{padding:.45rem .5rem .45rem .95rem}
.lf-story-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eceef1;color:var(--lf-ink);transition:.25s}
.lf-story-pager button:hover{color:var(--lf-ink);border-color:rgba(var(--lf-primary-rgb),.35)}
.lf-story-pager button.is-on{color:var(--lf-primary);border-color:var(--lf-primary);box-shadow:0 6px 18px rgba(var(--lf-primary-rgb),.15)}
.lf-story-pager button.is-on .lf-story-num{background:var(--lf-primary);color:#fff}
.lf-story-bar{position:absolute;inset:auto 0 0;height:3px;background:#e6c45a;transform:scaleX(0);transform-origin:left}
[dir=rtl] .lf-story-bar{transform-origin:right}
.lf-story-wrap.is-timing .lf-story-pager button.is-on .lf-story-bar{animation:lfBar var(--lf-stp-wait) linear forwards}
@keyframes lfBar{to{transform:scaleX(1)}}
@keyframes lfStepIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lfStepPic{from{opacity:0;transform:scale(.85) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes lfSpin{to{transform:rotate(360deg)}}
@keyframes lfBlob{0%,100%{border-radius:36% 64% 58% 42%/42% 38% 62% 58%}50%{border-radius:58% 42% 36% 64%/60% 56% 44% 40%}}
@media (max-width:575.98px){.lf-story-name{display:none}.lf-story-pager button,[dir=rtl] .lf-story-pager button{padding:.35rem}}
@media (prefers-reduced-motion:reduce){.lf-stp-ring,.lf-stp-emblem,.lf-stp-orb,.lf-showcase-map img,.lf-dv--tablet,.lf-dv--phone{animation:none}}

/* ── Logo wall (accreditations) ────────────────────────────────────────── */
.lf-logowall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1.25rem}
.lf-logowall-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.75rem 1.25rem;text-align:center;text-decoration:none;color:inherit;background:var(--lf-card);border:1px solid var(--lf-border);border-radius:var(--lf-radius-lg);box-shadow:var(--lf-shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
a.lf-logowall-card:hover,div.lf-logowall-card:hover{transform:translateY(-5px);box-shadow:var(--lf-shadow);border-color:rgba(var(--lf-primary-rgb),.3)}
.lf-logowall-logo{display:grid;place-items:center;height:96px;width:100%}
.lf-logowall-logo img{max-height:96px;max-width:100%;object-fit:contain}
.lf-logowall-logo b{font-size:1.25rem;color:var(--lf-ink)}
.lf-logowall-meta{display:flex;flex-direction:column;gap:.15rem}
.lf-logowall-meta strong{color:var(--lf-ink);font-size:.95rem}
.lf-logowall-meta small{color:var(--lf-primary);font-weight:600}
@media (max-width:991.98px){.lf-logowall-grid{grid-template-columns:repeat(min(var(--cols),3),1fr)}}
@media (max-width:575.98px){.lf-logowall-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.lf-logowall-logo,.lf-logowall-logo img{height:64px;max-height:64px}}

/* ── Course page (client design): about · topics · audience · duration · fee ── */
.lf-cinfo{background:var(--lf-card);border:1px solid var(--lf-border);border-radius:var(--lf-radius-lg);box-shadow:var(--lf-shadow-sm);padding:clamp(1.25rem,2.5vw,1.75rem);margin-bottom:1.5rem}
.lf-cinfo-title{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:800;color:var(--lf-primary);margin-bottom:1rem}
.lf-cinfo-title i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(var(--lf-primary-rgb),.1);font-size:1.05rem}
.lf-cinfo-steps{list-style:none;counter-reset:lfTopic;margin:0;padding:0;display:grid;gap:.6rem}
.lf-cinfo-steps li{counter-increment:lfTopic;display:flex;gap:.75rem;align-items:flex-start;line-height:1.8}
.lf-cinfo-steps li::before{content:counter(lfTopic);flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:800;color:#fff;background:var(--lf-primary);margin-top:.15rem}
.lf-cinfo-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lf-cinfo-list li{display:flex;gap:.5rem;align-items:flex-start;line-height:1.8}
.lf-cinfo-list i{color:var(--lf-primary);font-size:1.1rem;margin-top:.15rem}
.lf-cinfo-facts{display:grid;gap:.75rem;margin:0}
.lf-cinfo-facts div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;border-radius:12px;background:rgba(var(--lf-primary-rgb),.05)}
.lf-cinfo-facts dt{font-weight:600;color:var(--lf-muted)}.lf-cinfo-facts dd{margin:0;font-weight:800;color:var(--lf-ink)}
.lf-cinfo-offer{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .75rem;border-radius:99px;background:#fff4d6;color:#8a6100;font-weight:700;font-size:.85rem;margin-bottom:.6rem}
.lf-cinfo-price{font-size:1.9rem;font-weight:800;color:var(--lf-primary);line-height:1.2}
.lf-cinfo-price small{display:block;font-size:.9rem;font-weight:600;color:var(--lf-muted)}
.lf-cinfo--cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#fff;border:0;background:radial-gradient(circle at 90% 10%,rgba(212,175,55,.35),transparent 45%),linear-gradient(135deg,var(--lf-primary),#0a2c22)}
.lf-installments{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--lf-border)}
.lf-installments-title{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--lf-ink);margin-bottom:.6rem}
.lf-installments-title i{color:var(--lf-primary)}
.lf-installments-marks{display:flex;flex-wrap:wrap;gap:.4rem}
.lf-installments .lf-pmark{border:1px solid var(--lf-border)}

/* ── Enroll now form ───────────────────────────────────────────────────── */
.lf-enroll{background:var(--lf-card);border:1px solid var(--lf-border);border-radius:var(--lf-radius-lg);box-shadow:var(--lf-shadow);padding:clamp(1.25rem,3vw,2.25rem)}
.lf-enroll-field{margin-bottom:1.1rem;border:0;padding:0}
.lf-enroll-field label,.lf-enroll-field legend{display:block;font-weight:700;font-size:.95rem;margin-bottom:.4rem;color:var(--lf-ink)}
.lf-enroll-field .form-control,.lf-enroll-field .form-select{min-height:50px;border-radius:14px;background-color:#f4f7f6}
.lf-enroll-field .form-control:focus,.lf-enroll-field .form-select:focus{background-color:#fff}
.lf-enroll-choice{display:flex;gap:.75rem;flex-wrap:wrap}
.lf-enroll-pill{position:relative;flex:1;min-width:130px;margin:0!important}
.lf-enroll-pill input{position:absolute;opacity:0;inset:0}
.lf-enroll-pill span{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;border-radius:14px;border:2px solid var(--lf-border);background:#f4f7f6;font-weight:700;cursor:pointer;transition:.2s}
.lf-enroll-pill input:checked+span{border-color:var(--lf-primary);background:rgba(var(--lf-primary-rgb),.08);color:var(--lf-primary)}
.lf-enroll-pill input:focus-visible+span{outline:3px solid rgba(var(--lf-primary-rgb),.35);outline-offset:2px}
.lf-enroll-why{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:16px;background:rgba(var(--lf-primary-rgb),.06);border:1px solid rgba(var(--lf-primary-rgb),.15);margin:.5rem 0 1.1rem;font-size:.9rem;line-height:1.8}
.lf-enroll-why>i{font-size:1.5rem;color:var(--lf-primary)}
.lf-enroll-declare{padding:1rem 1.1rem 1rem 2.6rem;border-radius:16px;background:#fff8e6;border:1px solid #f1dfa6}
[dir=rtl] .lf-enroll-declare{padding:1rem 2.6rem 1rem 1.1rem}
.lf-enroll-course{position:sticky;top:1.5rem;overflow:hidden;background:var(--lf-card);border:1px solid var(--lf-border);border-radius:var(--lf-radius-lg);box-shadow:var(--lf-shadow-sm)}
.lf-enroll-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.lf-enroll-facts{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.lf-enroll-facts li{display:flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border-radius:99px;background:rgba(var(--lf-primary-rgb),.08);color:var(--lf-primary);font-weight:600;font-size:.85rem}
.lf-enroll-price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.lf-enroll-now{font-size:1.8rem;font-weight:800;color:var(--lf-primary)}
.lf-enroll-price del{color:var(--lf-muted)}
@media (max-width:991.98px){.lf-enroll-course{position:static}}

/* ── Sign-in portal (client design: an entrance for each group) ─────────── */
.lf-portal-card{height:100%;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,2.5vw,1.75rem);border-radius:var(--lf-radius-lg);background:var(--lf-card);border:1px solid var(--lf-border);box-shadow:var(--lf-shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.lf-portal-card:hover{transform:translateY(-4px);box-shadow:var(--lf-shadow);border-color:rgba(var(--lf-primary-rgb),.3)}
.lf-portal-head{display:flex;gap:1rem;align-items:flex-start}
.lf-portal-ico{flex:0 0 56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,var(--lf-primary),#0a2c22);box-shadow:0 10px 24px rgba(var(--lf-primary-rgb),.25)}
.lf-portal-card--company .lf-portal-ico,.lf-portal-card--university .lf-portal-ico{background:linear-gradient(135deg,#c9a227,#8a6a10)}
.lf-portal-card--staff .lf-portal-ico{background:linear-gradient(135deg,#334155,#0f172a)}
.lf-portal-title{font-size:1.2rem;font-weight:800;margin:0 0 .25rem}
.lf-portal-lede{margin:0;color:var(--lf-muted);line-height:1.7}
.lf-portal-can{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;flex:1;align-content:start}
.lf-portal-can li{display:flex;gap:.5rem;align-items:flex-start;line-height:1.7}
.lf-portal-can i{color:var(--lf-primary);margin-top:.15rem}
.lf-portal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding-top:.75rem;border-top:1px dashed var(--lf-border)}
.lf-portal-divider{display:flex;align-items:center;gap:1rem;margin:.5rem 0 1.5rem;color:var(--lf-muted);font-weight:800}
.lf-portal-divider::before,.lf-portal-divider::after{content:"";flex:1;height:1px;background:var(--lf-border)}
.lf-portal-divider span{padding:.35rem 1.1rem;border-radius:99px;background:var(--lf-primary);color:#fff;font-size:.95rem}
.lf-service-form{scroll-margin-top:7rem}
/* "Next / back" arrows written for left-to-right point the other way in Arabic. */
[dir=rtl] .lf-dir-arrow{display:inline-block;transform:scaleX(-1)}