@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

.site-nav{
    background:#080d20;
    padding:10px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-family:'Inter',sans-serif;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:30;
}
.site-nav-links{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.site-nav-links a{
    color:#c7d2fe;
    text-decoration:none;
    font-size:12.5px;
    padding:7px 13px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    transition:.2s;
    white-space:nowrap;
}
.site-nav-links a:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
}
.site-nav-links a.current{
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    color:#0b1230;
    font-weight:700;
    border-color:transparent;
}
.site-nav-right{
    display:flex;
    align-items:center;
    gap:8px;
}
.lang-toggle-btn{
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:#fff;
    padding:7px 14px;
    border-radius:20px;
    font-size:12.5px;
    cursor:pointer;
    font-weight:600;
    font-family:'Inter',sans-serif;
    white-space:nowrap;
}
.lang-toggle-btn:hover{
    background:rgba(255,255,255,.16);
}
body.dark .site-nav{
    background:#050813;
}

.feature-banner{
    max-width:1200px;
    margin:0 auto 24px;
    padding:0 20px;
}
.feature-banner-inner{
    background:linear-gradient(135deg,#0b1230,#1e2a5e);
    color:#fff;
    border-radius:16px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    box-shadow:0 10px 25px rgba(11,18,48,.25);
}
.feature-banner-text{
    display:flex;
    align-items:flex-start;
    gap:12px;
    max-width:640px;
}
.feature-banner-icon{
    font-size:22px;
    flex-shrink:0;
}
.feature-banner-text h4{
    font-family:'Sora',sans-serif;
    font-size:14px;
    margin-bottom:4px;
}
.feature-banner-text p{
    font-size:12.5px;
    color:#c7d2fe;
    line-height:1.5;
    font-family:'Inter',sans-serif;
}
.feature-banner-btn{
    border:none;
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    color:#0b1230;
    font-weight:700;
    padding:10px 18px;
    border-radius:10px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:13px;
    white-space:nowrap;
}
body.dark .feature-banner-inner{
    box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.feature-banner-app{
    margin:0 0 20px;
    padding:0;
}
.feature-banner-app .feature-banner-inner{
    flex-direction:column;
    align-items:flex-start;
    border-radius:16px;
}
.feature-banner-app .feature-banner-btn{
    width:100%;
}

html[dir="rtl"] body,
html[dir="rtl"] .app{
    font-family:'Tajawal', sans-serif;
}
html[dir="rtl"] .brand-mark,
html[dir="rtl"] .hero-brand,
html[dir="rtl"] .site-nav-links a,
html[dir="rtl"] .lang-toggle-btn,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4{
    font-family:'Tajawal', sans-serif;
}
html[dir="rtl"] .kpi-chip,
html[dir="rtl"] .hero-stat-chip,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .stat{
    text-align:center;
}
html[dir="rtl"] .order-actions,
html[dir="rtl"] .left,
html[dir="rtl"] .call-row,
html[dir="rtl"] .sos-actions{
    direction:rtl;
}
html[dir="rtl"] .alert-row span.time,
html[dir="rtl"] .alert-time{
    margin-left:0;
    margin-right:auto;
}
html[dir="rtl"] .fl-row span[style*="margin-left:auto"],
html[dir="rtl"] .lb-item span[style*="margin-left:auto"]{
    margin-left:0 !important;
    margin-right:auto !important;
}

@media(max-width:700px){
    .site-nav{ padding:10px 14px; }
    .site-nav-links a{ padding:6px 10px; font-size:11.5px; }
    .lang-toggle-btn{ padding:6px 11px; font-size:11.5px; }
}