@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400&family=DM+Sans:wght@400;600;700&display=swap');
:root{color-scheme:light;--navy:#142843;--red:#ac2834;--border:#d8e0e8}
*{box-sizing:border-box}body{margin:0;background:#f7f9fc;color:#1d2b3b;font:400 14px 'Noto Kufi Arabic',sans-serif;line-height:1.9}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px max(24px,calc((100vw - 1080px)/2));background:#fff;border-bottom:1px solid var(--border);flex-wrap:wrap}header>a{font:bold 21px 'DM Sans',sans-serif;color:var(--navy)}a{color:var(--navy);text-decoration:none}nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}main{max-width:1080px;margin:32px auto;padding:0 20px;min-height:65vh}.panel{background:white;border:1px solid var(--border);border-radius:12px;padding:26px;margin:16px 0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}h1,h2{color:var(--navy)}label{display:block;margin-top:14px}input,select,textarea{font:inherit;width:100%;padding:10px;border:1px solid #aebbc9;border-radius:7px;background:#fff}button,.primary{font:inherit;cursor:pointer;padding:10px 18px;border:0;border-radius:7px;color:white;background:var(--navy);display:inline-block;margin-top:15px}.inline{display:inline}.inline button{margin:0;padding:5px 10px}table{width:100%;border-collapse:collapse;background:white}td,th{text-align:right;border-bottom:1px solid var(--border);padding:12px}table{display:block;overflow-x:auto}.muted{color:#5c6877}.error{color:#9f172c}footer{text-align:center;padding:28px;color:#5c6877;font-size:12px}@media(max-width:700px){header{padding:16px}nav{gap:9px}}

/* Dedicated login layout — matches the navy/red customer portal */
body:has(.auth-shell){background:#f4f7fb}
body:has(.auth-shell) main{max-width:1170px;min-height:auto;margin:0 auto;padding:34px 24px}
body:has(.auth-shell) header{border-bottom:1px solid #e2e8f1;padding-block:15px}
body:has(.auth-shell) header>a{font-size:21px}
body:has(.auth-shell) footer{display:none}
.auth-shell{width:100%}
.auth-card{min-height:545px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border:1px solid #dfe6ef;border-radius:16px;overflow:hidden;box-shadow:0 18px 55px rgba(12,34,62,.055);background:#fff}
.auth-intro{background:linear-gradient(145deg,#0a2342 0%,#102f54 72%,#173b62 100%);color:#fff;padding:37px 42px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-intro:before{content:"";position:absolute;width:340px;height:340px;right:-190px;bottom:70px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.02);pointer-events:none}
.auth-intro-mark{display:flex;align-items:center;gap:13px;position:relative;font:700 15px 'DM Sans',sans-serif;letter-spacing:.045em}
.auth-mark{width:45px;height:45px;border:1px solid rgba(255,255,255,.5);border-radius:10px;display:grid;place-items:center;font:700 16px 'DM Sans',sans-serif;color:#fff}
.auth-intro-mark small{display:block;color:#abc0d7;letter-spacing:.15em;font-size:9px;font-weight:400;margin-top:5px}
.auth-intro-copy{position:relative}
.auth-eyebrow,.auth-overline{font:700 10px 'DM Sans',sans-serif;letter-spacing:.2em}
.auth-eyebrow{color:#eaa7b4}
.auth-intro h2{color:white;font-size:clamp(23px,2.35vw,33px);line-height:1.65;font-weight:400;margin:12px 0}
.auth-intro-copy>p:last-child{color:#c5d4e4;max-width:400px;font-size:13px;line-height:2.2}
.auth-intro-foot{color:#c5d4e4;letter-spacing:.12em;font:500 10px 'DM Sans',sans-serif;display:flex;align-items:center;gap:8px;position:relative}
.auth-dot{width:7px;height:7px;background:#e5a8b3;border-radius:50%}
.auth-form-side{display:grid;align-items:center;padding:54px clamp(25px,5vw,75px)}
.auth-form-inner{width:100%;max-width:420px;margin:auto}
.auth-overline{color:#b31942;margin-bottom:12px}
.auth-form-inner h1{font-size:clamp(24px,2.5vw,32px);font-weight:400;margin:0 0 6px;color:#0b2d55}
.auth-description{color:#697c90;font-size:12px;margin:0 0 29px}
.auth-form label{font-size:12px;color:#233d56;margin:18px 0 6px}
.auth-form input{height:49px;border:1px solid #d6e0eb;border-radius:7px;background:#fff;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.auth-form input:focus{border-color:#0b2d55;box-shadow:0 0 0 3px rgba(11,45,85,.08)}
.auth-form input::placeholder{color:#9aaabc}
.auth-submit{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;margin-top:27px;border-radius:7px;background:#0b2d55;min-height:49px;font-size:13px;transition:background .15s}
.auth-submit:hover{background:#b31942}
.auth-register{font-size:12px;text-align:center;margin-top:19px;color:#6a7989}
.auth-register a{color:#b31942;font-weight:700}
.auth-error{padding:11px 14px;background:#fff0f1;color:#a12039;border:1px solid #efcbd1;border-radius:7px;font-size:12px}
.auth-legal{text-align:center;color:#8793a3;font:400 11px 'DM Sans',sans-serif;margin:19px 0 0;line-height:1.7}
@media(max-width:780px){body:has(.auth-shell) main{padding:20px 14px}.auth-card{display:flex;flex-direction:column}.auth-intro{min-height:190px;padding:24px 28px;gap:18px}.auth-intro h2{font-size:22px;margin:6px 0}.auth-intro-copy>p:last-child{font-size:12px;margin:0}.auth-intro-foot{display:none}.auth-form-side{padding:32px 27px 37px}}
@media(max-width:440px){.auth-intro{padding:22px}.auth-form-side{padding:27px 20px 32px}body:has(.auth-shell) header{padding:14px 18px}body:has(.auth-shell) nav{font-size:11px}}

body:has(.auth-shell) header{min-height:90px;padding:12px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #dfe6ee;gap:24px}
body:has(.auth-shell) header .portal-header-brand{display:flex;align-items:center;gap:12px;color:#0b2d55;text-decoration:none;font:700 18px/1.06 'Source Serif 4',Georgia,serif;letter-spacing:0}
.portal-header-brand img{width:53px;height:53px;object-fit:contain;border-radius:50%;background:#fff;border:1px solid #e3e9f0;padding:2px}
.portal-header-brand strong{font-weight:700}
.portal-header-brand small{display:block;font:600 9px/1.5 'DM Sans',sans-serif;color:#6c7e91;letter-spacing:.13em;margin-top:5px}
body:has(.auth-shell) header nav{gap:14px}
body:has(.auth-shell) header nav a{font-size:12px;padding:8px 12px;border-radius:6px}
body:has(.auth-shell) header nav a:hover{background:#eef2f6;color:#b31942}
body:has(.auth-shell) header nav a[href*="/request"]{display:none}
.auth-intro-mark .auth-mark-image{width:52px;height:52px;object-fit:contain;border-radius:50%;background:#fff;padding:2px}
@media(max-width:600px){body:has(.auth-shell) header{padding:12px 16px;min-height:73px;flex-wrap:nowrap}body:has(.auth-shell) header .portal-header-brand{font-size:14px}body:has(.auth-shell) .portal-header-brand img{width:42px;height:42px}body:has(.auth-shell) .portal-header-brand small{font-size:7px}body:has(.auth-shell) header nav a{font-size:11px;padding:6px}}

.auth-password-hint{color:#778699;font-size:11px;font-weight:400}

.auth-language{display:flex;justify-content:flex-end;margin:0 0 12px}.auth-lang-toggle{background:#fff;color:#0b2d55;border:1px solid #dce4ef;border-radius:6px;font:600 12px 'DM Sans',sans-serif;margin:0;padding:5px 14px;cursor:pointer}.auth-lang-toggle:hover{color:#b31942;border-color:#b31942}html[dir="ltr"] .auth-shell .auth-intro,html[dir="ltr"] .auth-shell .auth-form-inner{text-align:left}html[dir="ltr"] .auth-shell .auth-form label{text-align:left}html[dir="ltr"] .auth-shell .auth-intro-mark{direction:ltr}html[dir="ltr"] .auth-shell .auth-form-inner h1,html[dir="ltr"] .auth-shell .auth-intro h2{font-family:'DM Sans',sans-serif;font-weight:600;line-height:1.4}html[dir="ltr"] .auth-language{justify-content:flex-end}

.auth-register-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:15px}.auth-register-fields .auth-field{min-width:0}.auth-register-fields select{height:49px;border:1px solid #d6e0eb;border-radius:7px;background:#fff;padding:8px 12px;width:100%}.auth-register-fields input{width:100%}@media(max-width:600px){.auth-register-fields{grid-template-columns:1fr}}

/* Three-step customer registration */
.register-step{margin:0;border:0;padding:0;min-width:0}
.register-step[hidden],.registration-buttons [hidden]{display:none!important}
.register-step-title{font-size:13px;font-weight:400;color:#0b2d55;padding:0;margin:15px 0 5px}
.registration-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 21px}
.registration-progress-item{display:flex;align-items:center;gap:6px;flex:1;min-width:0;color:#8291a5;font-size:11px;white-space:nowrap}
.registration-progress-item b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#e7edf5;color:#59708a;font:600 12px 'DM Sans',sans-serif}
.registration-progress-item.current{color:#0b2d55}.registration-progress-item.current b{color:#fff;background:#b31942}.registration-progress-item.done b{color:#fff;background:#0b2d55}
.registration-buttons{display:flex;gap:12px;align-items:center;margin-top:20px}
.registration-buttons .auth-submit{margin:0;flex:1}
.registration-back{margin:0;border:1px solid #cad5e2;background:#fff;color:#0b2d55;min-height:49px;padding:10px 22px}
.registration-back:hover{background:#eef3f9}

/* Shared authentication header */
body:has(.auth-shell) header nav{display:flex;align-items:center;gap:8px 13px;flex-wrap:wrap}
body:has(.auth-shell) header nav .auth-lang-toggle{margin:0;padding:7px 13px;white-space:nowrap}
body:has(.auth-shell) header nav a[data-auth-nav="contact"]{border:1px solid #dce4ef;color:#0b2d55}
body:has(.auth-shell) header nav a[data-auth-nav="contact"]:hover{border-color:#b31942;color:#b31942}
body:has(.auth-shell) main{padding-top:24px}
@media(max-width:680px){body:has(.auth-shell) header{flex-wrap:wrap;gap:10px}body:has(.auth-shell) header nav{width:100%;gap:5px;justify-content:center}body:has(.auth-shell) header nav a{font-size:11px;padding:5px 8px}body:has(.auth-shell) header nav .auth-lang-toggle{font-size:11px;padding:6px 10px}}

/* Responsive authentication and onboarding refinements */
@media(max-width:680px){body:has(.auth-shell) header{padding:12px 14px}body:has(.auth-shell) header nav{justify-content:center;row-gap:6px}body:has(.auth-shell) header nav a,body:has(.auth-shell) header nav button{min-height:40px;display:inline-flex;align-items:center;justify-content:center}.registration-progress{gap:3px}.registration-progress-item{gap:4px;flex-direction:column;text-align:center;white-space:normal;line-height:1.45;font-size:10px}.registration-progress-item b{flex-shrink:0}.auth-form-side{min-width:0}.auth-form-inner{min-width:0}}
@media(max-width:380px){body:has(.auth-shell) header .portal-header-brand{font-size:12px}.portal-header-brand small{font-size:7px}body:has(.auth-shell) header nav{gap:3px}body:has(.auth-shell) header nav a{padding:6px 7px}.registration-progress-item{font-size:9px}.registration-buttons{gap:8px}.registration-back{padding:9px 12px}.auth-intro h2{font-size:20px}}

.auth-form .auth-remember{display:flex;align-items:center;gap:9px;margin:18px 0 0;cursor:pointer;font-size:12px;color:#354a61}.auth-form .auth-remember input{width:17px;height:17px;min-width:17px;flex:0 0 17px;accent-color:#0b2d55;cursor:pointer;margin:0;padding:0}.auth-form .auth-remember span{line-height:1.6}

.auth-form{position:relative}.auth-form .auth-hp{position:absolute!important;inset:0 auto auto 0!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}.auth-form .auth-hp label,.auth-form .auth-hp input{display:block!important;position:static!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}

.auth-password-wrap{position:relative;min-width:0}.auth-form .auth-password-wrap input{width:100%;direction:ltr;text-align:left;padding-left:14px;padding-right:84px}.auth-form .auth-password-toggle{position:absolute;right:7px;left:auto;top:50%;transform:translateY(-50%);background:transparent;border:0;border-radius:5px;color:#0b2d55;font-size:12px;font-weight:600;cursor:pointer;min-width:62px;min-height:36px;padding:5px 8px;margin:0}.auth-password-toggle:hover{background:#eef3f9}.auth-password-toggle:focus-visible{outline:2px solid #b31942;outline-offset:1px}

/* Registration stepper — balanced RTL/LTR layout, desktop and mobile */
.auth-form .registration-progress{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:0;margin:24px 0 28px;padding:0;isolation:isolate}
.auth-form .registration-progress::before{content:"";position:absolute;z-index:-1;top:19px;inset-inline-start:16.666%;inset-inline-end:16.666%;height:2px;background:#dfe7f0}
.auth-form .registration-progress-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-width:0;white-space:normal;text-align:center;color:#76879d;font-size:12px;line-height:1.5;font-weight:500}
.auth-form .registration-progress-item b{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:2px solid #e2eaf3;border-radius:50%;background:#f2f5f9;color:#6b7f98;font:600 14px 'DM Sans',sans-serif;box-shadow:0 0 0 5px #fff}
.auth-form .registration-progress-item span{display:block;max-width:100%;min-height:21px}
.auth-form .registration-progress-item.current{color:#0b2d55;font-weight:700}
.auth-form .registration-progress-item.current b{background:#b31942;border-color:#b31942;color:#fff;box-shadow:0 0 0 5px #fff,0 3px 9px #b3194222}
.auth-form .registration-progress-item.done{color:#0b2d55}
.auth-form .registration-progress-item.done b{background:#0b2d55;border-color:#0b2d55;color:#fff}
.auth-form .register-step-title{margin-top:2px}
@media(max-width:480px){.auth-form .registration-progress{margin:18px 0 22px}.auth-form .registration-progress::before{top:17px}.auth-form .registration-progress-item{gap:7px;font-size:11px}.auth-form .registration-progress-item b{width:36px;height:36px;flex-basis:36px;font-size:13px;box-shadow:0 0 0 4px #fff}}