/* /assets/css/register.css */

.auth-page,
.auth-page--register {
  background:
    radial-gradient(circle at 100% 10%, rgba(215, 94, 204, .26), transparent 22%),
    radial-gradient(circle at 0% 68%, rgba(202, 211, 194, .36), transparent 18%),
    linear-gradient(120deg, #f0e3ff 0%, #fff 42%, #ffe8f1 100%);
  color: #172033;
}

.auth-shell {
  position: relative;
  overflow: hidden;
  padding: 20px 0 34px;
}

.auth-shell .site-container {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
}

/* Main banner */

.register-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  max-width: 1160px;
  min-height: 560px;
  margin: 0 auto;

  padding: 42px 34px;

  background: #fff0f0;
  border: 1px solid rgba(239, 205, 205, .95);
  border-radius: 0 0 22px 22px;

  box-shadow: 0 28px 70px rgba(31, 25, 45, .10);
}

/* Left side */

.register-banner__left {
  flex: 0 0 64%;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.register-banner__image {
  width: clamp(330px, 31vw, 470px);
  max-width: none;
  height: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 18px 28px rgba(34, 24, 40, .10));
}

.register-banner__content {
  max-width: 390px;
  min-width: 0;
}

.register-banner__content h1 {
  margin: 0;
  color: #202044;
  font-size: clamp(46px, 4.15vw, 64px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: -.045em;
}

.register-banner__content h1 span {
  color: #d94357;
  white-space: normal;
}

.register-banner__content p {
  max-width: 430px;
  margin: 22px 0 18px;
  color: #3f4654;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
}

/* Benefits */

.register-benefits {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.register-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;

  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;

  color: #3e4654;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(32, 32, 68, .05);
}

/* Right card */

.register-card {
  flex: 0 0 32%;
  width: auto;
  max-width: 390px;

  padding: 30px 26px 28px;

  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .98);
  border-radius: 0 0 16px 16px;

  box-shadow: 0 20px 50px rgba(24, 20, 34, .10);
}

.register-card__top {
  margin-bottom: 18px;
}

.register-card__top h2 {
  margin: 0;
  color: #253044;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.025em;
}

/* Alerts */

.alert {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.alert--success {
  color: #047857;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .22);
}

.alert--error {
  color: #b91c1c;
  background: rgba(239, 68, 68, .10);
  border: 1px solid rgba(239, 68, 68, .20);
}

/* Form */

.register-form {
  display: grid;
  gap: 14px;
}

.register-form input,
.register-form select {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;

  border: 1px solid rgba(203, 213, 225, .96);
  border-radius: 16px;
  background: #fff;

  color: #172033;
  font: inherit;
  font-size: 15px;
  font-weight: 650;

  outline: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.register-form input::placeholder {
  color: #64748b;
  font-weight: 600;
}

.register-form input:focus,
.register-form select:focus {
  border-color: rgba(124, 58, 237, .42);
  box-shadow:
    0 0 0 4px rgba(124, 58, 237, .10),
    0 12px 26px rgba(15, 23, 42, .06);
}

.register-form select {
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 25px,
    calc(100% - 16px) 25px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Password */

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 62px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 14px;
  background: rgba(124, 58, 237, .12);
  color: #6d28d9;

  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover {
  background: rgba(124, 58, 237, .18);
}

.password-toggle__icon {
  font-size: 15px;
  line-height: 1;
}

/* Button */

.register-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;

  border: 0;
  border-radius: 10px;

  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  box-shadow: 0 16px 32px rgba(109, 40, 217, .25);

  font: inherit;
  font-size: 15px;
  font-weight: 950;

  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.register-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(109, 40, 217, .31);
}

.register-card__links {
  margin-top: 12px;
  color: #334155;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
}

.register-card__links a {
  color: #233876;
  font-weight: 900;
  text-decoration: none;
}

.register-card__links a:hover {
  text-decoration: underline;
}

.form-note {
  margin: -4px 0 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

/* Mobile */

@media (max-width: 1020px) {
  .register-banner {
    flex-direction: column;
    min-height: auto;
    padding: 34px 24px;
    border-radius: 22px;
  }

  .register-banner__left {
    flex: none;
    width: 100%;
  }

  .register-card {
    flex: none;
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  .auth-shell {
    padding: 14px 0 28px;
  }

  .auth-shell .site-container {
    width: min(100% - 18px, 1240px);
  }

  .register-banner {
    gap: 24px;
    padding: 26px 18px;
  }

  .register-banner__left {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .register-banner__image {
    width: min(78vw, 330px);
    max-width: 100%;
  }

  .register-banner__content h1 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .register-banner__content h1 span {
    white-space: normal;
  }

  .register-banner__content p {
    margin: 16px auto;
    font-size: 16px;
  }

  .register-benefits {
    justify-content: center;
  }

  .register-card {
    padding: 24px 18px;
  }

  .register-card__top h2 {
    font-size: 22px;
  }

  .register-form input,
  .register-form select {
    min-height: 54px;
  }
}

/* Dark mode */

html[data-theme="dark"] .auth-page,
body.theme-dark.auth-page,
html[data-theme="dark"] .auth-page--register,
body.theme-dark.auth-page--register {
  background:
    radial-gradient(circle at 100% 10%, rgba(124, 58, 237, .25), transparent 24%),
    #0f172a;
}

html[data-theme="dark"] .register-banner,
body.theme-dark .register-banner {
  background: #151827;
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .register-card,
body.theme-dark .register-card {
  background: #111827;
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .register-banner__content h1,
body.theme-dark .register-banner__content h1,
html[data-theme="dark"] .register-card__top h2,
body.theme-dark .register-card__top h2 {
  color: #f8fafc;
}

html[data-theme="dark"] .register-banner__content p,
body.theme-dark .register-banner__content p,
html[data-theme="dark"] .register-card__links,
body.theme-dark .register-card__links,
html[data-theme="dark"] .form-note,
body.theme-dark .form-note {
  color: #cbd5e1;
}

html[data-theme="dark"] .register-benefits span,
body.theme-dark .register-benefits span {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .10);
  color: #e2e8f0;
}

html[data-theme="dark"] .register-form input,
html[data-theme="dark"] .register-form select,
body.theme-dark .register-form input,
body.theme-dark .register-form select {
  background: #0f172a;
  border-color: rgba(255, 255, 255, .12);
  color: #f8fafc;
}

html[data-theme="dark"] .register-form input::placeholder,
body.theme-dark .register-form input::placeholder {
  color: #94a3b8;
}