/* ─────────────────────────────────────────────────────────────────────────────
   "Set your password" overlay in the club, referee and DC portals, dressed in the
   shared WPC sign-in look (css/wpc-auth.css): the national-team photo under a navy
   tint, the white card, the WPC red primary button. Markup and script hooks
   (#forcePwOverlay, #fNewPw, #fConfirmPw, doChangePassword(true)) are untouched —
   this file only restyles them, so it is linked after each page's own <style>.
   Inline styles in the markup need !important to be overridden; nothing else does.
   ───────────────────────────────────────────────────────────────────────────── */
html body .force-pw-overlay {
  background: #0c1723 url(/assets/login-hero.jpg) center 38% / cover no-repeat;
  padding: 24px 16px; overflow-y: auto;
}
html body .force-pw-overlay::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(20,29,59,.86), rgba(20,29,59,.55) 55%, rgba(9,11,15,.7));
}
html body .force-pw-box {
  position: relative; border-radius: 16px; padding: 30px 30px 26px; max-width: 440px; width: 100%;
  text-align: left; box-shadow: 0 28px 70px rgba(4,9,24,.38), 0 2px 6px rgba(4,9,24,.18);
  font-family: "Cerebri Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1B2230; margin: auto;
}
html body .force-pw-box::before {
  content: "WPC Events"; display: block; padding-left: 52px; min-height: 54px; line-height: 54px;
  background: url(/assets/wpc-logo-colour.png) left center / auto 54px no-repeat;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #D52B1E; margin-bottom: 14px;
}
html body .force-pw-box > div:first-child,            /* the 🔐 / lock icon: the logo replaces it */
html body .force-pw-box .force-pw-icon { display: none !important; }
html body .force-pw-box .force-pw-title,
html body .force-pw-box > div:nth-child(2) { font-size: 24px !important; font-weight: 800 !important; color: #1D2951 !important; margin-bottom: 6px !important; }
html body .force-pw-box .force-pw-sub,
html body .force-pw-box > div:nth-child(3) { font-size: 14.5px !important; color: #4A5568 !important; margin-bottom: 18px !important; }
html body .force-pw-box label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; color: #1B2230 !important; }
html body .force-pw-box input[type="password"] {
  font-size: 16px !important; min-height: 46px; border: 1.5px solid #CBD2DD !important; border-radius: 10px !important; padding: 11px 13px !important;
}
html body .force-pw-box input[type="password"]:focus { outline: none; border-color: #1D2951 !important; box-shadow: 0 0 0 3px rgba(29,41,81,.18); }
html body .force-pw-box > button {
  display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 50px;
  background: #D52B1E !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
  font-size: 16px !important; font-weight: 800 !important; cursor: pointer; margin-top: 8px !important;
  box-shadow: 0 6px 16px rgba(213,43,30,.28);
}
html body .force-pw-box > button:hover { background: #B3241A !important; }
html body .force-pw-box > button:focus-visible { outline: 3px solid #1D2951; outline-offset: 3px; }