/* Global Login Modal — shared guest component. Light CSS only. */
@font-face{
  font-family:"Noto Kufi Arabic";
  src:url("../fonts/noto-kufi-arabic/NotoKufiArabic-Variable.ttf") format("truetype");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

.mglm{
  --mglm-ink:#0f2744;
  --mglm-muted:#5b6b7c;
  --mglm-line:#e2eaf3;
  --mglm-blue:#2f80ed;
  --mglm-blue-d:#1c6dd0;
  --mglm-blue-soft:#e8f1ff;
  --mglm-green:#12b886;
  --mglm-green-d:#0ca678;
  --mglm-green-soft:#e8f8f1;
  --mglm-danger:#c0392b;
  --mglm-danger-bg:#fff5f5;
  --mglm-radius:22px;
  --mglm-z:10120;
  position:fixed;
  inset:0;
  z-index:var(--mglm-z);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 14px;
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;
  color:var(--mglm-ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
.mglm[hidden]{display:none!important}
.mglm *,.mglm *::before,.mglm *::after{box-sizing:border-box}

.mglm__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,39,68,.42);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.mglm__dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  max-height:min(92vh,860px);
  background:#fff;
  border-radius:var(--mglm-radius);
  box-shadow:0 24px 64px rgba(15,39,68,.22);
  outline:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.mglm__scroll{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 22px 22px;
  flex:1 1 auto;
}

.mglm__close{
  position:absolute;
  top:12px;
  /* Physical LEFT — do NOT use inset-inline here (it overrides left in RTL) */
  left:12px !important;
  right:auto !important;
  z-index:6;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(15,39,68,.1);
  color:#64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.mglm__close:hover{background:#fff;color:var(--mglm-ink);box-shadow:0 4px 12px rgba(15,39,68,.14)}
.mglm__close:focus-visible{outline:2px solid var(--mglm-blue);outline-offset:2px}

.mglm__hero{
  --mglm-hero-bg: none;
  position:relative;
  margin:0 -22px 12px;
  padding:20px 22px 18px;
  overflow:hidden;
  border-radius:var(--mglm-radius) var(--mglm-radius) 0 0;
  background:linear-gradient(105deg,#eaf3ff 0%,#f5f9ff 48%,#fff 100%);
}
.mglm__hero-bg{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  pointer-events:none;
  background-image:var(--mglm-hero-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
}
.mglm__hero.has-bg .mglm__hero-bg{opacity:1}
.mglm__hero.has-bg{background:#eef5ff}

/* RTL row: copy (inline-start/right) + illustration (inline-end/left) */
.mglm__hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:120px;
  /* keep copy clear of the absolute close (physical left) */
  padding-top:4px;
}
.mglm__hero-copy{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  text-align:right;
  display:flex;
  flex-direction:column;
  /*
   * In RTL, flex-start = inline-start = RIGHT.
   * flex-end was pinning the logo to the LEFT (over the close/art).
   */
  align-items:flex-start;
  gap:8px;
}
.mglm__brand{
  position:static !important;
  display:block;
  margin:0;
  line-height:0;
  /* stay on the right even if a parent changes align-items */
  align-self:flex-start;
}
.mglm__logo{
  position:static !important;
  display:block;
  height:34px;
  width:auto;
  max-width:150px;
  object-fit:contain;
  margin-inline-start:0;
  margin-inline-end:auto;
}
.mglm__logo-text{
  display:inline-block;
  font-weight:700;
  font-size:15px;
  color:var(--mglm-blue);
  line-height:1.2;
}
.mglm__hero-art{
  position:static !important;
  flex:0 0 128px;
  width:128px;
  max-width:36%;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  /* physical left: keep illustration below the absolute close button */
  padding-top:36px;
  padding-left:4px;
}
.mglm__hero-ill{
  display:block;
  width:100%;
  height:auto;
  max-height:112px;
  object-fit:contain;
}
.mglm__title{
  position:static !important;
  display:block;
  margin:0;
  padding:0;
  font-size:1.28rem;
  font-weight:700;
  line-height:1.4;
  color:var(--mglm-ink);
  width:100%;
  text-align:right;
}
.mglm__subtitle{
  position:static !important;
  display:block;
  margin:0;
  padding:0;
  font-size:.88rem;
  font-weight:400;
  line-height:1.55;
  color:var(--mglm-muted);
  width:100%;
  max-width:30ch;
  text-align:right;
}

.mglm__tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  margin:0 0 16px;
  background:#eef2f7;
  border-radius:999px;
}
.mglm__tab{
  appearance:none;
  border:0;
  background:transparent;
  color:#64748b;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  min-height:44px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* icon left of label (matches design) */
  direction:ltr;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.mglm__tab svg{flex-shrink:0}
.mglm__tab.is-active{
  background:var(--mglm-blue);
  color:#fff;
  box-shadow:0 6px 16px rgba(47,128,237,.28);
}
.mglm__tab:not(.is-active):hover{
  background:rgba(255,255,255,.85);
  color:var(--mglm-ink);
}
.mglm__tab:focus-visible{outline:2px solid var(--mglm-blue);outline-offset:2px}

.mglm__panel[hidden]{display:none!important}
.mglm__alert{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:.86rem;
  line-height:1.45;
  background:var(--mglm-danger-bg);
  color:var(--mglm-danger);
  border:1px solid #f5c6cb;
}
.mglm__alert.is-success{
  background:#edfaf3;
  color:#0b7a4d;
  border-color:#b7ebd0;
}
.mglm__alert[hidden]{display:none!important}

.mglm__form{display:flex;flex-direction:column;gap:12px}
.mglm__field{margin:0}
.mglm__sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.mglm__input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.mglm__ico{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  display:flex;
  pointer-events:none;
  z-index:1;
}
/* Beat theme style.css: input[type=text]{border:none;box-shadow:...} */
.mglm input.mglm__input,
.mglm input.mglm__input[type="text"],
.mglm input.mglm__input[type="password"],
.mglm input.mglm__input[type="email"]{
  width:100%;
  max-width:100%;
  height:50px;
  min-height:50px;
  line-height:normal;
  margin:0;
  padding:12px 46px 12px 44px;
  border:1.5px solid #cfdceb !important;
  border-radius:14px !important;
  background-color:#f7fafc !important;
  box-shadow:none !important;
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  color:var(--mglm-ink) !important;
  opacity:1;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.mglm input.mglm__input::placeholder{color:#94a3b8;opacity:1}
.mglm input.mglm__input:hover{
  border-color:#b0c4d8 !important;
  background-color:#f3f7fb !important;
}
.mglm input.mglm__input:focus,
.mglm input.mglm__input[type="text"]:focus,
.mglm input.mglm__input[type="password"]:focus,
.mglm input.mglm__input[type="email"]:focus{
  border-color:var(--mglm-blue) !important;
  background-color:#fff !important;
  box-shadow:0 0 0 3px rgba(47,128,237,.15) !important;
  color:var(--mglm-ink) !important;
}
.mglm input.mglm__input[aria-invalid="true"]{
  border-color:#f1aeb5 !important;
  background-color:#fff8f8 !important;
}
.mglm__eye{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  width:36px;height:36px;
  border:0;background:transparent;
  color:#94a3b8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:8px;
}
.mglm__eye:hover{color:var(--mglm-ink);background:rgba(15,39,68,.04)}

.mglm__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
}
.mglm__check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  color:var(--mglm-ink);
  cursor:pointer;
  user-select:none;
}
.mglm__check input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.mglm__check-box{
  width:18px;height:18px;
  border:1.5px solid #c5d0dc;
  border-radius:5px;
  background:#fff;
  flex-shrink:0;
  position:relative;
}
.mglm__check input:checked + .mglm__check-box{
  background:var(--mglm-blue);
  border-color:var(--mglm-blue);
}
.mglm__check input:checked + .mglm__check-box::after{
  content:"";
  position:absolute;
  left:5px;top:2px;
  width:5px;height:9px;
  border:2px solid #fff;
  border-top:0;border-left:0;
  transform:rotate(40deg);
}
.mglm__check input:focus-visible + .mglm__check-box{
  outline:2px solid var(--mglm-blue);
  outline-offset:2px;
}
.mglm__forgot{
  font-size:.88rem;
  font-weight:600;
  color:var(--mglm-blue);
  text-decoration:none;
}
.mglm__forgot:hover{text-decoration:underline}

.mglm__btn{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  width:100%;
  border-radius:14px;
  font:inherit;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.mglm__btn--primary{
  margin-top:4px;
  background:var(--mglm-blue);
  color:#fff;
  box-shadow:0 10px 22px rgba(47,128,237,.28);
}
.mglm__btn--primary:hover{background:var(--mglm-blue-d)}
.mglm__btn--primary:active{transform:translateY(1px)}
.mglm__btn--primary.is-loading{opacity:.85;pointer-events:none}
.mglm__btn--agent{
  background:var(--mglm-green);
  color:#fff;
  box-shadow:0 10px 22px rgba(18,184,134,.25);
}
.mglm__btn--agent:hover{background:var(--mglm-green-d)}
.mglm__btn-spin{
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:mglm-spin .7s linear infinite;
}
.mglm__btn-spin[hidden]{display:none!important}
@keyframes mglm-spin{to{transform:rotate(360deg)}}

.mglm__social{margin-top:16px}
.mglm__sep{
  display:flex;
  align-items:center;
  gap:12px;
  color:#94a3b8;
  font-size:.82rem;
  margin-bottom:12px;
}
.mglm__sep::before,.mglm__sep::after{
  content:"";
  flex:1;
  height:1px;
  background:#e2e8f0;
}
.mglm__social-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mglm__social-btn{
  appearance:none;
  border:1.5px solid #e2e8f0 !important;
  background:#fff !important;
  border-radius:12px !important;
  min-height:48px;
  padding:10px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font:inherit;
  font-size:.78rem;
  font-weight:600;
  color:var(--mglm-ink) !important;
  cursor:pointer;
  box-shadow:none !important;
  line-height:1.25;
  text-align:center;
  /* icon then label */
  direction:ltr;
}
.mglm__social-btn svg{flex-shrink:0;width:18px;height:18px}
.mglm__social-btn span{min-width:0}
.mglm__social-btn:hover{background:#f8fafc !important;border-color:#cfdcea !important}
.mglm__social-btn:focus-visible{outline:2px solid var(--mglm-blue);outline-offset:2px}
.mglm__social-btns:has(> :only-child){grid-template-columns:1fr}

.mglm__register{
  margin:16px 0 0;
  text-align:center;
}
.mglm__register a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--mglm-blue);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
}
.mglm__register a:hover{text-decoration:underline}

.mglm__agent-note{
  margin:0 0 14px;
  text-align:center;
  color:var(--mglm-muted);
  font-size:.9rem;
  line-height:1.5;
}

.mglm__promo{
  margin-top:18px;
  padding:14px 14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#eefaf4 0%,#e8f7ef 100%);
  border:1px solid #d4efe3;
}
.mglm__promo-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--mglm-green);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  margin-bottom:10px;
}
.mglm__promo-body{
  display:flex;
  align-items:flex-end;
  gap:12px;
}
.mglm__promo-copy{flex:1;min-width:0}
.mglm__promo-title{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:700;
  color:var(--mglm-ink);
}
.mglm__promo-desc{
  margin:0 0 12px;
  font-size:.82rem;
  line-height:1.55;
  color:var(--mglm-muted);
}
.mglm__promo-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--mglm-green-d);
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
}
.mglm__promo-cta:hover{text-decoration:underline}
.mglm__promo-cta-ico{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--mglm-green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.mglm__promo-media{
  flex-shrink:0;
  width:78px;height:78px;
  border-radius:14px;
  overflow:hidden;
  background:#d9f0e4;
}
.mglm__promo-media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

body.mglm-open{
  overflow:hidden!important;
  touch-action:none;
}
body.mglm-ready #sign-in-dialog{display:none!important}

@media (max-width:640px){
  .mglm{
    padding:0;
    align-items:stretch;
  }
  .mglm__dialog{
    max-width:none;
    max-height:none;
    height:100%;
    border-radius:0;
    box-shadow:none;
  }
  .mglm__backdrop{
    background:rgba(15,39,68,.25);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .mglm__scroll{
    padding:0 16px 24px;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  }
  .mglm__close{
    top:calc(10px + env(safe-area-inset-top,0px));
    left:10px !important;
    right:auto !important;
  }
  .mglm__hero{
    margin:0 -16px 10px;
    padding:16px 14px 14px;
    border-radius:0;
    min-height:0;
  }
  .mglm__hero-inner{
    min-height:0;
    gap:10px;
    align-items:flex-start;
  }
  .mglm__hero-copy{
    gap:6px;
    align-items:flex-start;
    padding-top:2px;
  }
  .mglm__logo{height:30px;max-width:130px}
  .mglm__title{font-size:1.12rem}
  .mglm__subtitle{font-size:.82rem;max-width:none}
  .mglm__hero-art{
    flex-basis:96px;
    width:96px;
    max-width:32%;
    padding-top:40px; /* below close button */
    padding-left:0;
  }
  .mglm__hero-ill{max-height:88px}
  .mglm__promo-media{display:none}
  .mglm__social-btn{font-size:.72rem;padding:8px 8px;gap:6px;min-height:46px}
}

@media (min-width:641px) and (max-width:820px){
  .mglm__dialog{max-width:560px}
}

@media (prefers-reduced-motion:reduce){
  .mglm__btn,.mglm__tab,.mglm__close{transition:none}
  .mglm__btn-spin{animation:none}
}