/* Razino premium login presentation; scoped to the login route only. */
.login-page.login-driver{--login-accent:#b42332;--login-accent-dark:#811b2a;--login-soft:#fff3e8;--login-glow:#f2b84b;background:radial-gradient(ellipse at 15% 10%,rgba(244,183,70,.24),transparent 34%),linear-gradient(135deg,#fff8f0,#fff1e7 52%,#f9e8e7)}
.login-page.login-visitor{--login-accent:#078477;--login-accent-dark:#075f58;--login-soft:#e8f7f3;--login-glow:#50c6a7;background:radial-gradient(ellipse at 15% 10%,rgba(54,191,154,.2),transparent 34%),linear-gradient(135deg,#effbf8,#e8f7f3 52%,#e8f3f4)}
.login-page.login-admin{--login-accent:#3949ab;--login-accent-dark:#202b69;--login-soft:#eef0ff;--login-glow:#9da9ff;background:radial-gradient(ellipse at 15% 10%,rgba(132,146,255,.22),transparent 34%),linear-gradient(135deg,#eef1fb,#e9ecf8 52%,#e7eaf6)}
.login-page .card.login-card:before{background:linear-gradient(90deg,var(--login-accent),var(--login-glow),var(--login-accent))}
.login-page .login-card .brand{border-color:color-mix(in srgb,var(--login-accent) 20%,white);color:var(--login-accent-dark);background:var(--login-soft)}
.login-page .login-hero-icon{display:grid;place-items:center;width:106px;height:106px;margin:1px auto 16px;border:1px solid color-mix(in srgb,var(--login-accent) 16%,white);border-radius:30px;color:var(--login-accent);background:linear-gradient(145deg,#fff,var(--login-soft));box-shadow:0 14px 32px color-mix(in srgb,var(--login-accent) 16%,transparent),inset 0 1px 0 #fff}
.login-page .login-hero-icon svg{width:72px;height:72px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.login-page.login-driver .login-hero-icon{color:#a42331;background:linear-gradient(145deg,#fff8f2,#ffe7d7)}
.login-page.login-driver .login-hero-icon svg{filter:drop-shadow(0 3px 0 rgba(239,177,65,.55))}
.login-page.login-visitor .login-hero-icon{color:#087f70;background:linear-gradient(145deg,#f5fffb,#dcf5ed)}
.login-page.login-admin .login-hero-icon{color:#3445a0;background:linear-gradient(145deg,#f9faff,#e2e7ff)}
.login-page .login-card h1{color:#142338}
.login-page .login-card .subtitle{min-height:27px}
.login-page .login-card .input-shell:focus-within input{border-color:var(--login-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--login-accent) 16%,transparent),0 8px 22px rgba(19,35,52,.08)}
.login-page .login-card .input-shell:focus-within svg{stroke:var(--login-accent)}
.login-page .login-card #loginForm>button{border-color:var(--login-accent-dark);background:linear-gradient(110deg,var(--login-accent-dark),var(--login-accent));box-shadow:0 10px 22px color-mix(in srgb,var(--login-accent) 24%,transparent)}
.login-page .role-login-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:17px}
.login-page .role-login-links a{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border:1px solid color-mix(in srgb,var(--login-accent) 18%,white);border-radius:12px;color:var(--login-accent-dark);background:var(--login-soft);font-size:12px;font-weight:850;text-decoration:none;transition:filter .15s,transform .15s}
.login-page .role-login-links a:hover{filter:brightness(.97)}
.login-page .role-login-links a:focus-visible{outline:3px solid var(--login-glow);outline-offset:2px}
.login-page .login-card .error{color:#96232d;border-color:#f0c4c3;background:#fff3f1}
.login-page.login-driver .login-install-action{background:linear-gradient(110deg,#a42331,#cc3d3d)!important}
.login-page.login-visitor .login-install-action{background:linear-gradient(110deg,#075f58,#078477)!important}
.login-page.login-admin .login-install-action{background:linear-gradient(110deg,#202b69,#3949ab)!important}
@media(max-width:560px){.login-page .login-hero-icon{width:88px;height:88px;margin-bottom:13px;border-radius:25px}.login-page .login-hero-icon svg{width:60px;height:60px}.login-page .role-login-links{gap:6px}.login-page .role-login-links a{min-height:40px;padding-inline:11px;font-size:11px}}
.login-page{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100svh;margin:0;padding:max(28px,env(safe-area-inset-top,0px)) 18px max(28px,env(safe-area-inset-bottom,0px));overflow-x:clip;color:#252b33;background:linear-gradient(135deg,#f8fafc 0%,#eef2f6 52%,#f5f7fa 100%);background-attachment:fixed;font-family:Vazirmatn,system-ui,Tahoma,sans-serif}
.login-page:before,.login-page:after{display:none}
.login-page .card{position:relative;z-index:1;width:min(100%,440px);padding:clamp(25px,5vw,38px) clamp(20px,5vw,34px);overflow:hidden;border:1px solid #fff;border-radius:28px;background:#fff;box-shadow:0 24px 64px rgba(37,48,63,.12),0 4px 14px rgba(37,48,63,.045);text-align:center}
.login-page .card:before{position:absolute;inset:0 0 auto;height:4px;content:"";background:linear-gradient(90deg,#dce3eb,#f0f3f6,#dce3eb)}
.login-page .brand{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:0 0 15px;padding:6px 17px;border:1px solid #dce2e9;border-radius:999px;color:#3b4653;background:#f4f6f8;font-size:13px;font-weight:900;letter-spacing:.02em}
.login-page .hero-image{display:block;width:min(100%,300px);height:auto;max-height:138px;margin:0 auto 17px;padding:9px;border:1px solid rgba(255,255,255,.78);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(241,246,251,.72));box-shadow:0 17px 36px rgba(35,53,74,.11),inset 0 1px 0 rgba(255,255,255,.98);backdrop-filter:blur(18px);object-fit:contain;filter:drop-shadow(0 12px 16px rgba(21,43,67,.16))}
.login-page h1{margin:0 0 8px;color:#202b3a;font-size:clamp(22px,5vw,27px);font-weight:900;line-height:1.55;letter-spacing:-.3px}
.login-page .subtitle{margin:0 0 23px;color:#627288;font-size:14px;line-height:1.9}
.login-page .field{margin:0 0 15px;text-align:right}
.login-page .field label{display:block;margin:0 2px 7px;color:#30455e;font-size:13px;font-weight:850}
.login-page .input-shell{position:relative}
.login-page .input-shell svg{position:absolute;z-index:1;inset-inline-start:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:#8a9bb0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.login-page .input-shell input{width:100%;min-height:56px;margin:0;padding:0 46px 0 15px;border:1.5px solid #cbd3dd;border-radius:16px;outline:0;color:#252b33;background:#fff;box-shadow:inset 0 1px 3px rgba(19,35,52,.035);font-family:inherit;font-size:16px;direction:rtl;text-align:right;transition:border-color .18s,box-shadow .18s,background .18s}
.login-page .input-shell input::placeholder{color:#8a98aa;opacity:1}
.login-page .input-shell:focus-within input{border-color:#53667b;background:#fff;box-shadow:0 0 0 4px rgba(83,102,123,.14),0 8px 22px rgba(19,35,52,.08)}
.login-page .input-shell:focus-within svg{stroke:#465a70}
.login-page #loginForm>button{width:100%;min-height:56px;margin:5px 0 0;padding:12px 18px;border:1px solid #293b50;border-radius:16px;color:#fff;background:linear-gradient(110deg,#26384d,#3a526d);box-shadow:0 10px 22px rgba(38,56,77,.2);font:inherit;font-size:15px;font-weight:900;cursor:pointer;transition:transform .14s,filter .14s,box-shadow .14s}
.login-page #loginForm>button:hover{filter:brightness(1.08);box-shadow:0 13px 26px rgba(38,56,77,.25)}
.login-page #loginForm>button:active,.login-page .quick-login:active{transform:scale(.98);filter:brightness(.94)}
.login-page .quick-logins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.login-page .quick-login{min-width:0;min-height:54px;margin:0;padding:9px 10px;border:1px solid #d1d9e2;border-radius:15px;color:#334155;background:linear-gradient(135deg,#fff,#f1f4f7);box-shadow:0 3px 9px rgba(37,48,63,.06);font-family:inherit;font-size:12px;font-weight:900;line-height:1.65;cursor:pointer;transition:transform .14s,border-color .14s,filter .14s,box-shadow .14s}
.login-page .quick-login:hover{border-color:#9eacbb;filter:brightness(.99);box-shadow:0 6px 14px rgba(37,48,63,.1)}
.login-page .quick-login:focus-visible{outline:3px solid #d9b55f;outline-offset:3px}
.login-page .error{margin:14px 0 0;padding:11px 13px;border:1px solid #f0c4c3;border-radius:13px;color:#9e2934;background:#fff3f1;font-size:13px;font-weight:750;line-height:1.8}
.login-page .footer{margin:19px 0 0;color:#7c899a;font-size:11px}
.login-install-banner{border-color:#d7dee7!important;background:linear-gradient(125deg,#fff,#f1f4f7)!important;color:#252b33!important;box-shadow:0 18px 48px rgba(30,41,59,.16)!important}
.login-install-hint{color:#5b6673!important}
.login-install-mark{border-color:#d7dee7!important;color:#42566d!important;background:#e9edf2!important}
.login-install-action{border:1px solid #293b50!important;color:#fff!important;background:linear-gradient(110deg,#26384d,#3a526d)!important;box-shadow:0 5px 14px rgba(38,56,77,.18)!important}
.login-install-dismiss{border-color:#d1d9e2!important;color:#334155!important;background:#fff!important}
@media(max-width:560px){.login-page{padding-inline:14px}.login-page .card{width:min(100%,420px);padding:26px 19px;border-radius:25px}.login-page .hero-image{max-height:124px;width:min(100%,270px);margin-bottom:14px}.login-page .subtitle{margin-bottom:19px}.login-page .quick-logins{gap:8px}.login-page .quick-login{min-height:54px;padding-inline:7px;font-size:11px}.login-install-banner{top:calc(10px + env(safe-area-inset-top,0px));width:calc(100vw - 20px)}}
@media(max-width:360px){.login-page{padding-inline:10px}.login-page .card{padding-inline:15px}.login-page .quick-logins{grid-template-columns:1fr}.login-page .quick-login{min-height:48px}}
@media(prefers-reduced-motion:reduce){.login-page *, .login-page *:before,.login-page *:after{transition:none!important}}

/* Soft pastel canvas for the login screen */
.login-page{background:radial-gradient(ellipse at 12% 8%,rgba(226,207,249,.38),transparent 35%),linear-gradient(135deg,#fbf7ff 0%,#f4effa 52%,#fff1f5 100%)}

/* Role login artwork: restore role-specific canvases and give each SVG layered color. */
.login-page.login-driver{background:radial-gradient(ellipse at 12% 8%,rgba(244,183,70,.24),transparent 35%),linear-gradient(135deg,#fff8f0 0%,#fff0e6 52%,#f9e8e7 100%)}
.login-page.login-visitor{background:radial-gradient(ellipse at 12% 8%,rgba(54,191,154,.2),transparent 35%),linear-gradient(135deg,#effbf8 0%,#e8f7f3 52%,#e8f3f4 100%)}
.login-page.login-admin{background:radial-gradient(ellipse at 12% 8%,rgba(132,146,255,.22),transparent 35%),linear-gradient(135deg,#eef1fb 0%,#e9ecf8 52%,#e7eaf6 100%)}
.login-page .login-hero-icon{position:relative;isolation:isolate;width:118px;height:118px;margin:2px auto 17px;border:1px solid color-mix(in srgb,var(--login-accent) 24%,white);border-radius:34px;background:radial-gradient(circle at 25% 15%,#fff 0 12%,transparent 48%),linear-gradient(145deg,#fff,var(--login-soft));box-shadow:0 18px 38px color-mix(in srgb,var(--login-accent) 18%,transparent),inset 0 1px 0 #fff}
.login-page .login-hero-icon:after{position:absolute;z-index:-1;inset:7px;border:1px solid color-mix(in srgb,var(--login-accent) 10%,white);border-radius:27px;content:""}
.login-page .login-hero-icon svg{width:94px;height:94px;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 7px 7px rgba(34,48,67,.13))}
.login-page .login-hero-icon .illustration-halo{fill:color-mix(in srgb,var(--login-accent) 8%,white);stroke:color-mix(in srgb,var(--login-accent) 13%,white);stroke-width:1.5}
.login-page .login-hero-icon .illustration-road{fill:none;stroke:#c7d2df;stroke-width:3;stroke-linecap:round;stroke-dasharray:3 6}
.login-page .login-hero-icon .illustration-shadow{fill:rgba(27,44,63,.12)}
.login-page .login-hero-icon .illustration-glass{fill:#c4f1f4;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.login-page .login-hero-icon .illustration-highlight{fill:none;stroke:#ffd8cc;stroke-width:2.5;stroke-linecap:round;opacity:.9}
.login-page .login-hero-icon .illustration-box-line{fill:none;stroke:#fff1c2;stroke-width:2;stroke-linejoin:round}
.login-page .login-hero-icon .illustration-wheel{fill:#27364a;stroke:#fff;stroke-width:2}
.login-page .login-hero-icon .illustration-wheel-core{fill:#a9b7c8;stroke:none}
.login-page .login-hero-icon .illustration-spark{fill:none;stroke:var(--login-glow);stroke-width:3;stroke-linecap:round}
.login-page.login-visitor .login-hero-icon .illustration-paper{fill:#fff;stroke:#bfe8dc;stroke-width:2}
.login-page.login-visitor .login-hero-icon .illustration-clip{fill:#f9d77a;stroke:#fff;stroke-width:2}
.login-page.login-visitor .login-hero-icon .illustration-dot{fill:#f0ad48;stroke:none}
.login-page.login-visitor .login-hero-icon .illustration-list-line{fill:none;stroke:#a9b8c4;stroke-width:3;stroke-linecap:round}
.login-page.login-visitor .login-hero-icon .illustration-check-bg{fill:#e1f7ef;stroke:#fff;stroke-width:2}
.login-page.login-visitor .login-hero-icon .illustration-check{fill:none;stroke:#087f70;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.login-page.login-admin .login-hero-icon .illustration-shield-inset{fill:none;stroke:#c5ccff;stroke-width:2}
.login-page.login-admin .login-hero-icon .illustration-chart-bg{fill:#fff;stroke:#d4d9ff;stroke-width:1.5}
.login-page.login-admin .login-hero-icon .illustration-chart{fill:none;stroke:url(#adminChart);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.login-page.login-admin .login-hero-icon .illustration-check{fill:none;stroke:#ffe08a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.login-page.login-admin .login-hero-icon .illustration-spark-dot{fill:#ffd36b;stroke:#fff;stroke-width:2}
@media(max-width:560px){.login-page .login-hero-icon{width:104px;height:104px;margin-bottom:14px;border-radius:29px}.login-page .login-hero-icon:after{inset:6px;border-radius:23px}.login-page .login-hero-icon svg{width:84px;height:84px}}

/* Use a dedicated, polished role illustration on each staff login screen. */
.login-page .login-hero-icon{width:142px;height:142px;margin:0 auto 18px;border-radius:38px;background:linear-gradient(145deg,#fff,var(--login-soft));}
.login-page .login-role-art{display:block;width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(24,38,57,.14));}
.login-page.login-driver .login-hero-icon{border-color:#f1c9aa;background:radial-gradient(circle at 35% 25%,#fff 0 15%,transparent 55%),linear-gradient(145deg,#fff9f1,#ffeadf);}
.login-page.login-visitor .login-hero-icon{border-color:#b7e5d9;background:radial-gradient(circle at 35% 25%,#fff 0 15%,transparent 55%),linear-gradient(145deg,#f7fffc,#dcf4ed);}
.login-page.login-admin .login-hero-icon{border-color:#c7cff5;background:radial-gradient(circle at 35% 25%,#fff 0 15%,transparent 55%),linear-gradient(145deg,#fafbff,#e5eaff);}
@media(max-width:560px){.login-page .login-hero-icon{width:120px;height:120px;margin-bottom:15px;border-radius:33px}.login-page .login-role-art{width:110px;height:110px}}
.login-page .login-install-banner{z-index:3000!important;grid-template-columns:auto minmax(0,1fr) auto!important}
.login-page .login-install-action:disabled{cursor:default;opacity:.82}