/* Shared NEARXX auth cinematic stage — login + register, escort + client.
   Asset: brand/neon-night-glamour-river.jpg (approved brunette / neon glamour).
   Image fades into dark purple — no hard vertical seam / boxed photo column. */

:root{
  --auth-bg:#0D0718;
  --auth-input:#1A1428;
  --auth-border:#3B2B4F;
  --auth-pink:#FF2FA4;
  --auth-light:#FF668C;
  --auth-purple:#A322F3;
  --auth-muted:#B8AFCB;
  --auth-white:#FFFFFF;
  --auth-btn:linear-gradient(100deg,#FF668C,#DF159B);
}

html:has(body.auth-home.auth-one),
body.auth-home.auth-one{
  position:relative;
  min-height:100dvh;
  overflow-x:hidden;
  isolation:isolate;
  color:var(--auth-white);
  background:
    radial-gradient(ellipse at 35% 42%,rgba(91,19,77,.22),transparent 58%),
    linear-gradient(110deg,#160B1F 0%,#100819 55%,#0D0718 100%)!important;
}

html[data-auth-mode=register] body.auth-home.auth-one,
html[data-auth-mode=login] body.auth-home.auth-one,
html[data-auth-mode=reset] body.auth-home.auth-one{
  background:
    radial-gradient(ellipse at 35% 42%,rgba(91,19,77,.22),transparent 58%),
    linear-gradient(110deg,#160B1F 0%,#100819 55%,#0D0718 100%)!important;
}

/* Fixed cinematic layer — one asset for every portal/mode */
.auth-stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:transparent;
}

/* Full-bleed photo inside inset:0 stage — top:0 / height:100%, no floating rectangle.
   Rightward fade only (vertical top fade recreates a false “gap” above her head).
   Soft bottom dissolve hides the portrait’s lower edge under the fold. */
.auth-stage-img,
.auth-photo{
  position:absolute;left:-10vw;top:0;bottom:0;
  width:58%;height:100%;
  object-fit:cover;object-position:80% 4%;
  display:block;z-index:0;
  -webkit-mask-image:
    linear-gradient(
      to right,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.95) 60%,
      rgba(0,0,0,.65) 75%,
      rgba(0,0,0,.2) 90%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      rgba(0,0,0,.7) 92%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to right,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.95) 60%,
      rgba(0,0,0,.65) 75%,
      rgba(0,0,0,.2) 90%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      rgba(0,0,0,.7) 92%,
      transparent 100%
    );
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Colour atmosphere above photo, below form */
.auth-stage-fade,
.auth-atmosphere{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(16,8,25,.08) 28%,
      rgba(16,8,25,.35) 48%,
      rgba(13,7,24,.8) 67%,
      #0D0718 92%
    ),
    radial-gradient(
      ellipse at 37% 45%,
      rgba(231,33,120,.10),
      transparent 48%
    );
}

/* Forms / chrome above background layers */
body.auth-home.auth-one > header.escort-desk-site,
body.auth-home.auth-one > #toast,
.auth-content{
  position:relative;z-index:2;
}

/* —— Shared viewport-centred auth panel (login + register, escort + client) —— */
.auth-content-wrapper{
  width:100%;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  z-index:3;
  box-sizing:border-box;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
  overflow-y:auto;
}
.auth-form-panel{
  width:min(480px, calc(100vw - 32px));
  margin-inline:auto;
  position:relative;
  z-index:3;
  box-sizing:border-box;
  background:rgba(17, 9, 29, 0.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255, 102, 188, 0.16);
  border-radius:20px;
  padding:28px;
  box-shadow:0 18px 60px rgba(0,0,0,0.28);
  max-height:none;
}
.auth-form-panel > header.auth-top,
.auth-form-panel > header.site-bar.auth-top,
.auth-form-panel > main.auth-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  position:relative;
  z-index:3;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
  grid-column:auto!important;
}
.auth-form-panel > header.auth-top,
.auth-form-panel > header.site-bar.auth-top{
  min-height:auto!important;
  height:auto!important;
  padding-top:0!important;
  padding-bottom:8px!important;
}
.auth-form-panel > main.auth-shell{
  padding-top:0!important;
  padding-bottom:0!important;
  flex:none!important;
}
.auth-form-panel .auth-card{
  background:transparent!important;
  box-shadow:none!important;
}

/* —— Portrait/tablet register (IMAGE B): brunette left, form right —— */
@media (min-width:500px) and (max-width:1099px){
  html[data-auth-mode=register] .auth-stage-img,
  html[data-auth-mode=register] .auth-photo{
    left:0;top:4%;
    width:42%;height:96%;
    object-fit:cover;
    object-position:82% 10%;
    -webkit-mask-image:
      linear-gradient(
        to right,
        #000 0%,
        #000 38%,
        rgba(0,0,0,.92) 55%,
        rgba(0,0,0,.4) 78%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        #000 6%,
        #000 90%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to right,
        #000 0%,
        #000 38%,
        rgba(0,0,0,.92) 55%,
        rgba(0,0,0,.4) 78%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%,
        #000 6%,
        #000 90%,
        transparent 100%
      );
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  html[data-auth-mode=register] .auth-stage-fade,
  html[data-auth-mode=register] .auth-atmosphere{
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(13,7,24,.08) 26%,
        rgba(13,7,24,.5) 46%,
        rgba(13,7,24,.88) 66%,
        #0D0718 86%
      ),
      radial-gradient(ellipse at 18% 36%,rgba(231,33,120,.12),transparent 46%);
  }
}

/* —— Narrow mobile: face upper-left, stronger dark for readability —— */
@media (max-width:499px){
  .auth-stage-img,
  .auth-photo{
    left:0;top:0;
    width:100%;height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:70% 6%;
    -webkit-mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.75) 48%,
      rgba(0,0,0,.25) 68%,
      transparent 88%
    );
    mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.75) 48%,
      rgba(0,0,0,.25) 68%,
      transparent 88%
    );
  }
  .auth-stage-fade,
  .auth-atmosphere{
    background:
      linear-gradient(
        180deg,
        rgba(13,7,24,.35) 0%,
        rgba(13,7,24,.55) 32%,
        rgba(13,7,24,.88) 58%,
        #0D0718 82%,
        #0D0718 100%
      ),
      linear-gradient(
        105deg,
        rgba(13,7,24,.15) 0%,
        rgba(13,7,24,.45) 40%,
        rgba(13,7,24,.92) 72%,
        #0D0718 100%
      ),
      radial-gradient(ellipse at 30% 18%,rgba(231,33,120,.12),transparent 45%);
  }
  body.auth-home.auth-one{
    padding:0!important;
    box-sizing:border-box;
  }
  body.auth-home.auth-one .auth-form-panel > header.auth-top,
  body.auth-home.auth-one .auth-form-panel > header.site-bar.auth-top,
  body.auth-home.auth-one .auth-form-panel > main.auth-shell{
    max-width:none!important;
    width:100%!important;
    padding-left:0!important;padding-right:0!important;
  }
}

/* Login (non-register) mid widths — keep prior mobile stage */
@media (min-width:500px) and (max-width:899px){
  html:not([data-auth-mode=register]) .auth-stage-img,
  html:not([data-auth-mode=register]) .auth-photo{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:70% 6%;
    -webkit-mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.75) 48%,
      rgba(0,0,0,.25) 68%,
      transparent 88%
    );
    mask-image:linear-gradient(
      to bottom,
      #000 0%,
      #000 28%,
      rgba(0,0,0,.75) 48%,
      rgba(0,0,0,.25) 68%,
      transparent 88%
    );
  }
  html:not([data-auth-mode=register]) .auth-stage-fade,
  html:not([data-auth-mode=register]) .auth-atmosphere{
    background:
      linear-gradient(
        180deg,
        rgba(13,7,24,.35) 0%,
        rgba(13,7,24,.55) 32%,
        rgba(13,7,24,.88) 58%,
        #0D0718 82%,
        #0D0718 100%
      ),
      linear-gradient(
        105deg,
        rgba(13,7,24,.15) 0%,
        rgba(13,7,24,.45) 40%,
        rgba(13,7,24,.92) 72%,
        #0D0718 100%
      ),
      radial-gradient(ellipse at 30% 18%,rgba(231,33,120,.12),transparent 45%);
  }
}

/* —— Desktop: left cinematic photo melts into dark right form —— */
@media (min-width:900px){
  .auth-stage-img,
  .auth-photo{
    left:-10vw;top:0;bottom:0;
    width:58%;height:100%;
    min-width:0;max-width:none;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:80% 4%;
  }
  .auth-stage-fade,
  .auth-atmosphere{
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(16,8,25,.06) 30%,
        rgba(16,8,25,.28) 48%,
        rgba(13,7,24,.72) 66%,
        #0D0718 88%,
        #0D0718 100%
      ),
      radial-gradient(
        ellipse at 37% 45%,
        rgba(231,33,120,.10),
        transparent 48%
      );
  }

  body.auth-home.auth-one{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    padding:0!important;
    box-sizing:border-box;min-height:100dvh;
  }
  body.auth-home.auth-one header.escort-desk-site{display:none!important}

  /* Login chrome sizing — panel itself is viewport-centred via .auth-form-panel */
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-form-panel > header.auth-top,
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-form-panel > header.site-bar.auth-top{
    grid-template-columns:1fr auto 1fr!important;
    background:transparent!important;
  }
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-back-label{display:inline!important}
  html:not([data-auth-mode=register]) body.auth-home.auth-one .xx-logo{height:auto!important;max-height:48px}
  html:not([data-auth-mode=register]) body.auth-home.auth-one .xx-logo .xx-img{max-height:44px!important;width:155px!important;max-width:155px!important}
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-card h2{
    font-size:26px!important;font-weight:800;margin-top:18px!important;
  }
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-lead{
    font-size:14px!important;color:var(--auth-muted)!important;
  }
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-field input,
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-field select,
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-field textarea{
    height:54px!important;border-radius:13px!important;
    background:var(--auth-input)!important;border:1px solid var(--auth-border)!important;
    color:var(--auth-white)!important;font-size:14px!important;
  }
  html:not([data-auth-mode=register]) body.auth-home.auth-one .auth-go:not([hidden]){
    height:56px!important;
    background:var(--auth-btn)!important;
    border:0!important;border-radius:14px!important;
    box-shadow:0 10px 24px rgba(223,21,155,.32)!important;
  }

  /* Register desktop: keep cinematic photo blend; form is viewport-centred */
  html[data-auth-mode=register] .auth-stage-img,
  html[data-auth-mode=register] .auth-photo{
    left:-8vw;top:0;width:52%;height:100%;
    object-position:78% 6%;
  }
}

/* Mobile: full-width glass panel with 16px side margin */
@media (max-width:767px){
  body.auth-home.auth-one{
    padding-left:0!important;
    padding-right:0!important;
  }
  .auth-content-wrapper{
    align-items:flex-start;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
    box-sizing:border-box;
  }
  .auth-form-panel{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding:20px;
    border-radius:18px;
  }
}

/* Final authority: kill any leftover right-column placement on all four auth screens */
html[data-auth-mode=login] body.auth-home.auth-one .auth-form-panel,
html[data-auth-mode=register] body.auth-home.auth-one .auth-form-panel,
html[data-auth-mode=reset] body.auth-home.auth-one .auth-form-panel{
  width:min(480px, calc(100vw - 32px));
  margin-inline:auto;
  left:auto;right:auto;transform:none;
}
html[data-auth-mode=login] body.auth-home.auth-one .auth-content-wrapper,
html[data-auth-mode=register] body.auth-home.auth-one .auth-content-wrapper,
html[data-auth-mode=reset] body.auth-home.auth-one .auth-content-wrapper{
  width:100%;
  justify-content:center;
  align-items:center;
}
@media (max-width:767px){
  html[data-auth-mode=login] body.auth-home.auth-one .auth-content-wrapper,
  html[data-auth-mode=register] body.auth-home.auth-one .auth-content-wrapper,
  html[data-auth-mode=reset] body.auth-home.auth-one .auth-content-wrapper{
    align-items:flex-start;
    padding-left:16px;
    padding-right:16px;
  }
  html[data-auth-mode=login] body.auth-home.auth-one .auth-form-panel,
  html[data-auth-mode=register] body.auth-home.auth-one .auth-form-panel,
  html[data-auth-mode=reset] body.auth-home.auth-one .auth-form-panel{
    width:100%;
  }
}

/* Very narrow phones — subdue art so inputs never squeeze */
@media (max-width:360px){
  .auth-stage-img,
  .auth-photo{opacity:.7;object-position:68% 4%}
  .auth-stage-fade,
  .auth-atmosphere{
    background:
      linear-gradient(180deg,rgba(13,7,24,.5) 0%,#0D0718 55%,#0D0718 100%),
      linear-gradient(105deg,rgba(13,7,24,.35),#0D0718 60%,#0D0718);
  }
}