/* Registration layout based on the desktop reference. */
.register-body {
  background-image:
    radial-gradient(ellipse at 50% 12%, rgba(0, 135, 169, .43), transparent 39%),
    radial-gradient(ellipse at 52% 42%, rgba(0, 59, 112, .34), transparent 49%),
    radial-gradient(ellipse at 78% 68%, rgba(11, 44, 57, .42), transparent 54%),
    linear-gradient(135deg, #061a24, #04131c 65%, #061923) !important;
}

.register-body .login-container {
  width: min(calc(100% - 64px), 1080px) !important;
  min-height: 100vh !important;
  padding: 90px 0 32px !important;
  left: 0;
}

.register-header {
  position: absolute;
  top: 68px;
  left: 50%;
  width: min(1080px, 100%);
  max-width: 1080px;
  min-height: 54px;
  margin: 0;
  transform: translateX(-50%);
  align-items: center;
  z-index: 2;
}
.register-header .login-header-brand { margin-top: 0; }
.register-header .login-header-brand img { width: 148px; transform: none; }
.register-header .login-header-actions { gap: 12px; }
.register-header .login-language-globe {
  position: static;
  width: 24px;
  height: 24px;
  margin: 0;
  pointer-events: none;
  stroke: #d5e4eb;
}
.register-header .auth-language-select {
  width: 120px;
  height: 40px;
  padding: 0 32px 0 13px;
  border-color: #3b5d70;
  background-color: rgba(6, 20, 32, .56) !important;
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 620px);
  gap: 40px;
  align-items: center;
  min-height: calc(100vh - 180px);
  width: min(1060px, 100%);
  margin: 0 auto;
  padding-top: 0;
}

.register-intro {
  position: relative;
  z-index: 0;
  margin-top: 0;
  margin-left: 0;
}
.register-intro::before,
.register-intro::after {
  content: '';
  position: fixed;
  z-index: -1;
  width: 750px;
  height: 490px;
  left: -505px;
  top: auto;
  bottom: -205px;
  border: 1px solid rgba(13, 179, 208, .38);
  border-radius: 50%;
  transform: rotate(18deg);
  pointer-events: none;
}
.register-intro::after {
  width: 790px;
  height: 530px;
  left: -375px;
  top: auto;
  bottom: -350px;
  border-color: rgba(13, 179, 208, .23);
  transform: rotate(-14deg);
}
.register-intro h1 {
  margin: 0 0 15px;
  color: #f2f6fa;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 750;
  letter-spacing: -.035em;
}
.register-intro p {
  margin: 0;
  color: #a5bfd3;
  font-size: 15px;
  line-height: 1.5;
}
.register-feature-list {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.register-feature-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #e4edf5;
  font-size: 16px;
}
.register-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #12ccdb;
  border-radius: 10px;
  background: rgba(4, 26, 40, .33);
}
.register-feature-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #25d7e6;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-body .register-card {
  max-width: none;
  padding: 27px 32px 23px;
  border: 1px solid #3b6378;
  border-radius: 10px;
  background: rgba(9, 26, 42, .74) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .14), inset 0 1px rgba(255,255,255,.025);
}
.register-body .register-brand { margin-bottom: 19px; }
.register-body .register-brand h2 {
  margin-bottom: 7px;
  font-size: 29px;
  line-height: 1.2;
}
.register-body .register-brand .register-brand-sub {
  color: #b8cbe0 !important;
  font-size: 15px;
  line-height: 1.4;
}
.register-body .register-form { gap: 12px; }
.register-body .register-fields-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
.register-body .register-card .input-label {
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.25;
  text-transform: none;
}
.register-body .register-card .login-input {
  width: 100%;
  min-height: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #45647a;
  border-radius: 7px;
  color: #edf5fb !important;
  background: rgba(6, 19, 33, .45) !important;
  font-size: 14px;
}
.register-body .register-card .login-input::placeholder { color: #8da3b8; }
.register-body .register-card select.login-input {
  padding-right: 34px;
  color-scheme: dark;
}
.register-body .register-card select.login-input option { color: #eef4f9; background: #0b2030; }
.register-body .register-card .password-toggle { display: none; }
.register-body .register-card .consent-row {
  gap: 9px;
  margin: 5px 0 0;
  color: #eef4f9;
  font-size: 12px;
  line-height: 1.4;
}
.register-body .register-card .consent-row input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 17px;
  accent-color: #09a9b4;
}
.register-body .register-card .consent-row a {
  color: #14d3dd;
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 0;
}
.register-body .register-card #register-submit {
  min-height: 42px;
  padding: 0 20px;
  font-size: 15px;
  background: linear-gradient(100deg, #09a3b2, #0ab7c4) !important;
}
.register-body .register-card .login-separator { margin: 1px 0 0; }
.register-body .register-card .social-auth-btn--google { min-height: 42px; padding: 9px 12px; font-size: 14px; }
.register-body .register-card .social-auth-btn__icon,
.register-body .register-card .social-auth-btn__icon svg { width: 22px; height: 22px; }
.register-body .register-card .register-login-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  color: #e6edf4;
  font-size: 12px;
}
.register-body .register-card .register-login-actions .login-btn.ghost {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  color: #17d4de;
  background: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.register-body .register-card #register-message { margin-top: 0; }

@media (max-width: 850px) {
  .register-body .login-container { width: min(calc(100% - 40px), 750px) !important; padding-top: 18px !important; left: 0; overflow: visible; }
  .register-header { position: relative; inset: auto; width: 100%; max-width: none; min-height: 54px; transform: none; align-items: center; }
  .register-header .login-header-brand { margin-top: 0; }
  .register-header .login-header-brand img { width: 175px; transform: none; }
  .register-layout { display: flex; flex-direction: column; gap: 20px; min-height: 0; padding-top: 14px; }
  .register-intro { margin-top: 0; margin-left: 0; padding-left: 0; }
  .register-intro::before, .register-intro::after { display: none; }
  .register-intro h1 { font-size: clamp(30px, 5vw, 42px); }
  .register-intro p { font-size: 17px; }
  .register-feature-list { display: none; }
  .register-body .register-card { width: 100%; }
}

@media (max-width: 600px) {
  .register-body .login-container { width: calc(100% - 32px) !important; padding: max(10px, env(safe-area-inset-top)) 0 22px !important; }
  .register-layout { gap: 16px; padding-top: 10px; }
  .register-header .login-header-brand img { width: 140px; }
  .register-header .login-language-globe { display: none; }
  .register-header .auth-language-select { width: 120px; height: 40px; padding-left: 12px; }
  .register-intro h1 { font-size: 31px; }
  .register-desktop-break { display: none; }
  .register-body .register-card { padding: 26px 21px 24px; }
  .register-body .register-brand h2 { font-size: 28px; }
  .register-body .register-brand .register-brand-sub { font-size: 16px; }
  .register-body .register-fields-grid { grid-template-columns: 1fr; gap: 15px; }
  .register-body .register-card .login-input { height: 47px; }
  .register-body .register-card .consent-row { font-size: 13px; }
  .register-body .register-card .register-login-actions { flex-wrap: wrap; font-size: 14px; }
}