/* NovaTrusted login theme — scoped under .nova-auth so it cannot affect
   pages that fall back to the 'modern' theme. */

/* ===================================================================
   NovaTrusted — sign-in
   Tokens are scoped to .nova so the page paints itself explicitly
   and never borrows the host ground.
   =================================================================== */
.nova-auth .nova{
  --bg:#f3f7ff; --surface:rgba(255,255,255,.86); --solid:#fff; --surface-2:#edf3ff;
  --ink:#10172a; --muted:#68738c; --line:#dce5f4;
  --primary:#2357f5; --primary-2:#6b45f5; --cyan:#4cc9f0;
  --success:#12b76a; --danger:#e5484d;
  --shadow:0 28px 80px rgba(39,62,119,.18);
  --shadow-soft:0 14px 38px rgba(39,62,119,.12);
  --f-latin:"Plus Jakarta Sans",system-ui,sans-serif;
  --f-arabic:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif;
}
.nova-auth .nova[data-nova-theme="dark"]{
  --bg:#080d1a; --surface:rgba(16,24,44,.82); --solid:#11182b; --surface-2:#17223d;
  --ink:#f4f7ff; --muted:#a3aec5; --line:#293654;
  --primary:#5c7cff; --primary-2:#8a66ff; --cyan:#53d8fb;
  --shadow:0 30px 90px rgba(0,0,0,.42); --shadow-soft:0 18px 40px rgba(0,0,0,.28);
}
.nova-auth *{box-sizing:border-box}
.nova-auth{margin:0;padding:0;min-height:100vh;display:block}

.nova-auth .nova{
  position:relative; min-height:100vh;
  background:
    radial-gradient(circle at 8% 10%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 27rem),
    radial-gradient(circle at 92% 88%,color-mix(in srgb,var(--cyan) 14%,transparent),transparent 30rem),
    var(--bg);
  color:var(--ink); font-family:var(--f-latin);
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .25s ease;
  overflow:hidden;
}
/* ---- Arabic typography: not a translation, a treatment ---- */
.nova-auth .nova[dir="rtl"]{font-family:var(--f-arabic)}
.nova-auth .nova[dir="rtl"] h1{letter-spacing:normal;line-height:1.18;font-weight:700}
.nova-auth .nova[dir="rtl"] .eyebrow{text-transform:none;letter-spacing:.02em;font-weight:600}
.nova-auth .nova[dir="rtl"] .divider span{text-transform:none;letter-spacing:0}
.nova-auth .nova[dir="rtl"] input,.nova-auth .nova[dir="rtl"] button{font-family:var(--f-arabic)}
.nova-auth button, .nova-auth input{font:inherit}
.nova :focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 34%,transparent);outline-offset:3px}

/* ---- page frame ---- */
.nova-auth .page{
  position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr);
  height:100vh;width:min(1440px,100%);margin:auto;
  padding:clamp(16px,2.2vw,30px) clamp(16px,3.3vw,52px);
}
.nova-auth .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px}
.nova-auth .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.04em;font-size:20px}
.nova-auth .brand-mark{
  width:36px;height:36px;display:grid;place-items:center;color:#fff;
  border-radius:11px 11px 11px 4px;
  background:linear-gradient(145deg,var(--primary-2),var(--primary));
  box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 35%,transparent);
  font-size:19px;font-weight:800;font-family:var(--f-latin);
}
.nova-auth .brand-word span{color:var(--primary)}
.nova-auth .controls{display:flex;align-items:center;gap:8px}
.nova-auth .ctl{
  border:1px solid var(--line);background:color-mix(in srgb,var(--solid) 80%,transparent);
  color:var(--ink);min-width:42px;height:42px;padding:0 13px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-size:13px;font-weight:700;
  transition:transform .2s,border-color .2s,background .2s;
}
.nova-auth .ctl:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.nova-auth .ctl svg{width:18px;height:18px}
.nova-auth .nova[data-nova-theme="dark"] .moon{display:none}
.nova:not([data-nova-theme="dark"]) .sun{display:none}

/* ---- two-column shell ---- */
.nova-auth .shell{
  height:100%;min-height:0;display:grid;align-items:center;
  grid-template-columns:minmax(360px,.82fr) minmax(500px,1.18fr);
  gap:clamp(40px,6vw,96px);padding-block:clamp(10px,2vh,22px) 0;
}
.nova-auth .auth{width:min(100%,432px);justify-self:center}
.nova-auth .eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--primary);
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
}
.nova-auth .eyebrow::before{content:"";width:28px;height:2px;background:var(--primary);border-radius:99px}
.nova-auth h1{margin:0;max-width:430px;font-size:clamp(34px,3.9vw,54px);line-height:.98;letter-spacing:-.05em;font-weight:800;text-wrap:balance}
.nova-auth .subtitle{margin:13px 0 22px;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:420px}

.nova-auth .field{margin-bottom:12px}
.nova-auth .label-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px}
.nova-auth .field label{font-size:13px;font-weight:600}
.nova-auth .text-link{color:var(--primary);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:13px;font-weight:600}
.nova-auth .text-link:hover{text-decoration:underline;text-underline-offset:3px}
.nova-auth .input-wrap{position:relative}
.nova-auth .input-wrap>svg{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);width:19px;color:var(--muted);pointer-events:none}
.nova-auth .input-wrap input{
  width:100%;height:50px;border:1px solid var(--line);border-radius:14px;
  background:var(--solid);color:var(--ink);padding-inline:48px;
  transition:border-color .2s,box-shadow .2s;
}
.nova-auth .input-wrap input::placeholder{color:color-mix(in srgb,var(--muted) 68%,transparent)}
.nova-auth .input-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 11%,transparent);outline:0}
.nova-auth .input-wrap input[aria-invalid="true"]{border-color:var(--danger)}
.nova-auth .peek{position:absolute;inset-inline-end:7px;top:5px;width:40px;height:40px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.nova-auth .peek:hover{color:var(--ink);background:var(--surface-2)}
.nova-auth .peek svg{width:19px}
.nova-auth .peek .eye-off{display:none}
.nova-auth .peek[aria-pressed="true"] .eye{display:none}
.nova-auth .peek[aria-pressed="true"] .eye-off{display:block}
.nova-auth .error{min-height:0;margin:0;color:var(--danger);font-size:11.5px;line-height:1.4}
.nova-auth .error:not(:empty){margin:5px 2px -4px}
.nova-auth .meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 14px}
.nova-auth .check{display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--muted);font-size:13px}
.nova-auth .check input{appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line);border-radius:6px;background:var(--solid);display:grid;place-items:center;cursor:pointer}
.nova-auth .check input::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .14s}
.nova-auth .check input:checked{background:var(--primary);border-color:var(--primary)}
.nova-auth .check input:checked::after{transform:rotate(-45deg) scale(1)}

.nova-auth .btn{width:100%;height:50px;border-radius:14px;border:0;cursor:pointer;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s,filter .2s,background .2s,border-color .2s}
.nova-auth .btn-primary{position:relative;color:#fff;background:linear-gradient(112deg,var(--primary),var(--primary-2));box-shadow:0 14px 28px color-mix(in srgb,var(--primary) 28%,transparent)}
.nova-auth .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px color-mix(in srgb,var(--primary) 36%,transparent);filter:saturate(1.1)}
.nova-auth .btn-primary:active{transform:translateY(0) scale(.99)}
.nova-auth .btn-primary svg{width:18px}
.nova-auth .btn-primary.loading span, .nova-auth .btn-primary.loading svg{opacity:0}
.nova-auth .btn-primary.loading::after{content:"";position:absolute;width:19px;height:19px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nova-auth .btn-primary .arw{transition:transform .2s}
.nova-auth .nova[dir="rtl"] .btn-primary .arw{transform:scaleX(-1)}
.nova-auth .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11.5px;margin:14px 0;font-weight:600}
.nova-auth .divider::before, .nova-auth .divider::after{content:"";height:1px;background:var(--line);flex:1}
/* --- app-generated social buttons ---------------------------------------
   The app emits <a class="btn btn-block btn-social btn-facebook"> from
   bootstrap-social. We must style THOSE classes, not invent our own: a rule
   named .btn-social would collide with bootstrap-social's and paint the
   button's background with our surface colour while its text stayed white,
   which made the button invisible in light mode. */
.nova-auth .social{display:grid;gap:9px}
.nova-auth .social .btn{
  width:100%;height:50px;border-radius:14px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0;margin:0;text-align:center;text-decoration:none;
  font-weight:700;font-size:13.5px;line-height:1;
  background:var(--solid);color:var(--ink);
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.nova-auth .social .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
/* bootstrap-social absolutely-positions the icon in a left gutter; inside our
   flex row it must sit inline instead. */
.nova-auth .social .btn-social>:first-child{
  position:static;width:auto;height:auto;line-height:1;border:0;padding:0;
  margin:0;font-size:17px;background:none;
}
.nova-auth .social .btn-facebook{background:#1877f2;border-color:#1877f2;color:#fff}
.nova-auth .social .btn-facebook:hover{background:#166fe0;border-color:#166fe0;color:#fff}
.nova-auth .social .btn-google{background:var(--solid);color:var(--ink)}
.nova-auth .social .btn-google:hover{border-color:#ea4335}
.nova-auth .ic{width:22px;height:22px;flex:none;display:grid;place-items:center}
.nova-auth .foot-links{margin-top:14px;text-align:center;color:var(--muted);font-size:13px;line-height:1.85}

/* ---- showcase ---- */
.nova-auth .showcase{
  position:relative;height:min(100%,660px);max-width:760px;justify-self:end;width:100%;
  display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  border-radius:42px;overflow:hidden;
  background:
    radial-gradient(circle at 52% 45%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 48%),
    linear-gradient(145deg,color-mix(in srgb,var(--solid) 68%,transparent),color-mix(in srgb,var(--surface-2) 42%,transparent));
  box-shadow:0 26px 90px color-mix(in srgb,var(--primary) 11%,transparent),inset 0 1px rgba(255,255,255,.12);
}
.nova-auth .showcase::after{content:"NOVA / OMNICHANNEL";position:absolute;inset-inline-start:28px;bottom:20px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.18em;opacity:.65;font-family:var(--f-latin)}
.nova-auth .orbit{position:absolute;inset:10%;border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:50%;animation:rotate 28s linear infinite}
.nova-auth .orbit::before{content:"";position:absolute;width:8px;aspect-ratio:1;background:var(--cyan);border-radius:50%;box-shadow:0 0 20px var(--cyan);top:8%;left:22%}
@keyframes rotate{to{transform:rotate(360deg)}}
.nova-auth .card{position:absolute;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:var(--surface);backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.nova-auth .inbox{width:min(68%,470px);min-height:336px;border-radius:28px;padding:19px;z-index:2;transform:rotate(-1deg)}
.nova-auth .win{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.nova-auth .mini{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.nova-auth .mini .brand-mark{width:28px;height:28px;border-radius:8px 8px 8px 3px;font-size:14px}
.nova-auth .live{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:99px;background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success);font-size:10px;font-weight:800}
.nova-auth .live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 14%,transparent)}
.nova-auth .convo{display:grid;gap:10px}
.nova-auth .msg{max-width:78%;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--surface-2);font-size:11.5px;line-height:1.5;color:var(--muted);animation:arrive .55s both}
.nova-auth .msg.me{justify-self:end;border-radius:14px 14px 4px 14px;background:linear-gradient(125deg,var(--primary),var(--primary-2));color:#fff;animation-delay:.45s}
.nova-auth .msg:nth-child(3){animation-delay:.9s}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nova-auth .typing{display:flex;gap:4px;padding:12px 14px;width:max-content;background:var(--surface-2);border-radius:14px 14px 14px 4px;animation:arrive .55s 1.35s both}
.nova-auth .typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:bounce 1.1s infinite}
.nova-auth .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{transform:translateY(-4px);opacity:.55}}
.nova-auth .compose{margin-top:18px;height:44px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:space-between;padding-inline:14px 9px;color:var(--muted);font-size:11px}
.nova-auth .send{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--primary);flex:none}
.nova-auth .send svg{width:14px}
.nova-auth .nova[dir="rtl"] .send svg{transform:scaleX(-1)}
.nova-auth .rail{position:absolute;z-index:3;inset-inline-end:7%;top:18%;display:grid;gap:12px}
.nova-auth .ch{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;color:#fff;box-shadow:0 14px 25px rgba(20,33,69,.25);border:4px solid color-mix(in srgb,var(--solid) 90%,transparent);animation:float 4.5s ease-in-out infinite}
.nova-auth .ch svg{width:24px;height:24px;fill:currentColor}
.nova-auth .ch.fb{background:#1877f2}
.nova-auth .ch.ig{background:linear-gradient(135deg,#7b36c5,#e1306c 55%,#f9a03f);animation-delay:-.9s}
.nova-auth .ch.wa{background:#22c76a;animation-delay:-1.8s}
@keyframes float{50%{transform:translateY(-8px)}}
.nova-auth .analytics{width:195px;border-radius:22px;padding:16px;inset-inline-start:5%;bottom:10%;z-index:4;animation:float 5s ease-in-out -2.3s infinite}
.nova-auth .analytics span.lab{color:var(--muted);font-size:10px;font-weight:700}
.nova-auth .analytics strong{display:block;font-size:26px;margin:6px 0 14px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nova-auth .bars{height:45px;display:flex;align-items:end;gap:5px}
.nova-auth .bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--cyan),var(--primary));opacity:.85;transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
.nova-auth .bars i:nth-child(1){height:38%}.bars i:nth-child(2){height:55%;animation-delay:.1s}.bars i:nth-child(3){height:46%;animation-delay:.2s}
.nova-auth .bars i:nth-child(4){height:76%;animation-delay:.3s}.bars i:nth-child(5){height:65%;animation-delay:.4s}.bars i:nth-child(6){height:92%;animation-delay:.5s}
@keyframes grow{from{transform:scaleY(0)}}
.nova-auth .metric{position:absolute;inset-inline-end:6%;bottom:13%;z-index:5;padding:11px 14px;border-radius:16px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700}
.nova-auth .metric-ic{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success);flex:none}

/* ---- toast ---- */
.nova-auth .toast{position:fixed;z-index:20;inset-inline-start:50%;bottom:24px;translate:-50% 30px;padding:12px 16px;color:#fff;background:#10172a;border-radius:13px;box-shadow:var(--shadow);font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,translate .25s}
.nova-auth .nova[dir="rtl"] .toast{translate:50% 30px}
.nova-auth .toast.show{opacity:1;translate:-50% 0}
.nova-auth .nova[dir="rtl"] .toast.show{translate:50% 0}

/* ---- responsive: ONE consolidated set ---- */
@media (max-width:1050px){
.nova-auth .shell{grid-template-columns:minmax(340px,.9fr) minmax(400px,1.1fr);gap:32px}
.nova-auth .showcase{border-radius:32px}
}
@media (max-width:820px){
  .nova-auth .nova{overflow:auto}
.nova-auth .page{height:auto;min-height:100%;padding:16px clamp(16px,5vw,34px) 28px}
.nova-auth .shell{display:flex;flex-direction:column;justify-content:center;height:auto;padding-block:28px 0}
.nova-auth .auth{width:min(100%,460px)}
.nova-auth .showcase{display:none}
.nova-auth h1{font-size:clamp(34px,9vw,48px)}
}
@media (max-width:540px){
.nova-auth .page{padding:14px 16px 24px}
.nova-auth .ctl{min-width:38px;height:38px;padding:0 10px}
.nova-auth .ctl .lbl{display:none}
.nova-auth h1{letter-spacing:-.035em}
.nova-auth .subtitle{font-size:13.5px}
}
@media (max-height:720px) and (max-width:820px){
.nova-auth .eyebrow{display:none}
.nova-auth .subtitle{margin:8px 0 14px}
.nova-auth h1{font-size:34px}
.nova-auth .field{margin-bottom:9px}
.nova-auth .input-wrap input, .nova-auth .btn{height:46px}
.nova-auth .divider{margin:10px 0}
}
@media (prefers-reduced-motion:reduce){
  .nova *,.nova *::before,.nova *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}