/* ============================================================================
 * The sign-in dialog
 *
 * Sign in stopped being a page you are sent to and became a dialog over the
 * page you were already reading (owner, 2026-09-28), so that coming back is
 * not a thing anybody has to do.
 *
 * This loads on EVERY customer page, and only when the visitor is signed out,
 * so it has to survive Bootstrap 3, styles.css and override.css without
 * disturbing any of them. Two consequences run through the whole file:
 *
 *   1. Everything is scoped under #lxsignin, and every value a site-wide rule
 *      could reach is set rather than inherited. The site gives every <form> a
 *      bottom margin and every <label> a bold block of its own; both would
 *      show up here.
 *   2. The colours are local custom properties, not the catalog's --ink /
 *      --acc family. Those are declared by the lot stylesheets, which most
 *      pages on this site never load.
 *
 * --lxs-acc is overridden inline by includes/header.php from the theme's
 * navbar_bg, so a white label seller's dialog is their colour and not this
 * one. The default below is the CyberAuctions green.
 * ========================================================================= */

#lxsignin{
  --lxs-acc:#00a65a;
  --lxs-ink:#101317;
  --lxs-ink-2:#3D444E;
  --lxs-mut:#707A87;
  --lxs-line:#E4E6E9;
  --lxs-wash:#F5F6F7;
  --lxs-bad:#A8341C;
  --lxs-bad-bg:#FDEDE9;
  --lxs-bad-line:#F6D2C8;

  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(12,15,20,.55);
  padding:24px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-font-smoothing:antialiased;
}
/* Centred by the BOX's own auto margins, with the container aligned to the
   start. align-items:center looks the same while the card fits and clips its
   top out of reach the moment it does not - overflow at the start edge of a
   flex container cannot be scrolled to. Auto margins collapse to 0 instead,
   so a card too tall for the window simply starts at the top and scrolls.
   This is what lets the keyboard rule at the bottom of this file work. */
#lxsignin.is-on{display:flex;align-items:flex-start;justify-content:center}
body.lxs-locked{overflow:hidden}

#lxsignin .lxs-box{
  width:100%;max-width:420px;margin:auto;background:#fff;
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.45);
  font-size:14px;line-height:1.5;color:var(--lxs-ink-2);
  text-align:left;
}

/* ---- head ---- */
#lxsignin .lxs-head{display:flex;align-items:flex-start;gap:16px;padding:24px 26px 18px;
  border-bottom:1px solid var(--lxs-line)}
#lxsignin .lxs-head h2{margin:0!important;padding:0;font-size:21px;line-height:1.25;
  font-weight:700;letter-spacing:-.01em;color:var(--lxs-ink)}
#lxsignin .lxs-head p{margin:5px 0 0!important;padding:0;font-size:13.5px;color:var(--lxs-mut);
  line-height:1.5}
/* Hidden until a trigger supplies one: "Sign in to place your bid" and the
   like. An empty line of nothing is worse than no line. */
#lxsignin .lxs-head p:empty{display:none}
#lxsignin .lxs-x{margin-left:auto;flex:0 0 auto;width:34px;height:34px;margin-top:-4px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;border-radius:9px;cursor:pointer;
  color:var(--lxs-mut);font-size:19px;line-height:1;-webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s}
#lxsignin .lxs-x:hover{background:var(--lxs-wash);color:var(--lxs-ink)}

/* ---- body ---- */
#lxsignin .lxs-body{padding:22px 26px 24px}
#lxsignin form{margin:0!important;padding:0}
#lxsignin .lxs-f{margin:0 0 14px}
#lxsignin .lxs-f:last-of-type{margin-bottom:0}
#lxsignin label{display:block;margin:0 0 7px;padding:0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--lxs-mut);cursor:pointer}

/* The field is the WRAPPER, not the input: the show/hide button sits inside
   the same box, so the ring on focus has to be drawn around both of them. */
#lxsignin .lxs-in{display:flex;align-items:center;
  border:1px solid var(--lxs-line);border-radius:11px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
/* The ring is the accent at a fifth strength. color-mix is the only way to get
   that from a custom property a white label seller might have set to anything,
   so the plain rule below is the CyberAuctions green written out for anything
   that cannot do the mix - the border is already themed either way. */
#lxsignin .lxs-in:focus-within{border-color:var(--lxs-acc);
  box-shadow:0 0 0 3px rgba(0,166,90,.16)}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  #lxsignin .lxs-in:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--lxs-acc) 20%,transparent)}
}
#lxsignin .lxs-in input{flex:1 1 auto;min-width:0;width:100%;
  height:50px;padding:0 14px;margin:0;border:0;outline:0;background:none;
  font-size:15.5px;line-height:normal;color:var(--lxs-ink);box-shadow:none;border-radius:11px}
#lxsignin .lxs-in input::placeholder{color:#A6ADB7}
/* Chrome paints its own yellow over an autofilled box, which would sit square
   inside a rounded field. An inset shadow the size of the box repaints it. */
#lxsignin .lxs-in input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #fff inset;
  -webkit-text-fill-color:var(--lxs-ink)}
#lxsignin .lxs-eye{flex:0 0 auto;width:44px;height:50px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--lxs-mut);font-size:15px;-webkit-appearance:none;appearance:none;
  transition:color .15s}
#lxsignin .lxs-eye:hover{color:var(--lxs-ink)}

#lxsignin .lxs-forgot{display:block;margin:9px 0 0;text-align:right;
  font-size:13px;color:var(--lxs-mut);text-decoration:none}
#lxsignin .lxs-forgot:hover{color:var(--lxs-ink);text-decoration:underline}

#lxsignin .lxs-go{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:50px;margin:18px 0 0;padding:0 18px;
  border:0;border-radius:11px;background:var(--lxs-acc);color:#fff;
  font-size:15.5px;font-weight:700;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:filter .15s,opacity .15s}
#lxsignin .lxs-go:hover{filter:brightness(1.07)}
#lxsignin .lxs-go[disabled]{opacity:.6;cursor:default;filter:none}
/* The spinner rides inside the button so the button keeps its size and the row
   does not jump while the answer is on its way. */
#lxsignin .lxs-go .lxs-spin{display:none;width:16px;height:16px;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:lxs-spin .7s linear infinite}
#lxsignin .lxs-go.is-busy .lxs-spin{display:block}
@keyframes lxs-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  #lxsignin .lxs-go .lxs-spin{animation-duration:2s}
}

/* ---- what went wrong ---- */
/* Above the fields, not below the button: the answer to "why did nothing
   happen" should be where the eye goes back to, which is the top of the form.
   It can carry HTML - the unverified-account message has a resend form in it -
   so the link and button styles inside it are set here too. */
#lxsignin .lxs-bad{display:none;margin:0 0 16px;padding:11px 14px;
  background:var(--lxs-bad-bg);border:1px solid var(--lxs-bad-line);border-radius:11px;
  font-size:13.5px;line-height:1.5;color:var(--lxs-bad)}
#lxsignin .lxs-bad.is-on{display:block}
#lxsignin .lxs-bad a,#lxsignin .lxs-bad input[type=submit]{color:var(--lxs-bad);
  font-weight:700;text-decoration:underline;background:none;border:0;padding:0;
  font-size:inherit;cursor:pointer}
#lxsignin .lxs-bad form{display:inline;margin:0!important}

/* ---- foot ---- */
#lxsignin .lxs-foot{padding:16px 26px;background:var(--lxs-wash);
  border-top:1px solid var(--lxs-line);text-align:center;
  font-size:13.5px;color:var(--lxs-mut)}
#lxsignin .lxs-foot a{color:var(--lxs-ink);font-weight:700;text-decoration:none}
#lxsignin .lxs-foot a:hover{text-decoration:underline}

#lxsignin :focus-visible{outline:2px solid var(--lxs-acc);outline-offset:2px}

/* ---- a phone ----
 * A floating card with the page showing round all four sides of it, same as
 * a desktop (owner, 2026-09-28). It was an edge-to-edge sheet against the top
 * of the window first, to keep it clear of the keyboard; the gutters and the
 * centring are what was asked for, and the rule below is how it keeps the
 * keyboard handled anyway.
 */
@media(max-width:560px){
  #lxsignin{padding:16px}
  #lxsignin .lxs-box{max-width:none;border-radius:16px}
  #lxsignin .lxs-head{padding:20px 20px 16px}
  #lxsignin .lxs-body{padding:20px 20px 24px}
  #lxsignin .lxs-foot{padding:16px 20px}
  /* 50px is fine for a pointer and short for a thumb. */
  #lxsignin .lxs-in input,#lxsignin .lxs-eye{height:54px}
  #lxsignin .lxs-go{height:54px}
  #lxsignin .lxs-x{width:40px;height:40px;font-size:21px}

  /* The keyboard, handled by the centring rather than against it.
   *
   * A phone does not shrink the layout viewport when its keyboard opens, only
   * the visible part of it, so a centred card sits exactly where it was and
   * the Sign in button ends up underneath the keys. The card is about 440px
   * and the form is about 380px, so there is no room to centre it in what is
   * left either.
   *
   * :focus-within is true exactly while a field has the caret, which is
   * exactly while the keyboard is up. Taking 55vh out of the bottom of the
   * scroller leaves less room than the card needs, the box's auto margins
   * collapse to 0, and it rises to the top of the window on its own - which
   * is where it needs to be - and can be scrolled from there. No listener, no
   * measuring, and it puts itself back the moment the field is left.
   *
   * 55vh is an iOS keyboard plus its autofill bar, the same figure .fm-modal
   * uses in styles/lotx-lot.css and for the same reason. */
  #lxsignin:focus-within{padding-bottom:55vh}
}