/* ============================================================
   POPUP — waitlist с реферальной программой
   Подключается ПОСЛЕ design-system.css.
   Используется на index.html. Может использоваться на других страницах.
   ============================================================ */

.wl-overlay {
  position: fixed; inset: 0; background: rgba(28,26,22,.65);
  display: none; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px; backdrop-filter: blur(4px);
  overflow-y: auto;
}
.wl-overlay.active { display: flex; }
.wl-card {
  background: #fff; max-width: 480px; width: 100%;
  border: 1px solid #d8d3c6; border-top: 6px solid #c44a08;
  position: relative; padding: 36px 30px 28px;
  box-shadow: 0 24px 48px rgba(28,26,22,.18);
  font-family: 'DM Sans', sans-serif;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.wl-close {
  position: absolute; top: 8px; right: 12px;
  width: 32px; height: 32px; background: none; border: none;
  font-size: 26px; line-height: 1; color: #1c1a16;
  cursor: pointer; padding: 0;
}
.wl-close:hover { color: #c44a08; }
.wl-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.15; margin: 0 0 8px;
  color: #1c1a16; letter-spacing: -.01em;
}
.wl-sub {
  font-size: 14px; line-height: 1.5; color: #6b6557; margin: 0 0 22px;
}
.wl-input {
  width: 100%; padding: 14px 16px; box-sizing: border-box;
  border: 1px solid #d8d3c6; border-radius: 0;
  background: #f8f6f1; color: #1c1a16;
  font-family: 'DM Mono', monospace; font-size: 14px;
  margin-bottom: 12px; transition: border-color .15s;
}
.wl-input:focus { outline: none; border-color: #c44a08; }
.wl-btn {
  width: 100%; padding: 14px; box-sizing: border-box;
  background: #c44a08; color: #fff; border: none; border-radius: 0;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .8px; text-transform: uppercase; cursor: pointer;
  transition: background .15s;
}
.wl-btn:hover { background: #a33a05; }
.wl-btn:disabled { opacity: .55; cursor: not-allowed; }
.wl-error {
  display: none; color: #c44a08; font-size: 13px; margin-top: 10px;
}
.wl-error.active { display: block; }

/* Success state */
.wl-success { display: none; }
.wl-success.active { display: block; }
.wl-success-top { text-align: center; padding: 4px 0 20px; }
.wl-success-icon {
  width: 52px; height: 52px; margin: 0 auto 10px;
  border: 2px solid #1a6e3a; color: #1a6e3a;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: bold;
}
.wl-pos {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 40px; color: #c44a08; margin: 10px 0 4px;
  letter-spacing: -.02em;
}
.wl-pos-label {
  font-size: 13px; color: #6b6557; margin: 0;
}

/* Referral block */
.wl-ref {
  border-top: 1px solid #ebe7dd; margin-top: 20px; padding-top: 22px;
}
.wl-ref-title {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px;
  color: #1c1a16; margin: 0 0 6px;
}
.wl-ref-sub {
  font-size: 13px; color: #6b6557; line-height: 1.5; margin: 0 0 16px;
}
.wl-link-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: #6b6557; margin-bottom: 6px;
}
.wl-link-row {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.wl-link-box {
  flex: 1; min-width: 0; background: #f8f6f1; border: 1px solid #d8d3c6;
  padding: 11px 12px; font-family: 'DM Mono', monospace; font-size: 12px;
  color: #1c1a16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center;
}
.wl-copy-btn {
  background: #1c1a16; color: #fff; border: none; padding: 0 16px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.wl-copy-btn:hover { background: #2c2820; }
.wl-copy-btn.done { background: #1a6e3a; }

.wl-progress {
  background: #f8f6f1; border: 1px solid #ebe7dd; padding: 14px 16px;
  margin-bottom: 14px;
}
.wl-progress-text {
  font-size: 13px; color: #2a2820; margin: 0 0 9px;
}
.wl-progress-text b { color: #c44a08; font-weight: 700; }
.wl-progress-bar {
  height: 6px; background: #ebe7dd; overflow: hidden; position: relative;
}
.wl-progress-fill {
  height: 100%; width: 0; background: linear-gradient(90deg, #a67c00, #c44a08);
  transition: width .8s cubic-bezier(.2,.7,.3,1);
}

/* Tiers */
.wl-tiers { display: flex; flex-direction: column; gap: 8px; }
.wl-tier {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #ebe7dd; padding: 11px 14px;
  background: #fff; transition: all .2s;
}
.wl-tier.reached {
  border-color: #1a6e3a; background: #f4f9f5;
}
.wl-tier-icon { font-size: 20px; line-height: 1; flex-shrink: 0; width: 26px; text-align: center; }
.wl-tier-mid { flex: 1; min-width: 0; }
.wl-tier-name {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 13px;
  color: #1c1a16; line-height: 1.2;
}
.wl-tier-req {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .04em; color: #6b6557; margin-top: 1px;
}
.wl-tier-rw {
  font-size: 12px; color: #2a2820; flex-shrink: 0; text-align: right;
  font-weight: 600;
}
.wl-tier.reached .wl-tier-rw { color: #1a6e3a; }

@media (max-width: 520px) {
  .wl-card { padding: 28px 20px 22px; }
  .wl-title { font-size: 22px; }
  .wl-pos { font-size: 34px; }
  .wl-tier-rw { font-size: 11px; }
}

/* Gmail подготовка — мини-инструкция */
.wl-gmail {
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(160deg, #faf8f3, #f2efe8);
  border: 1px solid #ebe7dd;
}
.wl-gmail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.wl-gmail-emoji { font-size: 18px; line-height: 1; }
.wl-gmail-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #1c1a16;
  line-height: 1.25;
}
.wl-gmail-sub {
  font-size: 12.5px;
  color: #6b6557;
  margin-bottom: 9px;
}
.wl-gmail-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #2a2820;
}
.wl-gmail-steps li { margin: 3px 0; }