/* =================== auth-premium.css =================== */
/* auth-premium — premium auth page layout (2-col: form panel + value-prop
 * aside with benefits list). Single source of truth.
 *
 * NB: previously every rule was wrapped in `@media(max-width:1024px)`,
 * which silently hid the 2-col grid on desktop. Rules moved to base scope. */

.auth-premium {
  padding: clamp(40px, 5vw, 80px) 0;
}

.auth-premium__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(260px, 320px);
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}

.auth-premium__panel {
  padding: clamp(28px, 3vw, 40px);
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid var(--hc-gold-border, rgba(180, 151, 115, 0.32));
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.03),
    0 24px 60px -28px rgba(27, 20, 13, 0.18);
}

.auth-premium__aside {
  padding: clamp(24px, 2.6vw, 36px);
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.95), rgba(248, 244, 237, 0.86));
  border: 0.5px solid rgba(180, 151, 115, 0.22);
  border-radius: 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.auth-premium__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(540px 280px at 80% -20%, rgba(212, 184, 150, 0.30), transparent 60%);
  pointer-events: none;
}

.auth-premium__benefits {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.auth-premium__benefits li {
  position: relative;
  padding-left: 28px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72));
}
.auth-premium__benefits li strong {
  display: block;
  font-weight: 600;
  color: var(--hc-ink, #1a1714);
}
.auth-premium__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, rgba(212, 184, 150, 0.32), rgba(184, 154, 111, 0.14));
  border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
  border-radius: 50%;
}
.auth-premium__benefits li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--hc-accent-dark, #7a6548);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 10px 10px;
          mask-size: 10px 10px;
}

.auth-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.auth-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 18px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.74));
}

.auth-consent input[type="checkbox"] {
  margin-top: 2px;
  inline-size: 16px;
  block-size: 16px;
  accent-color: var(--hc-accent, #8b7355);
}

.auth-consent a {
  color: var(--hc-accent-dark, #6a573f);
  text-decoration: underline;
}

.auth-consent--compact {
  margin: 6px 0 14px;
}

/* Sprint47 — fix: когда auth-consent рендерится внутри dark gradient panel
 * (.auth-premium__panel), дефолтный --hc-ink-soft (тёмный) становится
 * невидимым на тёмном фоне. Переопределяем под dark surface на cream/light.
 * Owner-scoped — оба класса живут в этом файле, не cross-file cascade. */
.auth-premium__panel .auth-consent {
  color: rgba(252, 248, 240, 0.82);
}
.auth-premium__panel .auth-consent a {
  color: var(--hc-gold-1, var(--hc-gold, #d4b896));
}
.auth-premium__panel .auth-consent input[type="checkbox"] {
  accent-color: var(--hc-gold, #d4b896);
}




@media (max-width: 768px) {
  .auth-premium__grid {
    grid-template-columns: 1fr;
    gap: var(--hc-sp-4);
  }
}