/* =========================================================
 * ui.css — تحسينات الشكل والترانزيشن المشتركة لكل صفحات المنصة
 * بيتحمّل بعد ستايل كل صفحة، ومفيهوش أي تغيير في الألوان الأساسية.
 * ========================================================= */

:root {
    --ui-ease: cubic-bezier(.22, .8, .3, 1);
    --ui-fast: .18s;
    --ui-med: .32s;
}

/* ---------- دخول وخروج الصفحة ---------- */
@keyframes ui-page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: ui-page-in .4s var(--ui-ease) both; }
body.page-leave { opacity: 0; transition: opacity .18s ease; pointer-events: none; }

/* ---------- ظهور العناصر تدريجياً عند النزول ---------- */
html.ui-reveal .ui-hide {
    opacity: 0;
    transform: translateY(16px);
}
html.ui-reveal .ui-hide.ui-shown {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--ui-ease), transform .5s var(--ui-ease);
    transition-delay: calc(var(--ui-i, 0) * 55ms);
}

/* ---------- حركة ناعمة لكل العناصر التفاعلية ---------- */
a, button, input, select, textarea, label {
    transition-property: color, background-color, border-color, box-shadow, transform, filter, opacity;
    transition-duration: var(--ui-fast);
    transition-timing-function: ease;
}
button:not(:disabled):active,
a.btn-link:active, .btn-submit:active, .submit-btn:active {
    transform: scale(.97);
}
button:disabled { cursor: not-allowed; opacity: .65; }

:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}

/* ---------- كروت ---------- */
.card, .q-card, .result-card, .profile-card {
    transition: transform var(--ui-med) var(--ui-ease),
                border-color var(--ui-med) ease,
                box-shadow var(--ui-med) ease;
}

/* ---------- زرار فيه تحميل ---------- */
.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.is-loading > * { visibility: hidden; }
.is-loading::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------- المودال (نافذة كود التفعيل) ---------- */
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-pop  { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.modal-overlay[style*="flex"] {
    animation: ui-fade .2s ease both;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-overlay[style*="flex"] .modal-box { animation: ui-pop .3s var(--ui-ease) both; }

/* ---------- اهتزاز عند الخطأ ---------- */
@keyframes ui-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.ui-shake { animation: ui-shake .4s ease; }

/* ---------- سكرول ناعم وشكل أنضف ---------- */
html { scroll-behavior: smooth; }
::selection { background: rgba(99, 102, 241, .45); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .4); }

/* ---------- احترام إعداد تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    html.ui-reveal .ui-hide { opacity: 1; transform: none; }
}