/* =====================================================================
   Grubbs Elite Rewards - member login (redesign, Aug 2026)
   Replaces /css/style_grubbs_login.css

   Loaded AFTER bootstrap.css and font-awesome.min.css. Bootstrap stays
   because the AJAX-loaded Support / Register forms rely on .alert and .btn.
   Every override below is scoped to #content / #forms so it wins on
   specificity without !important.
   ===================================================================== */

:root {
  --navy: #10243A;
  --muted: #5C6C7C;
  --faint: #9AA7B4;
  --accent: #C8102E;
  --accent-dark: #A50D26;
  --link: #0F5C8C;
  --error: #C8102E;
  --error-bg: #FDF2F4;
  --error-border: rgba(200, 16, 46, .35);
  --border: #DDE3EA;
  --divider: #E7ECF1;
  --divider-light: #EDF1F5;
  --surface: #F8FAFC;
  --footer-bg: #FBFCFD;
  --page-bg: #F4F6F8;
  --focus-ring: 0 0 0 3px rgba(16, 36, 58, .12);
  --radius-control: 8px;
  --radius-panel: 10px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: auto; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

#content a { color: var(--link); text-decoration: none; }
#content a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- page frame ---------- */

.login {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page-bg);
}

.login__hero {
  position: relative;
  flex: 1 1 44%;
  min-width: 320px;
  max-width: 660px;            /* keeps the photo from blowing out on wide screens */
  align-self: stretch;
  background: var(--navy);
  overflow: hidden;
}

/* absolutely positioned so the photo's intrinsic height never stretches the page taller than the viewport */
.login__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.login__main {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.login__body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;             /* vertically center the form column */
  align-items: safe center;        /* browsers that support it: never clip the top when content is taller than the viewport */
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
}

.login__col {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- brand ---------- */

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.brand__logo { width: 168px; height: auto; display: block; }

.brand__program {
  margin: 0;
  padding-top: 12px;
  border-top: 2px solid var(--accent);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- forms (all three steps + AJAX Support / Register) ---------- */

#forms form,
#forms .step {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
}
/* the JS toggles forms with inline display:none / display:block; keep the flex column when shown */
#forms form[style*="display: block"],
#forms form[style*="display:block"] { display: flex; }

#forms fieldset {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  background: transparent;
}
#forms section { margin: 0; padding: 0; position: relative; }

.step__head { display: flex; flex-direction: column; gap: 8px; }

#forms .step__title,
#forms header,
#forms h2 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  text-align: left;
}

#forms .step__sub,
#forms p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
#forms .step__sub strong { font-weight: 700; color: var(--navy); }

/* ---------- fields ---------- */

.field { display: flex; flex-direction: column; gap: 7px; }

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#forms .field__label,
#forms label.label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
  white-space: normal;
  color: var(--navy);
  background: transparent;
  border-radius: 0;
}

/* bootstrap gives label inline-block + margin-bottom; the .input wrapper must be a plain block */
#forms label.input {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

#forms label.input input,
#forms .field__input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  font: 500 16px var(--font);
  line-height: 50px;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
#forms label.input input::placeholder { color: var(--faint); font-weight: 500; }
#forms label.input input:focus {
  border-color: var(--navy);
  box-shadow: var(--focus-ring);
}
#forms label.input input[readonly] { color: var(--muted); background: var(--surface); }

/* legacy smart-form icons and tooltips inside the AJAX forms: hide them */
#forms .icon-append,
#forms .icon-prepend,
#forms b.tooltip { display: none; }

/* jQuery Validate on this site uses errorClass "invalid" (set in app.js), not the default "error":
   the message is <div class="invalid"> inserted after label.input, the input gets .invalid,
   and label.input gets .state-error. Both class sets are covered below. */
#forms div.invalid,
#forms div.error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-left: 3px solid var(--error);
  border-radius: 6px;
}
#forms div.invalid::before,
#forms div.error::before {
  content: "!";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
#forms div.invalid:empty,
#forms div.error:empty { display: none; }
#forms label.input input.invalid,
#forms label.input input.error,
#forms label.input.state-error input { border-color: var(--error); background: #FFFBFB; }
#forms label.input input.invalid:focus,
#forms label.input input.error:focus,
#forms label.input.state-error input:focus { border-color: var(--error); box-shadow: 0 0 0 3px rgba(200, 16, 46, .14); }
#forms label.invalid,
#forms label.error { display: none; }

/* "Need help?" text links (class must stay exactly "support") */
#forms a.support {
  padding: 0;
  font: 600 13px var(--font);
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#forms a.support:hover { color: var(--accent); }

/* Remember me (class is "remember", not "checkbox", so bootstrap's .checkbox rules stay out of it) */
#forms label.remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
#forms label.remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- buttons ---------- */

#forms footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#forms .btn {
  float: none;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 24px;
  font: 700 16px var(--font);
  line-height: 52px;
  text-transform: none;
  border-radius: var(--radius-control);
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}

#forms .btn-primary,
#forms .btn--primary {
  color: #fff;
  background: var(--accent);
}
#forms .btn-primary:hover,
#forms .btn-primary:focus,
#forms .btn--primary:hover { color: #fff; background: var(--accent-dark); }
#forms .btn-primary:active { transform: translateY(1px); }

#forms .btn-default,
#forms .btn--secondary {
  height: 48px;
  line-height: 45px;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--border);
}
#forms .btn-default:hover,
#forms .btn-default:focus,
#forms .btn--secondary:hover { color: var(--navy); border-color: var(--navy); background: var(--surface); }

#forms .btn:disabled,
#forms .btn[disabled] {
  color: var(--faint);
  background: var(--divider-light);
  border: 1.5px solid #E2E8EE;
  cursor: not-allowed;
  opacity: 1;
}

/* bootstrap puts a dark outline on .btn:focus, which lingers after a mouse click. Keyboard users still get a ring. */
#forms .btn:focus { outline: none; }
#forms .btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Create Sign In step: help link sits above the buttons in the same footer */
#footer-createsignin a.support { align-self: flex-start; }

/* ---------- account summary ---------- */
/* Vertical list, not a grid: rows the JS hides are simply gone. */

#forms .summary {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  overflow: hidden;
  text-align: left;
}

#forms .summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 13px 16px;
  background: var(--surface);
}

#forms .summary__label,
#forms .summary__label b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

#forms .summary__value {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* ---------- app badges ---------- */

#forms .apps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--divider-light);
}
#forms .apps__label { font-size: 13px; font-weight: 600; color: var(--muted); }
#forms .apps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
#forms .apps__grid img { width: 100%; height: auto; display: block; }

/* ---------- AJAX-loaded Signin Support form (/ajax/Support.php) ---------- */
/* Markup comes from the server, so this restyles it in place. */

#form-support > label {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  text-align: left;
}
#form-support > label strong { font-weight: 700; color: var(--navy); }

#userforgot {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  padding: 0;
  text-align: left;
}
#userforgot > br { display: none; }
#userforgot > input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
#userforgot > span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}
#userforgot > div {
  grid-column: 1 / -1;
  padding-left: 26px;
  margin-bottom: 8px;
}
#userforgot > div p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--link);
  text-align: left;
}
#userforgot > div section { margin: 0; }
#userforgot label.input input { height: 44px; line-height: 44px; font-size: 15px; }

#messagettext { margin: 0; }
#messagettext:empty { display: none; }
#forms .alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- AJAX-loaded Register form (/ajax/Register.php) ---------- */

#form-register section { display: flex; flex-direction: column; gap: 7px; }
#form-register #errormessage:empty { display: none; }
#form-register #errormessage.invalid {
  padding: 12px 14px;
  border: 1px solid rgba(200, 16, 46, .35);
  border-radius: var(--radius-control);
  color: var(--accent);
  background: #FDF2F4;
  font-size: 14px;
  font-weight: 600;
}
#form-register section:has(> #errormessage:empty) { display: none; }

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px clamp(20px, 5vw, 64px) 28px;
  border-top: 1px solid var(--divider-light);
  background: var(--footer-bg);
}

.site-footer__support {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.site-footer__support a { font-weight: 700; }

.site-footer__powered { display: flex; align-items: center; gap: 10px; }
.site-footer__powered span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.site-footer__powered img { height: 26px; width: auto; display: block; }

/* ---------- reset password / activation result pages ---------- */
/* These pages share this stylesheet. p.title and #messagetext render empty in some states; hide them so they leave no gap. */
#forms p.title:empty { display: none; }
#messagetext:empty { display: none; }
#forms .alert-danger { color: var(--error); background: var(--error-bg); border-color: var(--error-border); }
#forms .alert-success { color: #1B6B3A; background: #EEF8F1; border-color: rgba(27, 107, 58, .3); }
#forms a.btn,
#forms a.btn:hover { display: block; text-align: center; text-decoration: none; }

/* ---------- responsive ---------- */

@media (max-width: 859px) {
  .login__hero { display: none; }
  .login__col { max-width: 480px; }
}