/* Modix custom styles (complementing Tailwind Play CDN) */

:root { color-scheme: light dark; }

html, body { font-family: 'Vazirmatn', system-ui, sans-serif; }

/* Better number rendering inside Persian text */
.tnum { font-variant-numeric: tabular-nums; }

/* Toast container */
#toastWrap {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: max-content;
    max-width: 92vw;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: .7rem 1rem;
    border-radius: .9rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
    animation: toastIn .25s ease-out;
}
.toast-success { background: #16a34a; }
.toast-error   { background: #dc2626; }
.toast-info    { background: #2563eb; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Dropzone */
.dropzone { transition: border-color .2s, background-color .2s; }
.dropzone.dragover { border-color: #E8A317; background-color: rgba(232,163,23,.08); }

/* Spinner */
.spinner {
    width: 1.15rem; height: 1.15rem;
    border: 2.5px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: spin .7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Field error state */
.field-error { border-color: #dc2626 !important; }
.error-text { color: #dc2626; font-size: .8rem; margin-top: .25rem; }

/* Smooth fade for ajax content */
.fade-in { animation: fadeIn .3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }