/* ============================================================
   Mlath Media — custom layer
   (1) navbar tools  (2) light theme  (3) RTL  (4) responsive
   ============================================================ */

/* ---------- (1) Navbar tools ---------- */
.ml-nav-tools {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.ml-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: 50rem;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.ml-tool-btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    transform: translateY(-1px);
}

#ml-theme-toggle { padding: .42rem .55rem; }
#ml-theme-toggle .ml-icon-sun { display: none; }
#ml-theme-toggle .ml-icon-moon { display: block; }
html.theme-light #ml-theme-toggle .ml-icon-sun { display: block; }
html.theme-light #ml-theme-toggle .ml-icon-moon { display: none; }

/* ---------- (2) Light theme ---------- */
html.theme-light .bg-black,
html.theme-light .bg-pattern-2 { background-color: #f4f5fa !important; background-image: none !important; }
html.theme-light .bg-gradient-dark-black { background: linear-gradient(180deg, #eceef6 0%, #f4f5fa 100%) !important; }

html.theme-light .bg-dark {
    background-color: #ffffff !important;
    box-shadow: 0 .5rem 1.75rem rgba(22, 28, 45, .09);
}

html.theme-light .text-white { color: #161c2d !important; }
html.theme-light .text-gray-500 { color: #55627e !important; }
html.theme-light .text-gray-700 { color: #42526b !important; }
html.theme-light .text-muted { color: #67718c !important; }
html.theme-light .link-light { color: #161c2d !important; }

/* section divider shapes must match the new light backgrounds */
html.theme-light .shape.text-dark { color: #eceef6 !important; }
html.theme-light .shape.text-black { color: #f4f5fa !important; }

html.theme-light .border-gray-900-50 { border-color: rgba(22, 28, 45, .12) !important; }

/* white platform logos need inverting on light background */
html.theme-light .cards .card img { filter: invert(.85) hue-rotate(180deg); }

/* navbar over light hero */
html.theme-light .navbar-dark .navbar-toggler { color: #161c2d; border-color: rgba(22,28,45,.2); }
html.theme-light .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822, 28, 45, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html.theme-light .ml-tool-btn {
    border-color: rgba(22, 28, 45, .18);
    background: rgba(22, 28, 45, .04);
    color: #161c2d;
}
html.theme-light .ml-tool-btn:hover {
    background: rgba(22, 28, 45, .09);
    border-color: rgba(22, 28, 45, .35);
    color: #161c2d;
}

/* smooth switch */
section, body, .bg-dark, nav.navbar { transition: background-color .25s ease, background .25s ease; }

/* ---------- (3) RTL (Arabic) ---------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .ml-nav-tools { direction: rtl; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .fe-arrow-right { transform: scaleX(-1); display: inline-block; }
html[dir="rtl"] .text-center { text-align: center !important; }

/* stats block spacing flips */
html[dir="rtl"] .d-flex .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }
html[dir="rtl"] .d-flex .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }

/* ---------- (4) Responsive polish ---------- */
/* statistics counters wrap nicely on small screens */
.ml-stats-row { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.ml-stats-row > div { padding: 0 !important; }

@media (max-width: 575.98px) {
    .navbar .navbar-brand-img { max-height: 2.2rem; }
    .ml-nav-tools { flex-wrap: wrap; row-gap: .5rem; padding-top: .75rem; }
    .display-1 { font-size: 2.6rem; }
    .display-3 { font-size: 2rem; }
    .ml-stats-row { gap: 1.25rem 2rem; }
    .ml-stats-row h1 { font-size: 2rem; }
}

/* very large screens: keep content readable */
@media (min-width: 1600px) {
    .container { max-width: 1320px; }
}

/* service cards: equal height + gentle hover */
.service-card .bg-dark {
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.service-card .bg-dark:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}
html.theme-light .service-card .bg-dark:hover {
    box-shadow: 0 1rem 2.5rem rgba(22, 28, 45, .15);
}

/* mobile collapse menu gets a readable backdrop */
@media (max-width: 991.98px) {
    .navbar-collapse .ml-nav-tools { padding: 1rem 0 .5rem; }
}

/* ---------- post-review fixes ---------- */
/* white service-card icons need inverting on light background */
html.theme-light .service-card .bg-dark img {
    filter: invert(.82) hue-rotate(180deg);
}

/* mobile collapse menu: readable card backdrop in both themes */
@media (max-width: 991.98px) {
    .navbar-dark .navbar-collapse {
        background: #191f33;
        border-radius: .75rem;
        padding: 1rem 1.25rem;
        margin-top: .6rem;
        box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .4);
    }
    html.theme-light .navbar-dark .navbar-collapse {
        background: #ffffff;
        box-shadow: 0 .5rem 1.75rem rgba(22, 28, 45, .14);
    }
    html.theme-light .navbar-collapse .ml-tool-btn { color: #161c2d; }
}

/* ---------- header logo + Arabic typography ---------- */
/* logo: guaranteed visible size regardless of theme rules */
.navbar-brand { padding-top: .25rem; padding-bottom: .25rem; }
.navbar-brand-img { height: 2.6rem !important; width: auto !important; max-height: none; }
@media (max-width: 575.98px) {
    .navbar-brand-img { height: 2.1rem !important; }
}
/* keep the brand on the correct side in RTL */
html[dir="rtl"] .navbar-brand { margin-left: 1rem; margin-right: 0; }

/* Arabic typography: dedicated Arabic font + comfortable metrics */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] span,
html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea {
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}
/* Arabic script needs taller line-height; huge display sizes clip descenders */
html[lang="ar"] .display-1 { font-size: 4.2rem; line-height: 1.25; }
html[lang="ar"] .display-3 { line-height: 1.3; }
html[lang="ar"] .display-4 { line-height: 1.3; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.35; }
html[lang="ar"] p, html[lang="ar"] .lead { line-height: 1.9; }
html[lang="ar"] .btn { line-height: 1.6; }
@media (max-width: 575.98px) {
    html[lang="ar"] .display-1 { font-size: 2.4rem; }
}

/* numbers inside Arabic stats keep LTR so 50+ / 24/7 render correctly */
html[dir="rtl"] .ml-stats-row h1 { direction: ltr; unicode-bidi: isolate; }

/* ---------- unified footer social buttons ---------- */
.ml-social-list { display: flex; gap: .75rem; padding: 0; }
.ml-social-list .list-inline-item { margin: 0 !important; }

.ml-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
    color: #aeb6cf;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.ml-social-btn svg { width: 19px; height: 19px; display: block; }
.ml-social-btn:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    transform: translateY(-2px);
}

html.theme-light .ml-social-btn {
    border-color: rgba(22, 28, 45, .16);
    background: rgba(22, 28, 45, .04);
    color: #55627e;
}
html.theme-light .ml-social-btn:hover {
    color: #161c2d;
    border-color: rgba(22, 28, 45, .4);
    background: rgba(22, 28, 45, .08);
}

/* ---------- official brand logo ---------- */
/* the theme forces navbar logos to white (brightness(0) invert(1));
   show the official purple/gray logo as-is in both themes */
.navbar-dark .navbar-brand,
.navbar .navbar-brand { filter: none !important; }

/* ---------- RTL fix: About sections image bleed ---------- */
/* the theme's vw-md-50 / float-end overflow trick is LTR-only:
   in RTL the oversized image bleeds over the text column.
   Contain images inside their own grid columns in Arabic. */
html[dir="rtl"] .vw-md-50 { width: 100% !important; }
html[dir="rtl"] .w-md-150 { width: 100% !important; max-width: 100% !important; }
html[dir="rtl"] .w-md-120 { width: 100% !important; max-width: 100% !important; }
html[dir="rtl"] section .float-end { float: none !important; }
html[dir="rtl"] section .ps-md-9 { padding-inline-start: 0 !important; }