/* ===== Layout: center the login form card ===== */
body.page-id- /* optional: replace with your login page ID if you want to scope */
.um { /* UM wrapper */
  --phorm-maxw: 440px;
}

.um um-form, .um .um-form {
  max-width: var(--phorm-maxw);
  margin: 3.5rem auto 2rem auto;
  padding: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  background: #fff;
}

/* ===== Typography & spacing ===== */
.um .um-field-label {
  font-size: .9rem;
  font-weight: 600;
  color: #1d1d1d;
  margin-bottom: .35rem;
}
.um .um-field-area input,
.um .um-field-area input[type="text"],
.um .um-field-area input[type="email"],
.um .um-field-area input[type="password"]{
  border-radius: 10px;
  padding: .75rem .9rem;
  border: 1px solid #ddd;
}
.um .um-form .um-field {
  margin-bottom: 14px;
}

/* ===== “Keep me signed in” line tighter ===== */
.um .um-field-checkbox .um-field-label {
  font-size: .85rem;
  font-weight: 500;
  margin: 0 0 0 14px;
}

/* ===== Primary button style ===== */
.um .um-button,
.um input[type="submit"].um-button {
  border-radius: 999px;
  padding: .7rem 1.2rem;
  background: #00ad66;
  border: none;
  color: #fff;
  font-weight: 700;
}
.um .um-button:hover { filter: brightness(0.95); }

/* ===== Links under the form (“Register” / “Forgot”) ===== */
.um .um-col-alt a {
  font-size: .9rem;
  color: #1d1d1d;
}
.um .um-col-alt a:hover { color: #00ad66; }

/* ===== Hide honeypot line if it shows text ===== */
.um .um-field-honeypot { display:none !important; }

/* ===== Mobile: center content & icons ===== */
@media (max-width: 767px) {
  .um .um-form { margin: 2rem 1rem; }
  /* If your header login icon/dropdown needs centering on mobile: */
  .um-header .um-header-user,
  .elementor .menu-item.login .menu-icon {
    display:flex; align-items:center; justify-content:center;
    padding:.5rem 0;
  }
}