/* Post-authentication welcome popup shown once for each successful RES login. */
.res-welcome-overlay{
 position:fixed;inset:0;z-index:25000;
 display:flex;align-items:center;justify-content:center;
 padding:20px;background:rgba(6,30,39,.65);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.res-welcome-overlay[hidden]{display:none!important}
.res-welcome-box{
 width:min(100%,480px);position:relative;overflow:hidden;
 border-radius:22px;border:1px solid #d2bd87;
 padding:clamp(26px,5vw,40px) 22px;
 background:linear-gradient(160deg,#ffffff,#f0f8f4);
 box-shadow:0 24px 75px rgba(0,27,39,.28);
 display:flex;flex-direction:column;align-items:center;gap:17px;
 text-align:center;direction:rtl;
 animation:res-welcome-enter .35s ease-out both;
}
.res-welcome-box::before{
 content:"";position:absolute;top:0;inset-inline:0;height:7px;
 background:linear-gradient(90deg,#1a6a62,#d9bd83,#1d4e5b);
}
.res-welcome-box h2{font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1.5;color:#164f4a;margin:5px 0 0}
.res-welcome-logo{
 display:block;max-width:min(100%,250px);height:auto;max-height:155px;
 object-fit:contain;padding:8px;
 filter:drop-shadow(0 8px 16px rgba(18,68,61,.09));
}
.res-welcome-school-name{
 font:700 clamp(15px,2.8vw,19px)/1.65 "Segoe UI",Arial,sans-serif;
 color:#244a4c;margin:0;direction:ltr;max-width:390px;
}
.res-welcome-caption{font-size:12px;line-height:1.6;color:#718782;margin:0}
.res-welcome-confirm{
 min-width:120px;min-height:41px;padding:9px 25px;
 background:#155c55;color:#fff;border:1px solid #bfaa75;
 border-radius:11px;font:700 14px "Tajawal",Tahoma,sans-serif;
 cursor:pointer;transition:background .16s ease;
}
.res-welcome-confirm:hover{background:#0c4745}
.res-welcome-confirm:focus-visible,.res-welcome-close:focus-visible{
 outline:3px solid #cca960;outline-offset:3px;
}
.res-welcome-close{
 position:absolute;top:12px;inset-inline-start:12px;
 width:34px;height:34px;border:1px solid #d9e4de;border-radius:50%;
 color:#244d47;background:#fff;font-size:23px;line-height:1;
 cursor:pointer;display:flex;align-items:center;justify-content:center;
}
@keyframes res-welcome-enter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:460px){.res-welcome-box{gap:13px}.res-welcome-logo{max-width:190px}}
@media(prefers-reduced-motion:reduce){.res-welcome-box{animation:none}.res-welcome-confirm{transition:none}}