/**
 * toast.css - استایل‌های سیستم Toast Notification Goftar
 * با پشتیبانی کامل از RTL/LTR
 */

/* ============================================
   Toast Container - موقعیت بر اساس جهت صفحه
   ============================================ */
.toast-container {
    position: fixed;
    top: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* LTR - سمت راست */
body[dir="ltr"] .toast-container {
    right: 20px;
    left: auto;
}

/* RTL - سمت چپ */
body[dir="rtl"] .toast-container {
    left: 20px;
    right: auto;
}

/* ============================================
   Toast Item
   ============================================ */
.toast-item {
    min-width: 280px;
    max-width: 380px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

/* LTR - انیمیشن ورود از راست */
body[dir="ltr"] .toast-item {
    animation: toastSlideInLTR 0.3s ease forwards;
}

@keyframes toastSlideInLTR {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

body[dir="ltr"] .toast-item.toast-slide-out {
    animation: toastSlideOutLTR 0.3s ease forwards;
}

@keyframes toastSlideOutLTR {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* RTL - انیمیشن ورود از چپ */
body[dir="rtl"] .toast-item {
    animation: toastSlideInRTL 0.3s ease forwards;
}

@keyframes toastSlideInRTL {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

body[dir="rtl"] .toast-item.toast-slide-out {
    animation: toastSlideOutRTL 0.3s ease forwards;
}

@keyframes toastSlideOutRTL {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ============================================
   محتوای Toast
   ============================================ */
.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

/* LTR - آیکون سمت چپ متن */
body[dir="ltr"] .toast-content {
    flex-direction: row;
}

/* RTL - آیکون سمت راست متن */
body[dir="rtl"] .toast-content {
    flex-direction: row-reverse;
}

.toast-icon {
    flex-shrink: 0;
}

.toast-icon i {
    font-size: 1.3rem;
}

.toast-message {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 500;
    word-break: break-word;
}

/* LTR */
body[dir="ltr"] .toast-message {
    text-align: left;
}

/* RTL */
body[dir="rtl"] .toast-message {
    text-align: right;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   نوار پیشرفت
   ============================================ */
.toast-progress {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 100%;
}

/* LTR - نوار پیشرفت از چپ به راست */
body[dir="ltr"] .toast-progress {
    left: 0;
    right: auto;
}

/* RTL - نوار پیشرفت از راست به چپ */
body[dir="rtl"] .toast-progress {
    left: auto;
    right: 0;
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
}

/* LTR */
body[dir="ltr"] .toast-progress-bar {
    animation: toastProgressLTR 4s linear forwards;
}

@keyframes toastProgressLTR {
    from { width: 100%; }
    to { width: 0%; }
}

/* RTL */
body[dir="rtl"] .toast-progress-bar {
    animation: toastProgressRTL 4s linear forwards;
}

@keyframes toastProgressRTL {
    from { width: 100%; }
    to { width: 0%; }
}

/* ============================================
   رنگ‌بندی
   ============================================ */
.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.toast-info { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.toast-success .toast-icon i,
.toast-error .toast-icon i,
.toast-warning .toast-icon i,
.toast-info .toast-icon i { color: #ffffff; }

.toast-success .toast-message,
.toast-error .toast-message,
.toast-warning .toast-message,
.toast-info .toast-message { color: #ffffff; }

.toast-success .toast-close,
.toast-error .toast-close,
.toast-warning .toast-close,
.toast-info .toast-close { color: rgba(255, 255, 255, 0.7); }

.toast-success .toast-close:hover,
.toast-error .toast-close:hover,
.toast-warning .toast-close:hover,
.toast-info .toast-close:hover { color: #ffffff; }

.toast-success .toast-progress-bar,
.toast-error .toast-progress-bar,
.toast-warning .toast-progress-bar,
.toast-info .toast-progress-bar { background: rgba(255, 255, 255, 0.5); }

/* ============================================
   تم روشن
   ============================================ */
body.light-theme .toast-success { background: linear-gradient(135deg, #34d399, #10b981); }
body.light-theme .toast-error { background: linear-gradient(135deg, #f87171, #ef4444); }
body.light-theme .toast-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
body.light-theme .toast-info { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

/* ============================================
   موبایل
   ============================================ */
@media (max-width: 550px) {
    .toast-container {
        top: 10px;
    }
    
    /* LTR - موبایل */
    body[dir="ltr"] .toast-container {
        right: 10px;
        left: 10px;
    }
    
    /* RTL - موبایل */
    body[dir="rtl"] .toast-container {
        left: 10px;
        right: 10px;
    }
    
    .toast-item {
        max-width: calc(100% - 0px);
        min-width: auto;
    }
    
    .toast-content { padding: 12px 14px; }
    .toast-icon i { font-size: 1.1rem; }
    .toast-message { font-size: 0.8rem; }
}