/*! Badr Academy – wp-login.php (design system). Loaded via login_enqueue_scripts. */
@font-face{font-family:"AB Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"AB Plex";font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"AB Plex";font-weight:400;font-display:swap;src:url(../fonts/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"AB Plex";font-weight:700;font-display:swap;src:url(../fonts/plex-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
:root{--ds-surface:#FFFFFF;--nv:#0A1F44;--nv7:#1B3A74;--cy:#22D3EE;--cy7:#0E7490;--ink:#0B1325;--mut:#475569;--ln:#CBD5E1;--bg:#F6F8FC;--err:#B42318;--ok:#15803D;--focus:#0EA5E9}
html,body.login{background:var(--bg)}
body.login{font-family:"AB Plex",system-ui,"Segoe UI",Tahoma,sans-serif;color:var(--ink);min-block-size:100vh;margin:0;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;padding:24px 16px}
@media (min-width:960px){body.login{grid-template-columns:minmax(380px,1fr) minmax(420px,560px);padding:0;align-content:stretch}}
body.login *{box-sizing:border-box}
.ab-login-aside{display:none}
@media (min-width:960px){
  .ab-login-aside{display:flex;flex-direction:column;justify-content:center;gap:24px;align-self:stretch;inline-size:100%;padding:64px clamp(40px,6vw,96px);background:var(--nv);color:#C4D0E6;position:relative;overflow:hidden;isolation:isolate}
  .ab-login-aside::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 100% 0%,rgba(34,211,238,.22),transparent 60%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px}
}
.ab-login-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:1.35rem;font-weight:700}
.ab-login-brand img{filter:brightness(0) invert(1);inline-size:56px;block-size:56px}
.ab-login-motto{margin:0;font-size:clamp(1.6rem,1rem + 1.8vw,2.4rem);line-height:1.3;font-weight:700;color:#fff}
.ab-login-points{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:1rem}
.ab-login-points li{display:flex;gap:10px;align-items:flex-start}
.ab-login-points li::before{content:"";flex:none;inline-size:20px;block-size:20px;margin-block-start:4px;border-radius:50%;background:var(--cy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
body.login #login{inline-size:min(100%,420px);padding:0;margin:0;align-self:center}
@media (min-width:960px){body.login #login{padding-block:48px}}
body.login h1{margin:0 0 20px;text-align:center}
body.login h1 a{background:none!important;inline-size:auto!important;block-size:auto!important;text-indent:0!important;overflow:visible!important;margin:0!important;display:inline-flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;color:var(--nv);text-decoration:none;line-height:1.3;font-family:inherit}
body.login h1 a::before{content:"";inline-size:48px;block-size:48px;border-radius:14px;border:1px solid #E2E8F0;background:var(--ds-surface) url("../branding/logo-88.png") center/contain no-repeat}
@media (min-width:960px){body.login h1{display:none}}
body.login form{background:var(--ds-surface);border:1px solid #E2E8F0;border-radius:18px;box-shadow:0 18px 40px -16px rgba(10,31,68,.18);padding:28px;margin:0}
body.login label{color:var(--ink);font-size:.9rem;font-weight:700;display:block;margin-block-end:6px}
body.login input[type=text],body.login input[type=email],body.login input[type=password]{inline-size:100%;min-block-size:48px;padding:10px 14px;margin:0 0 16px;border:1.5px solid var(--ln);border-radius:12px;font-size:16px;color:var(--ink);background:var(--ds-surface);box-shadow:none;direction:ltr;text-align:start;font-family:inherit}
body.login input[type=text]:focus,body.login input[type=email]:focus,body.login input[type=password]:focus{border-color:var(--cy7);box-shadow:0 0 0 3px rgba(14,165,233,.25);outline:0}
body.login .wp-pwd{position:relative}
body.login .wp-pwd input[type=password],body.login .wp-pwd input[type=text]{padding-inline-end:48px}
body.login .wp-pwd button.wp-hide-pw{position:absolute;inset-block-start:4px;inset-inline-end:4px;inset-inline-start:auto;inline-size:40px;block-size:40px;color:var(--mut);background:none;border:0}
body.login .wp-pwd button.wp-hide-pw:focus{outline:3px solid var(--focus);outline-offset:0;border-radius:10px;box-shadow:none}
body.login form .forgetmenot{float:none;display:flex;align-items:center;gap:8px;margin:4px 0 22px}
body.login .forgetmenot label{margin:0;font-weight:500;color:var(--mut)}
body.login input[type=checkbox]{inline-size:18px;block-size:18px;margin:0;accent-color:var(--nv)}
body.login .submit{margin:0;padding:0}
body.login .button-primary{inline-size:100%;float:none;min-block-size:50px;background:var(--nv)!important;border:0!important;color:#fff!important;border-radius:12px!important;padding:10px 24px!important;font:700 1rem/1.2 "AB Plex",system-ui,sans-serif!important;text-shadow:none!important;box-shadow:none!important;cursor:pointer;transition:background .16s}
body.login .button-primary:hover{background:var(--nv7)!important}
body.login .button-primary:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px}
body.login #nav,body.login #backtoblog{text-align:center;padding:0;margin:16px 0 0;font-size:.9rem}
body.login #nav a,body.login #backtoblog a{color:var(--cy7);text-decoration:none;font-weight:500}
body.login #nav a:hover,body.login #backtoblog a:hover{text-decoration:underline}
body.login .message,body.login .notice,body.login #login_error,body.login .success{border:0;border-inline-start:4px solid var(--cy7);border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:.92rem;box-shadow:none;background:var(--ds-surface);text-align:start}
body.login #login_error,body.login .notice-error{border-inline-start-color:var(--err);background:#FEF3F2}
body.login .success{border-inline-start-color:var(--ok)}
body.login .language-switcher{display:none}
body.login .privacy-policy-page-link{text-align:center;margin-block-start:16px}
@media (prefers-reduced-motion:reduce){body.login *{transition:none!important}}

/* Darklup toggle markup is printed directly by the plugin; its assets are pruned (ds-core). */
.darklup-mode-switcher,.darklup-switch-container,.darklup-menu-switch{display:none!important}

/* remember-me checkbox: 24px target (WCAG 2.2 2.5.8; Lighthouse target-size) */
.login #rememberme{inline-size:24px;block-size:24px;margin-inline-end:.5rem;vertical-align:middle}
.login .forgetmenot label{display:inline-flex;align-items:center;min-block-size:24px}

/* ===== EDITES v2 (WPL-1..4) ===== */
@media (min-width:960px){
  .ab-login-aside{align-items:center;text-align:center;gap:28px}
  .ab-login-points{justify-items:start;text-align:start;margin-inline:auto}
}
.ab-login-brand{flex-direction:column;gap:14px;font-size:clamp(1.4rem,1rem + 1vw,1.9rem)}
.ab-login-brand img{inline-size:112px;block-size:112px;filter:brightness(0) invert(1) drop-shadow(0 10px 30px rgba(34,211,238,.35))}
.ab-login-motto{max-inline-size:28ch;font-size:clamp(1.35rem,1rem + 1.2vw,2rem)}
.ab-login-points{font-size:1.02rem;color:#D6E0F2}
/* the home hero's motion, another drawing in the same style */
.ab-login-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ab-login-fx i{position:absolute;display:block;border-radius:50%;filter:blur(2px);opacity:.55;background:radial-gradient(circle at 30% 30%,rgba(103,232,249,.9),rgba(34,211,238,.15) 60%,transparent 70%)}
.ab-login-fx i:nth-child(1){inline-size:260px;block-size:260px;inset-inline-start:-80px;inset-block-start:8%}
.ab-login-fx i:nth-child(2){inline-size:150px;block-size:150px;inset-inline-end:10%;inset-block-start:-50px;opacity:.4}
.ab-login-fx i:nth-child(3){inline-size:100px;block-size:100px;inset-inline-end:26%;inset-block-end:6%;opacity:.35}
.ab-login-fx svg{position:absolute;inset-inline-end:-30px;inset-block-end:-20px;inline-size:min(46vw,560px);block-size:auto;opacity:.2;color:#67E8F9}
.ab-login-fx .ab-login-dash{stroke-dasharray:6 10}
@keyframes ab-login-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(28px,-22px,0) scale(1.12)}}
@keyframes ab-login-dash{to{stroke-dashoffset:-160}}
@keyframes ab-login-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .ab-login-fx i{animation:ab-login-drift 14s ease-in-out infinite alternate}
  .ab-login-fx i:nth-child(2){animation-duration:18s;animation-delay:-4s}
  .ab-login-fx i:nth-child(3){animation-duration:11s;animation-delay:-7s}
  .ab-login-fx .ab-login-dash{animation:ab-login-dash 9s linear infinite}
  .ab-login-aside>*:not(.ab-login-fx){animation:ab-login-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .ab-login-aside>*:nth-child(3){animation-delay:.08s}
  .ab-login-aside>*:nth-child(4){animation-delay:.16s}
}
/* a heading above each form */
.ab-login-head{margin:0 0 18px;text-align:start}
.ab-login-head h2{margin:0 0 6px;font-size:1.6rem;line-height:1.3;color:var(--nv)}
.ab-login-head p{margin:0;color:var(--mut);font-size:.95rem}
/* remember me (WPL-2): a clean 22px box with a real check mark, not the browser's squeezed default */
body.login form .forgetmenot{margin:6px 0 22px}
.login #rememberme,body.login input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;inline-size:22px;block-size:22px;margin:0;border:2px solid var(--ln);border-radius:6px;background:#fff;display:inline-grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
body.login input[type=checkbox]::before{content:"";inline-size:12px;block-size:12px;transform:scale(0);transition:transform .12s;background:#fff;clip-path:polygon(14% 44%,0 60%,40% 100%,100% 22%,86% 8%,40% 72%)}
body.login input[type=checkbox]:checked{background:var(--nv);border-color:var(--nv)}
body.login input[type=checkbox]:checked::before{transform:scale(1)}
body.login input[type=checkbox]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.login .forgetmenot label{gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
/* admin e-mail confirmation and other secondary screens (WPL-4) */
body.login .admin-email__details{margin-block-end:20px}
body.login .admin-email__actions{display:grid;gap:12px}
body.login .admin-email__actions-primary{display:grid;gap:10px}
body.login .admin-email__actions .button:not(.button-primary){inline-size:100%;min-block-size:46px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;color:var(--nv);font:700 .95rem/1.2 "AB Plex",system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
body.login .admin-email__actions-secondary{text-align:center;margin:0}
body.login .admin-email__actions-secondary a{color:var(--cy7)}
body.login.login-action-confirm_admin_email #login{inline-size:min(100%,480px)}
body.login #nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}

/* ===== EDITES v3 AUTH-1: balanced two columns, no scrollbar when the content fits =====
   Four rows: equal flexible space above and below, the content in the middle. The brand panel is a subgrid, so its
   content shares the middle rows with the form: whichever column is taller sets them, and the logo and the
   "Log in" heading start at the same height, with the same space on all four sides. Nothing is clipped – on a short
   screen the outer rows shrink to 24px and the page scrolls normally. */
@media (min-width:960px){
  body.login{grid-template-rows:minmax(24px,1fr) auto auto minmax(24px,1fr);min-block-size:100vh;min-block-size:100dvh;row-gap:0;align-content:stretch}
  .ab-login-aside{grid-column:1;grid-row:1/-1;display:grid;grid-template-rows:subgrid;padding-block:0;justify-content:center;align-items:start;gap:0}
  .ab-login-aside__in{grid-row:2/span 2;display:flex;flex-direction:column;align-items:center;gap:26px;padding-block:0}
  body.login #login{grid-column:2;grid-row:2;padding-block:0;align-self:start}
  body.login .privacy-policy-page-link{grid-column:2;grid-row:3;align-self:start;margin-block:14px 0}
  body.login #nav{margin-block-start:14px}
  body.login #backtoblog{margin-block-start:10px}
  .ab-login-head{margin-block-end:14px}
  body.login form{padding:24px}
  body.login form .forgetmenot{margin:2px 0 18px}
}
@media (max-width:959px){.ab-login-aside__in{display:contents}}
/* Master redesign 2026-10-01 ("The Route"): --ds-surface was used here but defined only in ds.css, which this page does
   not load – the phone logo, the form and the inputs lost their background (the logo was invisible). Defined in :root
   above. The brand panel's drifting spheres give way to its circuit routes, which keep moving (WPL-1). */
.ab-login-fx i{display:none}
.ab-login-fx svg{opacity:.26;inset-block-end:-70px;-webkit-mask-image:linear-gradient(transparent 20%,#000 60%);mask-image:linear-gradient(transparent 20%,#000 60%)}
@media (prefers-reduced-motion:no-preference){.ab-login-fx svg{animation:ab-login-rise 1.2s cubic-bezier(.2,.7,.2,1) .2s both}}