/* style.css */

 @font-face {
        font-family: 'Dana';
        src: url('fonts/Dana-Regular.woff2') format('woff2'),
             url('fonts/Dana-Regular.woff') format('woff'),
             url('fonts/Dana-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    /* وزن نیمه‌ضخیم (DemiBold - 600) */
    @font-face {
        font-family: 'Dana';
        src: url('fonts/Dana-DemiBold.woff2') format('woff2'),
             url('fonts/Dana-DemiBold.woff') format('woff'),
             url('fonts/Dana-DemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    /* وزن ضخیم (Bold - 700) */
    @font-face {
        font-family: 'Dana';
        src: url('fonts/Dana-Bold.woff2') format('woff2'),
             url('fonts/Dana-Bold.woff') format('woff'),
             url('fonts/Dana-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    /* وزن خیلی ضخیم (ExtraBold - 800) */
    @font-face {
        font-family: 'Dana';
        src: url('fonts/Dana-ExtraBold.woff2') format('woff2'),
             url('fonts/Dana-ExtraBold.woff') format('woff'),
             url('fonts/Dana-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }

    /* ------------------------------------------------------- */
    /* 2. استایل‌های اصلی                                     */
    /* ------------------------------------------------------- */

    body {
        /* تغییر فونت به دانا */
        font-family: 'Dana', 'Vazirmatn', sans-serif !important;
}
    
 

.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
}

/* حالت شب برای پنل شیشه‌ای با شفافیت کمتر برای خوانایی بهتر متن */
.dark .glass-panel {
    background: rgba(30, 41, 59, 0.85); /* slate-800 با شفافیت کمتر */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.custom-input { transition: all 0.3s ease; }
.custom-input:focus {
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

/* استایل اینپوت در حالت شب */
.dark .custom-input:focus {
    background-color: rgba(15, 23, 42, 0.8); /* slate-900 */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25);
}

/* Modal Styling */
#imageModal { z-index: 9999; }
.modal-enter { opacity: 0; transform: scale(0.95); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: all 0.3s ease-out; }
.modal-exit { opacity: 1; transform: scale(1); }
.modal-exit-active { opacity: 0; transform: scale(0.95); transition: all 0.3s ease-in; }

/* Mobile Steps Lines */
@media (max-width: 768px) {
    .step-item { position: relative; z-index: 10; }
    
    .step-line-mobile {
        position: absolute; top: 0; bottom: 0; width: 4px;
        background-color: #f1f5f9; z-index: 0;
    }
    .dark .step-line-mobile {
        background-color: #334155; /* slate-700 */
    }
    
    .step-line-mobile-fill {
        position: absolute; top: 0; width: 4px;
        background: linear-gradient(to bottom, #8b5cf6, #ec4899);
        z-index: 1; border-radius: 99px;
        transition: height 1s ease-in-out;
    }

    [dir="rtl"] .step-line-mobile, 
    [dir="rtl"] .step-line-mobile-fill { 
        right: 2rem; 
    }
    
    [dir="ltr"] .step-line-mobile, 
    [dir="ltr"] .step-line-mobile-fill { 
        left: 2rem; 
    }
}

/* Rate Limit Timer */
#timer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}


/* Note Box Animations */
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Video Play Icon Effect */
.fa-circle-play {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group:hover .fa-circle-play {
    transform: scale(1.2);
    color: #fff;
}