/* Shared photo source chooser — applies in all portals (no admin/media overlap). */
.aqilSourceOverlay[hidden]{display:none!important}
.aqilSourceOverlay{
  position:fixed!important;inset:0!important;z-index:21000!important;
  padding:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(6,19,34,.67);backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-sizing:border-box;
}
.aqilSourceDialog{
  box-sizing:border-box;width:min(520px,100%);max-height:min(88dvh,780px);
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  background:#fff;color:#18324b;border:1px solid #dfebf5;
  box-shadow:0 22px 85px rgba(2,15,33,.32);
  font:inherit;
}
.aqilSourceHeader{
  padding:17px 19px;border-bottom:1px solid #e2eaf2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.aqilSourceHeader>div{display:grid;gap:4px;min-width:0}
.aqilSourceHeader b{font-size:18px;font-weight:900;color:inherit}
.aqilSourceHeader small{font-size:12px;color:#697e93}
.aqilSourceHeader>button{
  width:35px;height:35px;flex:none;border:0;border-radius:10px;
  background:#edf3f9;color:#294a69;font-size:24px;cursor:pointer;
}
.aqilSourceBody{overflow-y:auto;overflow-x:hidden;min-height:0;padding:15px}
.aqilSourceChoices{display:grid;gap:9px}
.aqilSourceChoices button{
  box-sizing:border-box;width:100%;min-height:55px;
  display:flex;gap:13px;align-items:center;text-align:left;
  padding:11px 14px;border:1px solid #dce7f1;border-radius:12px;
  background:#f8fbff;color:#18324b;font:inherit;font-weight:800;
  font-size:14px;cursor:pointer;
}
.aqilSourceChoices button:hover{background:#eaf4ff;border-color:#8ebcdd}
.aqilSourceChoices button>span{
  display:grid;place-items:center;border-radius:9px;background:#e2effc;
  color:#0b5e9c;flex:none;width:33px;height:33px;font-size:23px;
}
.aqilSourceNotice{margin:0;padding:0 16px 13px;font-size:12px;color:#5b7187;line-height:1.5}
.aqilSourceNotice:empty{display:none}
.aqilSourceSearch{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.aqilSourceSearch>button{flex:none;border:0;background:#eaf2fa;color:#0b5594;border-radius:8px;padding:9px;font-weight:800}
.aqilSourceSearch input{box-sizing:border-box;min-width:0;flex:1;padding:9px 10px;border:1px solid #d8e5f2;background:#fff;border-radius:9px;color:#18324b;font:inherit;font-size:13px}
.aqilSourceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.aqilSourceGrid>button{box-sizing:border-box;display:grid;overflow:hidden;min-width:0;cursor:pointer;background:#f4f8fc;border:1px solid #d9e5ef;border-radius:10px;padding:0;text-align:left;color:#18324b}
.aqilSourceGrid>button img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.aqilSourceGrid>button span{padding:7px;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aqilSourceLoading,.aqilSourceGrid>p{text-align:center;padding:25px;color:#637991}
.aqilSourceLoading button{border:0;padding:8px 12px;border-radius:8px;color:#fff;background:#175f9d;margin-top:10px}
body.aqilSourceOpen{overflow:hidden!important}
@media(max-width:460px){
  .aqilSourceDialog{max-height:85dvh;border-radius:17px}
  .aqilSourceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Matching action heights in create-account and edit-account photo cards. */
:is(#raRegistrationDetails,#raProfileDetails) .raProfilePhotoActions{
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raProfilePhotoActions>.raPhotoAction{
  appearance:none!important;display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;height:39px!important;
  min-height:39px!important;padding:0 13px!important;
  line-height:1.1!important;margin:0!important;
  font-family:inherit!important;font-size:12px!important;font-weight:800!important;
  flex:none!important;vertical-align:middle!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raProfilePhotoActions>input[type=file][hidden]{
  display:none!important;
}
/* Mobile horizontal scroll must stop at viewport root; preserve vertical scroll. */
html.aqilAccountSettings,html:has(>body.raProfileContext){
  width:100%!important;max-width:100%!important;
  overflow-x:hidden!important;overscroll-behavior-x:none!important;
}
body.raProfileContext{
  width:100%!important;max-width:100%!important;min-width:0!important;
  overflow-x:hidden!important;overscroll-behavior-x:none!important;
}
body.raProfileContext .raAccountContextMain{
  display:block;box-sizing:border-box!important;
  width:min(1200px,92%)!important;max-width:92%!important;
  min-width:0!important;margin-inline:auto!important;
  overflow-x:clip!important;
}
body.raProfileContext .raProfileSettings,
body.raProfileContext #raProfileDetails,
body.raProfileContext .raProfileSecurity,
body.raProfileContext #raProfileDetails .raDetailsSection,
body.raProfileContext #raProfileDetails .raDetailsGrid{
  box-sizing:border-box!important;width:100%;max-width:100%;
  min-width:0!important;
}
body.raProfileContext :is(.raAccountContextHeader,.raProfileSettings){
  overflow-x:clip;
}
@media(max-width:980px){
  body.raProfileContext .raProfileSettings{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  }
}

/* On touchscreens the account screen accepts vertical movement only.
   Camera-photo cropping remains separate with its own touch-action:none. */
@media(pointer:coarse){
  html.aqilAccountSettings,
  html.aqilAccountSettings body.raProfileContext,
  body.raProfileContext .raAccountContextMain,
  body.raProfileContext .raAccountContextHeader{
    touch-action:pan-y pinch-zoom;
  }
}
body.raProfileContext .raProfileSettings>*{
  min-width:0!important;
}

/* v1.3 | Avatar-first photo flow on registration and account settings. */
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
  margin:6px 0 24px!important;
  padding:12px 0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview{
  position:relative!important;
  display:block!important;
  width:156px!important;
  height:156px!important;
  min-width:156px!important;
  min-height:156px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:3px solid rgba(255,255,255,.92)!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  box-sizing:border-box!important;
  box-shadow:0 10px 30px rgba(21,51,82,.16)!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarCamera{
  appearance:none!important;
  position:absolute!important;
  right:0!important;
  bottom:1px!important;
  z-index:3!important;
  display:grid!important;
  place-items:center!important;
  width:41px!important;
  height:41px!important;
  min-width:41px!important;
  min-height:41px!important;
  padding:9px!important;
  margin:0!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:#eff6ff!important;
  color:#114d80!important;
  box-shadow:0 4px 15px rgba(5,28,52,.18)!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarCamera svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  pointer-events:none!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarCamera:focus-visible{
  outline:3px solid #2a8bdf!important;
  outline-offset:3px!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoActions[hidden]{
  display:none!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor [data-photo-input][hidden]{
  display:none!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor + .raDetailsGrid.raDetailsBlockGap{
  margin-top:0!important;
}
html[data-theme="dark"] #raProfileDetails .raAvatarCamera{
  border-color:#142b42!important;
  background:#284967!important;
  color:#ebf5ff!important;
}
html[data-theme="dark"] #raProfileDetails .raAvatarEditor .raProfilePhotoPreview img{
  border-color:#27425d!important;
  box-shadow:0 10px 30px rgba(0,0,0,.3)!important;
}
/* Avatar menu: no dead options, no overflowing text. */
.aqilSourceChoices button:disabled{
  opacity:.43!important;
  cursor:not-allowed!important;
  background:#f0f3f6!important;
}
.aqilSourceChoices .aqilSourceDanger:not(:disabled){
  color:#b12b35!important;
}
.aqilSourceChoices .aqilSourceDanger>span{
  background:#ffedf0!important;
  color:#ae2532!important;
}
html[data-theme="dark"] .aqilSourceDialog{
  background:#172e46!important;
  border-color:#395570!important;
  color:#eef7ff!important;
}
html[data-theme="dark"] .aqilSourceHeader{
  border-color:#34506a!important;
}
html[data-theme="dark"] .aqilSourceHeader small,
html[data-theme="dark"] .aqilSourceNotice{
  color:#b6cbdf!important;
}
html[data-theme="dark"] .aqilSourceHeader>button{
  background:#294761!important;
  color:#eff7ff!important;
}
html[data-theme="dark"] .aqilSourceChoices button{
  background:#203c55!important;
  border-color:#3c5872!important;
  color:#eff6fd!important;
}
html[data-theme="dark"] .aqilSourceChoices button:disabled{
  background:#1a3147!important;
  color:#a3b6ca!important;
}
html[data-theme="dark"] .aqilSourceChoices .aqilSourceDanger:not(:disabled){
  color:#ffb3b3!important;
}
@media(max-width:680px){
  :is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor{
    margin:4px 0 20px!important;
    padding:6px 0 7px!important;
  }
  :is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview{
    width:144px!important;
    height:144px!important;
    min-width:144px!important;
    min-height:144px!important;
  }
}

/* Avatar-first account flow: reference-style photo at top, names immediately below.
   The Data Pribadi heading stays accessible to screen readers. */
:is(#raRegistrationDetails,#raProfileDetails) .raPersonalSectionHead{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor{
  margin-top:3px!important;
  margin-bottom:16px!important;
  padding:0!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview{
  border:0!important;
  background:transparent!important;
  cursor:pointer;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview img{
  object-fit:cover!important;
  object-position:center!important;
  aspect-ratio:1/1!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview:has(.raAvatarCamera){
  cursor:pointer;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor .raProfilePhotoPreview:not(:has(.raAvatarCamera)){
  cursor:default;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarCamera{
  display:grid!important;
  align-items:center!important;
  justify-items:center!important;
  touch-action:manipulation;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor + .raDetailsGrid.raDetailsBlockGap{
  margin-top:0!important;
}
@media(max-width:680px){
  :is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor{
    margin-bottom:16px!important;
    padding:0!important;
  }
}

/* Avatar controls remain keyboard accessible and visually separate from data fields. */
:is(#raRegistrationDetails,#raProfileDetails) .raProfilePhotoPreview[tabindex="0"]:focus-visible{
  outline:3px solid #2684d9!important;
  outline-offset:5px!important;
}
:is(#raRegistrationDetails,#raProfileDetails) .raAvatarEditor + .raDetailsGrid{
  position:relative;
  clear:both;
}