/* ═══════════════════════════════════════════════════════════════
   «آخر خطوة 👇» رقم الواتساب — صفحة «تم!» (pay.html) وأول دخول على
   الكورس (app/index.html). wa-ask.js بيبني العناصر. ملف مشترك عن قصد:
   styles.css وapp/styles.css إلهم نفس المتغيّرات (--accent · --line …)
   بس ملفين منفصلين. .soon__input/.soon__error من styles.css — والكورس
   إله نسخته هون تحت (.app-wa).
   ═══════════════════════════════════════════════════════════════ */
.wa-ask {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 24rem;
  margin: 1.75rem auto 0;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(216, 227, 189, 0.06);
  text-align: start;
}

.wa-ask__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
}

.wa-ask__input {
  text-align: left;
}

.wa-ask__error[hidden] {
  display: none;
}

.wa-ask__save {
  width: 100%;
  min-height: 3.25rem;
}

/* «بعدين» — رابط صغير تحت الزر (مش زر تاني بنفس الوزن) */
.wa-ask__later {
  align-self: center;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wa-ask__later:hover {
  color: var(--text-soft);
}

/* زر «ابدأ بالكورس» بـ«تم!» مخفي لحد «ضيفني»/«بعدين» — .btn (inline-flex) بيغلب [hidden] */
.done__cta[hidden] {
  display: none;
}

.wa-ask__ok {
  margin: 1.5rem auto 0;
  max-width: 24rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--g-200);
}

/* ── الكورس (app/index.html) — بطاقة فوق «أهلاً فيك» ── */
.app-wa {
  max-width: var(--max, 75rem);
  margin: 1.5rem auto 0;
  padding-inline: var(--pad, 1.25rem);
}

.app-wa[hidden] {
  display: none;
}

.app-wa .wa-ask,
.app-wa .wa-ask__ok {
  margin-top: 0;
  margin-inline: 0;
  max-width: 30rem;
}

/* الكورس ما فيه .soon__input/.soon__error (styles.css تبع الصفحة الرئيسية) */
.app-wa .soon__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  border: 2px solid rgba(216, 227, 189, 0.34);
  border-radius: 12px;
  background: var(--g-950);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--text);
}

.app-wa .soon__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 188, 78, 0.22);
}

.app-wa .soon__error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--accent);
}