/* =====================================================================
   account-flow.css -- Sign-up popup + Account Portal pages
   (login, verify email, staff check, forgot username, forgot password,
   enter code, new password). Matches the approved prototype v8.
   Brand colour comes from the Theme Manager (skin_manager.css).
   Every rule is scoped to #signUpModal, #loginModal or .af-portal.
   The login popup is the portal card inside a Bootstrap modal (.modal-dialog.af-portal).
   ===================================================================== */
#signUpModal, #loginModal, #rpModal, body.af-portal{
  --af-red:var(--front_primary_brand, #a00a0f); --af-red-dark:var(--front_primary_brand_hover, color-mix(in srgb, var(--af-red) 80%, #000));
  --af-ink:#1a1a1a; --af-text:#333; --af-gray:#666; --af-muted:#8a8a8a; --af-ok:#2f7a3b;
  --af-border:#e0e0e0; --af-border-hover:#cfcfcf; --af-radius:12px; --af-field-radius:6px;
  --af-shadow:0 16px 48px rgba(0,0,0,.22);
}

#signUpModal *,#signUpModal *::before,#signUpModal *::after,
#loginModal *,#loginModal *::before,#loginModal *::after,
#rpModal *,#rpModal *::before,#rpModal *::after,
body.af-portal *,body.af-portal *::before,body.af-portal *::after{box-sizing:border-box}

/* ---------- portal page shell (replaces .panel.login-screen) ---------- */
body.af-portal{margin:0;min-height:100vh;min-height:100dvh;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--af-text);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  background:#4a4a4a center/cover no-repeat}
.af-portal .page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.af-portal .pg-wrap{width:100%;max-width:450px}
.af-portal .pg-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0 0 8px 2px;padding:0 10px 0 6px;border-radius:999px;color:#fff;text-decoration:none;font-size:13px;font-weight:500;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.af-portal .pg-back:hover{background:rgba(0,0,0,.45)}
.af-portal .pg-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.af-portal .pg-card{background:#fff;border-radius:var(--af-radius);box-shadow:var(--af-shadow)}
.af-portal .pg-logo{display:flex;justify-content:center;padding:22px 0 0}
.af-portal .pg-logo img{width:160px;height:auto;display:block}
.af-portal .pg-helpline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;padding:12px 18px 14px;border-top:1px solid rgba(0,0,0,.06);background:#fafafa;border-radius:0 0 var(--af-radius) var(--af-radius);font-size:12px;color:var(--af-gray)}
.af-portal .pg-helpline .dot,.af-portal .pg-help .dot{width:3px;height:3px;border-radius:50%;background:#c4c4c4}
.af-portal .pg-helpline .legal{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.af-portal .pg-helpline a{font-weight:500;color:var(--af-gray);text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:2px}
.af-portal .pg-helpline a:hover{color:var(--af-red)}
/* !important: the frontend bootstrap sets a:hover{text-decoration:none !important} */
.af-portal .pg-helpline a:not(.help-main):hover{text-decoration:underline !important;text-decoration-color:currentColor !important}
.af-portal .pg-helpline a.help-main{color:var(--af-red);font-weight:600;text-decoration:none}
.af-portal .pg-help{display:flex;justify-content:center;align-items:center;gap:10px;margin:-4px 0 0;font-size:13px}
.af-portal .acct-chip{display:flex;justify-content:center}
.af-portal .acct-chip span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;background:#f3f3f3;font-size:12.5px;color:var(--af-gray)}
.af-portal .acct-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.af-portal .acct-chip strong{color:var(--af-ink);font-weight:600}
.af-portal .pm-username{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0!important;opacity:0;pointer-events:none}
.af-portal .trust-row{display:flex;justify-content:center}

/* ---------- shared card pieces ---------- */
#signUpModal .su-head,#rpModal .su-head,.af-portal .su-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--af-red);color:#fff;padding:8px 15px 8px 28px;min-height:60px;border-radius:var(--af-radius) var(--af-radius) 0 0}
.af-portal .su-head{padding:8px 28px;min-height:59px}
#signUpModal .su-title,#rpModal .su-title,.af-portal .su-title{margin:0;font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;line-height:1.3}
.af-portal .su-title{font-size:14px;font-weight:600;letter-spacing:1.1px}
#loginModal .su-close,#signUpModal .su-close,#rpModal .su-close{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:transparent;padding:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;transition:background .18s}
#loginModal .su-close svg,#signUpModal .su-close svg,#rpModal .su-close svg{width:24px;height:24px;fill:#fff;transition:transform .2s}
#loginModal .su-close:hover,#loginModal .su-close:focus-visible,#signUpModal .su-close:hover,#signUpModal .su-close:focus-visible,#rpModal .su-close:hover,#rpModal .su-close:focus-visible{background:rgba(255,255,255,.16)}
#loginModal .su-close:hover svg,#loginModal .su-close:focus-visible svg,#signUpModal .su-close:hover svg,#signUpModal .su-close:focus-visible svg,#rpModal .su-close:hover svg,#rpModal .su-close:focus-visible svg{transform:rotate(90deg)}
#loginModal .su-close:focus-visible,#signUpModal .su-close:focus-visible,#rpModal .su-close:focus-visible{outline:2px solid #fff !important;outline-offset:2px}

#signUpModal .su-form,#rpModal .su-form,.af-portal .su-form{padding:24px 28px 22px;display:flex;flex-direction:column;gap:16px;margin:0}
.af-portal .su-form{padding-top:18px}
#signUpModal .su-intro,.af-portal .su-intro{margin:0;font-size:13.5px;line-height:1.55;color:var(--af-gray);text-wrap:balance}
.af-portal .su-intro{text-align:center;max-width:360px;margin:0 auto;line-height:1.6}
#signUpModal .su-perks,#rpModal .su-perks{list-style:none;margin:-4px 0 0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:#faf7f7;border:1px solid color-mix(in srgb, var(--af-red) 10%, transparent);border-radius:10px}
#signUpModal .su-perks li,#rpModal .su-perks li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;color:var(--af-text)}
#signUpModal .pk,#rpModal .pk{flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb, var(--af-red) 8%, transparent);color:var(--af-red);display:flex;align-items:center;justify-content:center}
#signUpModal .pk svg,#rpModal .pk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signUpModal .su-perks strong,#rpModal .su-perks strong{font-weight:600;color:var(--af-ink)}

.af-portal .su-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.af-portal .su-hero-icon{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb, var(--af-red) 8%, transparent);color:var(--af-red);display:flex;align-items:center;justify-content:center}
.af-portal .su-hero-icon.ok{background:rgba(47,122,59,.10);color:var(--af-ok)}
.af-portal .su-hero-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.af-portal .su-hero h2{margin:2px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--af-ink);text-wrap:balance}
.af-portal .su-hero p{margin:0;font-size:13.5px;line-height:1.6;color:var(--af-gray);max-width:360px;text-wrap:balance}
.af-portal .su-hero p strong{color:var(--af-ink);font-weight:600;white-space:nowrap}

#signUpModal .su-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#signUpModal .su-label,.af-portal .su-label{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--af-gray);margin:0 0 6px}
.af-portal .su-label{font-size:10.5px;letter-spacing:.5px}
#signUpModal .su-label .req{color:var(--af-red);margin-left:2px}
#signUpModal .su-wrap,.af-portal .su-wrap{position:relative}

#signUpModal .su-input,.af-portal .su-input{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;padding:0 13px;border:1px solid var(--af-border);border-radius:var(--af-field-radius);background:#fff;box-shadow:none;font-family:inherit;font-size:14px;color:var(--af-text);outline:none;transition:border-color .15s,box-shadow .15s}
.af-portal .su-input{height:50px;font-size:15px}
#signUpModal .su-input::placeholder,.af-portal .su-input::placeholder{color:var(--af-muted)}
#signUpModal .su-input:hover,.af-portal .su-input:hover{border-color:var(--af-border-hover)}
#signUpModal .su-input:focus,.af-portal .su-input:focus{border-color:var(--af-red);box-shadow:0 0 0 3px color-mix(in srgb, var(--af-red) 10%, transparent)}
#signUpModal .su-input.has-btn,.af-portal .su-input.has-btn{padding-right:46px}
.af-portal .su-input.has-icon{padding-left:42px}
#signUpModal .su-input.has-dp{padding-left:38px}
.af-portal .su-lead{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--af-gray);pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.af-portal .su-hint{margin:6px 0 0;font-size:12px;color:var(--af-gray)}

/* Edge / Safari draw their own eye / key / contact icons inside fields -- hide them so only ours shows */
#signUpModal input::-ms-reveal,.af-portal input::-ms-reveal,#signUpModal input::-ms-clear,.af-portal input::-ms-clear{display:none!important}
#signUpModal .has-btn::-webkit-credentials-auto-fill-button,.af-portal .has-btn::-webkit-credentials-auto-fill-button,
.af-portal .has-icon::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;position:absolute;right:0}

#signUpModal .su-eye,.af-portal .su-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:6px;background:transparent;color:var(--af-gray);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#signUpModal .su-eye svg,.af-portal .su-eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signUpModal .su-eye:hover,.af-portal .su-eye:hover{background:#eee;color:var(--af-text)}
#signUpModal .su-eye:focus-visible,.af-portal .su-eye:focus-visible{outline:2px solid var(--af-red);outline-offset:2px}

#signUpModal .su-rules,.af-portal .su-rules{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
#signUpModal .su-rule,.af-portal .su-rule{font-size:11.5px;color:var(--af-gray);display:inline-flex;align-items:center;gap:4px}
#signUpModal .su-rule svg,.af-portal .su-rule svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signUpModal .su-rule.ok,.af-portal .su-rule.ok{color:var(--af-ok)}

/* phone field -- existing intl-tel-input, restyled to match */
#signUpModal .iti{width:100%;display:block}
#signUpModal .iti .su-input{padding-left:52px}
#signUpModal .iti__selected-country:hover{background:transparent}

/* date of birth -- existing somi-datepicker trigger, positioned inside the field */
#signUpModal .somi-dp-trigger{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;border-radius:6px;color:var(--af-gray);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:1}
#signUpModal .somi-dp-trigger:hover{color:var(--af-red)}

/* 6-digit code */
.af-portal .code-row{display:flex;justify-content:center;gap:8px;max-width:340px;margin:0 auto;width:100%}
.af-portal .code-box{flex:1 1 0;min-width:0;max-width:48px;height:56px;padding:0;text-align:center;font-family:inherit;font-size:22px;font-weight:600;color:var(--af-ink);border:1px solid var(--af-border);border-radius:8px;background:#fff;outline:none;-webkit-appearance:none;appearance:none}
.af-portal .code-box:focus{border-color:var(--af-red);box-shadow:0 0 0 3px color-mix(in srgb, var(--af-red) 10%, transparent)}
.af-portal .code-field.has-error .code-box{border-color:var(--af-red);background:color-mix(in srgb, var(--af-red) 3%, transparent)}
.af-portal .code-field .su-error{justify-content:center;text-align:center}
.af-portal .code-meta{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;line-height:1.5;color:var(--af-gray);text-align:center}
.af-portal .code-meta span{text-wrap:balance}
.af-portal .link-btn{border:0;background:transparent;padding:0;font-family:inherit;font-size:inherit;font-weight:600;color:var(--af-red);cursor:pointer}
.af-portal .link-btn:hover{text-decoration:underline}
.af-portal .link-btn:focus-visible{outline:2px solid var(--af-red);outline-offset:2px;border-radius:3px}
.af-portal .link-btn:disabled{color:var(--af-muted);cursor:default;text-decoration:none;font-weight:500}

#signUpModal .su-section{display:flex;align-items:center;gap:12px;margin-top:2px}
#signUpModal .su-section span{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--af-red);white-space:nowrap}
#signUpModal .su-section div{flex:1;height:1px;background:rgba(0,0,0,.08)}

#signUpModal .su-check,.af-portal .su-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--af-text);cursor:pointer;font-weight:400;margin:0}
#signUpModal .su-check input,.af-portal .su-check input{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid #c9c9c9;border-radius:5px;background:#fff;flex:none;cursor:pointer;display:grid;place-content:center}
#signUpModal .su-check input:checked,.af-portal .su-check input:checked{background:var(--af-red);border-color:var(--af-red)}
#signUpModal .su-check input:focus-visible,.af-portal .su-check input:focus-visible{outline:2px solid var(--af-red);outline-offset:2px}
#signUpModal .su-check input:checked::after,.af-portal .su-check input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

#signUpModal .su-submit,#rpModal .su-submit,.af-portal .su-submit{width:100%;height:46px;border:0;border-radius:8px;background:var(--af-red);color:#fff;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.af-portal .su-submit{height:50px;font-size:13.5px;font-weight:600;letter-spacing:.5px}
#signUpModal .su-submit:hover,#rpModal .su-submit:hover,.af-portal .su-submit:hover{background:var(--af-red-dark);color:#fff;text-decoration:none}
#signUpModal .su-submit:focus-visible,#rpModal .su-submit:focus-visible,.af-portal .su-submit:focus-visible{outline:2px solid var(--af-red);outline-offset:2px}
#signUpModal .su-submit.is-busy,.af-portal .su-submit.is-busy{pointer-events:none;opacity:.85}
#signUpModal .su-submit .spin,.af-portal .su-submit .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:af-spin .7s linear infinite;display:none}
#signUpModal .su-submit.is-busy .spin,.af-portal .su-submit.is-busy .spin{display:block}
@keyframes af-spin{to{transform:rotate(360deg)}}

#signUpModal .su-terms{margin:-6px 0 0;font-size:12px;color:var(--af-gray);text-align:center}
.af-portal .su-note{margin:0;font-size:12px;line-height:1.5;color:var(--af-gray);text-align:center}
#signUpModal .su-divider,.af-portal .su-divider{height:1px;background:rgba(0,0,0,.07);margin:0 -28px}
#signUpModal .su-foot,.af-portal .su-foot{margin:0;font-size:13px;color:var(--af-gray);text-align:center}
#signUpModal a,#signUpModal .a,.af-portal .pg-card a.a,.af-portal .back-link{color:var(--af-red);text-decoration:none;font-weight:600;cursor:pointer}
#signUpModal a:hover,.af-portal .pg-card a.a:hover{text-decoration:underline !important}
.af-portal .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.af-portal .back-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#signUpModal .su-banner,.af-portal .su-banner{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.5}
#signUpModal .su-banner svg,.af-portal .su-banner svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signUpModal .su-banner.warn,.af-portal .su-banner.warn{background:color-mix(in srgb, var(--af-red) 6%, transparent);color:var(--af-red);border:1px solid color-mix(in srgb, var(--af-red) 14%, transparent)}
.af-portal .su-banner.good{background:rgba(47,122,59,.08);color:var(--af-ok);border:1px solid rgba(47,122,59,.18)}
#signUpModal .su-banner.info,.af-portal .su-banner.info{background:#f7f5f5;color:#3d3d3d;border:1px solid color-mix(in srgb, var(--af-red) 12%, transparent)}
#signUpModal .su-banner.info svg,.af-portal .su-banner.info svg{color:var(--af-red)}
#signUpModal .su-banner.info strong,.af-portal .su-banner.info strong{font-weight:600;color:var(--af-ink)}
#loginModal .su-banner[hidden],#signUpModal .su-banner[hidden]{display:none}

#signUpModal .su-field.has-error .su-input,.af-portal .su-field.has-error .su-input{border-color:var(--af-red);background:color-mix(in srgb, var(--af-red) 3%, transparent)}
#signUpModal .su-error,.af-portal .su-error{display:none;align-items:flex-start;gap:5px;margin-top:6px;font-size:12px;line-height:1.4;font-weight:600;color:var(--af-red)}
.af-portal .su-error{font-weight:500}
#signUpModal .su-error svg,.af-portal .su-error svg{width:13px;height:13px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#signUpModal .has-error>.su-error,.af-portal .has-error>.su-error{display:flex}

/* ---------- sign-up popup: Bootstrap 3 modal shell ---------- */
/* master.css sets html{overflow-y:scroll}; hide the page scrollbar while a popup is open so only the popup scrolls. */
html:has(#signUpModal.in),html:has(#loginModal.in){overflow-y:hidden;scrollbar-gutter:stable}
/* The gutter keeps the page width, so nothing behind the popup shifts sideways; the popup shows its own scrollbar only when it is taller than the screen. */
#signUpModal.in,#loginModal.in{overflow-y:auto}
#signUpModal .modal-dialog{width:auto;max-width:90%;margin:24px auto;padding:0 10px}
#loginModal .modal-content.su-card,#signUpModal .modal-content.su-card{border:0;border-radius:var(--af-radius);box-shadow:var(--af-shadow);background:#fff;overflow:visible}

/* ---------- touch screens: 16px text stops iOS zooming into fields ---------- */
@media (pointer:coarse){
  #signUpModal .su-input,.af-portal .su-input{font-size:16px}
}
@media (max-width:520px){
  /* same 12px side gutter as the portal pages (.af-portal .page) */
  #signUpModal .modal-dialog{max-width:none;margin:16px auto;padding:0 12px}
  #signUpModal .su-head,#rpModal .su-head{padding-left:18px;padding-right:5px}
  .af-portal .su-head{padding:8px 18px}
  #signUpModal .su-form,#rpModal .su-form,.af-portal .su-form{padding:20px 18px}
  #signUpModal .su-divider,.af-portal .su-divider{margin:0 -18px}
  #signUpModal .su-grid.stack{grid-template-columns:1fr}
  #signUpModal .su-input,.af-portal .su-input{font-size:16px}
  .af-portal .page{padding:20px 12px 28px;align-items:flex-start}
  .af-portal .pg-logo{padding-top:18px}
  .af-portal .pg-logo img{width:140px}
  .af-portal .code-row{gap:6px}
  .af-portal .code-box{height:52px;font-size:20px}
  .af-portal .pg-helpline{flex-direction:column;gap:6px}
  .af-portal .pg-helpline .dot-sep{display:none}
}
@media (max-width:359px){
  #signUpModal .su-grid{grid-template-columns:1fr}
  #signUpModal .su-form,#rpModal .su-form,.af-portal .su-form{padding:18px 14px}
  #signUpModal .su-head,#rpModal .su-head{padding-left:14px;padding-right:1px}
  #signUpModal .su-divider,.af-portal .su-divider{margin:0 -14px}
  .af-portal .su-head{padding:8px 14px}
  .af-portal .su-title{font-size:13.5px;letter-spacing:1px}
  .af-portal .code-row{gap:4px}
  .af-portal .code-box{height:48px}
}
@media (max-height:500px) and (orientation:landscape){
  .af-portal .page{align-items:flex-start}
  .af-portal .pg-logo img{width:120px}
}
/* Login: "which account?" picker when one email address has several roles. */
.af-portal .af-roles{display:flex;flex-wrap:wrap;gap:8px 16px}
.af-portal .af-roles label{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:14px;font-weight:500;color:var(--af-text);cursor:pointer}
.af-portal .af-roles input{accent-color:var(--af-red);width:16px;height:16px;margin:0}

/* Date picker wraps the Date of Birth input in .somi-dp-field. */
#signUpModal .somi-dp-field{display:block;position:relative}

/* Older #signUpModal rules in admin/css/common-back-front.css (36px fields, 600px dialog) must not win over the new card. */
#signUpModal input.su-input{height:44px}
#signUpModal .modal-dialog{width:100%}
/* The site-wide "label { font-size: 14px !important }" (common-back-front.css) must not resize the popup labels. */
#signUpModal label.su-label{font-size:11px !important}
#signUpModal label.su-check{font-size:13px !important}
/* master.css gives every label width:150px; popup labels size to their content. */
#signUpModal label.su-label,#signUpModal label.su-check{width:auto}
/* The old flex modal stretches the dialog to the viewport height and clips it; let it grow so the modal scrolls. */
#signUpModal .modal-dialog{align-self:flex-start;overflow:visible}

/* ---------- login popup: the portal card in a Bootstrap 3 modal ---------- */
#loginModal{font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--af-text)}
/* margin:auto centres the card in the flex modal and still lets a taller card scroll from its top */
#loginModal .modal-dialog{width:100%;max-width:470px;margin:auto;padding:24px 10px;overflow:visible}
#loginModal .su-head{padding:8px 15px 8px 28px}
#loginModal .loginInputContainer{display:flex;flex-direction:column;gap:16px}
#loginModal .errorMessages:empty,#loginModal .hasMultipleAccounts:empty{display:none}
#loginModal input.su-input{height:44px}
#loginModal label.su-label{font-size:10.5px !important;width:auto}
#loginModal label.su-check{font-size:13px !important;width:auto}
@media (max-width:520px){
  #loginModal .modal-dialog{padding:16px 12px}
  #loginModal .su-head{padding-left:18px;padding-right:5px}
}
@media (max-width:359px){
  #loginModal .su-head{padding-left:14px;padding-right:1px}
}

/* ---------- sign-up popup on the Account Portal login page (no Bootstrap there) ---------- */
body.af-portal #signUpModal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;overflow-x:hidden;overflow-y:auto;background:rgba(0,0,0,.5);font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.af-portal #signUpModal.in{display:flex}
body.af-portal.af-modal-open{overflow:hidden}
body.af-portal .loginLoading{display:none}
/* common-back-front.css (loaded there for the date picker) has "label { font-size: 14px !important }". */
.af-portal label.su-label{font-size:10.5px !important}
.af-portal label.su-check{font-size:13px !important}
/* Portal-only intro centring must not reach the popup. */
.af-portal #signUpModal .su-intro{text-align:left;max-width:none}
#signUpModal  .iti__search-input { outline: none; }

/* common-back-front.css boxes .signUp-modal.in to 600px x 90vh below 980px; fill the screen so the scrollbar sits on the screen edge. */
@media (max-width:979px){
  #signUpModal.in,#loginModal.in{width:auto;max-height:none;margin:0}
}

/* ---------- sign-up popup, wide screens: wider card so the text wraps less ---------- */
@media (min-width:992px){
  #signUpModal .modal-dialog{max-width:800px}
}

/* ---------- keyboard focus (mockup v8): 2px red ring on buttons, selects, radios + links; links get a 3px radius ---------- */
/* !important: common-back-front.css has a global a:focus{outline:none !important} */
#signUpModal :is(a,button,select,summary):focus-visible,#signUpModal input[type=radio]:focus-visible,
#loginModal :is(a,button,select,summary):focus-visible,#loginModal input[type=radio]:focus-visible,
.af-portal :is(a,button,select,summary):focus-visible,.af-portal input[type=radio]:focus-visible{outline:2px solid var(--af-red) !important;outline-offset:2px}
#signUpModal a:not(.su-submit):not(.pg-back):focus-visible,#loginModal a:not(.su-submit):not(.pg-back):focus-visible,.af-portal a:not(.su-submit):not(.pg-back):focus-visible{border-radius:3px}
/* on the photo / red header the ring stays white, as in the mockup */
.af-portal .pg-back:focus-visible{outline-color:#fff !important}