/* Membership Pro auth.css — keeps your existing styles; adds header icon positioning without touching theme */

/* ----- Existing modal & form styles (as provided) ----- */
.mp-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9999; align-items:center; justify-content:center; padding:20px; }
.mp-modal[aria-hidden="false"] { display:flex; }
/* ensure modal card is positioned relative so close button absolute works */
.mp-modal-card { width:920px; max-width:100%; background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.12); display:flex; overflow:hidden; position:relative; }
.mp-modal-left { flex:1; padding:36px; background:linear-gradient(180deg,#f7fbff,#fff); display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.mp-modal-left h2 { margin:0; font-size:22px; color:#0b3b66; }
.mp-modal-left .mp-branding { color:#556; font-size:14px; }
.mp-modal-left .mp-illustration { width:100%; max-width:260px; opacity:0.95; }

.mp-modal-right { width:420px; padding:24px; }
.mp-tabs { display:flex; gap:8px; margin-bottom:12px; }
.mp-tab { flex:1; padding:10px 12px; background:#f2f6fb; border-radius:8px; border:1px solid transparent; cursor:pointer; text-align:center; }
.mp-tab.active { background:#fff; border-color:#e1eefb; box-shadow:0 2px 6px rgba(30,136,229,0.08); color:#0b66c2; font-weight:600; }

.mp-form { display:none; gap:10px; }
.mp-form label { display:block; font-size:13px; color:#334; margin-bottom:8px; }
.mp-form input { width:100%; padding:10px 12px; border:1px solid #d6dfe9; border-radius:8px; font-size:14px; }
.mp-btn { display:inline-block; padding:10px 14px; border-radius:8px; border:0; cursor:pointer; font-weight:600; }
.mp-btn-primary { background:#1E88E5; color:#fff; }
.mp-btn-secondary { background:#f2f4f7; color:#0b3b66; }
.mp-btn-social { width:100%; margin-top:8px; background:#fff; border:1px solid #e6eefb; color:#334; }

/* Social buttons inline variant */
.mp-socials { display:flex; gap:8px; margin-top:12px; }
.mp-socials .mp-btn-social { flex:1; padding:10px; }

/* Error and notes */
.mp-form-note { margin-top:10px; font-size:13px; color:#c00; }
.mp-error { color:#c00; margin-top:8px; display:block; }

/* Password meter */
.mp-pass-meter { width:100%; height:6px; margin-top:6px; }

.mp-profile-wrapper { display:inline-block; }
.mp-icon-btn { background:transparent; border:0; cursor:pointer; padding:6px; border-radius:50%; }
.mp-icon-btn img, .mp-icon-btn svg { display:block; }

.mp-panel-success { padding:12px; }

@media (max-width:720px) {
  .mp-modal-card { flex-direction:column; width:100%; }
  .mp-modal-left { display:none; }
  .mp-modal-right { width:100%; }
}

/* ----- Header icon positioning (no theme edits required) ----- */

/* Nav container is often static; we will set relative via JS if needed.
   In case CSS runs first, also attempt common selectors. */
/* Ensure nav container is relative (JS also sets it) */
#nav-main, .main-navigation, .site-navigation, nav[role="navigation"], nav {
  position: relative;
}

/* Wrapper appended directly to nav (not inside UL) */
.mp-profile-absolute-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 9999;
  pointer-events: auto;
  background: transparent;
}

/* Ensure inner button scales to nav height */
.mp-profile-absolute-wrapper .mp-icon-btn img,
.mp-profile-absolute-wrapper .mp-icon-btn svg {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* UL padding fallback class (JS will set dynamic value) */
.mp-menu-padding-adjust { padding-right: 80px !important; }

/* Mobile: make wrapper static so it flows into collapsed menu */
@media (max-width:720px) {
  .mp-profile-absolute-wrapper { position: static; padding: 6px; }
  .mp-menu-padding-adjust { padding-right: 0 !important; }
}

/* The injected icon <li> sits at the right edge */
li.mp-profile-absolute {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 9999;
  background: transparent;
}

/* Make the icon scale to nav height */
li.mp-profile-absolute .mp-icon-btn img,
li.mp-profile-absolute .mp-icon-btn svg {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Add extra right padding to the UL so last menu item doesn't overlap (JS will set dynamic value) */
.mp-menu-padding-adjust { padding-right: 80px !important; }

/* Mobile: keep inline to avoid layout break */
@media (max-width: 720px) {
  li.mp-profile-absolute { position: static; padding: 6px; }
  .mp-menu-padding-adjust { padding-right: 0 !important; }
}

/* ---------- Close button style (moved to top-right and offset further right) ---------- */
/* Move the close button slightly higher and further to the right to avoid overlapping form controls */
.mp-modal-close {
  position: absolute;
  top: 1px;            /* moved up */
  right: 2px;         /* moved further right */
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 12000;      /* ensure above modal content */
  color: #333;
  padding: 1px;
  border-radius: 1px;
  box-shadow: none;
}
.mp-modal-close:hover { background: rgba(0,0,0,0.06); color: #000; }

/* Ensure wrapper uses transform centering and no height transitions */
.mp-profile-absolute,
.mp-profile-absolute-wrapper {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 9999;
  pointer-events: auto;
}

/* On desktop keep previous behavior but still safe */
@media (min-width: 721px) {
  .mp-profile-absolute, .mp-profile-absolute-wrapper {
    top: 0;
    transform: none;
    height: 100%;
    right: 0;
    align-items: center;
  }
  .mp-profile-absolute img, .mp-profile-absolute svg,
  .mp-profile-absolute-wrapper img, .mp-profile-absolute-wrapper svg {
    height: 100%;
    width: auto;
  }
}

/* Mobile: explicit control — do not use height:100% on svg to avoid reflow loop */
@media (max-width: 720px) {
  .mp-profile-absolute img, .mp-profile-absolute svg,
  .mp-profile-absolute-wrapper img, .mp-profile-absolute-wrapper svg {
    height: auto; /* JS will set explicit px height */
    max-height: 64px; /* match JS max */
    min-height: 28px; /* match JS min */
    width: auto;
    display: block;
  }

  /* Prevent transitions on height that can cause jitter */
  .mp-profile-absolute img, .mp-profile-absolute svg,
  .mp-profile-absolute-wrapper img, .mp-profile-absolute-wrapper svg {
    transition: none !important;
  }

  /* Ensure wrapper doesn't push layout when menu collapses */
  .mp-profile-absolute, .mp-profile-absolute-wrapper {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ---------- Remember me checkbox inline layout ---------- */
/* Use a container class .mp-remember around checkbox + label */
.mp-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.mp-remember input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
.mp-remember input[type="checkbox"]:checked {
  background: #1E88E5;
  border-color: #1E88E5;
}
.mp-remember input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mp-remember label {
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  color: #334;
}

/* ---------- Social buttons small adjustments ---------- */
.mp-socials .mp-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* ---------- Accessibility and small tweaks ---------- */
/* Ensure focus outlines for keyboard users */
.mp-btn:focus, .mp-icon-btn:focus, .mp-modal-close:focus, .mp-tab:focus {
  outline: 3px solid rgba(30,136,229,0.18);
  outline-offset: 2px;
}

/* Prevent svg/img height transitions causing jitter on mobile */
.mp-profile-absolute img, .mp-profile-absolute svg,
.mp-profile-absolute-wrapper img, .mp-profile-absolute-wrapper svg {
  transition: none !important;
}