/* _content/Haj2way/Components/Layout/LandingLayout.razor.rz.scp.css */
/* ══════════════════════════════════
   NAV
   ══════════════════════════════════ */
.nav[b-vjse33onjd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: rgba(247,249,247,0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(26,107,69,0.1);
    transition: box-shadow 0.3s;
}

    .nav.scrolled[b-vjse33onjd] {
        box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    }

.logo img[b-vjse33onjd] {
    height: 40px;
}

.links[b-vjse33onjd] {
    display: flex;
    gap: 18px;
}

    .links a[b-vjse33onjd] {
        text-decoration: none;
        font-weight: 700;
        color: #444;
        position: relative;
        font-size: 14px;
        transition: color 0.2s;
    }

        .links a:hover[b-vjse33onjd] {
            color: #0e7a43;
        }

        .links a.nav-active[b-vjse33onjd] {
            color: #0e7a43;
        }

            .links a.nav-active[b-vjse33onjd]::after {
                content: "";
                position: absolute;
                bottom: -5px;
                left: 50%;
                transform: translateX(-50%);
                width: 40px;
                height: 2px;
                background: #cfae43;
            }

.actions[b-vjse33onjd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-btn[b-vjse33onjd] {
    background: #0e7a43;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s;
}

    .login-btn:hover[b-vjse33onjd] {
        background: #0a5c32;
    }

/* ══════════════════════════════════
   HAMBURGER
   ══════════════════════════════════ */
.hamburger[b-vjse33onjd] {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.bar[b-vjse33onjd] {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #333;
    border-radius: 2px;
    transition: all .25s ease;
}

/* ══════════════════════════════════
   MOBILE SIDEBAR
   ══════════════════════════════════ */
.mobile-overlay[b-vjse33onjd] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 200;
    animation: fadeIn-b-vjse33onjd .2s ease;
}

@keyframes fadeIn-b-vjse33onjd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mobile-menu[b-vjse33onjd] {
    position: fixed;
    top: 0;
    right: -280px;
    width: 270px;
    height: 100vh;
    background: #fff;
    z-index: 300;
    box-shadow: -4px 0 20px rgba(0,0,0,.12);
    transition: right .3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    .mobile-menu.open[b-vjse33onjd] {
        right: 0;
    }

/* RTL */
[dir="rtl"] .mobile-menu[b-vjse33onjd] {
    right: auto;
    left: -280px;
    box-shadow: 4px 0 20px rgba(0,0,0,.12);
}

    [dir="rtl"] .mobile-menu.open[b-vjse33onjd] {
        left: 0;
    }

.mobile-menu-header[b-vjse33onjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-close[b-vjse33onjd] {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
}

    .mobile-close:hover[b-vjse33onjd] {
        background: #f5f5f5;
    }

.mobile-links[b-vjse33onjd] {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

    .mobile-links a[b-vjse33onjd] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 20px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        color: #333;
        border-right: 3px solid transparent;
        transition: background .15s, border-color .15s;
    }

        .mobile-links a:hover[b-vjse33onjd] {
            background: #f0f9f4;
            color: #0e7a43;
        }

        .mobile-links a.nav-active[b-vjse33onjd] {
            color: #0e7a43;
            background: #e8f5ee;
            border-right-color: #0e7a43;
        }

[dir="rtl"] .mobile-links a[b-vjse33onjd] {
    border-right: none;
    border-left: 3px solid transparent;
}

    [dir="rtl"] .mobile-links a.nav-active[b-vjse33onjd] {
        border-left-color: #0e7a43;
    }

.mobile-links .material-icons-round[b-vjse33onjd] {
    font-size: 20px;
    color: #0e7a43;
    opacity: .75;
}

.mobile-login-btn[b-vjse33onjd] {
    margin: 12px 16px 8px;
    background: #0e7a43;
    color: #fff !important;
    border-radius: 10px;
    justify-content: center;
    border-right: none !important;
    border-left: none !important;
}

    .mobile-login-btn:hover[b-vjse33onjd] {
        background: #0a5c32 !important;
        color: #fff !important;
    }

    .mobile-login-btn .material-icons-round[b-vjse33onjd] {
        color: #fff !important;
        opacity: 1 !important;
    }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width: 768px) {
    .links[b-vjse33onjd] {
        display: none;
    }

    .hamburger[b-vjse33onjd] {
        display: flex;
    }

    .login-btn[b-vjse33onjd] {
        display: none;
    }

    .nav[b-vjse33onjd] {
        padding: 12px 18px;
    }
}

/* ══════════════════════════════════
   PAGE — بدون padding حتى لا يظهر إطار
   ══════════════════════════════════ */
.page[b-vjse33onjd] {
    min-height: 80vh;
    padding: 0; /* لا padding — كل صفحة تتحكم في spacing داخلها */
    padding-top: 71px; /* تعويض ارتفاع الـ nav الثابت */
}

/* ══════════════════════════════════
   FOOTER
   ══════════════════════════════════ */
.footer[b-vjse33onjd] {
    background: #0f1f17;
    color: #fff;
    padding: 40px 20px;
}

.footer-inner[b-vjse33onjd] {
    max-width: 1100px;
    margin: auto;
}

.footer-top[b-vjse33onjd] {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-brand img[b-vjse33onjd] {
    height: 45px;
    margin-bottom: 10px;
}

.footer-brand p[b-vjse33onjd] {
    color: #ccc;
    line-height: 1.7;
}

.footer-col-title[b-vjse33onjd] {
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-col ul[b-vjse33onjd] {
    list-style: none;
    padding: 0;
}

.footer-col li[b-vjse33onjd] {
    margin-bottom: 6px;
}

.footer-col a[b-vjse33onjd] {
    color: #ccc;
    text-decoration: none;
}

.footer-contact li[b-vjse33onjd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-bottom[b-vjse33onjd] {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #aaa;
}

[b-vjse33onjd] .mud-button {
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: bold;
}
/* _content/Haj2way/Components/Layout/MainLayout.razor.rz.scp.css */
/* FleetWise — MainLayout.razor.css */

/* ══ APP ROOT ══ */
.fw-app-root[b-738h82irh5] {
    display: flex; flex-direction: column;
    height: 100vh; width: 100vw;
    overflow: hidden;
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', sans-serif;
}

/* ══ TOP BAR ══
   الخلفية تأتي من .topbar-glass في AppTheme.css
   مثال: .theme-green .topbar-glass { background: rgba(41,131,118,0.75); }
*/
.fw-topbar[b-738h82irh5] {
    height: 52px;
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 10px; flex-shrink: 0;
    z-index: 200; position: relative;
    /* topbar-glass يغطي الخلفية — هذا fallback فقط */
    color: #fff;
}

.fw-topbar-start[b-738h82irh5] { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.fw-topbar-end[b-738h82irh5]   { display:flex; align-items:center; gap:2px; flex-shrink:0; }

.fw-topbar-logo[b-738h82irh5] {
    display:flex; align-items:center; gap:7px; cursor:pointer;
    padding:3px 8px 3px 4px; border-radius:9px;
    transition:background .15s; user-select:none;
}
.fw-topbar-logo:hover[b-738h82irh5] { background:rgba(255,255,255,.12); }
.fw-topbar-car[b-738h82irh5]   { width:42px; height:auto; }
.fw-topbar-brand[b-738h82irh5] { display:flex; flex-direction:column; line-height:1.1; }
.fw-brand-main[b-738h82irh5]   { font-size:1rem; font-weight:900; color:#fff; letter-spacing:.5px; }
.fw-brand-accent[b-738h82irh5] { color:rgba(200,245,230,.95); }
.fw-brand-sub[b-738h82irh5]    { font-size:.58rem; color:rgba(255,255,255,.55); font-weight:300; }

/* أيقونات الشريط — أبيض دائماً */
[b-738h82irh5] .fw-menu-btn .mud-icon-root { color:#fff !important; }
.fw-topbar-end[b-738h82irh5]  .mud-icon-root { color:rgba(255,255,255,.9) !important; }
.fw-topbar-end[b-738h82irh5]  .mud-icon-button { color:rgba(255,255,255,.9) !important; }
.fw-topbar-end[b-738h82irh5]  .mud-icon-button:hover { background:rgba(255,255,255,.15) !important; }
/* ThemeSwitcher icon */
[b-738h82irh5] .white-icon .mud-icon-root,
[b-738h82irh5] .white-icon .mud-button-root { color:rgba(255,255,255,.9) !important; }
/* MudMenu activator في الـ topbar */
.fw-topbar-end[b-738h82irh5]  .mud-menu .mud-icon-root { color:rgba(255,255,255,.9) !important; }

/* ══ BODY ══ */
.fw-body[b-738h82irh5] { display:flex; flex:1; overflow:hidden; position:relative; }

/* ══ SIDEBAR ══
   الخلفية تأتي من .side-glass في AppTheme.css
   .side-glass { background: rgba(255,255,255,0.65); backdrop-filter: blur(14px); }
*/
.fw-sidebar[b-738h82irh5] {
    width: 224px; flex-shrink:0;
    display:flex; flex-direction:column;
    overflow-y:auto; overflow-x:hidden;
    transition: width .28s cubic-bezier(.4,0,.2,1);
    z-index:100;
    /* side-glass تتكفل بالخلفية — نضيف فقط margin/border-radius */
    margin: 7px 7px 7px 0;
    border-radius: 16px !important;  /* يتجاوز border-radius:20px في side-glass */
}
.fw-sidebar-closed[b-738h82irh5] {
    width:0 !important; margin:0 !important;
    overflow:hidden !important;
}
.fw-sidebar[b-738h82irh5]::-webkit-scrollbar { width:3px; }
.fw-sidebar[b-738h82irh5]::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:3px; }

/* ── NAV ── */
.fw-nav[b-738h82irh5] { display:flex; flex-direction:column; padding:8px 7px; gap:1px; flex:1; min-width:210px; }
.fw-nav-group[b-738h82irh5] { display:flex; flex-direction:column; gap:1px; margin-bottom:3px; }
.fw-nav-group-label[b-738h82irh5] {
    font-size:.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1.2px; color:rgba(0,0,0,.32);
    padding:7px 9px 2px; display:block; white-space:nowrap;
}

[b-738h82irh5] .fw-nav-item {
    display:flex; align-items:center; gap:8px;
    padding:7px 8px; border-radius:9px;
    text-decoration:none; color:rgba(0,0,0,.58);
    font-size:.81rem; font-weight:500;
    font-family:'Cairo','Tajawal',sans-serif;
    transition:all .14s ease;
    white-space:nowrap; cursor:pointer;
    border:none; background:none; width:100%; text-align:right;
}
[b-738h82irh5] .fw-nav-item:hover {
    background:var(--primary-light, rgba(41,131,118,.1));
    color:var(--primary-dark, #1F6F63);
}

/* Active — لون الثيم المختار */
[b-738h82irh5] .fw-nav-item-active {
    color:#fff !important; font-weight:700 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}
[b-738h82irh5] .fw-nav-active-green   { background:#298376 !important; }
[b-738h82irh5] .fw-nav-active-gold    { background:#C5A572 !important; }
[b-738h82irh5] .fw-nav-active-gray    { background:#6B7280 !important; }
[b-738h82irh5] .fw-nav-active-blue    { background:#2563EB !important; }
[b-738h82irh5] .fw-nav-active-purple  { background:#8B5CF6 !important; }
[b-738h82irh5] .fw-nav-active-rose    { background:#EC4899 !important; }
[b-738h82irh5] .fw-nav-active-mint    { background:#14B8A6 !important; }
[b-738h82irh5] .fw-nav-active-orange  { background:#F97316 !important; }
[b-738h82irh5] .fw-nav-active-crimson { background:#DC2626 !important; }

[b-738h82irh5] .fw-nav-icon {
    width:26px; height:26px; border-radius:7px;
    background:rgba(0,0,0,.04);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background .14s;
}
[b-738h82irh5] .fw-nav-item:hover .fw-nav-icon { background:var(--primary-light, rgba(41,131,118,.1)); }
[b-738h82irh5] .fw-nav-item-active .fw-nav-icon { background:rgba(255,255,255,.22) !important; }

[b-738h82irh5] .fw-nav-icon .mud-icon-root {
    font-size:15px !important;
    color:var(--icon-color, #1F6F63);
    transition:color .14s;
}
[b-738h82irh5] .fw-nav-item-active .fw-nav-icon .mud-icon-root { color:#fff !important; }
[b-738h82irh5] .fw-nav-label { flex:1; }
[b-738h82irh5] .fw-nav-active-dot {
    width:5px; height:5px; border-radius:50%;
    background:rgba(255,255,255,.8); flex-shrink:0;
}

.fw-sidebar-footer[b-738h82irh5] {
    padding:9px 12px; border-top:1px solid rgba(0,0,0,.08);
    min-width:210px; text-align:center;
}
.fw-sidebar-ver[b-738h82irh5] { font-size:.65rem; color:rgba(0,0,0,.3); }

/* ══ MAIN ══ */
.fw-main[b-738h82irh5] { flex:1; overflow-y:auto; overflow-x:hidden; min-width:0; }
.fw-content-wrap[b-738h82irh5] { padding:1rem; min-height:100%; direction:inherit; }
.fw-main[b-738h82irh5]::-webkit-scrollbar { width:4px; }
.fw-main[b-738h82irh5]::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:4px; }

/* ══ DARK MODE ══ */
[b-738h82irh5] .mud-theme-dark .fw-sidebar {
    background:rgba(10,22,15,.9) !important;
    border-color:rgba(255,255,255,.06) !important;
}
[b-738h82irh5] .mud-theme-dark .fw-nav-group-label { color:rgba(255,255,255,.25) !important; }
[b-738h82irh5] .mud-theme-dark .fw-nav-item        { color:rgba(255,255,255,.55) !important; }
[b-738h82irh5] .mud-theme-dark .fw-nav-item:hover  { background:rgba(255,255,255,.07) !important; color:rgba(255,255,255,.85) !important; }
[b-738h82irh5] .mud-theme-dark .fw-nav-icon        { background:rgba(255,255,255,.05) !important; }
[b-738h82irh5] .mud-theme-dark .fw-nav-icon .mud-icon-root { color:rgba(255,255,255,.5) !important; }
[b-738h82irh5] .mud-theme-dark .fw-sidebar-ver     { color:rgba(255,255,255,.2) !important; }
[b-738h82irh5] .mud-theme-dark .fw-sidebar-footer  { border-top-color:rgba(255,255,255,.06) !important; }

/* ══ MOBILE ══ */
.fw-overlay-backdrop[b-738h82irh5] { display:none; }
@media (max-width:860px) {
    .fw-overlay-backdrop[b-738h82irh5] {
        display:block; position:fixed; inset:0;
        background:rgba(0,0,0,.35); z-index:99;
    }
    .fw-sidebar[b-738h82irh5] {
        position:fixed !important; top:52px !important;
        right:0 !important; bottom:0 !important;
        height:calc(100vh - 52px) !important;
        z-index:100 !important; margin:0 !important;
        border-radius:0 0 0 14px !important;
    }
    .fw-sidebar-closed[b-738h82irh5] { transform:translateX(110%); }
}
/* _content/Haj2way/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ypbj39owrb] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ypbj39owrb] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ypbj39owrb] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ypbj39owrb] {
    font-size: 1.1rem;
}

.bi[b-ypbj39owrb] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ypbj39owrb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ypbj39owrb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ypbj39owrb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ypbj39owrb] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ypbj39owrb] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ypbj39owrb] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ypbj39owrb]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ypbj39owrb]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ypbj39owrb]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ypbj39owrb] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ypbj39owrb] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ypbj39owrb] {
        display: none;
    }

    .nav-scrollable[b-ypbj39owrb] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/Haj2way/Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zn29bo9civ],
.components-reconnect-repeated-attempt-visible[b-zn29bo9civ],
.components-reconnect-failed-visible[b-zn29bo9civ],
.components-pause-visible[b-zn29bo9civ],
.components-resume-failed-visible[b-zn29bo9civ],
.components-rejoining-animation[b-zn29bo9civ] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-retrying[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-failed[b-zn29bo9civ],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zn29bo9civ] {
    display: block;
}


#components-reconnect-modal[b-zn29bo9civ] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zn29bo9civ 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zn29bo9civ 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zn29bo9civ 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zn29bo9civ]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-zn29bo9civ 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zn29bo9civ {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zn29bo9civ {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zn29bo9civ {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zn29bo9civ] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zn29bo9civ] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zn29bo9civ] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zn29bo9civ] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-zn29bo9civ] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-zn29bo9civ] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zn29bo9civ] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zn29bo9civ 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zn29bo9civ] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zn29bo9civ {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* _content/Haj2way/Components/Pages/Landing/Register.razor.rz.scp.css */
.register-page[b-kk4haxk88j] {
    background: #f6f8f6;
    min-height: 100vh;
    font-family: Cairo;
    color: #1f2d25;
}

/* TOP */
.topbar[b-kk4haxk88j] {
    display: flex;
    justify-content: space-between;
    padding: 15px 25px;
    background: #fff;
    border-bottom: 1px solid #e5eee8;
}

.back-btn[b-kk4haxk88j] {
    color: #1a5c3e;
    font-weight: 700;
}

/* HEADER */
.header[b-kk4haxk88j] {
    text-align: center;
    padding: 20px;
}

/* PROGRESS */
.progress[b-kk4haxk88j] {
    height: 4px;
    background: #e8f0ea;
}

.bar[b-kk4haxk88j] {
    height: 100%;
    background: #1a5c3e;
    transition: width .3s ease;
}

/* CARD */
.card[b-kk4haxk88j] {
    background: #fff;
    max-width: 800px;
    margin: 20px auto;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* STEP (NO FLICKER FIX) */
.step[b-kk4haxk88j] {
    animation: none !important;
}

/* GRID */
.grid[b-kk4haxk88j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* UNDERLINE FIELD */
.field[b-kk4haxk88j] {
    position: relative;
}

    .field input[b-kk4haxk88j],
    .field select[b-kk4haxk88j] {
        width: 100%;
        padding: 12px 5px;
        border: none;
        border-bottom: 2px solid #d8e6dd;
        outline: none;
        background: transparent;
        font-size: 15px;
    }

    .field label[b-kk4haxk88j] {
        position: absolute;
        top: -10px;
        right: 0;
        font-size: 12px;
        color: #6c8b78;
    }

/* PHOTO */
.photo-box[b-kk4haxk88j] {
    width: 140px;
    height: 170px;
    border: 2px dashed #cfe3d6;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

    .photo-box img[b-kk4haxk88j] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* BUTTONS */
.next[b-kk4haxk88j], .prev[b-kk4haxk88j], .save[b-kk4haxk88j] {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    margin-top: 20px;
}

.next[b-kk4haxk88j] {
    background: #1a5c3e;
    color: #fff;
}

.prev[b-kk4haxk88j] {
    background: #eee;
}

.save[b-kk4haxk88j] {
    background: #b8933c;
    color: #fff;
}
.step[b-kk4haxk88j] {
    animation: none !important;
    color: #1f2d25;
}

.field input[b-kk4haxk88j],
.field select[b-kk4haxk88j] {
    color: #1f2d25 !important;
}

label[b-kk4haxk88j] {
    color: #5c6f63 !important;
}

.card[b-kk4haxk88j] {
    background: #fff !important;
}
/* _content/Haj2way/Components/Pages/Landing/RegisterMain.razor.rz.scp.css */
.register-page[b-wdj81lrh00] {
    background: #f6f8f6;
    min-height: 100vh;
    font-family: Cairo, sans-serif;
    color: #1f2d25;
    /* direction تأتي من dir="@_pageDir" على العنصر مباشرة */
}

.header[b-wdj81lrh00] {
    text-align: center;
    padding: 20px 20px 10px
}

    .header h1[b-wdj81lrh00] {
        font-size: 1.4rem;
        font-weight: 700;
        color: #1a5c3e;
        margin: 0 0 6px
    }

    .header p[b-wdj81lrh00] {
        font-size: .85rem;
        color: #6c8b78;
        margin: 0
    }

.progress[b-wdj81lrh00] {
    height: 5px;
    background: #e8f0ea;
    margin-bottom: 0
}

.bar[b-wdj81lrh00] {
    height: 100%;
    background: linear-gradient(90deg,#1a5c3e,#2d9e6f);
    transition: width .35s ease
}

.card[b-wdj81lrh00] {
    background: #fff;
    max-width: 800px;
    margin: 20px auto;
    padding: 26px;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,.07)
}

.section-title[b-wdj81lrh00] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9rem;
    color: #1a5c3e;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #e8f3ec
}

.section-icon[b-wdj81lrh00] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0
}

    .section-icon.green[b-wdj81lrh00] {
        background: #1D9E75
    }

    .section-icon.amber[b-wdj81lrh00] {
        background: #854F0B
    }

    .section-icon.blue[b-wdj81lrh00] {
        background: #185FA5
    }

.photo-section[b-wdj81lrh00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px
}

.photo-box[b-wdj81lrh00] {
    width: 120px;
    height: 140px;
    border: 2px dashed #cfe3d6;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s
}

    .photo-box:hover[b-wdj81lrh00] {
        border-color: #1D9E75
    }

    .photo-box img[b-wdj81lrh00] {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.photo-icon[b-wdj81lrh00] {
    font-size: 32px
}

.photo-hint[b-wdj81lrh00] {
    font-size: 11px;
    color: #6c8b78;
    margin-top: 4px
}

.photo-tip[b-wdj81lrh00] {
    font-size: 11px;
    color: #a0b0a8
}

.grid[b-wdj81lrh00] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.grid4[b-wdj81lrh00] {
    grid-template-columns: repeat(4,1fr)
}

@media(max - width:600px) {
    .grid[b-wdj81lrh00], .grid4[b-wdj81lrh00] {
        grid-template-columns: 1fr
    }
}

.field[b-wdj81lrh00] {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .field label[b-wdj81lrh00] {
        font-size: 11px;
        font-weight: 600;
        color: #6c8b78
    }

    .field input[b-wdj81lrh00], .field select[b-wdj81lrh00] {
        width: 100%;
        padding: 9px 10px;
        border: 0.5px solid #d8e6dd;
        border-radius: 8px;
        outline: none;
        background: #fafcfa;
        font-size: 14px;
        color: #1f2d25;
        transition: border-color .15s
    }

        .field input:focus[b-wdj81lrh00], .field select:focus[b-wdj81lrh00] {
            border-color: #1D9E75;
            background: #fff
        }

.name-preview[b-wdj81lrh00] {
    background: #E1F5EE;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.name-preview-label[b-wdj81lrh00] {
    font-size: 11px;
    color: #085041;
    font-weight: 600
}

.name-preview-val[b-wdj81lrh00] {
    font-size: 14px;
    font-weight: 700;
    color: #085041
}

.review-grid[b-wdj81lrh00] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px
}

.review-item[b-wdj81lrh00] {
    background: #f6f8f6;
    border-radius: 8px;
    padding: 10px 12px
}

    .review-item.full[b-wdj81lrh00] {
        grid-column: 1/-1
    }

.review-label[b-wdj81lrh00] {
    display: block;
    font-size: 11px;
    color: #6c8b78;
    font-weight: 600;
    margin-bottom: 3px
}

.review-val[b-wdj81lrh00] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2d25
}

.btn-row[b-wdj81lrh00] {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    justify-content: flex-end;
    align-items: center
}

.next[b-wdj81lrh00], .prev[b-wdj81lrh00], .save[b-wdj81lrh00] {
    padding: 10px 22px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: Cairo,sans-serif;
    transition: opacity .15s
}

.next[b-wdj81lrh00] {
    background: #1a5c3e;
    color: #fff
}

.prev[b-wdj81lrh00] {
    background: #eef2ee;
    color: #1a5c3e
}

.save[b-wdj81lrh00] {
    background: #b8933c;
    color: #fff
}

    .next:hover[b-wdj81lrh00], .save:hover[b-wdj81lrh00] {
        opacity: .88
    }

.reg-overlay[b-wdj81lrh00] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.reg-spinner[b-wdj81lrh00] {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-wdj81lrh00 .7s linear infinite
}

@keyframes spin-b-wdj81lrh00 {
    to {
        transform: rotate(360deg)
    }
}

/* _content/Haj2way/Components/Pages/Login/LoginPage.razor.rz.scp.css */
/* FleetWise — LoginPage.razor.css */

/* ── الصورة تأخذ بالضبط نصف الشاشة ── */
.fw-login-root[b-mpsak07l9f] {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    direction: inherit;
}

/* ══ BRAND PANEL — النصف الأول (50%) ══ */
.fw-brand-panel[b-mpsak07l9f] {
    flex: 0 0 50%;          /* بالضبط نصف الشاشة */
    width: 50%;
    background: #071A12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    gap: 1.1rem;
    order: 2;               /* RTL: يمين */
}

/* Glow */
.fw-brand-glow-1[b-mpsak07l9f] {
    position:absolute; width:380px; height:380px;
    background:radial-gradient(circle,rgba(29,158,117,.2) 0%,transparent 70%);
    top:-100px; right:-100px; border-radius:50%;
    animation:fw-glow-b-mpsak07l9f 7s ease-in-out infinite;
}
.fw-brand-glow-2[b-mpsak07l9f] {
    position:absolute; width:280px; height:280px;
    background:radial-gradient(circle,rgba(93,202,165,.13) 0%,transparent 70%);
    bottom:-70px; left:-70px; border-radius:50%;
    animation:fw-glow-b-mpsak07l9f 9s ease-in-out infinite reverse;
}

/* حلقات زخرفية */
.fw-brand-panel[b-mpsak07l9f]::before {
    content:'';
    position:absolute; width:650px; height:650px;
    border-radius:50%;
    border:1px solid rgba(29,158,117,.07);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}
.fw-brand-panel[b-mpsak07l9f]::after {
    content:'';
    position:absolute; width:450px; height:450px;
    border-radius:50%;
    border:1px solid rgba(29,158,117,.1);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}

/* طريق متحرك */
.fw-road[b-mpsak07l9f] {
    position:absolute; bottom:40px; left:0; right:0;
    display:flex; flex-direction:column; gap:6px;
    padding:0 50px; opacity:.15; pointer-events:none;
    z-index:0;
}
.fw-road-line[b-mpsak07l9f] {
    height:2px;
    background:repeating-linear-gradient(90deg,#5DCAA5 0,#5DCAA5 36px,transparent 36px,transparent 64px);
    animation:fw-road-b-mpsak07l9f 2.4s linear infinite;
}
.fw-road-line-2[b-mpsak07l9f] { opacity:.6; animation-delay:-.8s; }
.fw-road-line-3[b-mpsak07l9f] { opacity:.3; animation-delay:-1.6s; }

/* السيارة — كبيرة وواضحة */
.fw-car-wrap[b-mpsak07l9f] {
    width: 90%;
    max-width: 480px;
    z-index: 1; position: relative;
    animation: fw-float-b-mpsak07l9f 5s ease-in-out infinite;
    filter: drop-shadow(0 24px 50px rgba(29,158,117,.45));
}
.fw-car-svg[b-mpsak07l9f] { width:100%; height:auto; }

/* اسم النظام */
.fw-brand-name[b-mpsak07l9f] {
    font-size: 2.8rem; font-weight:900;
    letter-spacing:1px; z-index:1; line-height:1;
}
.fw-brand-fw[b-mpsak07l9f]   { color:#fff; }
.fw-brand-wise[b-mpsak07l9f] { color:#1D9E75; }

.fw-brand-tagline[b-mpsak07l9f] {
    color:rgba(159,225,203,.55); font-size:.75rem;
    font-weight:300; letter-spacing:3px;
    text-transform:uppercase; z-index:1; margin:0;
}

/* Pills */
.fw-feature-pills[b-mpsak07l9f] { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; z-index:1; }
.fw-pill[b-mpsak07l9f] {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(29,158,117,.12); border:1px solid rgba(29,158,117,.25);
    color:rgba(159,225,203,.8); border-radius:30px;
    padding:4px 12px; font-size:.74rem; font-family:'Cairo',sans-serif;
}
.fw-pill svg[b-mpsak07l9f] { width:11px; height:11px; stroke:#1D9E75; fill:none; stroke-width:2; stroke-linecap:round; }

/* ══ FORM PANEL — النصف الثاني (50%) ══ */
.fw-form-panel[b-mpsak07l9f] {
    flex: 0 0 50%;          /* بالضبط نصف الشاشة */
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem;
    background: #fff;
    order: 1;               /* RTL: يسار */
    overflow-y: auto;
    /* لا خط علوي */
}
.fw-form-panel[b-mpsak07l9f]::before { display:none !important; }

.fw-form-card[b-mpsak07l9f] { width:100%; max-width:380px; }

/* Logo صغير في الكارت */
.fw-form-logo[b-mpsak07l9f] {
    display:flex; align-items:center; justify-content:center;
    gap:9px; margin-bottom:1.75rem;
}
.fw-form-car-mini[b-mpsak07l9f] { width:44px; height:auto; }
.fw-form-brand[b-mpsak07l9f] { font-size:1.45rem; font-weight:900; line-height:1; }

/* Header */
.fw-form-header[b-mpsak07l9f] { margin-bottom:1.5rem; text-align:right; }
.fw-form-title[b-mpsak07l9f] {
    font-size:1.6rem; font-weight:800; color:#071A12;
    margin:0 0 4px; line-height:1.2;
    font-family:'Cairo',sans-serif;
}
.fw-form-sub[b-mpsak07l9f] { font-size:.82rem; color:#6B9E8A; margin:0; }

/* Fields */
.fw-edit-form[b-mpsak07l9f] { display:flex; flex-direction:column; gap:1rem; }
.fw-field-group[b-mpsak07l9f] { display:flex; flex-direction:column; gap:5px; }
.fw-label[b-mpsak07l9f] {
    display:flex; align-items:center; gap:5px;
    font-size:.72rem; font-weight:700; color:#0F6E56;
    letter-spacing:.5px; text-transform:uppercase;
}
.fw-label-icon[b-mpsak07l9f] { width:12px; height:12px; stroke:#1D9E75; fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; }

/* MudTextField */
:deep(.fw-mud-input .mud-input-outlined-border)[b-mpsak07l9f] {
    border-color:#E0EDE8 !important; border-radius:12px !important;
    border-width:1.5px !important; transition:border-color .2s, box-shadow .2s;
}
:deep(.fw-mud-input:hover .mud-input-outlined-border)[b-mpsak07l9f] { border-color:#5DCAA5 !important; }
:deep(.fw-mud-input.mud-focused .mud-input-outlined-border)[b-mpsak07l9f],
:deep(.fw-mud-input .mud-input-outlined-border:focus-within)[b-mpsak07l9f] {
    border-color:#1D9E75 !important;
    box-shadow:0 0 0 3px rgba(29,158,117,.1) !important;
}
:deep(.fw-mud-input input)[b-mpsak07l9f] {
    font-family:'Cairo',sans-serif !important; font-size:.92rem !important;
    color:#071A12 !important; height:46px !important; padding:0 13px !important;
}
:deep(.fw-mud-input input::placeholder)[b-mpsak07l9f] { color:#C0D8CF !important; }
:deep(.fw-mud-input .mud-input-label)[b-mpsak07l9f]   { display:none !important; }

/* Submit */
:deep(.fw-submit-btn)[b-mpsak07l9f] {
    background:#0F6E56 !important; color:#fff !important;
    border-radius:13px !important; height:50px !important;
    font-family:'Cairo',sans-serif !important; font-size:.97rem !important;
    font-weight:700 !important; margin-top:.3rem !important;
    border:none !important; text-transform:none !important;
    transition:all .22s ease !important;
}
:deep(.fw-submit-btn:hover)[b-mpsak07l9f]  { background:#1D9E75 !important; transform:translateY(-2px) !important; box-shadow:0 8px 22px rgba(15,110,86,.28) !important; }
:deep(.fw-submit-btn:active)[b-mpsak07l9f] { background:#083D2E !important; transform:translateY(0) !important; }
:deep(.fw-submit-btn .mud-button-label)[b-mpsak07l9f] { font-family:'Cairo',sans-serif !important; font-weight:700 !important; }

.fw-btn-inner[b-mpsak07l9f] { display:flex; align-items:center; justify-content:center; gap:7px; }
.fw-btn-icon[b-mpsak07l9f]  { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; }

.fw-form-footer[b-mpsak07l9f] {
    text-align:center; font-size:.7rem; color:#B8D4C8; margin-top:1.4rem;
}
.fw-form-footer span[b-mpsak07l9f] { color:#1D9E75; font-weight:600; }

/* Overlay */
.fw-overlay-inner[b-mpsak07l9f] { display:flex; flex-direction:column; align-items:center; gap:14px; }
.fw-spinner-ring[b-mpsak07l9f] {
    width:52px; height:52px;
    border:3px solid rgba(93,202,165,.25); border-top-color:#1D9E75;
    border-radius:50%; animation:fw-spin-b-mpsak07l9f .75s linear infinite;
}
.fw-overlay-label[b-mpsak07l9f] { color:#9FE1CB; font-family:'Cairo',sans-serif; font-size:.88rem; letter-spacing:1px; }

/* Animations */
@keyframes fw-spin-b-mpsak07l9f  { to { transform:rotate(360deg); } }
@keyframes fw-float-b-mpsak07l9f { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fw-glow-b-mpsak07l9f  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.12)} }
@keyframes fw-road-b-mpsak07l9f  { from{background-position:0 0} to{background-position:100px 0} }

/* ══ MOBILE ══ */
@media (max-width:860px) {
    .fw-login-root[b-mpsak07l9f] { flex-direction:column; height:auto; min-height:100vh; }
    .fw-brand-panel[b-mpsak07l9f] { display:none; }
    .fw-form-panel[b-mpsak07l9f] {
        flex:1; width:100%; min-height:100vh;
        padding:2.5rem 1.25rem;
        background:#071A12; order:1;
    }
    .fw-form-title[b-mpsak07l9f] { color:#E1F5EE; }
    .fw-form-sub[b-mpsak07l9f]   { color:rgba(159,225,203,.6); }
    .fw-form-brand .fw-brand-fw[b-mpsak07l9f] { color:#E1F5EE; }
    :deep(.fw-mud-input .mud-input-outlined-border)[b-mpsak07l9f] { border-color:rgba(29,158,117,.3) !important; }
    :deep(.fw-mud-input input)[b-mpsak07l9f] { color:#E1F5EE !important; }
    .fw-form-footer[b-mpsak07l9f] { color:rgba(159,225,203,.35); }
}