/* ==========================================================================
   Smart Teacher — نظام الأزرار الموحّد (المرحلة 1)
   يوحّد سبعة أنظمة متفرقة في مستويات وأحجام ونبرات وحالات محددة.
   يُحمَّل بعد بقية الملفات فيتغلب على القيم القديمة بلا تعديل أي قالب.
   ========================================================================== */

.st-mobile-shell {
  --stm-btn-h-lg: 56px;
  --stm-btn-h-md: 46px;
  --stm-btn-h-sm: 38px;
  --stm-btn-r: 16px;
}

/* ---------- الأساس المشترك لكل الأزرار ---------- */
.stm-btn,
.stm-install__cta,
.stm-update__cta,
.stm-logout,
.stm-push__yes,
.stm-push__no,
.stm-tn-filter,
.stm-choice,
.stm-preview__remove,
.stm-iconbtn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  transition:
    transform 110ms cubic-bezier(.22, .61, .36, 1),
    box-shadow 180ms cubic-bezier(.22, .61, .36, 1),
    background-color 180ms cubic-bezier(.22, .61, .36, 1),
    border-color 180ms cubic-bezier(.22, .61, .36, 1),
    opacity 180ms cubic-bezier(.22, .61, .36, 1);
}

/* ضغط موحّد: انخفاض بسيط لا تصغير مبالغ */
.stm-btn:active:not([disabled]):not([aria-busy="true"]),
.stm-install__cta:active,
.stm-update__cta:active,
.stm-logout:active,
.stm-push__yes:active,
.stm-tn-filter:active,
.stm-choice:active:not([disabled]),
.stm-preview__remove:active,
.stm-iconbtn:active {
  transform: translateY(1px) scale(.99);
}

/* ---------- موجة الضغط: تنطلق من نقطة اللمس ---------- */
.stm-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .38);
  transform: translate(-50%, -50%) scale(0);
  animation: stm-ripple 520ms cubic-bezier(.22, .61, .36, 1) forwards;
  z-index: 0;
}
@keyframes stm-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.stm-btn > *, .stm-choice > *, .stm-logout > *,
.stm-install__cta > *, .stm-update__cta > * { position: relative; z-index: 1; }

/* ---------- المستوى الأول: الفعل الرئيسي ---------- */
.stm-btn--primary {
  min-height: var(--stm-btn-h-lg);
  border-radius: var(--stm-btn-r);
  background: linear-gradient(135deg, #8B6BFF 0%, #6A46FF 46%, #3F7BFF 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 10px 26px rgba(124, 92, 255, .34),
    0 2px 6px rgba(0, 0, 0, .30);
}
@media (hover: hover) and (pointer: fine) {
  .stm-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 14px 34px rgba(124, 92, 255, .48); }
}

/* ---------- المستوى الثاني: بديل مقبول ---------- */
.stm-btn--secondary {
  min-height: var(--stm-btn-h-lg);
  border-radius: var(--stm-btn-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--stm-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

/* ---------- المستوى الثالث: صامت ---------- */
.stm-btn--quiet,
.stm-push__no {
  min-height: var(--stm-btn-h-md);
  border-radius: var(--stm-btn-r);
  background: transparent;
  border: 0;
  color: var(--stm-text-muted);
  box-shadow: none;
}

/* ---------- النبرات ---------- */
.stm-btn--gold,
.stm-install__cta,
.stm-update__cta {
  background: linear-gradient(180deg, #FFD980 0%, #FFB82E 48%, #E89A12 100%);
  color: #1B1405;
  box-shadow:
    0 0 0 1.5px rgba(255, 240, 190, .92),
    0 10px 26px rgba(255, 184, 46, .34),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

.stm-btn--success {
  background: linear-gradient(135deg, #2FD69A 0%, #45E0A8 100%);
  color: #06251A;
  box-shadow: 0 10px 26px rgba(69, 224, 168, .32), inset 0 1px 0 rgba(255, 255, 255, .40);
}

.stm-logout,
.stm-btn--danger {
  min-height: var(--stm-btn-h-lg);
  border-radius: var(--stm-btn-r);
  background: linear-gradient(180deg, rgba(255, 92, 124, .20) 0%, rgba(176, 38, 68, .28) 100%);
  border: 1px solid rgba(255, 92, 124, .46);
  color: #FFE3E9;
  box-shadow: 0 8px 22px rgba(255, 61, 113, .18), inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ---------- الأحجام ---------- */
.stm-btn--md, .stm-push__yes, .stm-push__no, .stm-preview__remove { min-height: var(--stm-btn-h-md); }
.stm-btn--sm, .stm-tn-filter { min-height: var(--stm-btn-h-sm); }

/* ---------- الحالات ---------- */
.stm-btn[disabled],
.stm-choice[disabled],
button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.25);
}
.stm-btn[disabled]:active { transform: none; }

/* تحميل: الارتفاع ثابت فلا تقفز الصفحة */
.stm-btn[aria-busy="true"] { pointer-events: none; }
.stm-btn[aria-busy="true"] .stm-btn__label { visibility: hidden; }
.stm-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-block: 0; inset-inline: 0;
  margin: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .32);
  border-top-color: #fff;
  animation: stm-spin .8s linear infinite;
}

/* نجاح لحظي بعد فعل ناجح */
.stm-btn.is-done {
  background: linear-gradient(135deg, #2FD69A, #45E0A8) !important;
  color: #06251A !important;
}

/* ---------- حلقة التركيز: واضحة على كل زر ---------- */
.st-mobile-shell button:focus-visible,
.st-mobile-shell a:focus-visible {
  outline: 2px solid var(--stm-cyan);
  outline-offset: 3px;
  border-radius: var(--stm-btn-r);
}

/* ---------- توحيد المرشّحات والاختيارات ---------- */
.stm-tn-filter { border-radius: var(--stm-r-pill); }
.stm-choice { border-radius: var(--stm-btn-r); }

/* ---------- زر الأيقونة ---------- */
.stm-iconbtn { border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  .stm-ripple { display: none; }
  .stm-btn, .stm-choice, .stm-tn-filter, .stm-logout { transition: none; }
}


/* ==========================================================================
   STM_RIPPLE_CONTAIN
   كل عنصر تنطلق فيه موجة ضغط يجب أن يحتويها، وإلا تمددت فوق البطاقة الأم.
   ========================================================================== */
.st-mobile-shell .stm-chip,
.st-mobile-shell .stm-grade,
.st-mobile-shell .stm-subject,
.st-mobile-shell .stm-getapp,
.st-mobile-shell .stm-freeway,
.st-mobile-shell .stm-row-link,
.st-mobile-shell .stm-tcard,
.st-mobile-shell .stm-plan-card,
.st-mobile-shell .stm-inst-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* موجة أهدأ: لمسة تُحَس لا تضخّم يُرى */
.stm-ripple {
  background: rgba(255, 255, 255, .16);
  animation-duration: 380ms;
}

.stm-ripple { display: none !important; }