/* ==========================================================
   DANCEHIRES COMPETITION LOGIN V1
========================================================== */

.dh-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background:
    radial-gradient(
      circle at 75% 20%,
      color-mix(
        in srgb,
        var(--competition-primary, #7027ff) 20%,
        transparent
      ),
      transparent 35%
    ),
    rgba(7, 5, 14, .82);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dh-auth-overlay.visible {
  display: flex;
}

.dh-auth-shell {
  width: min(500px, 100%);

  overflow: hidden;

  background: #fff;

  border:
    1px solid rgba(255,255,255,.5);

  border-radius: 28px;

  box-shadow:
    0 40px 100px rgba(0,0,0,.28);
}

.dh-auth-brand {
  position: relative;

  padding: 34px 36px 30px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--competition-primary, #7027ff) 88%,
        #090714
      ),
      color-mix(
        in srgb,
        var(--competition-secondary, #d528ff) 75%,
        #090714
      )
    );

  color: #fff;
}

.dh-auth-brand::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 60px;

  right: -50px;
  top: 28px;

  transform: rotate(-18deg);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.06),
      color-mix(
        in srgb,
        var(--competition-accent, #d6ad54) 75%,
        white
      ),
      rgba(255,255,255,.08)
    );

  opacity: .7;
}

.dh-auth-platform {
  position: relative;
  z-index: 2;

  display: block;

  margin-bottom: 18px;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .14em;

  text-transform: uppercase;

  opacity: .82;
}

.dh-auth-brand h1 {
  position: relative;
  z-index: 2;

  margin: 0;

  font-size: 34px;
  line-height: 1.02;
  font-weight: 900;
}

.dh-auth-brand p {
  position: relative;
  z-index: 2;

  margin: 10px 0 0;

  font-size: 14px;
  line-height: 1.45;

  opacity: .82;
}

.dh-auth-content {
  padding: 32px 36px 36px;
}

.dh-auth-content h2 {
  margin: 0 0 6px;

  color: #141121;

  font-size: 25px;
  font-weight: 900;
}

.dh-auth-content > p {
  margin: 0 0 26px;

  color: #746e80;

  font-size: 14px;
  line-height: 1.5;
}

.dh-auth-field {
  margin-bottom: 18px;
}

.dh-auth-field label {
  display: block;

  margin-bottom: 8px;

  color: #25202f;

  font-size: 12px;
  font-weight: 900;
}

.dh-auth-field input {
  width: 100%;
  height: 52px;

  box-sizing: border-box;

  padding: 0 16px;

  color: #17131f;

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

  background: #fff;

  border: 1px solid #ded9e7;
  border-radius: 14px;

  outline: none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.dh-auth-field input:focus {
  border-color:
    var(--competition-primary, #7027ff);

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--competition-primary, #7027ff) 12%,
      transparent
    );
}

.dh-auth-button {
  width: 100%;
  height: 52px;

  margin-top: 4px;

  border: 0;
  border-radius: 15px;

  color: #fff;

  font: inherit;
  font-size: 14px;
  font-weight: 900;

  cursor: pointer;

  background:
    linear-gradient(
      100deg,
      var(--competition-primary, #7027ff),
      var(--competition-secondary, #d528ff)
    );

  box-shadow:
    0 15px 34px
    color-mix(
      in srgb,
      var(--competition-primary, #7027ff) 28%,
      transparent
    );
}

.dh-auth-button:disabled {
  opacity: .55;
  cursor: wait;
}

.dh-auth-error {
  display: none;

  margin: 0 0 18px;
  padding: 12px 14px;

  color: #9c1d2c;

  background: #fff3f4;

  border: 1px solid #ffd5d9;
  border-radius: 12px;

  font-size: 13px;
  font-weight: 700;
}

.dh-auth-error.visible {
  display: block;
}

.dh-auth-security {
  margin-top: 22px;

  color: #938d9c;

  text-align: center;

  font-size: 11px;
  line-height: 1.5;
}

.dh-auth-hidden {
  display: none !important;
}