/* ==========================================================================
   Ultimate Member markup wearing the new auth design.
   The form is UM's real output — only its skin is ours, so nothing about
   validation, nonces, hooks or the login handler changes.
   Scoped under .lpauth; nothing here can reach another page.
   ========================================================================== */

.lpauth .um{max-width:none!important;margin:0!important;padding:0!important;font-family:var(--theme-regular-font)!important}
.lpauth .um .um-form{margin:0!important;padding:0!important}
.lpauth .um form{margin:0!important}
.lpauth .um .um-row,
.lpauth .um .um-col-1,
.lpauth .um .um-col-2,
.lpauth .um .um-col-alt,
.lpauth .um .um-col-alt-b{margin:0!important;padding:0!important;background:none!important;border:0!important}

/* one field = one .field block from the design */
.lpauth .um .um-field{padding:0!important;margin:0 0 18px!important}
.lpauth .um .um-field-area{position:relative;display:flex;align-items:center}

/* leading icon, positioned like the design's svg.lead */
.lpauth .um .um-field-icon{position:absolute;left:0;top:0;bottom:0;width:42px;display:flex!important;align-items:center;justify-content:center;margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--faint);pointer-events:none;z-index:2}
.lpauth .um .um-field-icon i{font-size:15px;line-height:1;color:var(--faint)}

/* the input itself */
.lpauth .um .um-form-field,
.lpauth .um input[type="text"],
.lpauth .um input[type="email"],
.lpauth .um input[type="tel"],
.lpauth .um input[type="number"],
.lpauth .um input[type="password"],
.lpauth .um select{
  width:100%!important;
  height:auto!important;
  padding:13.5px 14px 13.5px 42px!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  font-family:var(--theme-regular-font)!important;
  font-size:15px!important;
  line-height:22px!important;
  color:var(--ink)!important;
  box-shadow:none!important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.lpauth .um .um-form-field::placeholder,
.lpauth .um select{color:var(--ink)}
.lpauth .um .um-form-field::placeholder{color:#9aa8b8!important}
.lpauth .um .um-form-field:hover,
.lpauth .um select:hover{border-color:#c6d4e4!important}
.lpauth .um .um-form-field:focus,
.lpauth .um select:focus{outline:none!important;border-color:var(--theme-color)!important;box-shadow:0 0 0 3px rgba(45,136,202,.18)!important}

/* select gets the design's caret, not the browser's */
.lpauth .um select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a91aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:18px 18px!important;
  padding-right:40px!important;
}

/* password field + its show/hide toggle */
.lpauth .um .um-field-area-password{position:relative;display:flex;align-items:center;width:100%}
.lpauth .um .um-toggle-password{position:absolute;right:12px;display:inline-flex;align-items:center;color:var(--muted);cursor:pointer;z-index:2}
.lpauth .um .um-toggle-password:hover{color:var(--theme-color)}
.lpauth .um .um-field-area-password .um-form-field{padding-right:42px!important}

/* the research-use notice + terms blocks */
.lpauth .um .um-field-block{margin:0 0 18px!important;padding:12px 14px!important;border:1px solid var(--line);border-radius:var(--radius);background:#f7fafd;color:var(--muted);font-size:13px!important;line-height:1.55}
.lpauth .um .um-field-block span{font-size:13px!important;line-height:1.55!important}

/* checkboxes: "keep me signed in" and the 21+ certification */
.lpauth .um .um-field-checkbox{display:flex!important;align-items:flex-start;gap:11px;font-size:14px;color:var(--muted);cursor:pointer;padding:0;margin:0}
.lpauth .um .um-field-checkbox .um-field-checkbox-state{flex:0 0 auto;margin:0;line-height:1}
.lpauth .um .um-field-checkbox .um-field-checkbox-state i{font-size:19px;color:#b9cbdd;transition:color .15s ease}
.lpauth .um .um-field-checkbox.active .um-field-checkbox-state i,
.lpauth .um .um-field-checkbox:hover .um-field-checkbox-state i{color:var(--theme-color)}
.lpauth .um .um-field-checkbox .um-field-checkbox-option{font-size:13.5px;line-height:1.55;color:var(--muted)}
.lpauth .um .um-field-type_checkbox .um-field-area{display:block}

/* submit */
.lpauth .um .um-center{text-align:left!important;margin:0!important}
.lpauth .um input[type="submit"].um-button,
.lpauth .um a.um-button,
.lpauth .um .um-button{
  width:100%!important;
  display:inline-flex!important;
  align-items:center;justify-content:center;gap:9px;
  margin:22px 0 0!important;
  padding:16px 20px!important;
  height:auto!important;
  line-height:26px!important;
  border-radius:var(--radius)!important;
  border:2px solid var(--theme-color)!important;
  background:var(--theme-color)!important;
  color:#fff!important;
  font-family:var(--theme-regular-font)!important;
  font-size:16px!important;
  font-weight:600!important;
  box-shadow:none!important;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .2s ease,transform .1s ease;
}
.lpauth .um .um-button:hover{background:var(--theme-color-hover)!important;border-color:var(--theme-color-hover)!important;box-shadow:0 10px 24px rgba(45,136,202,.28)!important}
.lpauth .um .um-button:active{transform:translateY(1px)}

/* UM's own validation + notice styling, in the design's language */
.lpauth .um .um-field-error{margin-top:8px!important;padding:9px 12px!important;border-radius:var(--radius)!important;background:#fef2f2!important;border:1px solid #f3c6c6!important;color:#991b1b!important;font-size:13px!important;line-height:1.5!important}
.lpauth .um .um-field-error .um-field-arrow{display:none!important}
.lpauth .um .um-notice{margin:0 0 18px!important;padding:11px 14px!important;border-radius:var(--radius)!important;font-size:13.5px!important;line-height:1.5!important}
.lpauth .um .um-notice.err{background:#fef2f2!important;border:1px solid #f3c6c6!important;color:#991b1b!important}
.lpauth .um .um-notice.success{background:#f0fdf4!important;border:1px solid #bbf7d0!important;color:#166534!important}

/* the Google block above the form is ours, not UM's */
.lpauth .form-card .lpg-social{display:none}
.lpauth .google-btn{text-decoration:none}
.lpauth .lpauth-forgot{margin:14px 0 0;text-align:center}

/* --- fixes found on the first staging render ------------------------------ */

/* the 21+ certification: the option text was collapsing to a narrow column */
.lpauth .um .um-field-type_checkbox .um-field-area{display:block;width:100%}
.lpauth .um .um-field-checkbox{width:100%;align-items:flex-start}
.lpauth .um .um-field-checkbox .um-field-checkbox-option{flex:1 1 auto;min-width:0;display:block}
.lpauth .um .um-field-checkbox .um-field-checkbox-state{margin-top:1px}

/* links inside the research-use / terms blocks */
.lpauth .um .um-field-block a{color:var(--theme-color);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(45,136,202,.35)}
.lpauth .um .um-field-block a:hover{text-decoration-color:var(--theme-color)}

/* the design sits on the off-white ground, not the theme's white */
body.page-template-page-lpauth-login #main,
body.page-template-page-lpauth-register #main,
body.page-template-page-lpauth-login #wrapper,
body.page-template-page-lpauth-register #wrapper{background:#fafafa}

/* --- perk icon tiles ------------------------------------------------------
   The theme forces spans to display:block, which killed the tile's own flex
   centering and dropped each glyph onto the text baseline (~3px low). Force the
   box back to flex, and size the glyphs up so they read at a glance. */
.lpauth .perk-ico{
  display:inline-flex!important;
  width:38px!important;height:38px!important;
  border-radius:10px!important;
  align-items:center!important;justify-content:center!important;
  line-height:0!important;
}
.lpauth .perk-ico svg{width:20px!important;height:20px!important;display:block!important;flex:0 0 auto}

.lpauth .perks-inline .perk-ico{width:32px!important;height:32px!important;border-radius:9px!important}
.lpauth .perks-inline .perk-ico svg{width:17px!important;height:17px!important}

/* keep the icon aligned with the first line of its label, not the block */
.lpauth .perk{align-items:center}

/* --- the 21+ certification -------------------------------------------------
   UM draws a bordered label AND an icon-font square inside it, which reads as a
   box within a box. Drop the outer frame and build one real checkbox, sized so
   it's obvious it wants clicking. */
.lpauth .um .um-field-checkbox{border:0!important;background:none!important;padding:0!important;gap:13px!important;align-items:flex-start!important}
.lpauth .um .um-field-checkbox .um-field-checkbox-state{
  width:26px!important;height:26px!important;flex:0 0 26px!important;
  margin:0!important;
  border:2px solid #a9bdd2!important;border-radius:7px!important;background:#fff!important;
  display:flex!important;align-items:center;justify-content:center;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.lpauth .um .um-field-checkbox .um-field-checkbox-state i{display:none!important}
.lpauth .um .um-field-checkbox:hover .um-field-checkbox-state{border-color:var(--theme-color)!important;box-shadow:0 0 0 3px rgba(45,136,202,.12)!important}
.lpauth .um .um-field-checkbox.active .um-field-checkbox-state{
  background-color:var(--theme-color)!important;border-color:var(--theme-color)!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:16px 16px!important;
}
.lpauth .um .um-field-checkbox .um-field-checkbox-option{padding-top:3px}


/* --- mobile trim -----------------------------------------------------------
   The dark panel is a companion to the form on the two-column layout. Below
   1099px the grid is already one column, so it would stack into a long scroll
   under the form on a phone — hide it there and keep it on desktop. */
@media (max-width:1099px){
  .lpauth .unlock{display:none!important}
  .lpauth .reg-grid{gap:0!important}
  /* the theme's footer column pulls itself up by -75px; leave room for it so it
     cannot land on the card */
  .lpauth main.reg{padding-bottom:110px!important}
}

/* the eyebrow pill above the headline, both pages */
.lpauth .hero-tag{display:none!important}
.lpauth .reg-head .reg-title{margin-top:0}