/* ===================== SpErr: رسائل الأخطاء المضمّنة بجوار الحقول (speedo-forms.js) ===================== */
.sp-ferr { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 4px; padding: 10px 14px; border-radius: 14px; background: #fde4e4; border: 2px solid #b42323; color: #7f1d1d; font-weight: 800; font-size: 14.5px; line-height: 1.65; text-align: start; animation: spFerrIn .28s cubic-bezier(.16, 1, .3, 1) both; transition: opacity .3s, transform .3s; }
.sp-ferr svg { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 2px; stroke: #b42323; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-ferr span { min-width: 0; overflow-wrap: anywhere; }
.sp-ferr.is-ok { background: #dff5e7; border-color: #14532d; color: #14532d; }
.sp-ferr.is-ok svg { stroke: #14532d; }
.sp-ferr.is-out { opacity: 0; transform: translateY(-4px); }
.sp-ferr + .sp-ferr { margin-top: 0; }
.sp-invalid { border-color: #b42323 !important; }
input.sp-invalid, textarea.sp-invalid, select.sp-invalid { box-shadow: 0 0 0 3px rgba(180, 35, 35, .22) !important; background-color: #fff8f8; }
div.sp-invalid, label.sp-invalid { outline: 2px solid #b42323; outline-offset: 3px; border-radius: 16px; }
.sp-shake { animation: spShake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes spFerrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes spShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .sp-ferr, .sp-shake { animation: none; } }