@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");
body.login-reference{--red:#ed002b;--red-b:#f20a2a;background:#080a0c;font-family:Arial,Tahoma,sans-serif}
body.login-reference .login-bg{min-height:100svh;padding:70px 11% 60px 6%;display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:6%;overflow:visible;background:#080a0c}
.login-reference-photo{position:fixed;inset:0;background:url('/assets/login-reference-background-20261013.webp') center/cover no-repeat;z-index:0;pointer-events:none}
body.login-reference .login-bg__overlay{position:fixed;background:linear-gradient(90deg,#0006,transparent 60%,#0002);pointer-events:none}
body.login-reference .login-bg__vignette{display:none}
.login-reference-brand{position:absolute;z-index:4;top:38px;left:5.3%;display:flex;align-items:center;gap:8px;color:#ed002b;font-size:30px;font-weight:800;direction:ltr;text-align:center;line-height:1.05}
.login-reference-brand img{width:74px;height:58px;object-fit:contain}.login-reference-brand small{display:block;font-size:14px;letter-spacing:1px;font-weight:400;color:#fff;margin-top:5px}
.login-reference-story{position:relative;z-index:3;width:44%;max-width:580px;color:#fff;text-align:left;direction:rtl;margin-top:40px}
.login-reference-story h2{font-size:clamp(40px,3.9vw,64px);line-height:1.25;font-weight:800;margin-bottom:22px}.login-reference-story h2 span{display:block;color:#ed002b}
.login-reference-story p{font-size:clamp(18px,1.4vw,23px);line-height:1.7;color:#c9c9ce;max-width:430px;margin-bottom:36px}
.login-reference-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;direction:ltr}
.login-reference-benefit{text-align:center;direction:rtl;color:#e7e7eb;font-size:14px;font-weight:600;line-height:1.6}.login-reference-benefit svg{display:block;width:38px;height:38px;margin:0 auto;color:#ed002b}.login-reference-benefit>div{border:1px solid #ffffff14;border-radius:15px;background:#06060866;padding:16px 10px;margin-bottom:10px}.login-reference-benefit small{display:block;color:#afb0b7;font-weight:400;font-size:13px}
.login-ref-en{display:none}html[lang^="en"] .login-ref-ar{display:none}html[lang^="en"] .login-ref-en{display:initial}html[lang^="en"] .login-reference-story,html[lang^="en"] .login-reference-benefit{direction:ltr}
body.login-reference .login-card{width:520px;max-width:40%;flex-shrink:0;border:1px solid #d8223d;border-radius:26px;padding:30px 46px 34px;background:linear-gradient(140deg,rgba(14,14,17,.97),rgba(7,8,10,.96));backdrop-filter:blur(8px);box-shadow:0 20px 60px #0005,inset 14px 0 24px -24px #ed002b99;direction:rtl}
html[dir="ltr"] body.login-reference .login-card{direction:ltr}
body.login-reference .login-card:before{display:none}
body.login-reference .login-logo{display:flex;flex-direction:column;gap:3px;align-items:center;margin-bottom:18px}
body.login-reference .login-logo img{width:74px;height:52px;object-fit:contain;margin:0}
body.login-reference .login-logo__name{font-family:Arial,sans-serif;font-size:26px;font-weight:800;line-height:1;color:#ed002b;text-transform:uppercase;letter-spacing:0}
body.login-reference .login-logo__sub{font-size:11px;color:#fff;letter-spacing:.5px;line-height:1.2}
body.login-reference .login-heading{font-size:29px;font-weight:700;line-height:1.4;margin:0 0 4px;text-align:center;font-family:Arial,Tahoma,sans-serif;color:#fff}
body.login-reference .login-sub{font-size:15px;line-height:1.5;text-align:center;margin:0 0 25px;color:#919299}
body.login-reference .login-divider{display:none}
body.login-reference .auth-tabs{padding:2px;margin:0 0 22px;border:1px solid #303035;border-radius:12px;background:#111215;gap:2px;min-height:52px;box-shadow:none}
body.login-reference .auth-tab{font-size:15px;min-height:48px;padding:10px 5px;border-radius:10px;line-height:1.3;letter-spacing:0}
body.login-reference .auth-tab.active{background:linear-gradient(120deg,#bf0020,#f10b25);box-shadow:0 0 18px #ed002b22;color:#fff}
body.login-reference .login-form{gap:18px}
body.login-reference .field-label{font-size:14px;font-weight:400;margin-bottom:8px;line-height:1.5;color:#a0a1a8}
body.login-reference .login-input{min-height:50px;font-size:15px;padding:12px 46px;border:1px solid #323239;background:linear-gradient(130deg,#1b1c20,#15161a);border-radius:12px;color:#fff;line-height:1.4;box-shadow:none}
body.login-reference .field-wrap i,body.login-reference .field-wrap>.svg-inline--fa{font-size:18px;width:20px;height:20px}
body.login-reference .login-input:focus{border-color:#ed002b;box-shadow:0 0 0 2px #ed002b1a}
body.login-reference .toggle-pw{min-width:40px;min-height:44px;font-size:18px;left:5px;right:auto;color:#bfc0c6}
html[dir="ltr"] body.login-reference .toggle-pw{right:5px;left:auto}
body.login-reference .forgot-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;min-height:28px;gap:10px}
.login-reference-remember{display:flex;align-items:center;gap:8px;font-size:14px;color:#e3e4e8;cursor:pointer;white-space:nowrap}.login-reference-remember input{width:20px;height:20px;accent-color:#ed002b;cursor:pointer}
body.login-reference .forgot-link{font-size:13px;line-height:1.5;color:#9798a0}
body.login-reference .login-btn{min-height:50px;border-radius:12px;margin-top:3px;padding:12px 40px;font-size:16px;font-weight:700;background:linear-gradient(110deg,#b90020,#f10a25);box-shadow:0 6px 20px #ed002b16;position:relative}
body.login-reference .login-btn i,body.login-reference .login-btn>.svg-inline--fa{position:absolute;left:20px;right:auto;font-size:20px}
body.login-reference .or-divider{font-size:13px;margin:20px 0!important;gap:16px;color:#a1a2aa}
body.login-reference .google-btn{width:100%;min-height:50px;background:#fff;color:#121215;border:1px solid #e8e8ed;border-radius:12px;font-size:16px;font-weight:700;box-shadow:none;padding:12px;gap:12px}
body.login-reference .google-btn img{width:24px;height:24px}
body.login-reference .back-home{display:flex;justify-content:center;gap:9px;font-size:14px;color:#8f9099;margin-top:30px;min-height:32px}
body.login-reference .back-home i,body.login-reference .back-home .svg-inline--fa{color:#ed002b}
body.login-reference .login-card:has(#loginPane:not(.hidden)){display:grid;grid-template-columns:minmax(0,1fr)}
body.login-reference .login-card:has(#loginPane:not(.hidden)) .login-logo{grid-row:1}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #loginPane{display:contents}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #loginPane>.login-heading{grid-row:2}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #loginPane>.login-sub{grid-row:3}
body.login-reference .login-card:has(#loginPane:not(.hidden)) .auth-tabs{grid-row:4}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #loginForm{grid-row:5}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #loginPane>.or-divider{grid-row:6}
body.login-reference .login-card:has(#loginPane:not(.hidden)) #googleSignInBtn{grid-row:7}
body.login-reference .login-card:has(#loginPane:not(.hidden)) .back-home{grid-row:8}
@media(min-width:801px) and (max-width:1199px){body.login-reference .login-bg{padding:100px 5% 50px;gap:5%}.login-reference-story{width:43%}.login-reference-story h2{font-size:42px}.login-reference-story p{font-size:18px}.login-reference-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}body.login-reference .login-card{max-width:49%;padding:28px}}
@media(max-width:800px){body.login-reference .login-bg{padding:92px 16px 32px;display:flex;flex-direction:column;gap:0;align-items:center;min-height:100svh}.login-reference-brand{top:22px;left:24px;font-size:23px}.login-reference-brand img{width:50px;height:40px}.login-reference-brand small{font-size:10px}.login-reference-story{display:none}.login-reference-photo{background-position:40% center}.login-reference-photo:after{content:'';position:absolute;inset:0;background:#0005}body.login-reference .login-card{width:100%;max-width:480px;padding:26px 24px;border-radius:22px}body.login-reference .login-logo img{width:65px;height:46px}body.login-reference .login-heading{font-size:26px}body.login-reference .login-sub{font-size:14px;margin-bottom:22px}body.login-reference .auth-tab{font-size:13px}body.login-reference .login-input{font-size:16px;min-height:50px}body.login-reference .login-form{gap:16px}body.login-reference .field-label{font-size:13px}body.login-reference .google-btn,body.login-reference .login-btn{font-size:15px}body.login-reference .back-home{margin-top:22px;font-size:13px}}
@media(max-width:360px){body.login-reference .login-card{padding:24px 18px}.login-reference-remember{font-size:12px}body.login-reference .forgot-link{font-size:12px}body.login-reference .auth-tab{font-size:12px}}

.login-reference-story h2>.login-ref-ar{color:#fff;display:block}.login-reference-story h2>.login-ref-en{display:none;color:#fff}html[lang^="en"] .login-reference-story h2>.login-ref-ar{display:none}html[lang^="en"] .login-reference-story h2>.login-ref-en{display:block}
html[lang^="ar"] body.login-reference,html[lang^="ar"] body.login-reference button,html[lang^="ar"] body.login-reference input,html[lang^="ar"] body.login-reference .login-heading{font-family:"Cairo",Arial,sans-serif}
body.login-reference .login-logo img{width:90px;height:74px;clip-path:inset(0 0 40% 0);margin-bottom:-28px}body.login-reference .login-reference-brand img{clip-path:inset(0 0 35% 0);width:84px;height:68px;margin-top:15px}
body.login-reference .login-input#loginId{direction:ltr;text-align:left;padding-left:48px;padding-right:18px}.login-reference-field-icon{position:absolute;left:16px;right:auto;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#d6d6dd;pointer-events:none}
.login-reference-submit-icon{position:absolute;left:20px;width:22px;height:22px;top:50%;transform:translateY(-50%)}.login-reference-tab-icon{width:18px;height:18px;flex-shrink:0}
@media(min-width:1200px){body.login-reference .login-bg{padding-top:85px}body.login-reference .login-card{width:min(520px,31.1vw);padding-bottom:30px}.login-reference-story{margin-top:-20px}.login-reference-story p{margin-left:0;margin-right:auto}.login-reference-story .login-reference-benefits{max-width:560px}}
body.login-reference .login-logo{margin-bottom:12px}body.login-reference .login-sub{margin-bottom:18px}body.login-reference .auth-tabs{margin-bottom:18px}body.login-reference .login-form{gap:16px}body.login-reference .or-divider{margin:18px 0!important}body.login-reference .back-home{margin-top:24px}

body.login-reference .login-card:has(#signupForm:not(.hidden)){padding:22px 32px 24px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .login-logo{gap:2px;margin-bottom:6px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .login-logo img{width:72px;height:60px;margin-bottom:-24px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .login-logo__name{font-size:22px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .login-logo__sub{font-size:10px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .auth-tabs{min-height:44px;margin-bottom:10px}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .auth-tab{min-height:40px;padding:7px 5px;font-size:13px}
body.login-reference #signupForm:not(.hidden){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
body.login-reference #signupForm>.login-heading,body.login-reference #signupForm>.login-sub,body.login-reference #signupForm>.login-msg,body.login-reference #signupForm>.login-divider,body.login-reference #signupForm>div:has(#signupName),body.login-reference #signupForm>.terms-row,body.login-reference #signupForm>.login-btn,body.login-reference #signupForm>.or-divider,body.login-reference #signupForm>.google-btn{grid-column:1/-1}
body.login-reference #signupForm>.login-heading{font-size:24px;margin:0;line-height:1.4}
body.login-reference #signupForm>.login-sub{font-size:12px;margin:0 0 4px;line-height:1.5}
body.login-reference #signupForm .field-label{font-size:12px;margin-bottom:4px;line-height:1.5}
body.login-reference #signupForm .login-input{min-height:44px;font-size:16px;padding-block:9px}
body.login-reference #signupForm .field-hint{font-size:11px;line-height:1.6;margin-top:5px}
body.login-reference #signupForm .field-hint:empty{display:none}
body.login-reference #signupForm .terms-row{font-size:12px;line-height:1.6;margin:4px 0;gap:8px}
body.login-reference #signupForm .login-btn,body.login-reference #signupForm .google-btn{min-height:44px;font-size:14px;padding:9px;margin-top:0}
body.login-reference #signupForm .or-divider{margin:4px 0!important;line-height:1.4}
body.login-reference .login-card:has(#signupForm:not(.hidden)) .back-home{margin-top:12px;min-height:28px;font-size:12px}
body.login-reference #signupForm>div{min-width:0}
body.login-reference #signupForm .iti{width:100%;min-width:0}
@media(max-width:600px){body.login-reference #signupForm:not(.hidden){grid-template-columns:minmax(0,1fr);gap:8px}body.login-reference .login-bg:has(#signupForm:not(.hidden)){padding-top:18px;padding-bottom:18px}body.login-reference .login-bg:has(#signupForm:not(.hidden)) .login-reference-brand{display:none}body.login-reference .login-card:has(#signupForm:not(.hidden)){padding:18px 20px}body.login-reference .login-card:has(#signupForm:not(.hidden)) .login-logo__sub{display:none}body.login-reference #signupForm .login-input{padding-inline:40px}body.login-reference #signupForm #signupPhone{padding-inline-start:80px;padding-inline-end:12px}body.login-reference #signupForm .toggle-pw{min-height:40px}}