/* FIRSTCODE Unified Auth UI v1.10.0
 * Shares the same design tokens and Arabic typography as Web + PWA.
 */
:root{
  --auth-primary:#1B3A6B;
  --auth-primary-dark:#122B52;
  --auth-primary-mid:#2563A8;
  --auth-accent:#2F7A24;
  --auth-accent-dark:#245F1C;
  --auth-accent-light:#EBF8E6;
  --auth-gold:#C9A227;
  --auth-bg:#F4F7FC;
  --auth-card:#FFFFFF;
  --auth-text:#1A2744;
  --auth-muted:#6B7A9E;
  --auth-border:#DDE3F0;
  --auth-danger:#B42318;
  --auth-success:#287A3E;
  --auth-warning:#9A4B00;
  --auth-radius:16px;
  --auth-radius-sm:10px;
  --auth-shadow:0 12px 40px rgba(27,58,107,.12);
  --auth-shadow-soft:0 3px 14px rgba(27,58,107,.08);
  --font-ui:"Tajawal","Segoe UI",Tahoma,Arial,"Noto Sans Arabic",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font:var(--font-ui);
  --fs-micro:.625rem;
  --fs-2xs:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.9rem;
  --fs-base:1rem;
  --fs-control:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.45rem;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --bg:var(--auth-bg);
  --border:var(--auth-border);
  --text:var(--auth-text);
  --muted:var(--auth-muted);
  --success:var(--auth-success);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;background:var(--auth-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body.auth-app-page{margin:0;min-height:100vh;min-height:100dvh;background:var(--auth-bg);color:var(--auth-text);font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.7;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body.auth-app-page::before{content:"";position:fixed;inset:0 0 auto;height:300px;background:linear-gradient(145deg,#0A1628 0%,var(--auth-primary-dark) 46%,var(--auth-primary) 100%);z-index:-2}
body.auth-app-page::after{content:"";position:fixed;inset:0 0 auto;height:300px;background-image:radial-gradient(circle at 18% 20%,rgba(47,122,36,.18),transparent 38%),radial-gradient(circle at 82% 65%,rgba(37,99,168,.16),transparent 42%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px;z-index:-1;pointer-events:none}
a{color:var(--auth-primary);text-decoration:none}
a:hover{color:var(--auth-primary-mid)}
.auth-wrapper{width:100%;min-height:100vh;min-height:100dvh;padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}
.auth-wrapper-top{align-items:flex-start;padding-top:max(34px,env(safe-area-inset-top))}
.auth-card{width:min(100%,460px);background:var(--auth-card);border:1px solid rgba(221,227,240,.95);border-radius:var(--auth-radius);box-shadow:var(--auth-shadow);padding:24px;overflow:visible}
.auth-card-wide{width:min(100%,720px)}

.auth-brand-shell{margin-bottom:20px}
.auth-brand-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--auth-border)}
.auth-brand-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.auth-brand-logo{width:50px;height:50px;border-radius:13px;background:#fff;border:1px solid var(--auth-border);box-shadow:var(--auth-shadow-soft);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.auth-brand-logo img{width:42px;height:42px;object-fit:contain}
.auth-brand-copy{display:block;min-width:0}
.auth-brand-copy strong{display:block;color:var(--auth-primary);font-size:var(--fs-sm);font-weight:var(--fw-extrabold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-brand-copy small{display:block;color:var(--auth-muted);font-size:var(--fs-2xs);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-web-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;border:1px solid var(--auth-border);border-radius:9px;color:var(--auth-primary);font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:#fff;transition:.18s ease}
.auth-web-link:hover{background:var(--auth-bg);border-color:#C7D1E2;text-decoration:none}

.auth-heading{text-align:right;padding:18px 0 0}
.auth-heading h1,.auth-logo h1{margin:8px 0 0;color:var(--auth-primary);font-size:clamp(1.25rem,1.12rem + .55vw,1.55rem);font-weight:var(--fw-extrabold);line-height:1.45}
.auth-heading p,.auth-logo p{margin:6px 0 0;color:var(--auth-muted);font-size:var(--fs-sm);line-height:1.8}
.auth-logo{text-align:center;margin-bottom:20px}.auth-logo img{display:block;width:auto;height:72px;max-width:150px;object-fit:contain;margin:0 auto 10px}
.auth-app-mark{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid #D5E5D1;border-radius:999px;background:var(--auth-accent-light);color:var(--auth-accent-dark);font-size:var(--fs-2xs);font-weight:var(--fw-semibold)}
.auth-dot{width:7px;height:7px;border-radius:50%;background:var(--auth-accent);box-shadow:0 0 0 4px rgba(47,122,36,.10)}

.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:#EDF2F8;border:1px solid #E2E8F2;border-radius:12px;margin:18px 0 0}
.auth-tabs a{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:9px;text-decoration:none;color:var(--auth-muted);font-size:var(--fs-sm);font-weight:var(--fw-bold);transition:.18s ease}
.auth-tabs a:hover{color:var(--auth-primary);background:rgba(255,255,255,.55)}
.auth-tabs a.active{background:#fff;color:var(--auth-primary);box-shadow:0 2px 9px rgba(27,58,107,.09)}

.auth-form{margin:0}
.auth-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.auth-grid-full{grid-column:1/-1}
.form-group{margin:0 0 14px;min-width:0}
.form-group label{display:block;margin:0 0 6px;color:var(--auth-text);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.form-group input,.form-group select,.form-group textarea{display:block;width:100%;min-height:50px;margin:0;padding:11px 13px;border:1.5px solid var(--auth-border);border-radius:var(--auth-radius-sm);background:#fff;color:var(--auth-text);font-family:var(--font-ui);font-size:16px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.form-group textarea{min-height:110px;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--auth-primary-mid);box-shadow:0 0 0 3px rgba(37,99,168,.11)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#94A0B6;opacity:1}
.form-hint{margin-top:6px;color:var(--auth-muted);font-size:var(--fs-2xs);line-height:1.7}
.password-field{position:relative}.password-field input{padding-left:72px}
.password-toggle{position:absolute;left:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--auth-primary-mid);font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:8px;cursor:pointer;border-radius:7px}.password-toggle:hover{background:#EEF4FB}

.city-picker{position:relative}.city-dropdown{display:none;position:absolute;top:calc(100% - 1px);right:0;left:0;max-height:230px;overflow:auto;background:#fff;border:1.5px solid var(--auth-primary-mid);border-top:0;border-radius:0 0 var(--auth-radius-sm) var(--auth-radius-sm);box-shadow:0 12px 28px rgba(27,58,107,.14);z-index:50}.city-dropdown.is-open{display:block}.city-option{padding:10px 13px;border-bottom:1px solid #EEF2F7;color:var(--auth-text);font-size:var(--fs-sm);cursor:pointer}.city-option:last-child{border-bottom:0}.city-option:hover,.city-option.is-active{background:#F2F6FB;color:var(--auth-primary)}.city-empty{padding:12px;color:var(--auth-muted);font-size:var(--fs-xs);text-align:center}.city-picker.is-invalid input{border-color:var(--auth-danger);box-shadow:0 0 0 3px rgba(180,35,24,.08)}

.auth-choice-panel{margin:0 0 14px;padding:12px 14px;border:1px solid var(--auth-border);border-radius:var(--auth-radius-sm);background:#F9FBFD;min-width:0}.auth-choice-panel legend{padding:0 5px;color:var(--auth-text);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}.auth-choice-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.auth-choice{display:inline-flex;align-items:center;gap:7px;color:var(--auth-text);font-size:var(--fs-sm);cursor:pointer}.auth-choice input{width:18px;height:18px;accent-color:var(--auth-primary)}.auth-choice-panel small{display:block;margin-top:7px;color:var(--auth-muted);font-size:var(--fs-2xs);line-height:1.7}

.btn{min-height:50px;border:1px solid transparent;border-radius:var(--auth-radius-sm);padding:11px 16px;font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease}.btn:active{transform:scale(.985)}
.btn-primary{width:100%;background:var(--auth-primary);color:#fff;box-shadow:0 8px 20px rgba(27,58,107,.16)}.btn-primary:hover{background:var(--auth-primary-mid);color:#fff;box-shadow:0 10px 24px rgba(27,58,107,.20)}
.btn-outline{width:100%;background:#fff;color:var(--auth-primary);border-color:var(--auth-border)}.btn-outline:hover{background:var(--auth-bg)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.btn-block{width:100%}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.auth-check{display:flex;align-items:center;gap:7px;color:var(--auth-muted);font-size:var(--fs-xs);cursor:pointer}.auth-check input{width:18px;height:18px;margin:0;accent-color:var(--auth-primary)}
.link{color:var(--auth-primary-mid);font-weight:var(--fw-bold);text-decoration:none}.link:hover{text-decoration:underline}
.divider{border:0;border-top:1px solid var(--auth-border);margin:20px 0}.text-center{text-align:center}.text-muted{color:var(--auth-muted)!important}.text-sm{font-size:var(--fs-sm)}
.auth-secondary{margin:16px 0 0;text-align:center;color:var(--auth-muted);font-size:var(--fs-sm)}

.consent-block{background:#FCFDF9;border:1px solid #D7E8D2;border-radius:12px;padding:13px 14px;margin:4px 0 16px}.consent-title{color:var(--auth-accent-dark);font-weight:var(--fw-extrabold);margin-bottom:5px;font-size:var(--fs-sm)}.consent-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-top:1px dashed #DCE7D9}.consent-item:first-of-type{border-top:0}.consent-item input[type=checkbox]{width:19px;height:19px;margin:4px 0 0;flex:0 0 auto;accent-color:var(--auth-accent)}.consent-item label{font-size:var(--fs-xs);line-height:1.8;color:#3F4D61;cursor:pointer}.consent-item.is-missing{background:#FFF2F0;border-radius:8px;padding-inline:8px}.consent-note{margin-top:7px;padding:8px 9px;background:#fff;border:1px solid #E7EEE4;border-radius:8px;font-size:var(--fs-2xs);color:var(--auth-muted);line-height:1.7}

.auth-security{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;color:var(--auth-muted);font-size:var(--fs-2xs)}.auth-security span{display:inline-flex;align-items:center;gap:5px}
.alert{border:1px solid transparent;border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:var(--fs-xs);line-height:1.7}.alert-success{background:#ECFDF3;border-color:#ABEFC6;color:#067647}.alert-danger{background:#FEF3F2;border-color:#FECDCA;color:#B42318}.alert-warning{background:#FFFAEB;border-color:#FEDF89;color:#93370D}.alert-info{background:#EFF8FF;border-color:#B2DDFF;color:#175CD3}
.auth-pwa-install{display:none;width:100%;margin:9px 0 0;min-height:42px;border:0;background:transparent;color:var(--auth-muted);font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);cursor:pointer}.auth-pwa-install.is-visible{display:block}.auth-pwa-install:hover{color:var(--auth-primary)}
.auth-offline{display:none;margin:0 0 12px;padding:8px 10px;border-radius:9px;background:#FFF7ED;color:#9A3412;font-size:var(--fs-2xs);text-align:center}.auth-offline.is-visible{display:block}
.auth-legal{margin:18px -24px -24px;padding:14px 18px;background:#FAFBFD;border-top:1px solid var(--auth-border);border-radius:0 0 var(--auth-radius) var(--auth-radius);text-align:center;color:var(--auth-muted);font-size:var(--fs-2xs)}.auth-legal p{margin:0}.auth-legal-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:7px}

.otp-boxes{display:flex;gap:7px;justify-content:center;margin:8px 0 18px}.otp-box{width:46px!important;min-height:54px!important;border:1.5px solid var(--auth-border)!important;border-radius:10px!important;text-align:center!important;font-size:1.25rem!important;font-weight:var(--fw-bold)!important;padding:4px!important}.otp-box:focus{border-color:var(--auth-primary-mid)!important;box-shadow:0 0 0 3px rgba(37,99,168,.10)!important;outline:none}.resend-row{text-align:center;margin-top:14px;color:var(--auth-muted);font-size:var(--fs-xs)}.resend-row button{border:0;background:none;color:var(--auth-primary-mid);font:inherit;font-weight:var(--fw-bold);cursor:pointer}.resend-row button:disabled{color:#98A2B3;cursor:not-allowed}
.toast-container{position:fixed;top:max(16px,env(safe-area-inset-top));right:12px;left:12px;z-index:9999;display:grid;gap:8px;pointer-events:none}.toast-msg{pointer-events:auto;max-width:430px;margin:auto;width:100%;padding:11px 13px;border-radius:10px;background:#fff;border:1px solid var(--auth-border);box-shadow:0 12px 35px rgba(27,58,107,.16);font-size:var(--fs-xs);display:flex;align-items:center;gap:8px}.toast-success{color:var(--auth-success)}.toast-error{color:var(--auth-danger)}.toast-warning{color:var(--auth-warning)}.toast-info{color:var(--auth-primary-mid)}.toast-close{margin-right:auto;border:0;background:transparent;color:currentColor;font-size:20px;cursor:pointer}
.auth-app-page i[class*="fa-"]{display:none!important}
html.is-navigating body{cursor:progress}html.is-navigating .btn,html.is-navigating a{pointer-events:none}

@media (display-mode:standalone){.auth-web-link{display:none}.auth-wrapper{padding-top:max(18px,env(safe-area-inset-top))}.auth-app-mark{margin-top:1px}}
@media (max-width:680px){
  body.auth-app-page{background:#fff}body.auth-app-page::before,body.auth-app-page::after{height:150px}
  .auth-wrapper,.auth-wrapper-top{display:block;padding:0;min-height:100dvh}
  .auth-card,.auth-card-wide{width:100%;max-width:none;min-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:max(18px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent 0,transparent 110px,#fff 110px,#fff 100%)}
  .auth-brand-row{border-bottom-color:rgba(255,255,255,.15);padding-bottom:12px}.auth-brand-logo{width:46px;height:46px;border-color:rgba(255,255,255,.22)}.auth-brand-logo img{width:38px;height:38px}.auth-brand-copy strong{color:#fff}.auth-brand-copy small{color:rgba(255,255,255,.65)}.auth-web-link{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}.auth-web-link:hover{background:rgba(255,255,255,.14)}
  .auth-heading{padding-top:22px}.auth-heading h1{font-size:1.28rem}.auth-heading p{font-size:var(--fs-xs)}
  .auth-tabs{margin-top:15px}.auth-form-grid{grid-template-columns:1fr}.auth-grid-full{grid-column:auto}
  .auth-legal{margin:22px -18px calc(-1 * max(22px,env(safe-area-inset-bottom)));border-radius:0}.auth-security{margin-top:14px}.auth-card-wide .auth-brand-shell{margin-bottom:18px}
}
@media (max-width:420px){.auth-card,.auth-card-wide{padding-inline:15px}.auth-legal{margin-inline:-15px}.auth-row{align-items:flex-start;gap:8px}.auth-security{gap:8px}.auth-choice-row{gap:10px}.otp-box{width:40px!important;min-height:50px!important}.auth-heading p{line-height:1.7}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* FIRSTCODE AUTH UX SCALE 1.9.1 */
.auth-card{padding:clamp(1rem,3vw,1.5rem)}
.auth-card-wide{padding:clamp(1rem,2.6vw,1.5rem)}
.auth-tabs a,.auth-tab{min-height:44px;display:flex;align-items:center;justify-content:center}
.form-group input,.form-group select,.form-group textarea{min-height:48px}
.password-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.auth-web-link,.auth-pwa-install{min-height:44px}
.auth-choice,.auth-check,.consent-item label{min-height:36px}
@media(max-width:680px){.auth-card,.auth-card-wide{padding-inline:clamp(.875rem,4vw,1.125rem)}.auth-form-grid{gap:.875rem}.auth-heading{margin-bottom:1rem}}
@media(max-width:359.98px){.auth-heading h1{font-size:1.16rem}.auth-brand-copy small{font-size:.72rem}.otp-box{width:38px!important;min-height:48px!important}}