/* ==============================================================
   Auth Popups – dark‑theme styling + namespaced animations v1.3
================================================================ */

/* ---------- overlay ---------- */
/* ---------- overlay ---------- */
#authOverlay {
  position: fixed;
  inset: 0;
  background-color: var(--semi-transparent-black, rgba(0, 0, 0, .75));
  -webkit-backdrop-filter: blur(10px) brightness(.8) contrast(1.05);
  backdrop-filter: blur(10px) brightness(.8) contrast(1.05);
  display: none;
  z-index: 98005;
}

/* When the auth modal is up, force the overlay to stay visible even if
   some other initializer tries to flip display back to none. */
html.auth-open #authOverlay {
  display: block !important;
}

/* Only the active popup (tagged by JS via data-open="1") should be visible;
   !important ensures it wins over any late inline display:none. */
html.auth-open .auth-popup[data-open="1"] {
  display: flex !important;
}


/* ---------- container ---------- */
.auth-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 960px;
  max-height: 80vh;
  background: #1d2021;
  border-radius: 7px;
  display: none;
  z-index: 99000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
  overflow: hidden;
  color: #e5e7eb;
  font-family: var(--identity-font, 'Open Sans', sans-serif);

  flex-direction: row;
  align-items: center;
  overflow-x: auto;
}

.auth-popup {
  display: none
}


@media (max-width: 600px) {
  .auth-popup {
    flex-direction: column-reverse;
    width: clamp(390px, 270px + 30vw, 450px);
    max-width: 95%;
    align-items: unset;
  }
}



/* ---------- columns ---------- */
.auth-left,
.auth-right {
  height: 100%;
  overflow: hidden;
  padding: clamp(24px, 15.2727px + 1.4545vw, 32px) clamp(20px, -1.8182px + 3.6364vw, 40px);
}

@media (max-width: 600px) {

  .auth-left,
  .auth-right {
    min-width: 270px;
    padding: clamp(24px, 8px + 4vw, 32px) clamp(22px, 6px + 4vw, 30px);
  }
}

.auth-left {
  flex: 1;
  background: #25292a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.auth-right {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

/* ---------- headings & lists ---------- */
.auth-illus {
  font-size: var(--ft-40-31);
  margin-bottom: 1.5rem
}

.auth-title {
  font: 700 var(--ft-28-20) var(--identity-font);
  margin: 0 0 1rem
}

.auth-subtitle {
  font-size: var(--font-size-15px);
  color: var(--grey-color-2);
  margin: 0 0 1rem
}

.auth-bullets {
  list-style: none;
  margin: 0;
  padding: 0
}

.auth-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0;
  font-size: var(--font-size-14px);
  color: var(--grey-color-1)
}

.auth-bullets li::before {
  content: '★';
  color: var(--site-start-color, #00aeff);
  font-size: var(--font-size-18px);
  line-height: 1;
}

@media (max-width: 600px) {
  .auth-illus {
    margin-bottom: 2rem;
  }
}




/* ---------- form side ---------- */
.auth-heading {
  font: 700 var(--ft-30-24) var(--identity-font);
  margin: 0 0 .5rem;
}

/* ---------- benefits row ---------- */
/* ---------- benefits row ---------- */
.auth-benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* center each wrapped line */
  gap: 0.5rem;
  font-size: var(--font-size-14px);
  color: var(--grey-color-2);
  margin: 0 0 1.75rem;
  text-align: center;
}

.benefit-start {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;      /* keep icon + “Unlimited Access” together */
}

.auth-benefits .benefit-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--success-color, #00d26a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-benefits .benefit-icon::before {
  content: '✔';
  font-size: 0.75rem;
  line-height: 1;
  color: #101214;
}


.auth-provider {
  display: block;
  width: 100%;
  font-size: var(--font-size-15px);
  padding: 1.25rem 0;
  text-align: center;
  border: 1px solid #38404b;
  border-radius: 5px;
  font-weight: 600;
  color: var(--grey-color-1);
  background: #1d2021;
  transition: background .15s;
  text-decoration: none
}

.auth-provider:hover {
  background: #2e343b
}

.auth-provider.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  /* space between icon and label          */
}

.auth-provider.google .provider-icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  pointer-events: none;
  /* icon never captures clicks             */
}


.auth-divider {
  display: none;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin: 2rem 0
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #38404b
}

.auth-divider span {
  font-size: var(--font-size-13px);
  color: #9ba2ab;
  font-weight: 600
}

.auth-submit,
.auth-submit.full-width {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.25rem 2rem;
  border: none;
  border-radius: 6px;
  background: linear-gradient(to right, var(--site-start-color),
      var(--site-end-color));
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s
}

.auth-submit:hover {
  background: linear-gradient(to right, var(--site-start-color),
      var(--site-start-color));
}


/* ---------- submit spacing ---------- */
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  /* space between any leading symbol and text */
}

/* ---------- legal notice ---------- */
.auth-legal {
  font-size: var(--font-size-12px);
  color: var(--grey-color-2);
  margin: .75rem 0 0;
  line-height: 1.45;
}

.auth-legal a {
  color: var(--grey-color-2);
  text-decoration: underline;
  font-weight: 400;
}

/* keep the account switch hard-pinned to the bottom */
.auth-switch {
  font-size: var(--font-size-14px);
  margin-top: 3rem;
  color: var(--grey-color-2);
}

.auth-switch a {
  color: var(--site-start-color, #00aeff);
  text-decoration: none;
  font-weight: 600;
}

.auth-switch a:hover {
  text-decoration: underline;
}



/* ---------- close button ---------- */
.auth-close {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 26px;
  line-height: 26px;
  color: var(--grey-color-4);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100000;     /* above both columns & overlay – always clickable */
  pointer-events: auto;/* explicitly accept taps / clicks                */
}

.auth-close:hover {
  color: #d1d5db;
}

/* ---------- namespaced animations ---------- */
@keyframes authFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes authSlideIn {
  from {
    transform: translate(-50%, -60%);
    opacity: 0
  }

  to {
    transform: translate(-50%, -50%);
    opacity: 1
  }
}

.authFadeIn {
  animation: authFadeIn .25s ease-out forwards
}

.authSlideIn {
  animation: authSlideIn .25s ease-out forwards
}