:root {
    --ec-navy: #0b1f3a;
    --ec-navy-2: #17355e;
    --ec-red: #c82032;
    --ec-red-dark: #9f1729;
    --ec-gold: #cda24a;
    --ec-sand: #f1e8da;
    --ec-ivory: #fbfaf7;
    --ec-ink: #1a2433;
    --ec-muted: #718096;
    --ec-line: #e7e0d6;
    --ec-shadow: 0 18px 50px rgba(11, 31, 58, .10);
    --ec-radius: 18px;
}

html { scroll-behavior: smooth; }
body {
    color: var(--ec-ink);
    background: var(--ec-ivory);
    font-family: "Inter", "Tajawal", system-ui, -apple-system, sans-serif;
}
body[dir="rtl"] { font-family: "Tajawal", "Inter", system-ui, sans-serif; }

/* Fixed bilingual switcher available across landing, auth and app screens. */
.el-locale-toggle {
    position: fixed;
    z-index: 1060;
    top: 72px;
    inset-inline-end: 18px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(11,31,58,.92);
    box-shadow: 0 10px 26px rgba(11,31,58,.18);
    backdrop-filter: blur(14px);
}
.el-locale-label { color: rgba(255,255,255,.72); font-size: 11px; margin-inline: 5px; }
.el-locale-option {
    border: 0; border-radius: 999px; padding: 5px 9px; color: #fff;
    background: transparent; font-size: 11px; font-weight: 700; cursor: pointer;
}
.el-locale-option:hover, .el-locale-option.is-active { background: var(--ec-red); color: #fff; }

/* New mark treatment. The wordmark is HTML so both scripts remain crisp and editable. */
.el-brand-lockup, .navbar-brand, .brand-logo {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ec-navy) !important; font-weight: 800; letter-spacing: -.03em;
}
.el-brand-lockup img, .navbar-brand img, .brand-logo img { width: 42px; height: 42px; object-fit: contain; }
.el-brand-ar { display: block; color: var(--ec-red); font-size: .78em; line-height: 1; font-weight: 700; }

/* Global application surfaces. */
.card, .modal-content, .dropdown-menu, .accordion-item {
    border: 1px solid var(--ec-line) !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: var(--ec-shadow);
}
.card-header { background: linear-gradient(135deg, #fff, #f8f3eb) !important; border-bottom: 1px solid var(--ec-line) !important; }
.btn-primary, .btn-primary:focus {
    border-color: var(--ec-red) !important; background: var(--ec-red) !important; color: #fff !important;
    border-radius: 12px !important; box-shadow: 0 9px 18px rgba(200,32,50,.20);
}
.btn-primary:hover { border-color: var(--ec-red-dark) !important; background: var(--ec-red-dark) !important; transform: translateY(-1px); }
.btn-light-primary { color: var(--ec-navy) !important; background: var(--ec-sand) !important; border-color: var(--ec-sand) !important; border-radius: 12px !important; }
.form-control, .form-select { border: 1px solid #dcd4c8 !important; border-radius: 11px !important; min-height: 44px; }
.form-control:focus, .form-select:focus { border-color: var(--ec-gold) !important; box-shadow: 0 0 0 3px rgba(205,162,74,.18) !important; }
.table thead th { color: var(--ec-navy); background: #f6f0e7; border-bottom-color: var(--ec-gold); }
.badge { border-radius: 999px; padding: .45em .75em; }

/* Landing page: calm editorial hero, no old pale illustration-first layout. */
.el-landing-page { background: var(--ec-ivory); }
.el-landing-page header, .el-landing-page .navbar { background: rgba(251,250,247,.94) !important; border-bottom: 1px solid var(--ec-line); box-shadow: 0 8px 26px rgba(11,31,58,.05); }
.el-landing-page .el-locale-toggle { top: 94px; }
.el-landing-page .banner-section, .el-landing-page .banner {
    background-image: linear-gradient(90deg, rgba(11,31,58,.97) 0%, rgba(11,31,58,.90) 46%, rgba(11,31,58,.18) 100%), url('/landing-page/images/el-contabli-hero.png');
    background-position: center; background-size: cover; border-radius: 0 0 34px 34px; overflow: hidden;
}
.el-landing-page .banner-section { padding-top: 0 !important; padding-bottom: 0 !important; }
.el-landing-page .banner { min-height: 620px; display: flex; align-items: center; }
.el-landing-page .banner-right { display: none !important; }
.el-landing-page .banner-left { max-width: 720px; padding: 100px 0; }
.el-landing-page .banner-left h1, .el-landing-page .hero-section h1, .el-landing-page .section-one h1, .el-landing-page .landing-hero h1 { color: #fff; font-weight: 800; letter-spacing: -.04em; }
.el-landing-page .banner-left p, .el-landing-page .hero-section p, .el-landing-page .section-one p, .el-landing-page .landing-hero p { color: rgba(255,255,255,.82); }
.el-landing-page section { padding-top: clamp(48px, 7vw, 100px); padding-bottom: clamp(48px, 7vw, 100px); }
.el-landing-page .section-title, .el-landing-page h2 { color: var(--ec-navy); font-weight: 800; }
.el-landing-page .feature-card, .el-landing-page .pricing-card, .el-landing-page .testimonial-card { border-radius: 20px; border: 1px solid var(--ec-line); background: #fff; box-shadow: var(--ec-shadow); }
.el-landing-page footer { background: var(--ec-navy) !important; color: rgba(255,255,255,.78); }

/* Auth screens use the new visual language without touching form logic. */
body.el-auth-page, body.el-guest-page { background: linear-gradient(135deg, var(--ec-navy) 0%, #17355e 55%, #f1e8da 55%, #fbfaf7 100%); }
body.el-auth-page .card, body.el-guest-page .card { background: rgba(255,255,255,.96); }

/* RTL details. */
[dir="rtl"] .el-locale-toggle { font-family: "Tajawal", sans-serif; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .dropdown-menu { text-align: right; }

@media (max-width: 768px) {
    .el-locale-toggle { top: 70px; inset-inline-end: 10px; }
    .el-landing-page .el-locale-toggle { top: 74px; }
    .el-locale-label { display: none; }
    .el-landing-page .hero-section, .el-landing-page .section-one, .el-landing-page .landing-hero, .el-landing-page #home { background-position: 64% center; }
}

/* Mobile landing fix: keep the bilingual switcher in normal flow, never over the navbar CTA. */
@media (max-width: 768px) {
    .el-landing-page > .el-locale-toggle {
        position: static;
        inset: auto;
        transform: none;
        width: max-content;
        margin: 8px auto;
        z-index: auto;
    }
    .el-landing-page > header,
    .el-landing-page > .navbar,
    .el-landing-page > .site-header {
        position: relative;
        z-index: 2;
    }
}

/* Strong mobile override: the switcher is a normal, centered header-adjacent row. */
@media (max-width: 768px) {
    body.el-landing-page .el-locale-toggle {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        width: fit-content !important;
        margin: 8px auto !important;
    }
}

/* App header language slot: never overlay page content on mobile. */
.el-locale-header-slot {
    display: flex;
    align-items: center;
    margin-inline-start: 12px;
    flex: 0 0 auto;
    order: 3;
}
.el-locale-header-slot .el-locale-toggle {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: inline-flex !important;
    width: max-content !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .el-locale-header-slot { margin-inline-start: auto; margin-inline-end: 8px; }
    .el-locale-header-slot .el-locale-label { display: none !important; }
    .el-locale-header-slot .el-locale-toggle { padding: 4px 6px; }
}
/* Public landing feature showcase: a clear, Tunisian, bilingual product overview. */
.el-landing-page .platform-feature-showcase {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfaf7 0%, #f3eee6 100%);
}
.el-landing-page .platform-feature-showcase::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(194, 145, 73, .10);
    top: -150px;
    inset-inline-end: -100px;
}
.platform-feature-heading { position: relative; max-width: 760px; margin: 0 auto 44px; }
.platform-eyebrow { display: inline-block; color: #b17b31; font-weight: 800; letter-spacing: .12em; font-size: .76rem; margin-bottom: 12px; }
.platform-feature-heading h2 { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 3.2rem); }
.platform-feature-heading p { color: #5e6a79; font-size: 1.05rem; margin-bottom: 0; }
.platform-feature-card { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 25px 22px; background: rgba(255,255,255,.92); border: 1px solid rgba(15, 43, 77, .08); border-radius: 22px; box-shadow: 0 14px 36px rgba(15, 43, 77, .08); transition: transform .2s ease, box-shadow .2s ease; }
.platform-feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15, 43, 77, .13); }
.platform-feature-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #0f2b4d, #1e5a70); border-radius: 15px; font-size: 1.15rem; }
.platform-feature-card h3 { color: #0f2b4d; font-size: 1.12rem; font-weight: 800; margin: 2px 0 8px; }
.platform-feature-card p { color: #657282; line-height: 1.65; font-size: .93rem; margin: 0; }
.platform-feature-cta { position: relative; margin-top: 44px; }
.platform-feature-cta .btn-link { color: #0f2b4d; font-weight: 700; text-decoration: none; margin-inline-start: 12px; }
.platform-feature-cta .btn-link:hover { color: #b17b31; }
[dir="rtl"] .platform-feature-card { text-align: right; }
@media (max-width: 575.98px) {
    .platform-feature-heading { margin-bottom: 30px; }
    .platform-feature-card { padding: 20px 17px; gap: 14px; }
    .platform-feature-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; }
    .platform-feature-cta .btn { width: 100%; margin: 5px 0; }
    .platform-feature-cta .btn-link { margin-inline-start: 0; }
}