:root{--ar-blue:#1f5fa8;--ar-navy:#12335e;--ar-orange:#f58220;--ar-bg:#f4f7fb;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--ar-bg);color:#1c2b3f;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}[dir=rtl] body{font-family:Cairo,"Segoe UI",Tahoma,Arial,sans-serif}h1,h2,h3{letter-spacing:-.01em}

.btn-brand{background:var(--ar-orange);border-color:var(--ar-orange);color:#fff;font-weight:600}.btn-brand:hover{background:#dc6f10;border-color:#dc6f10;color:#fff}
.btn-blue{background:var(--ar-blue);border-color:var(--ar-blue);color:#fff}.btn-blue:hover{background:var(--ar-navy);color:#fff}
.text-blue{color:var(--ar-blue)}.text-orange{color:var(--ar-orange)}
.bar{height:6px;width:220px;background:#dbe4f0;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ar-blue),var(--ar-orange));animation:ld 3s linear forwards}
@keyframes ld{to{width:100%}}
.langcard{border:2px solid transparent;border-radius:1rem;cursor:pointer;transition:.2s;background:#fff}.langcard:hover{border-color:var(--ar-orange);transform:translateY(-4px)}
.hero{background:linear-gradient(135deg,var(--ar-navy),var(--ar-blue));color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;background:radial-gradient(circle,rgba(245,130,32,.35),transparent 65%)}
.route path{stroke-dasharray:6 8;animation:dash 1.5s linear infinite}@keyframes dash{to{stroke-dashoffset:-28}}
[dir=rtl] .route{transform:scaleX(-1)}
.glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:1rem;backdrop-filter:blur(6px)}
.card-s{background:#fff;border:0;border-radius:1rem;box-shadow:0 4px 18px rgba(18,51,94,.07)}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:#e8f0fb;color:var(--ar-blue)}
.step{position:relative}.step b{position:absolute;top:-14px;inset-inline-end:16px;font-size:3rem;color:#e6edf7;line-height:1}
.chip{display:inline-block;background:#fff;border-radius:2rem;padding:.35rem .9rem;margin:.2rem;box-shadow:0 2px 8px rgba(18,51,94,.08)}
.dash-nav .nav-link{color:var(--ar-navy);border-radius:.7rem;font-weight:600}.dash-nav .nav-link.active{background:var(--ar-blue)}
.bars div{height:10px;border-radius:6px;background:var(--ar-blue)}.bars div+div{background:var(--ar-orange);margin-top:3px}

.hero{background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.08) 0 2px,transparent 3px) 0 0/28px 28px,linear-gradient(135deg,#0d2747,var(--ar-blue))}
.hero .btn,#pnav .btn,.cta .btn{border-radius:50rem;padding-inline:1.4rem}
.hero h1{font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.15}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:44px;z-index:2}.pb-lg-6{padding-bottom:4rem!important}
#pnav{backdrop-filter:blur(10px);background:rgba(255,255,255,.92)!important}#pnav .nav-link{font-weight:600;color:var(--ar-navy)}#pnav .nav-link:hover{color:var(--ar-orange)}
.rmap{margin:-.25rem 0 3.2rem}.pill{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,14px);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:2rem;padding:.2rem .7rem;font-size:.8rem;white-space:nowrap}
[dir=rtl] .pill{left:auto;right:var(--x);transform:translate(50%,14px)}
.float-card{animation:fl 6s ease-in-out infinite;box-shadow:0 30px 60px rgba(0,0,0,.25)}@keyframes fl{50%{transform:translateY(-8px)}}
.eyebrow{display:inline-block;background:#fff1e3;color:#c95f0a;font-weight:700;font-size:.8rem;border-radius:2rem;padding:.25rem .9rem;text-transform:uppercase;letter-spacing:.04em}
.hov{transition:.25s}.hov:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(18,51,94,.14)}
.card-s{border:1px solid #e8eef6}.ico{background:linear-gradient(135deg,#e8f0fb,#d6e6fa)}
.step{border-top:4px solid var(--ar-orange)}
.cta{position:relative;overflow:hidden}.cta:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.12);top:-120px;inset-inline-start:-80px}
.foot{background:var(--ar-navy);color:#fff}.foot a{color:#ffd2a8;text-decoration:none}
#dash>.bg-white{border-bottom:3px solid var(--ar-orange)}.dash-nav{background:#fff;padding:.4rem;border-radius:1rem;box-shadow:0 4px 18px rgba(18,51,94,.07);display:inline-flex}
.form-control,.form-select,.input-group-text{padding:.65rem .9rem}.input-group-text{background:#f0f5fb;color:var(--ar-blue)}.form-control:focus,.form-select:focus{border-color:var(--ar-orange);box-shadow:0 0 0 .2rem rgba(245,130,32,.15)}
#sub .card-s,#login .card-s{box-shadow:0 20px 50px rgba(18,51,94,.12)}
@media(max-width:575px){.dash-nav{display:flex;width:100%}.dash-nav .nav-link{padding:.5rem .65rem;font-size:.8rem}}


:root{--ease:cubic-bezier(.2,.8,.2,1);--ring:0 0 0 4px rgba(245,130,32,.28)}
/* ===== Buttons (global) ===== */
.btn:not(.btn-link){display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;letter-spacing:.01em;border-radius:50rem;border-width:1.5px;
 transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn:not(.btn-link):hover{transform:translateY(-2px)}
.btn:not(.btn-link):active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)!important}
.btn-lg{padding:.85rem 1.9rem;font-size:1.05rem}
.btn-brand{border:0;background:linear-gradient(135deg,#ffa047 0%,#f58220 50%,#ea6a0c 100%);
 box-shadow:0 10px 24px -8px rgba(245,130,32,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-brand:hover{background:linear-gradient(135deg,#ffab5a,#f58220 50%,#e2620a);box-shadow:0 16px 30px -8px rgba(245,130,32,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-brand .bi{transition:transform .3s var(--ease)}.btn-brand:hover .bi{transform:translate(2px,-2px)}
[dir=rtl] .btn-brand:hover .bi-arrow-up-right-circle-fill{transform:translate(-2px,-2px)}
.btn-blue{border:0;background:linear-gradient(135deg,#2b72c4,var(--ar-blue) 55%,var(--ar-navy));box-shadow:0 10px 22px -8px rgba(31,95,168,.7)}
.btn-blue:hover{background:linear-gradient(135deg,#3380d6,#1f5fa8 55%,#12335e);box-shadow:0 14px 28px -8px rgba(31,95,168,.8)}
.btn-outline-primary{--bs-btn-color:var(--ar-blue);--bs-btn-border-color:rgba(31,95,168,.35);--bs-btn-hover-color:var(--ar-navy);--bs-btn-hover-bg:#e8f0fb;--bs-btn-hover-border-color:var(--ar-blue);
 --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--ar-blue);--bs-btn-active-border-color:var(--ar-blue)}
.btn-outline-secondary{--bs-btn-color:#44546a;--bs-btn-border-color:rgba(18,51,94,.18);--bs-btn-hover-color:var(--ar-navy);--bs-btn-hover-bg:#f1f5fa;--bs-btn-hover-border-color:rgba(18,51,94,.3);
 --bs-btn-active-color:var(--ar-navy);--bs-btn-active-bg:#e6edf6;--bs-btn-active-border-color:rgba(18,51,94,.3)}
.btn-outline-danger{--bs-btn-hover-bg:#dc3545}
.btn-ghost{color:var(--ar-blue);background:#eef4fc;border:1.5px solid transparent}
.btn-ghost:hover{background:#dfeafa;color:var(--ar-navy)}
.btn-outline-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);--bs-btn-hover-bg:rgba(255,255,255,.2);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff}
.btn-light{border:0;background:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.35)}.btn-light:hover{background:#fff;box-shadow:0 18px 34px -10px rgba(0,0,0,.45)}
@media(max-width:575.98px){.hero .d-flex.flex-wrap>.btn{flex:1 1 100%}}

/* ===== Navbar ===== */
#pnav{padding:.6rem 0;background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
 border-bottom:1px solid rgba(18,51,94,.06);box-shadow:none!important;transition:box-shadow .3s}
#pnav.scrolled{box-shadow:0 10px 30px -14px rgba(18,51,94,.35)!important}
#pnav .navbar-nav{gap:.2rem}
#pnav .nav-link{padding:.5rem 1.05rem;border-radius:50rem;font-weight:600;color:var(--ar-navy);transition:background-color .2s,color .2s}
#pnav .nav-link:hover,#pnav .nav-link:focus-visible{background:#eef3fa;color:var(--ar-blue)}
#pnav .nav-link:focus-visible{outline:0;box-shadow:var(--ring)}
.nav-panel{display:flex;flex-grow:1;align-items:center;gap:1rem}
.nav-actions{display:flex;align-items:center;gap:.5rem}
#pnav .nav-actions .btn{padding:.55rem 1.2rem;font-size:.95rem;white-space:nowrap}

/* Language switch (segmented, sliding thumb) */
.lang-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:50rem;background:#e9eef6;isolation:isolate}
.lang-switch::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;inset-inline-start:3px;width:calc(50% - 3px);border-radius:50rem;background:#fff;
 box-shadow:0 2px 8px rgba(18,51,94,.2);transition:transform .35s var(--ease)}
html[lang=ar] .lang-switch::before{transform:translateX(-100%)}
.lang-switch button{border:0;background:none;min-width:58px;padding:.45rem .9rem;border-radius:50rem;font-weight:800;font-size:.85rem;line-height:1.2;color:#7a8aa0;transition:color .25s}
.lang-switch button:hover{color:var(--ar-navy)}
.lang-switch button:focus-visible{outline:0;box-shadow:var(--ring)}
html[lang=en] .lang-switch button[lang=en],html[lang=ar] .lang-switch button[lang=ar]{color:var(--ar-navy)}
[dir=rtl] .lang-switch button[lang=ar]{font-family:Cairo,sans-serif}

/* Hamburger -> X */
.nav-toggle{width:46px;height:46px;padding:0;border:0;border-radius:14px;background:#eef3fa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
 transition:background-color .3s,transform .2s}
.nav-toggle:active{transform:scale(.92)}
.nav-toggle:focus-visible{outline:0;box-shadow:var(--ring)}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ar-navy);transition:transform .35s var(--ease),opacity .2s,background-color .3s}
.nav-toggle[aria-expanded=true]{background:var(--ar-navy)}
.nav-toggle[aria-expanded=true] span{background:#fff}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu panel */
@media(max-width:767.98px){
 #pnav .container{flex-wrap:wrap}
 #pnav .navbar-collapse{width:100%}
 .nav-panel{flex-direction:column;align-items:stretch;gap:.75rem;margin-top:.75rem;padding:.6rem;background:#fff;border:1px solid #e6edf6;border-radius:22px;
  box-shadow:0 24px 48px -20px rgba(18,51,94,.35);max-height:calc(100dvh - 100px);overflow-y:auto}
 #pnav .navbar-nav{gap:0}
 #pnav .nav-link{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-radius:14px;font-size:1.05rem}
 #pnav .nav-link::after{content:"\203A";font-size:1.4rem;line-height:1;color:#a9b7ca;transition:transform .2s}
 [dir=rtl] #pnav .nav-link::after{content:"\2039"}
 #pnav .nav-link:hover::after{transform:translateX(3px);color:var(--ar-orange)}
 [dir=rtl] #pnav .nav-link:hover::after{transform:translateX(-3px)}
 .nav-actions{flex-direction:column;align-items:stretch;gap:.6rem;padding-top:.75rem;border-top:1px solid #edf1f7}
 #pnav .nav-actions .btn{width:100%;padding:.85rem 1.2rem;font-size:1rem}
 .nav-actions .btn-brand{order:1}.nav-actions .btn-ghost{order:2}.nav-actions .lang-switch{order:3}
 .lang-switch{display:grid}.lang-switch button{padding:.7rem 1rem;font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* ===== Page loader (shown on first load, page changes and language switches) ===== */
html{scroll-behavior:smooth}#how,#cov{scroll-margin-top:84px}
html.is-loading{overflow:hidden}
.page-loader{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#fff,#e8eff8);opacity:1;visibility:visible;transition:opacity .3s ease}
.page-loader.hide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}
.page-loader .logo{width:150px;height:auto;animation:ldpulse 1.6s ease-in-out infinite}
.page-loader .bar{direction:ltr;width:180px;height:5px}
.page-loader .bar i{width:40%;animation:ldslide 1.1s ease-in-out infinite}
@keyframes ldslide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes ldpulse{50%{opacity:.7;transform:scale(.97)}}

/* ===== First-visit language chooser (index only) ===== */
.welcome{position:fixed;inset:0;z-index:2500;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;
  background:radial-gradient(circle at 50% 30%,#fff,#e8eff8)}
.welcome[hidden]{display:none}
.langcard{font:inherit;color:inherit}
.langcard:focus-visible{outline:0;box-shadow:var(--ring)}

/* ===== Navbar: icon-only actions on desktop ===== */
@media(min-width:768px){
 #pnav .nav-actions .btn{position:relative;width:42px;height:42px;padding:0;border-radius:50%}
 #pnav .nav-actions .btn .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* still read by screen readers */
 #pnav .nav-actions .btn .bi{font-size:1.15rem}
 .nav-panel{justify-content:flex-end}
 .nav-panel .nav-actions{margin-inline-start:auto}
}
/* Truly centred links: independent of the logo/actions widths */
@media(min-width:992px){
 #pnav .container{position:relative}
 #pnav .navbar-nav{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%)}
 [dir=rtl] #pnav .navbar-nav{transform:translate(50%,-50%)}
}

/* Company record lists and confirmation dialogs. */
.records-table th,.records-table td{white-space:nowrap}
#company-dialog .modal-content{border-radius:1rem;border:1px solid #e8eef6}
#company-dialog .modal-header,#company-dialog .modal-footer{border-color:#e8eef6}
#company-dialog .modal-title{color:var(--ar-navy);font-weight:800}

.records-toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem}
.records-toolbar .btn{display:inline-flex;align-items:center;gap:.4rem}
.records-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid #e8eef6}
.records-footer .pagination{flex-wrap:wrap;gap:.25rem;margin:0}
.records-footer .page-link{border-radius:.5rem;min-width:2.25rem}
#shipments-filter-panel[hidden],#returns-filter-panel[hidden]{display:none}