/*
 * WebPlus — Chapter 13: Final CTA Styles (الدعوة الأخيرة وبوابة Iris Portal)
 * تفتح علامة + الكبرى بتأثير بصري سينمائي وأزرار مغناطيسية للانطلاق
 * بادئة الأصناف: wx-
 */

.wx-final-section {
  position: relative;
  background-color: var(--wx-ink);
  color: var(--wx-snow);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(56px, 5.5vw, 84px) var(--wx-sec-pad-bottom, clamp(96px, 9.5vw, 150px));
  overflow: hidden;
}

/* بوابة علامة الزائد المتفتحة في الخلفية (Iris Portal) */
.wx-final-iris-portal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(350px, 50vw, 750px);
  height: clamp(350px, 50vw, 750px);
  pointer-events: none;
  z-index: 1;
}

.wx-final-portal-svg {
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

.wx-final-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin-inline: auto;
}

.wx-final-title {
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: 900;
  color: var(--wx-snow);
  line-height: 1.25;
  margin-block: 20px 24px;
}

.wx-final-lead {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.85;
  color: var(--wx-slate-300);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 40px;
}

.wx-final-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* شريط الأسواق الخالي من الإيموجي */
.wx-final-markets-row {
  margin-top: clamp(48px, 8vh, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--wx-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--wx-slate-400);
}

.wx-final-market-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(7, 21, 48, 0.6);
  border: 1px solid var(--wx-border-dark);
  border-radius: var(--wx-radius-pill);
  color: var(--wx-snow);
  font-weight: 700;
}

.wx-final-market-pill svg {
  width: 14px;
  height: 14px;
  stroke: var(--wx-sky);
}