/* ELMASSA V032 — visual login page. Scoped, no other page affected. */
:root{color-scheme:light}
*{box-sizing:border-box}
html{min-height:100%;font-family:"Cairo",Tahoma,Arial,sans-serif}
body.elm-login-page{min-height:100vh;min-height:100dvh;margin:0;background:#f2f4f8;color:#1d3049}
.elm-login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.90fr);direction:rtl;min-height:100vh;min-height:100dvh;max-width:1800px;margin-inline:auto;background:#fff}
.elm-login-form-side{display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,80px);min-width:0}
.elm-login-card{width:100%;max-width:440px}
.elm-login-eyebrow{margin:0 0 15px;font:800 16px/1.4 "Cairo",sans-serif;letter-spacing:.15em;color:#ae1717;text-align:right}
.elm-login-card h1{margin:0 0 30px;font:800 clamp(27px,2.3vw,37px)/1.5 "Cairo",sans-serif;color:#1c324a}
.elm-login-form{display:flex;flex-direction:column;gap:0}
.elm-login-form label{display:block;font-weight:700;font-size:14px;color:#314257;margin-bottom:9px}
.elm-login-form input{display:block;width:100%;height:54px;border:1px solid #dce3eb;border-radius:13px;background:#f8fafc;color:#162a41;font:600 16px "Cairo",sans-serif;padding:10px 16px;outline:0;margin-bottom:21px;transition:border-color .15s,box-shadow .15s}
.elm-login-form input:focus{border-color:#bd2620;box-shadow:0 0 0 3px rgba(189,38,32,.14);background:#fff}
.elm-login-submit{display:block;width:100%;min-height:53px;margin-top:6px;border:0;border-radius:13px;background:linear-gradient(110deg,#b90f1b,#f06416);color:white;font:800 16px "Cairo",sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(184,29,19,.16)}
.elm-login-submit:hover{filter:brightness(1.05)}
.elm-login-submit:focus-visible{outline:3px solid #ff9e72;outline-offset:3px}
.elm-login-error{padding:14px 15px;margin:0 0 22px;border-radius:11px;border:1px solid #fac5c1;background:#fff0ef;color:#9c1616;font-size:13px;font-weight:700}
.elm-login-art-side{background:#81070c;min-height:100vh;min-height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.elm-login-art{display:block;width:100%;height:100vh;height:100dvh;object-fit:cover;object-position:center center}
@media (max-width:800px){
 .elm-login-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:100dvh}
 .elm-login-art-side{grid-row:1;min-height:0;height:clamp(170px,34vh,275px);background:#81070c}
 .elm-login-art{width:100%;height:100%;object-fit:contain;object-position:center}
 .elm-login-form-side{grid-row:2;align-items:flex-start;padding:30px 23px 46px}
 .elm-login-card{max-width:460px;margin-inline:auto}
 .elm-login-card h1{margin-bottom:23px;font-size:28px}
 .elm-login-eyebrow{margin-bottom:8px}
}
@media (max-width:380px){.elm-login-art-side{height:160px}.elm-login-form-side{padding:23px 17px 35px}.elm-login-form input{height:50px;margin-bottom:16px}}
@media (prefers-reduced-motion:reduce){.elm-login-form input{transition:none}}


/* V033 desktop: centered, rounded split panel; photo on left and white sign-in card on right.
   Mobile (<801px) remains exactly as V032. */
@media (min-width:801px) {
  body.elm-login-page {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 20px;
    background:#edf2f8;
  }
  .elm-login-layout {
    width:100%;
    max-width:1014px;
    min-height:560px;
    height:min(670px, calc(100dvh - 56px));
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,48%) minmax(0,52%);
    direction:rtl;
    overflow:hidden;
    border-radius:24px;
    background:#f6f7fb;
    box-shadow:0 19px 48px rgba(32,48,73,.11);
  }
  .elm-login-form-side {
    height:100%;
    padding:25px 35px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f7fb;
  }
  .elm-login-card {
    width:100%;
    max-width:370px;
    padding:28px 28px 30px;
    background:#fff;
    border-radius:19px;
    box-shadow:0 12px 28px rgba(33,49,70,.10);
  }
  .elm-login-eyebrow {display:none}
  .elm-login-card h1 {
    margin:0 0 25px;
    color:#152c43;
    font-size:26px;
    line-height:1.55;
    text-align:right;
  }
  .elm-login-form label {font-size:13px; margin-bottom:7px}
  .elm-login-form input {
    height:46px;
    padding:8px 13px;
    border-radius:12px;
    background:#eaf1fd;
    margin-bottom:18px;
    font-size:14px;
  }
  .elm-login-submit {min-height:48px; margin-top:10px; border-radius:12px; font-size:15px}
  .elm-login-art-side {height:100%; min-height:0; overflow:hidden; background:#81070c}
  .elm-login-art {display:block; height:100%; width:100%; object-fit:cover; object-position:center}
}
@media (min-width:801px) and (max-width:980px) {
  .elm-login-form-side {padding:18px}
  .elm-login-card {padding:24px 20px}
}
@media (min-width:801px) and (max-height:650px) {
  body.elm-login-page {align-items:flex-start; padding-block:16px}
  .elm-login-layout {height:560px}
}


/* V034 mobile — same centered rounded-panel composition as desktop.
   Stacked art at top + distinct white login card beneath it. Desktop unchanged. */
@media (max-width:800px) {
  body.elm-login-page {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100dvh;
    padding:clamp(12px,3.4vw,20px);
    background:#edf2f8;
  }
  .elm-login-layout {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:470px;
    min-height:0;
    height:auto;
    margin:auto;
    border-radius:23px;
    overflow:hidden;
    background:#f6f7fb;
    box-shadow:0 16px 38px rgba(32,48,73,.12);
  }
  .elm-login-art-side {
    order:0;
    grid-row:auto;
    flex:0 0 auto;
    width:100%;
    min-height:0;
    height:clamp(170px,29vh,232px);
    overflow:hidden;
    background:#81070c;
  }
  .elm-login-art {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
  }
  .elm-login-form-side {
    order:1;
    grid-row:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:clamp(17px,4.4vw,25px);
    background:#f6f7fb;
  }
  .elm-login-card {
    width:100%;
    max-width:405px;
    margin:0 auto;
    padding:clamp(18px,5.1vw,27px);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 26px rgba(33,49,70,.10);
  }
  .elm-login-eyebrow {display:none}
  .elm-login-card h1 {
    margin:0 0 19px;
    color:#152c43;
    font-size:clamp(22px,5.8vw,27px);
    line-height:1.5;
    text-align:right;
  }
  .elm-login-form label {font-size:13px; margin-bottom:7px}
  .elm-login-form input {
    height:47px;
    min-height:47px;
    padding:9px 13px;
    margin-bottom:17px;
    background:#eaf1fd;
    border-radius:12px;
    font-size:15px;
  }
  .elm-login-submit {
    min-height:49px;
    margin-top:7px;
    border-radius:12px;
    font-size:15px;
  }
}
@media (max-width:380px) {
  body.elm-login-page {padding:11px}
  .elm-login-layout {border-radius:19px}
  .elm-login-art-side {height:clamp(150px,26vh,185px)}
  .elm-login-form-side {padding:14px}
  .elm-login-card {padding:19px 17px}
  .elm-login-card h1 {margin-bottom:17px}
  .elm-login-form input {height:45px;min-height:45px;margin-bottom:15px}
}
@media (max-width:800px) and (max-height:680px) {
  body.elm-login-page {align-items:flex-start}
  .elm-login-art-side {height:158px}
}


/* V035 mobile: tall, uncropped ELMASSA art panel like the reference site.
   Use the actual portrait image ratio; remove the V034 short-viewport crop. */
@media (max-width:800px) {
  .elm-login-art-side {
    width:100%;
    height:auto;
    aspect-ratio:1114 / 1411;
    flex:0 0 auto;
    overflow:hidden;
  }
  .elm-login-art {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
}