/* Zcode login page (/vipclub/login.php) in the Wall 3.0 look - same card as the approved login popup v2 (24 Oct 2026).
   Loaded after login_n2.css. Markup and login logic unchanged: body.LoginPG > .LoginBG + .main > .head + .body > .Login
   (header > div > p + p, .Body > .Title/.SubTitle/form .Label/.Input/.error/.ForgotPassword/.Button, footer) + .footer.
   Light mode: html.zw-light (set from the member's Wall theme, localStorage zw.theme, by the small script before this file). */
body.LoginPG { background: #1a1d23 !important; font-family: Montserrat, "Segoe UI", Roboto, Arial, sans-serif !important; }
body.LoginPG .LoginBG { background: linear-gradient(180deg, rgba(16, 18, 22, .55) 0%, rgba(26, 29, 35, .96) 260px, #1a1d23 420px) !important; }
body.LoginPG .body { padding: 0 12px !important; }

body.LoginPG .Login { box-sizing: border-box; width: min(420px, 100%) !important; max-width: 420px !important; margin: -130px auto 40px !important; padding: 0 !important; position: relative; z-index: 1;
  border-radius: 20px !important; overflow: hidden; background: #2b3039 !important; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(245, 197, 24, .08); }

body.LoginPG .Login header { padding: 24px 24px 20px !important; border-radius: 0 !important; text-align: left !important; text-transform: none !important;
  background: radial-gradient(120% 140% at 0% 0%, rgba(245, 197, 24, .16), rgba(245, 197, 24, 0) 55%), #23272f !important; border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.LoginPG .Login header > div { display: flex !important; flex-direction: column; justify-content: center; gap: 6px; min-height: 52px !important; padding: 0 0 0 66px !important;
  background: url(/images/login_logo.png) 0 50% / 52px 52px no-repeat !important; }
body.LoginPG .Login header p { margin: 0 !important; padding: 0 !important; }
body.LoginPG .Login header > div > p:first-child { font: 700 26px/1 "Barlow Condensed", "Arial Narrow", Montserrat, sans-serif !important; letter-spacing: .02em; text-transform: uppercase; color: #fff !important; }
/* the club's line says "Powered by zcodesystem" under "ZCodeSystem Login": shown as "Powered by Zcode 3.0" (Mike) */
body.LoginPG .Login header > div > p + p { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
body.LoginPG .Login header > div > p + p::after { content: "Powered by Zcode 3.0"; display: block; font: 700 10.5px/1.2 Montserrat, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f2cd4b; }

body.LoginPG .Login .Body { padding: 22px 24px 20px !important; background: #2b3039 !important; color: #e6e8eb; }
body.LoginPG .Login .Body .Title { margin: 0 0 4px !important; padding: 0 !important; font: 700 24px/1.1 "Barlow Condensed", "Arial Narrow", Montserrat, sans-serif !important; letter-spacing: .02em; text-transform: uppercase; color: #fff !important; }
body.LoginPG .Login .Body .SubTitle { margin: 0 0 18px !important; padding: 0 !important; font: 500 13.5px/1.4 Montserrat, Arial, sans-serif !important; color: #9aa1ad !important; }
body.LoginPG .Login .Body .SubTitle p { margin: 0 !important; padding: 0 !important; }
body.LoginPG .Login .Body .Label { margin: 0 0 6px !important; padding: 0 !important; font: 600 12.5px/1.2 Montserrat, Arial, sans-serif !important; color: #c4c8cf !important; }
body.LoginPG .Login .Body .Input { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
body.LoginPG .Login .Body .Input > input { box-sizing: border-box !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 12px !important; background: #1f232a !important; color: #fff !important;
  font: 500 15px/46px Montserrat, Arial, sans-serif !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s; }
body.LoginPG .Login .Body .Input > input:focus { border-color: rgba(245, 197, 24, .7) !important; box-shadow: 0 0 0 3px rgba(245, 197, 24, .18) !important; }
body.LoginPG .Login .Body .Input > input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #1f232a inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff; }
body.LoginPG .Login .Body .error { margin: -8px 0 12px !important; color: #fb923c !important; font: 600 12.5px/1.3 Montserrat, Arial, sans-serif !important; }
body.LoginPG .Login .Body .ForgotPassword { margin: -4px 0 18px !important; text-align: right !important; }
body.LoginPG .Login .Body .ForgotPassword a { color: #f2cd4b !important; font: 600 12.5px/1.3 Montserrat, Arial, sans-serif !important; text-decoration: none !important; }
body.LoginPG .Login .Body .ForgotPassword a:hover { text-decoration: underline !important; }
body.LoginPG .Login .Body .Button, body.LoginPG .Login .Body .Button .oBut { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body.LoginPG .Login .Body .Button .oBut input { box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-radius: 12px !important; background: #f5c518 !important; color: #161200 !important; font: 700 15.5px/50px Montserrat, Arial, sans-serif !important; cursor: pointer;
  box-shadow: 0 10px 24px rgba(245, 197, 24, .25) !important; transition: filter .15s, transform .15s; }
body.LoginPG .Login .Body .Button .oBut input:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.LoginPG .Login footer { margin: 0 !important; padding: 16px 24px 20px !important; border-radius: 0 !important; background: #23272f !important; border-top: 1px solid rgba(255, 255, 255, .07);
  color: #9aa1ad !important; font: 600 13px/1.4 Montserrat, Arial, sans-serif !important; text-align: center !important; }
body.LoginPG .Login footer a { color: #f2cd4b !important; text-decoration: none !important; font-weight: 700 !important; }
body.LoginPG .Login footer a:hover { text-decoration: underline !important; }
/* site footer under the card */
body.LoginPG > .footer, body.LoginPG .footer { background: none !important; border: 0 !important; color: #6b7380 !important; }
body.LoginPG .footer a, body.LoginPG .footer span { color: #9aa1ad !important; }

/* light mode (Wall light theme) */
html.zw-light body.LoginPG { background: #eceef1 !important; }
html.zw-light body.LoginPG .LoginBG { background: linear-gradient(180deg, rgba(16, 18, 22, .3) 0, rgba(16, 18, 22, .3) 205px, #eceef1 222px) !important; }   /* banner stays clear (no grey wash), light page below it */
html.zw-light body.LoginPG .Login { background: #fff !important; border-color: rgba(17, 24, 39, .1); box-shadow: 0 30px 80px rgba(16, 24, 40, .22); }
html.zw-light body.LoginPG .Login header { background: #f4f5f7 !important; border-bottom-color: rgba(17, 24, 39, .08); }
html.zw-light body.LoginPG .Login header > div > p:first-child, html.zw-light body.LoginPG .Login .Body .Title { color: #161a20 !important; }
html.zw-light body.LoginPG .Login header > div > p + p::after, html.zw-light body.LoginPG .Login .Body .ForgotPassword a, html.zw-light body.LoginPG .Login footer a { color: #8a6400 !important; }
html.zw-light body.LoginPG .Login .Body { background: #fff !important; color: #161a20; }
html.zw-light body.LoginPG .Login .Body .SubTitle, html.zw-light body.LoginPG .Login footer { color: #5b6472 !important; }
html.zw-light body.LoginPG .Login .Body .Label { color: #3a4250 !important; }
html.zw-light body.LoginPG .Login .Body .Input > input { background: #f4f5f7 !important; border-color: rgba(17, 24, 39, .15) !important; color: #161a20 !important; }
html.zw-light body.LoginPG .Login .Body .Input > input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f4f5f7 inset !important; -webkit-text-fill-color: #161a20 !important; }
html.zw-light body.LoginPG .Login .Body .Button .oBut input { box-shadow: 0 6px 16px rgba(16, 24, 40, .12) !important; }
html.zw-light body.LoginPG .Login footer { background: #f4f5f7 !important; border-top-color: rgba(17, 24, 39, .08); }
html.zw-light body.LoginPG .footer { color: #5b6472 !important; }
html.zw-light body.LoginPG .footer a, html.zw-light body.LoginPG .footer span { color: #3a4250 !important; }

@media (max-width: 480px) {
  body.LoginPG .head { background-size: cover !important; background-position: 50% 0 !important; }   /* the banner photo fills the header (a plain navy band showed under it) */
  body.LoginPG .Login { margin-top: -110px !important; }
  body.LoginPG .Login header { padding: 20px 18px 16px !important; }
  body.LoginPG .Login header > div { min-height: 44px !important; padding-left: 56px !important; background-size: 44px 44px !important; }
  body.LoginPG .Login header > div > p:first-child { font-size: 22px !important; }
  body.LoginPG .Login .Body { padding: 18px 18px 16px !important; }
  body.LoginPG .Login footer { padding: 14px 18px 16px !important; }
}

/* Mike 9 Nov 2026: below the sport banner the page was flat and empty. The banner stays (it is part of the page's look);
   the rest of the page gets a barely visible chart/sports background (login_bg.jpg, generated for this page). */
body.LoginPG { background: #14171d url(/vipclub/wall/login_bg.jpg) 50% 0 / cover no-repeat !important; min-height: 100vh; }
body.LoginPG .LoginBG { background: linear-gradient(180deg, rgba(16, 18, 22, .55) 0%, rgba(16, 18, 22, .55) 200px, rgba(20, 23, 29, .35) 320px, rgba(20, 23, 29, .3) 100%) !important; }
html.zw-light body.LoginPG { background: #eceef1 !important; }
/* Mike 9 Nov 2026: no hard cut between the banner and the background. The banner fades out at the bottom (and at the far
   left/right edges on screens wider than the 1920 px image) into the page background. */
body.LoginPG .main .head { border-bottom: 0 !important; background-color: transparent !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 75%, transparent 100%), linear-gradient(90deg, transparent calc(50% - 960px), #000 calc(50% - 720px), #000 calc(50% + 720px), transparent calc(50% + 960px));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 75%, transparent 100%), linear-gradient(90deg, transparent calc(50% - 960px), #000 calc(50% - 720px), #000 calc(50% + 720px), transparent calc(50% + 960px));
  mask-composite: intersect; }
body.LoginPG .LoginBG { background: linear-gradient(180deg, rgba(16, 18, 22, .5) 0%, rgba(16, 18, 22, .45) 160px, rgba(20, 23, 29, .32) 300px, rgba(20, 23, 29, .3) 100%) !important; }