/* NexusMasjidPro v2.8 — Islamic Black Premium Login + Click-only Mobile Menu
   Mobile first polish. Desktop remains unchanged except login premium styling on small screens. */
:root{
  --nmp-black:#050706;
  --nmp-black-2:#090d0b;
  --nmp-emerald:#063b35;
  --nmp-emerald-2:#0d5c53;
  --nmp-gold:#d6b04a;
  --nmp-gold-soft:#f2dda0;
  --nmp-cream:#fbf7ec;
  --nmp-line-dark:rgba(214,176,74,.26);
  --nmp-glass:rgba(255,255,255,.065);
  --nmp-shadow-dark:0 28px 80px rgba(0,0,0,.55);
}

/* ---------- Mobile login: Islamic black premium ---------- */
@media (max-width:860px){
  body.nmp-login-mobile-pro{
    min-height:100dvh!important;
    margin:0!important;
    color:var(--nmp-cream)!important;
    background:
      radial-gradient(580px 360px at 18% -8%, rgba(214,176,74,.22), transparent 62%),
      radial-gradient(420px 300px at 92% 16%, rgba(13,92,83,.36), transparent 60%),
      linear-gradient(180deg,var(--nmp-black),var(--nmp-black-2) 46%,#020303)!important;
    overflow-x:hidden;
  }
  body.nmp-login-mobile-pro::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
    background-image:
      linear-gradient(30deg, transparent 47%, rgba(214,176,74,.55) 48%, rgba(214,176,74,.55) 52%, transparent 53%),
      linear-gradient(150deg, transparent 47%, rgba(214,176,74,.38) 48%, rgba(214,176,74,.38) 52%, transparent 53%);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom, black, transparent 88%);
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 88%);
  }
  body.nmp-login-mobile-pro::after{
    content:"";position:fixed;left:24px;right:24px;top:0;height:1px;z-index:0;
    background:linear-gradient(90deg,transparent,var(--nmp-gold),transparent);
    box-shadow:0 0 38px rgba(214,176,74,.75);
  }
  body.nmp-login-mobile-pro .nmp-login-shell{
    position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;
    padding:26px 16px calc(26px + env(safe-area-inset-bottom));
  }
  body.nmp-login-mobile-pro .nmp-login-card-wrap{width:min(100%,430px);}
  body.nmp-login-mobile-pro .nmp-login-brand-black{
    text-align:center;margin:0 auto 18px;color:#fffdf1;
  }
  body.nmp-login-mobile-pro .nmp-login-mark-black{
    width:72px;height:72px;margin:0 auto 13px;border-radius:26px;display:grid;place-items:center;font-size:34px;
    background:
      radial-gradient(circle at 30% 18%,rgba(255,243,197,.75),rgba(214,176,74,.23) 42%,rgba(13,92,83,.22)),
      rgba(255,255,255,.05);
    border:1px solid rgba(214,176,74,.45);
    box-shadow:0 18px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.18);
  }
  body.nmp-login-mobile-pro .nmp-login-brand-black h1{
    margin:0;font-family:Georgia,'Times New Roman',serif;font-size:30px;line-height:1.02;letter-spacing:-.5px;color:#fff9e8;
  }
  body.nmp-login-mobile-pro .nmp-login-brand-black p{
    margin:8px auto 0;max-width:310px;color:rgba(251,247,236,.74);font-size:13px;line-height:1.5;
  }
  body.nmp-login-mobile-pro form.nmp-login-form-black,
  body.nmp-login-mobile-pro .login-box,
  body.nmp-login-mobile-pro .login-card{
    width:100%!important;
    background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.052))!important;
    border:1px solid var(--nmp-line-dark)!important;
    border-radius:30px!important;
    padding:22px!important;
    box-shadow:var(--nmp-shadow-dark)!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    color:var(--nmp-cream)!important;
  }
  body.nmp-login-mobile-pro form.nmp-login-form-black{margin:0 auto!important;}
  body.nmp-login-mobile-pro form.nmp-login-form-black label,
  body.nmp-login-mobile-pro .login-box label,
  body.nmp-login-mobile-pro .login-card label{
    color:rgba(251,247,236,.84)!important;font-weight:750!important;font-size:12px!important;letter-spacing:.2px!important;
  }
  body.nmp-login-mobile-pro form.nmp-login-form-black input,
  body.nmp-login-mobile-pro form.nmp-login-form-black select,
  body.nmp-login-mobile-pro .login-box input,
  body.nmp-login-mobile-pro .login-card input{
    width:100%!important;min-height:52px!important;border-radius:18px!important;
    border:1px solid rgba(214,176,74,.22)!important;
    background:rgba(0,0,0,.28)!important;color:#fffdf1!important;
    padding:13px 15px!important;outline:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
    font-size:15px!important;
  }
  body.nmp-login-mobile-pro form.nmp-login-form-black input:focus,
  body.nmp-login-mobile-pro .login-box input:focus,
  body.nmp-login-mobile-pro .login-card input:focus{
    border-color:rgba(214,176,74,.65)!important;box-shadow:0 0 0 4px rgba(214,176,74,.13)!important;
  }
  body.nmp-login-mobile-pro input::placeholder{color:rgba(251,247,236,.42)!important;}
  body.nmp-login-mobile-pro form.nmp-login-form-black button,
  body.nmp-login-mobile-pro form.nmp-login-form-black input[type="submit"],
  body.nmp-login-mobile-pro .login-box button,
  body.nmp-login-mobile-pro .login-card button,
  body.nmp-login-mobile-pro .btn,
  body.nmp-login-mobile-pro button[type="submit"]{
    min-height:52px!important;border-radius:18px!important;border:0!important;width:100%!important;
    background:linear-gradient(135deg,#d9b44f,#f0d889 48%,#b98f24)!important;
    color:#171109!important;font-weight:900!important;letter-spacing:.2px!important;
    box-shadow:0 18px 36px rgba(214,176,74,.22)!important;
  }
  body.nmp-login-mobile-pro a{color:var(--nmp-gold-soft)!important;}
  body.nmp-login-mobile-pro .nmp-login-footnote{
    text-align:center;color:rgba(251,247,236,.55);font-size:11px;margin-top:14px;line-height:1.5;
  }

  /* ---------- Logged-in mobile: menu is hidden until clicked ---------- */
  body.nmp-menu-click-only.nmp-mobile-ready{background:#fbf7ec!important;}
  body.nmp-menu-click-only.nmp-mobile-ready .sidebar{display:none!important;}
  body.nmp-menu-click-only.nmp-mobile-ready .app{display:block!important;}
  body.nmp-menu-click-only.nmp-mobile-ready main{padding:84px 14px 24px!important;max-width:none!important;width:100%!important;}
  body.nmp-menu-click-only .nmp-mobile-bottomnav{display:none!important;visibility:hidden!important;pointer-events:none!important;}
  body.nmp-menu-click-only .nmp-mobile-actions [data-nmp-search]{display:none!important;}
  body.nmp-menu-click-only .nmp-mobile-actions{gap:0!important;}
  body.nmp-menu-click-only .nmp-menu-btn{
    width:46px;height:46px;border-radius:17px;
    background:linear-gradient(135deg,rgba(214,176,74,.24),rgba(255,255,255,.08))!important;
    border-color:rgba(214,176,74,.42)!important;
  }
  body.nmp-menu-click-only .nmp-menu-btn::after{
    content:"Menu";position:absolute;right:0;bottom:-18px;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#e7d493;
  }
  body.nmp-menu-click-only .nmp-mobile-topbar{
    background:
      radial-gradient(480px 190px at 12% -60%,rgba(214,176,74,.24),transparent 62%),
      linear-gradient(145deg,rgba(3,12,10,.99),rgba(6,59,53,.98))!important;
  }
  body.nmp-menu-click-only .nmp-mobile-title b{font-size:15.5px!important;}
  body.nmp-menu-click-only .nmp-mobile-title span{font-size:9px!important;}
  body.nmp-menu-click-only .nmp-drawer-nav a{min-height:48px;}
  body.nmp-menu-click-only .nmp-mobile-search-panel{display:none!important;}

  /* If a previous patch created mobile horizontal menu in sidebar, force it hidden. */
  body.nmp-menu-click-only .side-nav,
  body.nmp-menu-click-only .sidebar .side-nav{max-height:none;}
}