/* ==========================================================================
   صفحة تثبيت التطبيق
   ========================================================================== */
.stm-inst { padding-block: var(--stm-s5) var(--stm-s7); }

.stm-inst__hero {
  text-align: center;
  padding: var(--stm-s6) var(--stm-s5);
  margin-block-end: var(--stm-s5);
  border-radius: var(--stm-r-card-lg);
  border: 1px solid var(--stm-border-highlight);
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(124, 92, 255, .28), transparent 70%),
    var(--stm-glass);
}
.stm-inst__hero img {
  border-radius: 24px;
  margin-inline: auto;
  box-shadow: 0 14px 38px rgba(124, 92, 255, .45);
}
.stm-inst__title { margin: var(--stm-s4) 0 var(--stm-s2); font-size: var(--stm-fs-title); font-weight: 900; }
.stm-inst__text { margin: 0; font-size: var(--stm-fs-caption); color: var(--stm-text-secondary); line-height: 1.8; }

/* ---------- الخطوات ---------- */
.stm-inst__steps {
  margin-block: var(--stm-s4);
  padding: var(--stm-s5);
  border-radius: var(--stm-r-card);
  border: 1px solid var(--stm-border);
  background: var(--stm-glass);
}
.stm-inst__how {
  margin: 0 0 var(--stm-s4);
  font-weight: 900;
  color: var(--stm-cyan);
  font-size: var(--stm-fs-card);
}
.stm-inst__steps ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid; gap: var(--stm-s3);
}
.stm-inst__steps li {
  counter-increment: step;
  display: flex; align-items: flex-start; gap: var(--stm-s3);
  font-size: var(--stm-fs-caption);
  color: var(--stm-text-secondary);
  line-height: 1.7;
}
.stm-inst__steps li::before {
  content: counter(step);
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--stm-r-pill);
  background: var(--stm-grad-cta);
  color: #fff;
  font-size: 12px; font-weight: 900;
}
.stm-inst__steps b { color: var(--stm-text); font-weight: 900; }

.stm-inst__note {
  margin: var(--stm-s4) 0 0;
  padding: 10px 12px;
  border-radius: var(--stm-r-sm);
  background: rgba(255, 201, 77, .10);
  border: 1px solid rgba(255, 201, 77, .30);
  color: var(--stm-warning);
  font-size: 11px;
  line-height: 1.7;
}

/* ---------- مثبَّت بالفعل ---------- */
.stm-inst__done {
  display: flex; align-items: center; gap: var(--stm-s3);
  padding: var(--stm-s4);
  margin-block-end: var(--stm-s4);
  border-radius: var(--stm-r-card);
  border: 1px solid rgba(69, 224, 168, .45);
  background: rgba(69, 224, 168, .10);
}
.stm-inst__done .stm-ico { color: var(--stm-success); }
.stm-inst__done p { margin: 0; font-weight: 800; color: var(--stm-success); font-size: var(--stm-fs-caption); }

/* ---------- المزايا ---------- */
.stm-inst__perks { display: grid; gap: var(--stm-s2); margin-block: var(--stm-s5) 0; }
.stm-inst__perk {
  display: flex; align-items: center; gap: var(--stm-s3);
  padding: 11px var(--stm-s4);
  border-radius: var(--stm-r-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--stm-border);
  font-size: var(--stm-fs-caption);
  color: var(--stm-text-secondary);
}
.stm-inst__perk .stm-ico { color: var(--stm-cyan); }

/* ---------- بطاقة الدعوة في صفحة الاشتراك ---------- */
.stm-inst-cta {
  display: flex; align-items: center; gap: var(--stm-s3);
  padding: var(--stm-s4);
  margin-block-end: var(--stm-s4);
  border-radius: var(--stm-r-card);
  border: 1px solid var(--stm-border-highlight);
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(56, 217, 255, .08)), var(--stm-glass);
  text-decoration: none; color: inherit;
}
.stm-inst-cta img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.stm-inst-cta__body { flex: 1; min-width: 0; }
.stm-inst-cta__title { margin: 0; font-weight: 900; font-size: var(--stm-fs-body); }
.stm-inst-cta__text { margin: 2px 0 0; font-size: 11px; color: var(--stm-text-secondary); line-height: 1.6; }
.stm-inst-cta__go { flex: none; color: var(--stm-cyan); font-size: 20px; font-weight: 900; }

/* قسم تحميل تطبيق أندرويد */
.stm-inst__apk {
    margin: 20px 0 24px;
    padding: 18px 16px;
    border-radius: 18px;
    background: rgba(124, 92, 255, .10);
    border: 1px solid rgba(124, 92, 255, .28);
}

.stm-inst__apk .stm-btn {
    margin: 14px 0 4px;
    width: 100%;
}

.stm-inst__apksteps {
    margin: 14px 0 0;
    padding-inline-start: 20px;
    line-height: 1.9;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

.stm-inst__apksteps b { color: #FFB82E; }

/* محاكاة نافذة Play Protect */
.stm-pp { margin: 18px 0 4px; }

.stm-pp__win {
    position: relative;
    border-radius: 22px;
    padding: 20px 18px 18px;
    background: #2A2C31;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    text-align: center;
    overflow: hidden;
}

.stm-pp__shield { margin-bottom: 10px; }

.stm-pp__brand {
    margin: 0 0 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
}

.stm-pp__title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #E8EAED;
}

.stm-pp__app {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.stm-pp__app img { border-radius: 8px; }

.stm-pp__name {
    font-size: 14px;
    color: #E8EAED;
}

.stm-pp__body {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .70);
}

.stm-pp__more,
.stm-pp__anyway {
    margin: 0;
    font-size: 13.5px;
    color: #8AB4F8;
    transition: color .3s ease;
}

.stm-pp__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.stm-pp__chev {
    display: inline-block;
    transition: transform .4s ease;
}

.stm-pp__anyway {
    margin-top: 12px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .5s ease, max-height .5s ease, margin-top .5s ease;
}

/* المؤشر: حلقة تنتقل بين الخطوتين */
.stm-pp__ring {
    position: absolute;
    inset-inline-start: 50%;
    width: 34px;
    height: 34px;
    margin-inline-start: -17px;
    border-radius: 50%;
    border: 2px solid #FFB82E;
    opacity: 0;
    pointer-events: none;
}

/* دورة كاملة 14 ثانية */
.stm-pp.is-live .stm-pp__ring {
    animation: stmPpRing 14s ease-in-out infinite;
}

.stm-pp.is-live .stm-pp__chev {
    animation: stmPpChev 14s ease-in-out infinite;
}

.stm-pp.is-live .stm-pp__anyway {
    animation: stmPpReveal 14s ease-in-out infinite;
}

@keyframes stmPpRing {
    0%, 8%    { opacity: 0; transform: translateY(0) scale(.7); }
    12%, 26%  { opacity: 1; transform: translateY(0) scale(1); }
    30%       { opacity: 0; transform: translateY(0) scale(1.3); }
    34%, 46%  { opacity: 0; transform: translateY(46px) scale(.7); }
    50%, 72%  { opacity: 1; transform: translateY(46px) scale(1); }
    78%       { opacity: 0; transform: translateY(46px) scale(1.3); }
    100%      { opacity: 0; transform: translateY(0) scale(.7); }
}

@keyframes stmPpChev {
    0%, 26%   { transform: rotate(0deg); }
    32%, 88%  { transform: rotate(180deg); }
    100%      { transform: rotate(0deg); }
}

@keyframes stmPpReveal {
    0%, 28%   { opacity: 0; max-height: 0; margin-top: 0; }
    36%, 86%  { opacity: 1; max-height: 40px; margin-top: 12px; }
    94%, 100% { opacity: 0; max-height: 0; margin-top: 0; }
}

.stm-pp__cap {
    margin: 12px 2px 0;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .72);
    text-align: center;
}

.stm-pp__cap b { color: #FFB82E; }

@media (prefers-reduced-motion: reduce) {
    .stm-pp.is-live .stm-pp__ring,
    .stm-pp.is-live .stm-pp__chev,
    .stm-pp.is-live .stm-pp__anyway {
        animation: none;
    }
    .stm-pp__anyway { opacity: 1; max-height: 40px; margin-top: 12px; }
}

/* ===== إطار ذهبي وحركة ===== */
.stm-pp__win {
    border: 1px solid transparent;
    background:
        linear-gradient(#2A2C31, #2A2C31) padding-box,
        linear-gradient(135deg, #FFB82E, #FFE08A 35%, #C98A12 65%, #FFB82E) border-box;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(255, 184, 46, .10),
        0 0 34px rgba(255, 184, 46, .16);
}

.stm-pp.is-live .stm-pp__win {
    animation: stmPpGlow 14s ease-in-out infinite;
}

@keyframes stmPpGlow {
    0%, 100% { box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,184,46,.12); }
    12%, 50% { box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 46px rgba(255,184,46,.34); }
    30%, 78% { box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 30px rgba(255,184,46,.18); }
}

/* حلقة المؤشر: توهج بدل حد بسيط */
.stm-pp__ring {
    border-width: 2.5px;
    box-shadow: 0 0 16px rgba(255, 184, 46, .75),
                inset 0 0 10px rgba(255, 184, 46, .35);
    background: radial-gradient(circle,
        rgba(255, 184, 46, .18) 0%, transparent 70%);
}

/* لمعة تمر على «التثبيت على أي حال» عند ظهوره */
.stm-pp__anyway {
    position: relative;
    font-weight: 700;
    color: #FFD98A;
}

.stm-pp.is-live .stm-pp__anyway::after {
    content: "";
    position: absolute;
    inset: -4px -10px;
    border-radius: 10px;
    background: linear-gradient(100deg,
        transparent 30%, rgba(255, 216, 138, .30) 50%, transparent 70%);
    animation: stmPpShine 14s ease-in-out infinite;
}

@keyframes stmPpShine {
    0%, 34%   { transform: translateX(-120%); opacity: 0; }
    42%       { opacity: 1; }
    58%       { transform: translateX(120%); opacity: 0; }
    100%      { transform: translateX(120%); opacity: 0; }
}

/* اتجاه: النصوص الإنجليزية داخل العربية */
.stm-pp__brand,
.stm-pp__body { unicode-bidi: plaintext; }

/* الشيفرون: يُستبدل برسم بدل محرف قد لا يدعمه الخط */
.stm-pp__chev {
    width: 0; height: 0;
    border-inline: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-top: 3px;
}