/* =====================================================================
   Majis portal · "New design" theme (v2)
   Loaded AFTER portal.css. Visual layer only: no markup logic, roles or
   workflow depend on anything here. Majis colours are unchanged; only
   lighter/darker shades of the same four colours are added.
   Teal is used as a fill with NAVY text (never white text on teal).
   ===================================================================== */
:root {
  --navy-950: #001733;
  --navy-900: #00224a;
  --navy-800: #003777;          /* = --majis-blue */
  --navy-700: #0a4a92;
  --teal-600: #009583;
  --teal-50:  #e6f8f5;
  --sky-50:   #eefbfe;

  --bg: #f4f7fb;
  --line: #e1e8f0;
  --line-strong: #c6d2df;
  --surface-2: #f7f9fc;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 34, 74, .04), 0 8px 24px rgba(0, 34, 74, .06);
  --shadow-lg: 0 22px 50px rgba(0, 34, 74, .16);
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --sidebar: 256px;
  --vx-grid: linear-gradient(rgba(178, 240, 251, .06) 1px, transparent 1px),
             linear-gradient(90deg, rgba(178, 240, 251, .06) 1px, transparent 1px);
}

body { font: 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; background: var(--bg); }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-weight: 700; }
::selection { background: var(--majis-aqua); color: var(--navy-900); }

/* ---------- sidebar: deep navy with grid texture ---------- */
.sidebar {
  background: var(--vx-grid), linear-gradient(175deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  background-size: 36px 36px, 36px 36px, auto;
  box-shadow: inset -1px 0 0 rgba(178, 240, 251, .08);
}
.sidebar .nav { padding: 18px 12px; gap: 3px; }
.nav .nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--majis-aqua); opacity: .75; padding: 16px 12px 6px; display: flex; align-items: center; gap: 8px; }
.nav .nav-label::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--majis-teal); }
.nav a { border-left: 0; border-radius: 10px; padding: 9px 12px; font-weight: 500; color: #dbe7f5; transition: background .2s, color .2s, transform .2s; position: relative; }
.nav a:hover { background: rgba(178, 240, 251, .08); color: #fff; transform: translateX(2px); }
.nav a.active { background: rgba(0, 175, 155, .16); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(0, 175, 155, .35); }
.nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--majis-teal); }
.nav .count { background: var(--majis-teal); color: var(--navy-900); font-weight: 800; }
.sidebar .foot { border-top-color: rgba(178, 240, 251, .12); color: #a9bdd4; opacity: 1; }

/* ---------- top bar: sticky, blurred ---------- */
.topbar { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-height: 60px; transition: box-shadow .25s; }
.topbar.vx-scrolled { box-shadow: 0 6px 24px rgba(0, 34, 74, .08); }
.topbar .title { font-weight: 700; letter-spacing: -.01em; }
.bell { border-radius: 10px; }
.whoami .name { font-weight: 700; color: var(--navy-800); }
.demo-banner { background: linear-gradient(90deg, var(--majis-aqua), #d9f7fd); color: var(--navy-900); }

/* ---------- page head = navy hero band ---------- */
.content > .page-head {
  position: relative; overflow: hidden; margin: 0 -24px 22px; padding: 30px 24px 32px; align-items: flex-end;
  background: var(--vx-grid), radial-gradient(900px 320px at 90% -60%, rgba(0, 175, 155, .38), transparent 70%),
              linear-gradient(135deg, var(--navy-800), var(--navy-900));
  background-size: 44px 44px, 44px 44px, auto, auto;
  color: #fff;
}
.content > .page-head:first-child { margin-top: -22px; }
.content > .page-head h1 { color: #fff; font-size: 28px; }
.content > .page-head h1::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--majis-teal); margin-bottom: 12px; }
.content > .page-head p { color: #c3d3e6; }
.content > .page-head a:not(.btn) { color: var(--majis-aqua); }
.content > .page-head .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.content > .page-head .btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.content > .page-head .btn.primary { background: var(--majis-teal); border-color: var(--majis-teal); color: var(--navy-900); box-shadow: 0 8px 20px rgba(0, 175, 155, .3); }
.content > .page-head .btn.primary:hover { background: #12c2ad; border-color: #12c2ad; }
.content > .page-head .badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
/* Stat cards that follow the head overlap the band, like the Vista hero. */
.content > .page-head:has(+ .stats) { padding-bottom: 78px; }
.content > .page-head + .stats { margin-top: -66px; position: relative; z-index: 1; }

/* ---------- stat cards ---------- */
.stats { gap: 16px; }
.stat { border: 1px solid var(--line); border-top: 0; border-radius: var(--radius); padding: 18px 18px 16px; background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--majis-teal), var(--majis-aqua)); }
.stat.alert::before { background: var(--bad); }
.stat.warn::before { background: #D08A00; }
a.stat::after { content: "→"; position: absolute; right: 16px; top: 16px; color: var(--muted); font-weight: 700; transition: transform .2s, color .2s; }
a.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--majis-teal); }
a.stat:hover::after { transform: translateX(4px); color: var(--teal-600); }
a.stat:hover .label { text-decoration: none; color: var(--navy-800); }
.stat .label { font-size: 12.5px; padding-right: 22px; }
.stat .value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }

/* ---------- cards / panels ---------- */
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.card > .card-head { padding: 16px 20px; }
.card > .card-head h2 { display: flex; align-items: center; gap: 10px; }
.card > .card-head h2::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--majis-teal); flex: none; }
.card > .card-body { padding: 18px 20px; }
.card > .card-body.flush { padding: 0; }
.money-chip { border-radius: 12px; padding: 10px 14px; background: linear-gradient(135deg, var(--sky-50), #fff); }
.money-chip .amt { font-weight: 800; }

/* ---------- tables ---------- */
.card .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.table th { font-size: 11px; font-weight: 700; letter-spacing: .09em; background: var(--surface-2); padding: 11px 14px; }
.table td { padding: 13px 14px; }
.table tbody tr { transition: background .15s, box-shadow .15s; }
.table tbody tr:hover { background: var(--sky-50); box-shadow: inset 3px 0 0 var(--majis-teal); }
.table tbody tr:has(.empty):hover { background: none; box-shadow: none; }
.table .ref a { text-decoration: none; color: var(--navy-800); }
.table .ref a:hover { color: var(--majis-deep); text-decoration: underline; }

/* ---------- badges = soft pills with a dot ---------- */
.badge { padding: 4px 11px; font-weight: 700; font-size: 11.5px; }
.badge-info { background: #e8eefb; color: var(--majis-deep); }
.badge-brand { background: var(--teal-50); color: var(--majis-teal-text); }

/* ---------- buttons ---------- */
.btn { border-radius: 10px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.primary { background: var(--navy-800); border-color: var(--navy-800); }
.btn.primary:hover { background: var(--navy-900); border-color: var(--navy-900); box-shadow: 0 8px 20px rgba(0, 55, 119, .25); }
.btn.link:hover, .btn[disabled]:hover, .btn.is-busy:hover { transform: none; box-shadow: none; }
.btn.small { border-radius: 8px; }

/* ---------- forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); min-height: 42px; padding: 9px 12px;
  transition: border-color .2s, box-shadow .2s, background .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--majis-teal); background: #fff; box-shadow: 0 0 0 4px rgba(0, 175, 155, .15); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: #eef2f6; }
.filters { background: var(--surface-2); padding: 16px 20px; border-radius: var(--radius) var(--radius) 0 0; }
fieldset.section { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
fieldset.section > legend { padding: 14px 20px; background: linear-gradient(90deg, var(--sky-50), #fff); }
fieldset.section > legend .step { background: var(--majis-teal); color: var(--navy-900); font-weight: 800; width: 26px; height: 26px; }
fieldset.section > .section-body { padding: 18px 20px; }
.total-box { border-radius: 12px; font-weight: 800; }
.sticky-actions { background: rgba(244, 247, 251, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- messages / notices ---------- */
.messages li, .notice { border-radius: 12px; }
.messages li { box-shadow: var(--shadow); }

/* ---------- invoice header = navy hero card ---------- */
.inv-head { position: relative; overflow: hidden; border: 0; border-radius: var(--radius); padding: 22px 24px; color: #fff; box-shadow: var(--shadow-lg);
  background: var(--vx-grid), radial-gradient(700px 260px at 95% -50%, rgba(0, 175, 155, .4), transparent 70%),
              linear-gradient(135deg, var(--navy-800), var(--navy-900));
  background-size: 40px 40px, 40px 40px, auto, auto; }
.inv-head .ref { color: #fff; font-size: 28px; letter-spacing: -.01em; }
.inv-head .muted { color: #b9cbe0; }
.inv-head .meta { border-top-color: rgba(178, 240, 251, .16); }
.inv-head .kv .k { color: var(--majis-aqua); opacity: .85; }
.inv-head .kv .v { color: #fff; }
.inv-head .kv .v.big { color: var(--majis-aqua); font-size: 22px; font-weight: 800; }
.inv-head .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.inv-head .btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.inv-head .btn.primary { background: var(--majis-teal); border-color: var(--majis-teal); color: var(--navy-900); }
.inv-head a:not(.btn) { color: var(--majis-aqua); }
.section-nav { background: rgba(244, 247, 251, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); top: 60px; }
.section-nav a { border-radius: 999px; transition: all .2s; }
.section-nav a:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.balance { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.balance .v { font-weight: 800; }
.actions-panel { border-top: 0; position: relative; overflow: hidden; }
.actions-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--majis-teal), var(--majis-aqua)); }

/* ---------- approval route + history timeline ---------- */
.route { gap: 0; position: relative; }
.route-stage { border: 0; border-radius: 12px; padding: 10px 12px 10px 46px; position: relative; background: none; }
.route-stage::before { content: ""; position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; box-sizing: border-box; }
.route-stage:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 35px; bottom: -11px; width: 2px; background: var(--line); }
.route-stage.done::before { background: var(--majis-teal); border-color: var(--majis-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300224a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center; }
.route-stage.done:not(:last-child)::after { background: var(--majis-teal); }
.route-stage.current { background: var(--sky-50); box-shadow: inset 0 0 0 1px var(--majis-aqua); }
.route-stage.current::before { border-color: var(--navy-800); background: var(--majis-aqua); box-shadow: 0 0 0 5px rgba(0, 175, 155, .18); animation: vx-pulse 1.8s ease-in-out infinite; }
@keyframes vx-pulse { 50% { box-shadow: 0 0 0 9px rgba(0, 175, 155, .05); } }
.timeline::before { background: linear-gradient(var(--majis-teal), var(--line)); }
.timeline li::before { box-shadow: 0 0 0 4px #fff; }
.timeline .why { border-radius: 10px; }
.doc, .comment { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.doc:hover { border-color: var(--majis-teal); box-shadow: var(--shadow); }

/* ---------- charts ---------- */
.bar .track { height: 10px; border: 0; background: #e8eef5; border-radius: 99px; }
.bar .fill { border-radius: 99px; background: linear-gradient(90deg, var(--majis-teal), #4fd1c0); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }

/* ---------- dialogs ---------- */
dialog { border-radius: 16px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(0, 23, 51, .55); backdrop-filter: blur(3px); }
dialog .dlg-head { background: linear-gradient(90deg, var(--sky-50), #fff); }
.update-bar { border-radius: 12px; background: var(--navy-900); }

/* ---------- scroll reveal (added by theme-vista.js; content is visible without JS) ---------- */
.vx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.vx-reveal.vx-in { opacity: 1; transform: none; }

/* =====================================================================
   Sign-in, registration and password pages
   ===================================================================== */
.login-page.has-photos { background: var(--vx-grid), radial-gradient(1200px 600px at 10% -10%, var(--navy-700), transparent 60%),
  linear-gradient(160deg, var(--navy-800), var(--navy-950) 75%); background-size: 44px 44px, 44px 44px, auto, auto; }
.vx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.login-brand { background: rgba(255, 255, 255, .94); border-radius: 14px; }

/* New split sign-in layout */
.vx-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; }
.vx-brand { position: relative; overflow: hidden; color: #fff; padding: 36px clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 32px;
  background: var(--vx-grid), radial-gradient(1200px 600px at 10% -10%, var(--navy-700), transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950) 75%);
  background-size: 44px 44px, 44px 44px, auto, auto; }
.vx-brand .vx-canvas { position: absolute; }
.vx-brand > *:not(canvas) { position: relative; z-index: 1; }
.vx-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; align-self: flex-start;
  background: rgba(255, 255, 255, .95); padding: 9px 16px 9px 10px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.vx-logo img { height: 44px; width: auto; display: block; }
.vx-logo .wordmark { font-size: 18px; }
.vx-logo .t { border-left: 1px solid var(--line); padding-left: 14px; line-height: 1.25; }
.vx-logo .t strong { display: block; color: var(--navy-800); font-size: 13.5px; }
.vx-logo .t span { color: var(--muted); font-size: 12px; }
.vx-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(178, 240, 251, .1);
  border: 1px solid rgba(178, 240, 251, .2); font-size: 13px; color: #d7f6fc; }
.vx-badge b { background: var(--majis-teal); color: var(--navy-900); padding: 3px 10px; border-radius: 99px; font-size: 11px; letter-spacing: .08em; }
.vx-display { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 18px 0 14px; }
.vx-rot { color: var(--majis-aqua); display: inline-block; }
.vx-rot span { display: inline-block; animation: vx-rot-in .5s ease; }
@keyframes vx-rot-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vx-lead { color: #c3d3e6; max-width: 520px; margin: 0; font-size: 15.5px; }
.vx-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 13.5px; color: #d7e3f0; }
.vx-trust span { display: inline-flex; align-items: center; gap: 8px; }
.vx-trust svg { width: 16px; height: 16px; color: var(--majis-teal); }
.vx-flow { max-width: 520px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(178, 240, 251, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 20px; padding: 20px 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.vx-flow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14.5px; }
.vx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--majis-aqua); text-transform: uppercase; letter-spacing: .12em; }
.vx-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--majis-teal); animation: vx-live 1.8s infinite; }
@keyframes vx-live { 0% { box-shadow: 0 0 0 0 rgba(0, 175, 155, .6); } 70% { box-shadow: 0 0 0 10px rgba(0, 175, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 175, 155, 0); } }
.vx-flow-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.vx-flow-row:first-of-type { border-top: 0; }
.vx-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 175, 155, .16); color: var(--majis-aqua); display: grid; place-items: center; }
.vx-ico svg { width: 18px; height: 18px; }
.vx-flow-row b { display: block; font-size: 13.5px; font-weight: 600; }
.vx-flow-row small { font-size: 12px; color: #9fb3cb; }
.vx-flow-row em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--majis-teal); }
.vx-flow-row em.wait { color: var(--majis-aqua); }
.vx-progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 8px; }
.vx-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--majis-teal), var(--majis-aqua)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.vx-brand-foot { margin-top: auto; font-size: 12.5px; color: #8fa6c2; }

.vx-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.vx-side .login-card { box-shadow: none; border-radius: 0; width: min(430px, 100%); overflow: visible; background: #fff; animation: vx-card-in .7s cubic-bezier(.2, .8, .2, 1) both .1s; }
.vx-side .login-card.shake { animation: vx-card-in .7s both .1s, card-shake .5s .9s; }
@keyframes vx-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vx-side .login-card .top { border: 0; text-align: left; padding: 0 0 22px; }
.vx-side .login-card form { padding: 0; gap: 16px; }
.vx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--majis-teal-text); }
.vx-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--majis-teal); border-radius: 2px; }
.vx-side h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 6px; color: var(--navy-900); }
.vx-side .top p { color: var(--muted); margin: 0; }
.vx-side .login-card input[type=email], .vx-side .login-card input[type=password], .vx-side .login-card input[type=text] { min-height: 48px; }
.vx-side .login-card .btn.primary { min-height: 50px; font-size: 15px; border-radius: 12px; }
.vx-secure { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 13px 15px; border-radius: 12px; background: var(--sky-50); border: 1px solid #d3f3fa; font-size: 12.5px; color: #2a4a6b; }
.vx-secure svg { width: 18px; height: 18px; flex: none; color: var(--navy-800); margin-top: 1px; }
.vx-side .register-cta { width: min(430px, 100%); background: var(--surface-2); border: 1.5px dashed var(--line-strong); color: var(--navy-800); backdrop-filter: none; }
.vx-side .register-cta:hover { background: var(--teal-50); border-color: var(--majis-teal); color: var(--navy-900); }
.vx-side .login-foot { color: var(--muted); text-shadow: none; }

/* Registration / password pages keep their card, now on the navy background */
.login-page.has-photos .login-card { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 10, 30, .45); }
.login-page.has-photos .login-card .top { border-bottom: 0; background: linear-gradient(90deg, var(--sky-50), #fff); box-shadow: inset 0 -3px 0 var(--majis-teal); }

@media (max-width: 980px) {
  .vx-login { grid-template-columns: minmax(0, 1fr); }
  .vx-brand { padding: 24px 20px 28px; gap: 20px; }
  .vx-flow, .vx-brand-foot { display: none; }
  .vx-display { font-size: 30px; }
}
@media (max-width: 860px) {
  .content > .page-head { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .content > .page-head:first-child { margin-top: -16px; }
  .sidebar { background-size: 36px 36px, 36px 36px, auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-reveal { opacity: 1; transform: none; }
  .route-stage.current::before, .vx-live::before, .vx-rot span, .vx-side .login-card { animation: none; }
}
@media print {
  .content > .page-head, .inv-head { background: #fff !important; color: var(--text) !important; box-shadow: none; }
  .content > .page-head h1, .inv-head .ref, .inv-head .kv .v { color: var(--majis-blue) !important; }
}

/* small fixes */
.content > .page-head .req::after, .content > .page-head .req { color: #ffb4ab; }
.login-page.has-photos.public-page { padding-top: 124px; }

/* ---------- Majis photo slideshow (same photos as the current design) ---------- */
/* Sign-in: photos fill the left panel, under a navy tint so the text stays readable. */
.vx-brand .login-bg { position: absolute; inset: 0; z-index: 0; }
.vx-brand .login-bg::after { background:
  linear-gradient(100deg, rgba(0, 23, 51, .90) 0%, rgba(0, 34, 74, .78) 45%, rgba(0, 55, 119, .45) 100%),
  var(--vx-grid); background-size: auto, 44px 44px, 44px 44px; }
.vx-brand .login-dots { position: absolute; left: auto; right: clamp(16px, 3vw, 40px); bottom: 20px; z-index: 2; }
.vx-brand > .login-bg, .vx-brand > .login-dots { position: absolute; }
/* Registration and password pages: the photos show full screen again, as in the current design. */
.login-page.has-photos { background: #0B2A4A; }
@media (max-width: 980px) { .vx-brand .login-dots { display: none; } }