/* ============================================================================
   Sign up  -  Views/Account/SignUp.cshtml
   Design: spedia-ultra-design/register.html
   The country / student popups use the design's .language-option rows. Those
   rules live in edit-profile.css, which the _Login layout does not load, so
   they are repeated here scoped to this page's popups.
   ========================================================================= */

.sign-up-page .sign-up-box{ padding-top: 20px; }
.sign-up-page .new-Register h5 a{ color: var(--primary); }

/* ---------- country / student popups ------------------------------------ */
#changeCountry .modal-body.flex-direction,
#selectStudent .modal-body.flex-direction{ flex-wrap: nowrap; justify-content: flex-start; }
#changeCountry .modal-dialog-scrollable .modal-body.flex-direction,
#selectStudent .modal-dialog-scrollable .modal-body.flex-direction{
  padding: 2px 0 2px 8px; scrollbar-width: thin; scrollbar-color: var(--primary) transparent;
}
#changeCountry .language-option,
#selectStudent .language-option{
  display: flex; align-items: center; gap: 12px; border: var(--stroke-primary); border-radius: var(--border-radius);
  padding: 16px; cursor: pointer;
}
#changeCountry .language-option.select,
#selectStudent .language-option.select{ border-color: var(--primary); }
#changeCountry .language-option-icon,
#selectStudent .language-option-icon{
  width: 40px; height: 40px; border-radius: 12px; background: var(--bg-light); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
#changeCountry .language-option-icon img{ max-width: 24px; border-radius: 50%; }
#selectStudent .language-option-icon.student-option-avatar{ width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
#selectStudent .language-option-icon.student-option-avatar img{ width: 100%; height: 100%; max-width: none; object-fit: cover; }
#changeCountry .language-option-info,
#selectStudent .language-option-info{ flex: 1; }
#changeCountry .language-option-info h5,
#selectStudent .language-option-info h5{ font-weight: 700; margin-bottom: 4px; }
#changeCountry .language-option-info p,
#selectStudent .language-option-info p{ color: var(--font-secondary); font-size: var(--font-size-16); margin: 0; }
#changeCountry .language-option-radio,
#selectStudent .language-option-radio{
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--font-secondary); flex-shrink: 0; position: relative;
}
#changeCountry .language-option.select .language-option-radio,
#selectStudent .language-option.select .language-option-radio{ border-color: var(--primary); }
#changeCountry .language-option.select .language-option-radio::after,
#selectStudent .language-option.select .language-option-radio::after{
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--primary);
}

@media (max-width: 480px){
  #changeCountry .language-option,
  #selectStudent .language-option{ padding: 10px 12px; gap: 10px; }
  #changeCountry .language-option-icon{ width: 34px; height: 34px; border-radius: 10px; }
  #changeCountry .language-option-icon img{ max-width: 20px; }
  #changeCountry .language-option-radio,
  #selectStudent .language-option-radio{ width: 20px; height: 20px; }
}