/* ===== Auth pages (login/register/forgot/reset) - match main theme ===== */
.accout-bg{
  background: var(--ar-bg-1) !important;
  position: relative;
  overflow: hidden;
}
.accout-bg::after{
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(circle at 88% 75%, rgba(236,72,153,.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.account-inner::before,
.account-inner::after,
.registration-inner::before,
.registration-inner::after{
  display: none !important;
}
.account-inner,
.registration-inner{
  min-height: 0 !important;
  max-height: none !important;
  padding: 40px 20px !important;
  position: relative;
  z-index: 1;
}
.account-form{
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: linear-gradient(165deg, var(--ar-card-2), var(--ar-card)) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 24px !important;
  padding: 44px 38px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.5) !important;
}

.registration-inner .account-form{
  max-width: 560px;
}

.account-form__content{
  text-align: center;
  margin-bottom: 8px !important;
}

.account-form__logo{ display: inline-block; margin-bottom: 18px; }
.account-form__logo img{
  width: 130px !important;
  height: auto !important;
}

.account-form__desc{
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ar-ink-0) !important;
  margin-bottom: 8px !important;
}

.account-form .form-group{ text-align: left; margin-bottom: 18px; }
.account-form .form--label{
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ar-ink-2) !important;
  margin-bottom: 8px !important;
  display: inline-block;
}

.account-form .input-inner{ position: relative; }
.account-form .input-inner__icon{
  position: absolute !important;
  left: 16px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ar-ink-2) !important;
  background: none !important;
  z-index: 2;
  font-size: 14px;
  pointer-events: none;
}
.account-form .form--control{
  width: 100% !important;
  height: 52px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 12px !important;
  padding: 0 16px 0 44px !important;
  color: var(--ar-ink-0) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.account-form .form--control::placeholder{ color: var(--ar-ink-2) !important; }
.account-form .form--control:focus{
  border-color: var(--ar-purple) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.18) !important;
  outline: none !important;
}
.account-form .form--control:-webkit-autofill,
.account-form .form--control:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ar-ink-0) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(28,20,54,1) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.account-form .form--check{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 8px;
}
.account-form .form-check-input{
  accent-color: var(--ar-purple);
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  flex: 0 0 auto;
  margin-top: 2px !important;
}
.account-form .form-check-label{
  width: auto !important;
  flex: 1 1 auto;
  color: var(--ar-ink-2) !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.5;
}
.account-form .form-check-label a{
  color: var(--ar-pink) !important;
  font-weight: 600;
}
.account-form .forgot-password{
  color: var(--ar-pink) !important;
  font-size: 13px !important;
  font-weight: 600;
  transition: color .2s ease;
}
.account-form .forgot-password:hover{ color: var(--ar-purple) !important; }

.account-form .form-submit{ margin-top: 26px; }
.account-form .btn--gradient{
  background: linear-gradient(135deg, var(--ar-purple), var(--ar-pink)) !important;
  border: none !important;
  outline: none !important;
  border-radius: 10px !important;
  height: 48px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(139,92,246,.25) !important;
  transition: filter .2s ease, box-shadow .2s ease;
}
.account-form .btn--gradient:hover{
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(139,92,246,.3) !important;
}
.account-form .btn--gradient:focus,
.account-form .btn--gradient:active{
  outline: none !important;
  box-shadow: 0 2px 8px rgba(139,92,246,.25) !important;
}
.account-form .btn--gradient::before,
.account-form .btn--gradient::after{
  display: none !important;
  content: none !important;
  border: none !important;
}

.account-form .account-note{
  color: var(--ar-ink-2) !important;
  font-size: 13.5px !important;
  margin-top: 20px;
}
.account-form .account-note a{
  color: var(--ar-pink) !important;
  font-weight: 700;
}
.account-form .account-note a:hover{ color: var(--ar-purple) !important; }

.account-form .social-list__link{
  border-radius: 12px !important;
  border: 1px solid var(--ar-line) !important;
}

.account-form .select2-container{ width: 100% !important; }
.account-form .select2-container .select2-selection--single{
  width: 100% !important;
  box-sizing: border-box !important;
  height: 52px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
}
.account-form .select2-selection__rendered{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--ar-ink-0) !important;
  padding-left: 16px !important;
  line-height: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-form .select2-selection__arrow{ flex: 0 0 auto !important; position: static !important; height: auto !important; margin-right: 12px; }
.account-form .select2-selection__arrow b{ border-color: var(--ar-ink-2) transparent transparent transparent !important; }
.select2-dropdown{
  background: var(--ar-card) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.select2-search__field{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ar-line) !important;
  color: var(--ar-ink-0) !important;
  border-radius: 8px !important;
}
.select2-results__option{ color: var(--ar-ink-1) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background: var(--ar-purple) !important; color: #fff !important; }
.select2-container--default .select2-results__option[aria-selected=true]{ background: var(--ar-card-2) !important; }

.account-form .input-inner__icon.mobile-code{
  width: auto !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--ar-ink-1) !important;
}
.account-form input[name="mobile"]{ padding-left: 54px !important; }
.account-form small.text--danger{ display: block; margin-top: 6px; font-size: 12px; }

@media (max-width: 575px){
  .account-form .select2-container .select2-selection--single{ height: 44px !important; }
  .account-form .select2-selection__arrow{ height: 42px !important; }
  .accout-bg{ min-height: 100vh !important; align-items: center !important; }
  .account-inner,
  .registration-inner{ padding: 14px !important; align-items: center !important; }
  .account-form{ padding: 22px 18px !important; border-radius: 18px !important; }
  .account-form__content{ margin-bottom: 4px !important; }
  .account-form__logo{ margin-bottom: 10px !important; }
  .account-form__logo img{ width: 80px !important; }
  .account-form__desc{ font-size: 17px !important; margin-bottom: 4px !important; }
  .account-form .form-group{ margin-bottom: 12px !important; }
  .account-form .form--label{ font-size: 11px !important; margin-bottom: 4px !important; }
  .account-form .form--control{ height: 44px !important; padding: 0 14px 0 40px !important; }
  .account-form .input-inner__icon{ left: 14px; font-size: 12px; }
  .account-form .form-submit{ margin-top: 14px !important; }
  .account-form .btn--gradient{ height: 44px !important; font-size: 14px !important; }
  .account-form .account-note{ margin-top: 12px !important; }
  .account-form .form--check{ gap: 6px !important; }
  .account-form .form-check-input{ width: 14px !important; height: 14px !important; min-width: 14px !important; }
  .account-form .form-check-label{ font-size: 11.5px !important; line-height: 1.4 !important; }
}

/* Keep ONLY First/Last Name paired side-by-side on mobile, matching desktop.
   Country/Mobile, Address/City, Password/Confirm go back to stacking full-width
   (their fields are narrower and don't read well split in half on small screens). */
@media (max-width: 767px){
  .registration-inner .account-form .row > .name-col{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
@media (max-width: 575px){
  .registration-inner .account-form .name-col .form--label{ font-size: 10px !important; }
  .registration-inner .account-form .name-col .form--control{ padding: 0 10px 0 34px !important; font-size: 12.5px !important; }
  .registration-inner .account-form .name-col .input-inner__icon{ left: 10px !important; }
}