/* LUMORA — sign-in & registration. Requires CSS/lumora.css (tokens + wordmark). Loaded before CSS/presentation.css, so rules
   that must beat its light-theme overrides carry html[data-theme] in the selector.
   Dark (default) = navy form side · Light = cream form side. The photo panel is dark in both themes. RTL via logical properties. */
html { --a-bg: #071426; --a-card: #0B1F3A; --a-text: #ffffff; --a-muted: rgba(255, 255, 255, .72); --a-line: rgba(230, 244, 241, .16); --a-input: #0B1F3A; --a-input-line: rgba(37, 99, 235, .26); --a-accent: #14B8A6; --a-error: #ff8a7a; --a-note-bg: rgba(20, 184, 166, .12); --a-note: #E6F4F1; }
html[data-theme="light"] { --a-bg: #E6F4F1; --a-card: #ffffff; --a-text: #0F172A; --a-muted: #0A3D91; --a-line: rgba(15, 23, 42, .1); --a-input: #ffffff; --a-input-line: rgba(10, 61, 145, .22); --a-accent: #2563EB; --a-error: #b3261e; --a-note-bg: rgba(20, 184, 166, .12); --a-note: #0A3D91; }

html[data-theme] body.lm-auth, body.lm-auth { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; background: var(--a-bg); color: var(--a-text); font: 400 1rem/1.6 var(--lm-sans); -webkit-font-smoothing: antialiased; }
html[lang="ar"] body.lm-auth { font-family: "IBM Plex Sans Arabic", var(--lm-sans); }
:where(.lm-auth) a { color: inherit; text-decoration: none; }
:where(.lm-auth) :where(button, input) { font: inherit; color: inherit; }
.lm-auth :where(h1, h2, p, ul, fieldset) { margin: 0; }
html[data-theme] .lm-auth :focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
.lm-auth__skip { position: absolute; z-index: 100; inset-block-start: -60px; inset-inline-start: 16px; padding: 10px 16px; border-radius: 8px; background: var(--lm-gold); color: var(--lm-ink) !important; font-weight: 700; }
.lm-auth__skip:focus { inset-block-start: 12px; }

.lm-auth__shell { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); min-height: 100vh; }

/* ------------------------------------------------------------------------------------------------ photo panel */
.lm-auth__visual { position: sticky; inset-block-start: 0; display: flex; height: 100vh; min-height: 620px; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 52px); background: #071426; color: #fff; }
.lm-auth__photo { position: absolute; z-index: -1; inset: 0; background: #0B1F3A; }
.lm-auth__photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.85); transition: opacity .8s var(--lm-ease); }
.lm-auth__photo.is-loaded img { opacity: 1; }
html.lm-loading .lm-auth__photo img { transition: none; }
.lm-auth__photo::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 38, .62) 0%, rgba(7, 20, 38, .42) 30%, rgba(10, 42, 82, .86) 68%, #071426 100%), radial-gradient(80% 60% at 20% 90%, rgba(20, 184, 166, .1), transparent 60%); content: ""; }
.lm-auth__brand, .lm-auth__mbrand { display: inline-flex; align-items: center; }
.lm-auth__brand { align-self: flex-start; color: #E6F4F1; }
.lm-auth__brand .lm-brand__sub { color: #E6F4F1; }
.lm-auth__statement { max-width: 520px; }
.lm-auth__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-block-end: 16px !important; color: var(--lm-gold); font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.lm-auth__eyebrow::before { width: 26px; height: 1px; background: currentColor; content: ""; }
.lm-auth__title { font-family: var(--lm-serif); font-size: clamp(2.3rem, 3.6vw, 3.4rem); font-weight: 400; line-height: 1.06; }
.lm-auth__title em { color: var(--lm-gold); }
html[lang="ar"] .lm-auth__title { font-family: "IBM Plex Sans Arabic", var(--lm-serif); font-weight: 600; line-height: 1.3; }
html[lang="ar"] .lm-auth__title em { font-style: normal; }
.lm-auth__lead { max-width: 440px; margin-block: 18px 30px !important; color: rgba(230, 244, 241, .78); font-size: 1rem; line-height: 1.7; }
.lm-auth__points { display: grid; gap: 16px; padding: 22px 0 0 !important; border-block-start: 1px solid rgba(230, 244, 241, .2); list-style: none; }
.lm-auth__points li { display: flex; gap: 14px; }
.lm-auth__points svg { flex: none; margin-block-start: 2px; color: var(--lm-gold); }
.lm-auth__points strong { display: block; font-size: .92rem; }
.lm-auth__points small { display: block; color: rgba(230, 244, 241, .66); font-size: .82rem; }

/* ------------------------------------------------------------------------------------------------ form side */
.lm-auth__main { display: flex; min-width: 0; flex-direction: column; padding: 22px clamp(20px, 5vw, 72px) 26px; }
.lm-auth__top { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; }
.lm-auth__back { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--a-muted); font-size: .86rem; font-weight: 600; transition: color .2s; }
.lm-auth__back:hover { color: var(--a-text); }
[dir="rtl"] .lm-auth__back svg, [dir="rtl"] .lm-auth__submit svg { transform: scaleX(-1); }
.lm-auth__actions { display: flex; align-items: center; gap: 8px; }
.lm-auth__switch { display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; border: 1px solid var(--a-input-line); border-radius: 9px; font-size: .84rem; font-weight: 700; transition: border-color .2s, color .2s; }
.lm-auth__switch:hover { border-color: var(--a-accent); color: var(--a-accent); }
html[data-theme] .lm-auth .epc-prefs__btn { min-height: 40px; border-color: var(--a-input-line); color: var(--a-text); }

.lm-auth__card { width: min(100%, 480px); margin: auto; padding-block: clamp(28px, 5vh, 56px); animation: lm-enter .5s var(--lm-ease) .16s both; }
.lm-auth__mbrand { display: none; margin-block-end: 26px; color: var(--a-text); }
.lm-auth__heading { font-family: var(--lm-serif); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.1; }
html[lang="ar"] .lm-auth__heading { font-family: "IBM Plex Sans Arabic", var(--lm-serif); font-weight: 700; }
.lm-auth__sub { margin-block: 8px 28px !important; color: var(--a-muted); font-size: .95rem; }

.lm-field { display: grid; gap: 8px; margin-block-end: 18px; }
.lm-field label { font-size: .82rem; font-weight: 700; }
.lm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.lm-control { position: relative; }
.lm-control input { width: 100%; height: 52px; padding-inline: 46px 16px; border: 1px solid var(--a-input-line); border-radius: 11px; outline: 0; background: var(--a-input); color: var(--a-text); font-size: .95rem; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.lm-control--pw input { padding-inline-end: 52px; }
.lm-control input::placeholder { color: var(--a-muted); opacity: .8; }
.lm-control input:hover { border-color: rgba(230, 244, 241, .4); }
.lm-control input:focus { border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.lm-control input:-webkit-autofill { -webkit-text-fill-color: var(--a-text); box-shadow: 0 0 0 40px var(--a-input) inset; caret-color: var(--a-text); }
.lm-control__icon { position: absolute; inset-inline-start: 16px; inset-block-start: 17px; color: var(--a-muted); pointer-events: none; transition: color .2s; }
.lm-control:focus-within .lm-control__icon { color: var(--a-accent); }
.lm-eye { position: absolute; inset-inline-end: 4px; inset-block-start: 4px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--a-muted); cursor: pointer; }
.lm-eye:hover { color: var(--a-text); }
/* login.js / register.js swap the <i> class between fa-eye and fa-eye-slash; render both as CSS-masked icons (no icon font) */
.lm-eye i { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat; --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.lm-eye i.fa-eye-slash { --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.7 3.4M6.6 6.6A16.6 16.6 0 0 0 2.5 12S6 18.5 12 18.5a9.4 9.4 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.lm-error { display: block; margin-block-start: 6px; color: var(--a-error); font-size: .78rem; font-weight: 600; }
.lm-error:empty { display: none; }
.lm-control.has-error input { border-color: var(--a-error); }
.lm-control.has-error .lm-control__icon { color: var(--a-error); }

.lm-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block: -2px 18px; }
.lm-check { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: var(--a-muted); font-size: .86rem; cursor: pointer; }
.lm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--lm-gold); }
.lm-auth__link { display: inline-flex; min-height: 44px; align-items: center; color: var(--a-accent); font-size: .86rem; font-weight: 700; }
.lm-auth__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lm-auth__message { min-height: 0; margin-block-end: 14px !important; padding: 10px 14px; border-radius: 10px; background: rgba(255, 138, 122, .1); color: var(--a-error); font-size: .86rem; font-weight: 600; }
.lm-auth__message:empty { display: none; }

.lm-auth__submit { position: relative; display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 0; border-radius: 11px; background: var(--lumora-gradient); color: #fff !important; font-size: .95rem; font-weight: 800; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 24px rgba(37, 99, 235, .2); transition: box-shadow .25s var(--lm-ease), opacity .2s; }
.lm-auth__submit::after { position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); content: ""; transform: skewX(-18deg); transition: inset-inline-start .6s var(--lm-ease); }
.lm-auth__submit:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 30px rgba(37, 99, 235, .3); }
.lm-auth__submit:hover::after { inset-inline-start: 120%; }
.lm-auth__submit:disabled { cursor: progress; opacity: .7; }
.lm-auth__alt { margin-block-start: 22px !important; color: var(--a-muted); font-size: .9rem; text-align: center; }
.lm-auth__alt a { color: var(--a-accent); font-weight: 700; }
.lm-auth__alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lm-auth__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-block-start: 16px; border-block-start: 1px solid var(--a-line); color: var(--a-muted); font-size: .78rem; }
html[data-theme] .lm-auth .lm-auth__foot { color: var(--a-muted); }
.lm-auth__foot p { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------------------------------------ account type (register) */
.lm-types { min-width: 0; margin-block-end: 22px !important; padding: 0; border: 0; }
.lm-types legend { margin-block-end: 10px; padding: 0; font-size: .82rem; font-weight: 700; }
.lm-types__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lm-type { position: relative; display: block; cursor: pointer; }
.lm-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lm-type__card { position: relative; display: grid; min-height: 132px; align-content: start; gap: 4px; padding: 16px; border: 1px solid var(--a-input-line); border-radius: 13px; background: var(--a-input); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.lm-type__icon { display: grid; width: 40px; height: 40px; margin-block-end: 8px; place-items: center; border: 1px solid var(--a-input-line); border-radius: 10px; color: var(--a-accent); transition: background-color .2s, color .2s, border-color .2s; }
.lm-type__card strong { font-size: .95rem; }
.lm-type__card small { color: var(--a-muted); font-size: .76rem; line-height: 1.45; }
.lm-type__tick { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 20px; height: 20px; border: 1.5px solid var(--a-input-line); border-radius: 50%; transition: border-color .2s, background-color .2s; }
.lm-type:hover .lm-type__card { border-color: rgba(37, 99, 235, .5); }
.lm-type input:focus-visible + .lm-type__card { box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }
.lm-type input:checked + .lm-type__card { border-color: var(--lm-gold); background: linear-gradient(180deg, rgba(37, 99, 235, .1), transparent), var(--a-input); }
.lm-type input:checked + .lm-type__card .lm-type__icon { border-color: var(--lm-gold); background: var(--lm-gold); color: var(--lm-ink); }
.lm-type input:checked + .lm-type__card .lm-type__tick { border-color: var(--lm-gold); background: var(--lm-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1725' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lm-types.has-error .lm-type__card { border-color: var(--a-error); }
.lm-types__note { margin-block-start: 10px !important; padding: 10px 14px; border-radius: 10px; background: var(--a-note-bg); color: var(--a-note); font-size: .8rem; line-height: 1.5; }
.lm-types__note[hidden] { display: none; }
.lm-types__error { display: block; margin-block-start: 8px; color: var(--a-error); font-size: .78rem; font-weight: 600; }
.lm-types__error:empty { display: none; }
html[dir="rtl"] .lm-auth input[type="email"], html[dir="rtl"] .lm-auth input[type="tel"], html[dir="rtl"] .lm-auth input[type="password"] { text-align: right; }

/* ------------------------------------------------------------------------------------------------ responsive */
@media (max-width: 1100px) { .lm-auth__shell { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } .lm-auth__points small { display: none; } }
@media (max-width: 900px) {
  .lm-auth__shell { display: block; }
  /* the photograph becomes a compact header band; the form gets priority */
  .lm-auth__visual { position: relative; height: auto; min-height: 0; padding: 18px 20px 26px; }
  .lm-auth__photo::after { background: linear-gradient(180deg, rgba(7, 20, 38, .58), rgba(10, 42, 82, .82) 55%, #071426); }
  .lm-auth__statement { margin-block-start: 34px; }
  .lm-auth__title { font-size: clamp(1.9rem, 7vw, 2.5rem); }
  .lm-auth__lead, .lm-auth__points { display: none; }
  .lm-auth__main { padding: 0 20px 22px; }
  .lm-auth__top { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; min-height: 0; }
  .lm-auth__back { display: none; }
  .lm-auth__actions .lm-auth__switch, html[data-theme] .lm-auth .epc-prefs__btn { border-color: rgba(230, 244, 241, .3); background: rgba(15, 23, 42, .45); color: #E6F4F1; backdrop-filter: blur(6px); }
  .lm-auth__card { padding-block: 28px 32px; }
  .lm-auth__heading { font-size: 1.9rem; }
}
@media (max-width: 520px) {
  .lm-auth__visual { padding-inline: 16px; }
  .lm-auth__main { padding-inline: 16px; }
  .lm-auth__top { inset-inline-end: 12px; inset-block-start: 14px; }
  .lm-auth__brand .lm-brand__sub { display: none; }
  .lm-field-row { grid-template-columns: 1fr; }
  .lm-types__grid { gap: 10px; }
  .lm-type__card { min-height: 0; padding: 14px 12px; }
  .lm-type__card small { font-size: .72rem; }
  .lm-auth__foot { flex-direction: column; }
}
@media (max-width: 360px) {
  .lm-types__grid { grid-template-columns: 1fr; }
  .lm-auth__brand .lm-brand__name { font-size: .95rem; letter-spacing: .24em; }
  html[data-theme] .lm-auth .epc-prefs__btn, .lm-auth__switch { padding-inline: 9px; font-size: .74rem; }
}

/* RTL: presentation.css keeps e-mail / phone / password values left-to-right (direction:ltr), so logical padding would flip
   to the wrong side of the icon — use physical padding for exactly those inputs. */
html[dir="rtl"] .lm-auth .lm-control input:is([type="email"], [type="tel"], [type="password"]) { padding-left: 16px; padding-right: 46px; }
html[dir="rtl"] .lm-auth .lm-control--pw input:is([type="email"], [type="tel"], [type="password"], [type="text"]) { padding-left: 52px; padding-right: 46px; }

/* mobile: the top bar sits in the flow under the photo band (never over the wordmark) */
@media (max-width: 900px) {
  .lm-auth__top { position: static; justify-content: flex-end; padding-block-start: 14px; }
  .lm-auth__actions .lm-auth__switch, html[data-theme] .lm-auth .epc-prefs__btn { border-color: var(--a-input-line); background: transparent; color: var(--a-text); backdrop-filter: none; }
  .lm-auth__card { padding-block-start: 18px; }
}
/* presentation.css sets `html[data-theme="light"] a { color: inherit }` — keep the accent links accented in both themes */
html[data-theme] .lm-auth .lm-auth__link, html[data-theme] .lm-auth .lm-auth__alt a { color: var(--a-accent); }