/* ============================================================
   Mirsal landing (mirsal.om) — dark single-page theme.
   Tokens come from the brand sheet mirsal-logo.html.
   Loaded ONLY by views/admin/layouts/landing.ejs; inner pages
   keep the light public layout untouched.
   ============================================================ */

:root {
    --navy-deep: #0A1A3A;
    --navy-mid: #0D47A1;
    --navy-light: #1565C0;
    --navy-lighter: #1976D2;
    --cyan-main: #00BCD4;
    --cyan-dark: #0097A7;
    --cyan-glow: rgba(0, 188, 212, 0.3);
    --bg-dark: #0A1225;
    --bg-deeper: #070D1C;
    --text-light: #E8F0FE;
    --text-dim: #93A5C4;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(0, 188, 212, 0.12);
    --nav-h: 72px;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: calc(var(--nav-h) + 18px);
}

body.ls-body {
    font-family: 'Noto Kufi Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(1000px 500px at 85% -10%, rgba(13, 71, 161, 0.35), transparent 60%),
        radial-gradient(800px 420px at 8% 12%, rgba(0, 188, 212, 0.10), transparent 60%);
    background-repeat: no-repeat;
    color: var(--text-light);
    overflow-x: hidden;
}

.ls-main {
    min-height: 60vh;
}

/* ---------- Navbar ---------- */

.ls-navbar {
    min-height: var(--nav-h);
    padding-block: 0.6rem;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ls-navbar.scrolled {
    background: rgba(10, 18, 37, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0, 188, 212, 0.15), 0 8px 30px rgba(0, 0, 0, 0.35);
}

.ls-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.ls-brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-light);
    line-height: 1;
}

.ls-toggler {
    border: 1px solid var(--card-border);
    color: var(--text-light);
    font-size: 1.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 8px;
}

.ls-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--cyan-glow);
}

.ls-anchors {
    gap: 0.25rem;
}

.ls-anchor {
    color: var(--text-dim) !important;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding-block: 0.5rem;
}

.ls-anchor::after {
    content: '';
    position: absolute;
    inset-inline: 0.9rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--navy-lighter), var(--cyan-main));
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.ls-anchor:hover,
.ls-anchor.active {
    color: var(--cyan-main) !important;
}

.ls-anchor.active::after {
    transform: scaleX(1);
}

.ls-nav-actions .btn {
    white-space: nowrap;
}

.ls-lang a {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--text-dim);
    border: 1px solid var(--card-border);
    margin-inline-start: 4px;
}

.ls-lang a.active {
    background: var(--cyan-main);
    color: #06222B;
    border-color: var(--cyan-main);
    font-weight: 600;
}

/* Static navbar variant: same look as the scrolled state, in flow. */
.ls-navbar.ls-nav-static {
    position: static;
}

/* Collapsed (mobile) menu becomes a solid dark panel */
@media (max-width: 991.98px) {
    .ls-navbar .navbar-collapse {
        background: rgba(10, 18, 37, 0.97);
        border: 1px solid var(--card-border);
        border-radius: 14px;
        margin-top: 0.6rem;
        padding: 1rem;
    }

    .ls-nav-actions {
        margin-top: 0.75rem;
    }
}

/* ---------- Scroll progress ---------- */

.scroll-progress {
    position: absolute;
    bottom: -3px;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy-light), var(--cyan-main));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    pointer-events: none;
}

[dir="rtl"] .scroll-progress {
    transform-origin: right;
    background: linear-gradient(-90deg, var(--navy-light), var(--cyan-main));
}

/* ---------- Buttons ---------- */

.ls-btn-cyan {
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    color: #06222B;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding-inline: 1.4rem;
    box-shadow: 0 4px 18px var(--cyan-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ls-btn-cyan:hover,
.ls-btn-cyan:focus {
    color: #06222B;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px var(--cyan-glow);
}

.ls-btn-outline {
    color: var(--text-light);
    border: 1px solid rgba(0, 188, 212, 0.45);
    border-radius: 10px;
    padding-inline: 1.4rem;
    background: transparent;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ls-btn-outline:hover,
.ls-btn-outline:focus {
    color: var(--cyan-main);
    background: rgba(0, 188, 212, 0.08);
    border-color: var(--cyan-main);
    transform: translateY(-2px);
}

/* ---------- Sections ---------- */

.ls-section {
    padding-block: 4.5rem;
}

.ls-sec-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.ls-sec-head h2 {
    font-weight: 800;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: 0.8rem;
}

.ls-sec-head p {
    color: var(--text-dim);
    margin-bottom: 0;
}

.ls-flash {
    padding-top: calc(var(--nav-h) + 16px);
}

.ls-flash + .ls-main .ls-hero {
    padding-top: 2rem;
}

/* ---------- Hero ---------- */

.ls-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + 4.5rem);
    padding-bottom: 4rem;
}

.ls-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 320px at 70% 20%, rgba(0, 188, 212, 0.08), transparent 70%);
    pointer-events: none;
}

.ls-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cyan-main);
    background: rgba(0, 188, 212, 0.08);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.2rem;
}

.ls-hero-title {
    font-weight: 800;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.35;
    margin-bottom: 1.1rem;
}

.ls-highlight {
    display: block;
    background: linear-gradient(120deg, var(--cyan-main) 20%, var(--navy-lighter) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cyan-main); /* fallback for no background-clip support */
}

.ls-subtitle {
    color: var(--text-dim);
    font-size: 1.06rem;
    max-width: 560px;
    margin-bottom: 1.8rem;
}

.ls-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.ls-hero-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ls-hero-highlights li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.ls-hero-highlights li i {
    color: var(--cyan-main);
    font-size: 1.05rem;
}

.ls-hero-visual {
    position: relative;
    padding-top: 2.5rem;
}

.ls-hero-shield {
    position: absolute;
    top: 0;
    inset-inline-end: 8%;
    z-index: 2;
    filter: drop-shadow(0 10px 40px var(--cyan-glow));
}

.ls-terminal {
    background: #081020;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 4.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    text-align: left;
}

.ls-terminal-bar {
    display: flex;
    gap: 6px;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ls-terminal-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.ls-terminal-bar span:first-child { background: rgba(0, 188, 212, 0.55); }

.ls-terminal pre {
    margin: 0;
    padding: 1rem 1.1rem 1.2rem;
    font-family: 'Cascadia Code', Consolas, Monaco, monospace;
    font-size: 0.78rem;
    line-height: 1.7;
    color: #9FB6DC;
    white-space: pre-wrap;
    word-break: break-word;
}

.ls-code-ok {
    color: #4DD0E1;
}

/* ---------- Stats ---------- */

.ls-stats {
    padding-block: 1.5rem 3rem;
}

.ls-stat {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.4rem 1rem;
    height: 100%;
}

.ls-stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(120deg, var(--cyan-main), var(--navy-lighter));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cyan-main);
    line-height: 1.2;
    direction: ltr;
}

.ls-stat-label {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin-top: 0.3rem;
}

/* ---------- Cards ---------- */

.ls-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.6rem;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ls-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 188, 212, 0.35);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 188, 212, 0.1);
}

.ls-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.16), rgba(13, 71, 161, 0.25));
    border: 1px solid var(--card-border);
    color: var(--cyan-main);
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.ls-card h5,
.ls-card h6 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.ls-card p {
    color: var(--text-dim);
    font-size: 0.92rem;
    margin-bottom: 0;
}

.ls-card-compact {
    padding: 1.2rem;
}

.ls-card-compact .ls-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
}

.ls-card-compact p {
    font-size: 0.85rem;
}

/* ---------- Developers ---------- */

.ls-dev-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ls-dev-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text-dim);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.ls-dev-bullets li i {
    color: var(--cyan-main);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ls-code-panel {
    background: #081020;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.snippet-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.snippet-tabs button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.snippet-tabs button.active {
    color: var(--cyan-main);
    border-bottom-color: var(--cyan-main);
}

.snippet-pane {
    display: none;
}

.snippet-pane.active {
    display: block;
}

.snippet-pane pre,
.ls-code-response pre {
    margin: 0;
    padding: 1.1rem 1.2rem;
    font-family: 'Cascadia Code', Consolas, Monaco, monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #9FB6DC;
    white-space: pre-wrap;
    word-break: break-word;
}

.ls-code-response {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.ls-code-response-label {
    padding: 0.7rem 1.2rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cyan-main);
}

.ls-code-response pre {
    color: #7BD8C2;
    padding-top: 0.4rem;
}

/* ---------- Steps ---------- */

.ls-step {
    position: relative;
    text-align: center;
    padding: 1.4rem 1rem 0;
    height: 100%;
}

.ls-step-num {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    color: #06222B;
    font-weight: 800;
    font-size: 0.8rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

[dir="rtl"] .ls-step-num {
    transform: translateX(50%);
}

.ls-step-icon {
    width: 64px;
    height: 64px;
    margin: 0.6rem auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.14), rgba(13, 71, 161, 0.3));
    border: 1px solid var(--card-border);
    color: var(--cyan-main);
    font-size: 1.7rem;
}

.ls-step h5 {
    font-weight: 700;
    font-size: 1.05rem;
}

.ls-step p {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* Connector line between steps on wide screens */
@media (min-width: 992px) {
    .ls-steps > div:not(:last-child) .ls-step::after {
        content: '';
        position: absolute;
        top: 42px;
        inset-inline-end: -14%;
        width: 28%;
        height: 1px;
        background: linear-gradient(90deg, var(--card-border), transparent);
    }
}

/* ---------- Pricing ---------- */

.ls-plan {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 1.8rem 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ls-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.ls-plan-featured {
    border-color: rgba(0, 188, 212, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.35), 0 18px 50px rgba(0, 188, 212, 0.1);
    background: linear-gradient(180deg, rgba(0, 188, 212, 0.06), var(--card-bg) 40%);
}

.ls-plan-badge {
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    color: #06222B;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

[dir="rtl"] .ls-plan-badge {
    transform: translateX(50%);
}

.ls-plan h4 {
    font-weight: 800;
}

.ls-plan-desc {
    color: var(--text-dim);
    font-size: 0.88rem;
    min-height: 2.2em;
}

.ls-plan-price {
    margin-block: 0.6rem 1.2rem;
}

.ls-plan-amount {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--cyan-main);
}

.ls-plan-currency {
    color: var(--text-dim);
}

.ls-plan-period {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.ls-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ls-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.ls-plan-features li i {
    color: var(--cyan-main);
    flex-shrink: 0;
    margin-top: 2px;
}

.ls-plan-feature-value {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.ls-pricing-footnote {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin-top: 2.2rem;
    margin-bottom: 0;
}

.ls-pricing-footnote i {
    color: var(--cyan-main);
    margin-inline-end: 0.3rem;
}

/* ---------- FAQ (Bootstrap accordion, dark restyle) ---------- */

.ls-faq-wrap {
    max-width: 800px;
}

.ls-accordion .accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px !important;
    margin-bottom: 0.7rem;
    overflow: hidden;
}

.ls-accordion .accordion-button {
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.98rem;
    box-shadow: none;
    padding: 1rem 1.2rem;
}

.ls-accordion .accordion-button:not(.collapsed) {
    color: var(--cyan-main);
    background: rgba(0, 188, 212, 0.05);
}

.ls-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.15rem var(--cyan-glow);
}

/* Bootstrap draws the chevron as an embedded dark SVG — repaint for dark bg */
.ls-accordion .accordion-button::after {
    filter: invert(0.8) sepia(1) saturate(3) hue-rotate(150deg);
}

.ls-accordion .accordion-body {
    color: var(--text-dim);
    font-size: 0.93rem;
    line-height: 1.9;
}

/* ---------- Final CTA ---------- */

.ls-cta-panel {
    text-align: center;
    background:
        radial-gradient(500px 200px at 50% 0%, rgba(0, 188, 212, 0.14), transparent 70%),
        linear-gradient(160deg, rgba(13, 71, 161, 0.35), rgba(10, 26, 58, 0.6));
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 3.5rem 1.5rem;
}

.ls-cta-panel h2 {
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.ls-cta-panel p {
    color: var(--text-dim);
    max-width: 540px;
    margin: 0 auto 1.6rem;
}

/* ---------- Footer ---------- */

.ls-footer {
    background: var(--bg-deeper);
    border-top: 1px solid rgba(0, 188, 212, 0.1);
    padding-block: 3rem 1.5rem;
    margin-top: 3rem;
}

.ls-footer-tagline {
    color: var(--text-dim);
    font-size: 0.9rem;
    max-width: 380px;
}

.ls-footer-head {
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.ls-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Doubled specificity so page-scope link colors (e.g. `.ls-portal a`)
   can never repaint the footer — it must look identical on every page. */
.ls-footer .ls-footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.ls-footer .ls-footer-links a:hover {
    color: var(--cyan-main);
}

.ls-footer .btn {
    margin-inline-end: 0.4rem;
    margin-bottom: 0.4rem;
}

.ls-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    text-align: center;
    color: var(--text-dim);
}

/* Qantrah company mark: blue pixel-art PNG on transparent background —
   sits on a light chip so brand colors survive the dark footer. */
.qantrah-link {
    display: inline-flex;
    align-items: center;
    background: #F4F7FB;
    border-radius: 6px;
    padding: 3px 8px;
    margin-inline: 4px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.qantrah-link:hover {
    transform: translateY(-1px);
}

.qantrah-logo {
    height: 15px;
    width: auto;
    display: block;
}

.made-in-oman {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.oman-flag {
    width: 17px;
    height: auto;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---------- Subscriber portal (dark auth pages, layout portal.ejs) ----------
   Scoped under .ls-portal so the Bootstrap classes inside the login view
   keep working untouched — only their colors are re-skinned for dark. */

.ls-portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ls-portal-nav {
    position: static;
    background: transparent;
}

.ls-portal > section {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

.ls-portal > section > .container {
    width: 100%;
}

.ls-portal .card {
    background: var(--card-bg);
    border: 1px solid var(--card-border) !important;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
    color: var(--text-light);
}

.ls-portal .text-muted,
.ls-portal .btn-link.text-muted {
    color: var(--text-dim) !important;
}

.ls-portal .form-label {
    color: var(--text-light);
}

.ls-portal .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-light);
    border-radius: 10px;
}

.ls-portal .form-control:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cyan-main);
    box-shadow: 0 0 0 0.2rem var(--cyan-glow);
    color: var(--text-light);
}

.ls-portal .form-control::placeholder {
    color: rgba(147, 165, 196, 0.55);
}

.ls-portal .btn-success {
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    border: none;
    color: #06222B;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 18px var(--cyan-glow);
}

.ls-portal .btn-success:hover,
.ls-portal .btn-success:focus,
.ls-portal .btn-success:disabled {
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    color: #06222B;
}

.ls-portal .btn-outline-secondary {
    color: var(--text-dim);
    border-color: var(--card-border);
}

.ls-portal .btn-outline-secondary:hover {
    color: var(--cyan-main);
    background: rgba(0, 188, 212, 0.08);
    border-color: var(--cyan-main);
}

.ls-portal a {
    color: var(--cyan-main);
}

/* The page-scope link color above outranks the brand buttons'
   single-class rules — repaint them back so the shared header
   «ابدأ الآن» and footer «اختر باقتك» look identical on every page. */
.ls-portal .ls-btn-cyan {
    color: #06222B;
}

.ls-portal .ls-btn-outline {
    color: var(--text-light);
}

.ls-portal .ls-btn-outline:hover,
.ls-portal .ls-btn-outline:focus {
    color: var(--cyan-main);
}

.ls-portal .alert-info {
    background: rgba(0, 188, 212, 0.08);
    border-color: var(--card-border);
    color: var(--text-dim);
}

.ls-portal-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-block: 1.1rem;
    color: var(--text-dim);
    margin-top: 2rem;
}

.ls-portal .ls-auth-shield {
    filter: drop-shadow(0 8px 30px var(--cyan-glow));
}

/* Non-section page roots (CMS article, subscription dashboard) still
   push the footer to the bottom of short pages. */
.ls-portal > .container {
    flex: 1 0 auto;
}

/* Headings inherit the light text; body copy defaults stay readable. */
.ls-portal h1, .ls-portal h2, .ls-portal h3,
.ls-portal h4, .ls-portal h5, .ls-portal h6 {
    color: var(--text-light);
}

/* CMS article card (page.ejs) + typography for admin-authored HTML */
.ls-portal .ls-page-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    color: var(--text-light);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.ls-portal .content-body {
    color: var(--text-dim);
}

.ls-portal .content-body h2,
.ls-portal .content-body h3 {
    color: var(--text-light);
    font-size: 1.25rem;
    font-weight: 700;
}

.ls-portal .content-body strong {
    color: var(--text-light);
}

.ls-portal .content-body a {
    color: var(--cyan-main);
}

.ls-portal hr {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

/* Safety net: anything painted with a Bootstrap light background goes
   glass instead, so light text (the portal default) stays readable —
   e.g. the "linked containers" strip (bg-light-subtle) on /my. */
.ls-portal .bg-white,
.ls-portal .bg-light,
.ls-portal .bg-light-subtle {
    background: var(--card-bg) !important;
    color: var(--text-light);
}

/* Light-subtle borders are near-invisible on dark — tint them faintly. */
.ls-portal .border-light-subtle {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Buttons beyond the ones above */
.ls-portal .btn-primary {
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    border: none;
    color: #06222B;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 18px var(--cyan-glow);
}

.ls-portal .btn-primary:hover,
.ls-portal .btn-primary:focus,
.ls-portal .btn-primary:disabled {
    background: linear-gradient(120deg, var(--cyan-main), var(--cyan-dark));
    color: #06222B;
}

.ls-portal .btn-outline-primary,
.ls-portal .btn-outline-success {
    color: var(--cyan-main);
    border-color: rgba(0, 188, 212, 0.45);
}

.ls-portal .btn-outline-primary:hover,
.ls-portal .btn-outline-success:hover {
    color: #06222B;
    background: var(--cyan-main);
    border-color: var(--cyan-main);
}

.ls-portal .btn-outline-warning {
    color: #FFC864;
    border-color: rgba(255, 193, 7, 0.45);
}

.ls-portal .btn-outline-warning:hover {
    color: #2B1F00;
    background: #FFC864;
    border-color: #FFC864;
}

/* Tables (subscription dashboard) */
.ls-portal .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-dim);
    --bs-table-border-color: rgba(255, 255, 255, 0.09);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(0, 188, 212, 0.05);
    color: var(--text-dim);
}

.ls-portal .table > thead.table-light,
.ls-portal .table .table-light {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--text-light);
    color: var(--text-light);
}

/* Subtle badges: translucent chips instead of pastel */
.ls-portal .badge.bg-success-subtle {
    background: rgba(0, 188, 212, 0.14) !important;
    color: #7BE3F0 !important;
    border-color: rgba(0, 188, 212, 0.35) !important;
}

.ls-portal .badge.bg-warning-subtle {
    background: rgba(255, 193, 7, 0.14) !important;
    color: #FFC864 !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
}

.ls-portal .badge.bg-danger-subtle {
    background: rgba(220, 53, 69, 0.16) !important;
    color: #F1919B !important;
    border-color: rgba(220, 53, 69, 0.35) !important;
}

.ls-portal .badge.bg-secondary-subtle {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-dim) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ls-portal .text-success-emphasis { color: #7BE3F0 !important; }
.ls-portal .text-warning-emphasis { color: #FFC864 !important; }

/* Progress (quota bars) */
.ls-portal .progress {
    background: rgba(255, 255, 255, 0.08);
}

.ls-portal .progress-bar.bg-success {
    background: linear-gradient(90deg, var(--navy-light), var(--cyan-main)) !important;
}

/* Modals */
.ls-portal .modal-content {
    background: #0D1730;
    border: 1px solid var(--card-border);
    color: var(--text-light);
    border-radius: 16px;
}

.ls-portal .modal-header,
.ls-portal .modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

.ls-portal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* Definition/summary rows often use .list-group */
.ls-portal .list-group-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
}

/* ---------- Status page (/status) ---------- */

.st-overall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
}

.st-overall-ok {
    color: #7BE3F0;
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid rgba(0, 188, 212, 0.35);
}

.st-overall-warn {
    color: #FFC864;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.st-sec-title {
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    margin-bottom: 0.9rem;
}

.st-sec-title i {
    color: var(--cyan-main);
    margin-inline-end: 0.35rem;
}

.st-tile {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.1rem 1rem;
    text-align: center;
    height: 100%;
}

.st-tile-pct {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--cyan-main);
    line-height: 1.2;
}

.st-tile-pct.st-warn { color: #FFC864; }
.st-tile-pct.st-bad { color: #F1919B; }

.st-tile-label {
    color: var(--text-light);
    font-size: 0.88rem;
    margin-top: 0.25rem;
}

.st-tile-sub {
    color: var(--text-dim);
    font-size: 0.76rem;
    margin-top: 0.2rem;
}

.st-bars {
    display: flex;
    gap: 3px;
    align-items: stretch;
    height: 34px;
}

.st-bar {
    flex: 1 1 0;
    border-radius: 3px;
    min-width: 4px;
}

.st-bar-ok { background: linear-gradient(180deg, var(--cyan-main), var(--cyan-dark)); }
.st-bar-warn { background: #D9A62E; }
.st-bar-bad { background: #C4515C; }
.st-bar-empty { background: rgba(255, 255, 255, 0.07); }

.st-ok { color: #7BE3F0; }
.st-bad { color: #F1919B; }

.st-checks td, .st-checks th {
    padding-block: 0.55rem;
}

/* ---------- Reveal-on-scroll ---------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

.reveal.in {
    opacity: 1;
    transform: none;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-progress {
        display: none;
    }

    .ls-card,
    .ls-plan,
    .ls-btn-cyan,
    .ls-btn-outline {
        transition: none;
    }
}