/* iBlogger v141 — role selector: consistent custom picker for desktop + mobile. */
.ib-role-picker {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  direction: rtl;
}
.ib-role-picker.is-open { z-index: 120; }
.ib-role-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ib-role-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #e5e1f2;
  border-radius: 17px;
  color: #252b4a;
  background: linear-gradient(135deg, #fff 0%, #faf9ff 100%);
  box-shadow: 0 5px 16px rgba(68, 52, 130, .045), inset 0 1px 0 rgba(255,255,255,.9);
  text-align: right;
  direction: rtl;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.ib-role-trigger:hover,
.ib-role-picker.is-open .ib-role-trigger,
.ib-role-trigger:focus-visible {
  border-color: #b9a5f6;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(126, 87, 239, .085), 0 10px 25px rgba(76, 55, 143, .09);
  outline: 0;
}
.ib-role-selected-icon,
.ib-role-option-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border: 1px solid #e8e1ff;
  border-radius: 14px;
  color: #7952e8;
  background: linear-gradient(145deg, #f5f0ff, #eee8ff);
}
.ib-role-selected-icon svg,
.ib-role-option-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ib-role-trigger-copy,
.ib-role-option-copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
}
.ib-role-trigger-copy strong {
  color: #25294b;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 900;
}
.ib-role-trigger-copy small {
  color: #8589a4;
  font-size: 10.5px;
  line-height: 1.6;
  font-weight: 600;
}
.ib-role-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #ebe7f6;
  border-radius: 10px;
  color: #7860bf;
  background: #f8f6ff;
  transition: transform .22s ease, background .22s ease;
}
.ib-role-chevron svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ib-role-picker.is-open .ib-role-chevron { transform: rotate(180deg); background: #f0eaff; }
.ib-role-menu {
  position: absolute;
  z-index: 130;
  top: calc(100% + 9px);
  right: 0;
  left: 0;
  display: grid;
  gap: 7px;
  max-height: min(300px, 52vh);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #e7e2f2;
  border-radius: 18px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 20px 48px rgba(35, 27, 83, .18), 0 4px 12px rgba(35, 27, 83, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: ibRoleMenuIn .18s ease both;
}
.ib-role-menu[hidden] { display: none !important; }
.ib-role-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #303553;
  background: transparent;
  text-align: right;
  direction: rtl;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ib-role-option:hover,
.ib-role-option:focus-visible {
  border-color: #e2d9ff;
  background: #faf8ff;
  outline: 0;
}
.ib-role-option.is-selected {
  border-color: #d9ccff;
  background: linear-gradient(100deg, #f7f3ff, #fbfaff);
}
.ib-role-option-icon { width: 40px; height: 40px; border-radius: 12px; }
.ib-role-option-icon svg { width: 20px; height: 20px; }
.ib-role-option-copy strong { color: #2c3152; font-size: 12px; line-height: 1.5; font-weight: 900; }
.ib-role-option-copy small { color: #8a8ea7; font-size: 10px; line-height: 1.6; font-weight: 600; }
.ib-role-option-check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid #e6e2f0;
  border-radius: 50%;
  color: #fff;
  background: #fff;
  opacity: .55;
}
.ib-role-option-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ib-role-option.is-selected .ib-role-option-check { border-color: #7952e8; background: #7952e8; opacity: 1; }
@keyframes ibRoleMenuIn { from { opacity: 0; transform: translateY(-5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Desktop signup form */
@media (min-width: 621px) {
  body.auth-page.auth-next.signup-page #authMain .signup-field-role {
    position: relative !important;
    z-index: 3;
    display: grid !important;
    gap: 8px !important;
  }
  body.auth-page.auth-next.signup-page #authMain .signup-field-role > label {
    display: block !important;
    margin: 0 2px !important;
    color: #303657 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
  }
  body.auth-page.auth-next.signup-page #authMain .signup-field-role.is-role-open { z-index: 140 !important; }
  body.auth-page.auth-next.signup-page #authMain .signup-field-role .ib-role-trigger { min-height: 72px; }
  body.auth-page.auth-next.signup-page #authMain .signup-field-role .ib-role-menu { top: calc(100% + 8px); }
}

/* Mobile's dedicated auth renderer */
@media (max-width: 620px) {
  .mobile-approved-render[data-page="signup"] .mar-role-field {
    position: relative;
    z-index: 4;
    display: grid;
    gap: 8px;
    margin-bottom: 17px;
  }
  .mobile-approved-render[data-page="signup"] .mar-role-field.is-role-open { z-index: 140; }
  .mobile-approved-render[data-page="signup"] .mar-role-field > span {
    color: #46506e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
  }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-trigger {
    min-height: 66px;
    padding: 9px 11px;
    border-radius: 14px;
  }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-selected-icon { width: 42px; height: 42px; border-radius: 13px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-trigger-copy strong { font-size: 14px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-trigger-copy small { font-size: 10.5px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-menu {
    top: calc(100% + 7px);
    max-height: min(310px, 44vh);
    padding: 7px;
    border-radius: 16px;
  }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-option { min-height: 62px; padding: 8px; gap: 9px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-option-icon { width: 37px; height: 37px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-option-copy strong { font-size: 12px; }
  .mobile-approved-render[data-page="signup"] .mar-role-field .ib-role-option-copy small { font-size: 9.5px; }
}