/* Minimal, theme-friendly UI with lightweight loaders */
.los-modal { display:none; position:fixed; inset:0; z-index:9999; font-family:inherit; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.los-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.los-dialog { position:relative; width:92vw; max-width:420px; margin:6vh auto calc(6vh + env(safe-area-inset-bottom,0px)); padding:0 12px; transition:max-width .18s ease; }
.los-modal.los-step-active-role .los-dialog{max-width:540px}
.los-card { position:relative; background:#fff; color:#222; border-radius:16px; box-shadow:0 12px 36px rgba(0,0,0,.2); overflow:hidden; }
.los-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent!important;box-shadow:none!important;color:#666;cursor:pointer;padding:0}
.los-iconbtn:hover{background-color:transparent!important;color:#222}
.los-close{position:absolute;left:10px;top:10px;z-index:5}
.los-back{position:absolute;right:10px;top:10px}
.los-header{display:flex;align-items:center;justify-content:center;padding:18px 24px 8px;border-bottom:1px solid #eee;position:relative}
.los-logo{display:flex;align-items:center;gap:8px}
.los-logo-img{height:28px;width:auto}
.los-site-name{font-weight:700}
.los-body{padding:16px 20px 20px}
.los-title{margin:0 0 6px;text-align:center;font-weight:800;font-size:1.08rem}
.los-sub{margin:0 0 12px;text-align:center;color:#666;font-size:.92rem}
.los-label{display:block;margin:6px 0 4px;font-weight:600}
.los-required::after{content:" *";color:#ef394e}
.los-input{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:12px;outline:none;font:inherit}
.los-input:focus{border-color:#999;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.los-btn{width:100%;margin-top:12px;padding:12px 14px;border:none;border-radius:12px;background:#ef394e;color:#fff;font-weight:700;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.los-btn.is-loading{opacity:.85;cursor:wait}
.los-link{background:none;border:none;color:#0b79d0;cursor:pointer;padding:0}
.los-step-link{display:inline-flex;align-items:center;margin:0;padding:0}
.los-roles{display:flex;gap:12px;margin:.4rem 0 1rem;flex-wrap:wrap}
.los-role-select-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.los-role-select-head .los-label{margin:0}
.los-role-required-note{font-size:.78rem;color:#777;background:#f6f7f7;border-radius:999px;padding:3px 8px;white-space:nowrap}
.los-role-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.los-role-card{position:relative;display:flex;gap:10px;align-items:flex-start;min-height:112px;padding:13px 12px;border:1px solid #e5e7eb;border-radius:16px;background:linear-gradient(180deg,#fff,#fafafa);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;overflow:hidden}
.los-role-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--los-role-color,#2563eb);opacity:.9}
.los-role-card:hover{border-color:var(--los-role-color,#2563eb);box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-1px)}
.los-role-card input{position:absolute;opacity:0;pointer-events:none}
.los-role-card-check{flex:0 0 auto;width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;margin-top:11px;background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:border-color .16s ease,background .16s ease}
.los-role-card-body{display:flex;flex-direction:column;gap:6px;line-height:1.7;padding-top:3px}
.los-role-card-title{font-weight:800;color:#222;font-size:.98rem}
.los-role-card-desc{font-size:.86rem;color:#555}
.los-role-card.is-selected{border-color:var(--los-role-color,#2563eb);background:linear-gradient(180deg,#fff,rgba(0,0,0,.015));box-shadow:0 8px 24px rgba(0,0,0,.1)}
.los-role-card.is-selected .los-role-card-check{border-color:var(--los-role-color,#2563eb);background:var(--los-role-color,#2563eb)}
.los-error{color:#d32f2f;margin-top:6px;min-height:1.2em;font-size:.9em}
.los-success{color:#2e7d32;text-align:center;font-weight:700}
.los-timer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#666;font-size:.9rem}
#los-modal,.los-card,.los-body{direction:rtl}.los-dialog{direction:rtl}

.los-spinner{width:18px;height:18px;border:2px solid #e6e6e6;border-top-color:currentColor;border-radius:50%;animation:losspin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes losspin{to{transform:rotate(360deg)}}

/* OTP row layout (moved from inline styles) */
.los-otp-row{display:flex;align-items:center;gap:8px}
.los-otp-input{flex:1}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .los-spinner{animation:none}
}

/* Better behavior on short viewports */
@media (max-height:560px){
  .los-dialog{margin:3vh auto calc(5vh + env(safe-area-inset-bottom,0px))}
}

@media (max-width:480px){
  .los-dialog{width:94vw;max-width:380px;margin:10px auto calc(68px + env(safe-area-inset-bottom,0px));padding:0 8px}
  .los-card{border-radius:14px}
  .los-title{font-size:1rem}
  .los-header{padding:14px 18px 6px}
  .los-body{padding:14px 16px 20px}
  .los-role-cards{grid-template-columns:1fr}
  .los-role-card{min-height:auto}
  .los-role-select-head{align-items:flex-start;flex-direction:column;gap:4px}
}

@media (max-width:640px) and (min-width:481px){
  .los-modal.los-step-active-role .los-dialog{max-width:460px}
  .los-role-cards{grid-template-columns:1fr}
}

.los-link:disabled,.los-link[aria-disabled="true"],.los-link.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

/* Logout confirmation modal */
.los-logout-confirm-modal{z-index:10000}
.los-logout-confirm-dialog{max-width:390px}
.los-logout-confirm-card{text-align:center}
.los-logout-confirm-body{padding:28px 22px 22px}
.los-logout-confirm-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff4e5;color:#b45309}
.los-logout-confirm-actions{display:flex;gap:10px;margin-top:18px}
.los-logout-confirm-actions .los-btn{margin-top:0;text-decoration:none;transition:none!important;box-shadow:none!important}
.los-logout-confirm-actions .los-logout-confirm-yes,.los-logout-confirm-actions .los-logout-confirm-yes:hover,.los-logout-confirm-actions .los-logout-confirm-yes:focus,.los-logout-confirm-actions .los-logout-confirm-yes:active{background:#ef394e!important;color:#fff!important;border:1px solid #ef394e!important;opacity:1!important}
.los-logout-confirm-actions .los-logout-confirm-no,.los-logout-confirm-actions .los-logout-confirm-no:hover,.los-logout-confirm-actions .los-logout-confirm-no:focus,.los-logout-confirm-actions .los-logout-confirm-no:active,.los-logout-confirm-actions .los-btn-secondary,.los-logout-confirm-actions .los-btn-secondary:hover,.los-logout-confirm-actions .los-btn-secondary:focus,.los-logout-confirm-actions .los-btn-secondary:active{background:#6b7280!important;color:#fff!important;border:1px solid #6b7280!important;opacity:1!important}

@media (max-width:480px){
  .los-logout-confirm-actions{flex-direction:column}
}

.los-referral-accordion{margin:12px 0 4px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;overflow:hidden}
.los-referral-toggle{width:100%;border:0;background:transparent;padding:10px 14px;text-align:right;font-weight:700;cursor:pointer;color:#111827;display:flex;align-items:center;justify-content:space-between}
.los-referral-toggle:after{content:'+';font-size:18px;line-height:1;color:#6b7280}
.los-referral-toggle[aria-expanded="true"]:after{content:'−'}
.los-referral-panel{padding:8px 14px 12px;display:flex;flex-direction:column;gap:8px}
.los-referral-panel[hidden]{display:none!important}
.los-help{font-size:12px;color:#6b7280;margin:0;line-height:1.8}

.los-referral-code-input{direction:rtl;text-align:right;margin:0}
.los-referral-code-input::placeholder{text-align:right;direction:rtl}
.los-referral-error{margin:0;min-height:0;line-height:1.7}
.los-referral-error:empty{display:none}