/* MH SUB • Shared UI layer (used by all SUB shortcodes)
 * This intentionally avoids theme dependencies and matches MH dark tokens.
 */
.mh-sub{
  font-family: var(--mh-font-ui);
  color: var(--mh-txt-100);
  background: transparent;
  padding: 0;
  position: relative;
}

/* Apply page background + spacing on the outer section/container (outside plugin).
 * Add class "mh-sub-page" to your Elementor section / block wrapper.
 * Accent is controlled globally via body class: mhosl-accent-{token}.
 */



/* Profile modal controls */
.mh-sub__form{ display:block; }
.mh-sub__field{ margin-top: 12px; }
.mh-sub__label{ display:block; font-weight: 750; font-size: 13px; color: var(--mh-txt-200); margin-bottom: 6px; }
.mh-sub__control{
  width:100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--mh-txt-100);
  outline: none;
}
.mh-sub__control:focus{ border-color: rgba(255,255,255,0.22); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.mh-sub__control--file{ padding: 8px 10px; }
.mh-sub__alert{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--mh-txt-100);
  font-size: 13px;
}
.mh-sub__avatarimg{ width:48px; height:48px; border-radius: 999px; object-fit: cover; }
.mh-sub__avatarpicker{ display:flex; gap:12px; align-items:center; }
.mh-sub__avatarpreview{ width:64px; height:64px; border-radius: 18px; object-fit: cover; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); }
.mh-sub__profilebio{ margin-top: 6px; font-size: 13px; color: var(--mh-txt-200); line-height: 1.35; }
.mh-sub__mt6{ margin-top: 6px; }