/* تعریف متغیرهای رنگی اصلی */
        :root {
            --primary-50: #f2fbfa;
            --primary-100: #d5f2f0;
            --primary-200: #aae5e2;
            --primary-300: #78d0ce;
            --primary-400: #4bb5b6;
            --primary-500: #32979a;
            --primary-600: #247276;
            --primary-700: #225f63;
            --primary-800: #1f4c50;
            --primary-900: #1e4043;
            --primary-950: #0c2327;
        }

       /* تقریبا خط 14، بعد از کامنت فونت Digi Madasi Bold */
@font-face {
    font-family: 'Yekan Bakh'; /* نام فونت برای استفاده در CSS */
    src: /*url('path/to/your/yekanbakh-regular.woff2') format('woff2'), مسیر فایل فونت با فرمت woff2*/
    url('/assets/fonts/yekanbakh/YekanBakh-SemiBold.ttf') format('truetype'); /* مسیر فایل فونت با فرمت ttf */
    font-weight: normal; /* وزن معمولی فونت */
    font-style: normal; /* استایل معمولی فونت */
}
@font-face {
    font-family: 'Digi Madasi Bold'; /* نام فونت برای استفاده در CSS */
    src: /*url('path/to/your/yekanbakh-regular.woff2') format('woff2'), مسیر فایل فونت با فرمت woff2*/
    url('/assets/fonts/DigiMadasiBold.ttf') format('truetype'); /* مسیر فایل فونت با فرمت ttf */
    font-weight: normal; /* وزن معمولی فونت */
    font-style: normal; /* استایل معمولی فونت */
}



/* می‌توانید برای وزن‌های مختلف فونت (bold, light, etc.) نیز @font-face جداگانه تعریف کنید */


        body {
            font-family: 'Digi Madasi Bold', 'vazir'; /* فونت اصلی و فونت‌های جایگزین */
            background-color: var(--primary-50);
            color: var(--primary-900);
           
            
        }

        /* کلاس‌های کمکی برای استفاده از متغیرهای رنگی با Tailwind */
        .bg-primary-50 { background-color: var(--primary-50); }
        .bg-primary-100 { background-color: var(--primary-100); }
        .bg-primary-200 { background-color: var(--primary-200); }
        .bg-primary-300 { background-color: var(--primary-300); }
        .bg-primary-400 { background-color: var(--primary-400); }
        .bg-primary-500 { background-color: var(--primary-500); }
        .bg-primary-600 { background-color: var(--primary-600); }
        .text-primary-500 { color: var(--primary-500); }
        .text-primary-600 { color: var(--primary-600); }
        .text-primary-800 { color: var(--primary-800); }
        .text-primary-900 { color: var(--primary-900); }
        .border-primary-300 { border-color: var(--primary-300); }
        .border-primary-400 { border-color: var(--primary-400); }
        .border-primary-200 { border-color: var(--primary-200); }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem; /* 8px */
            font-weight: bold;
            transition: background-color 0.3s ease;
            cursor: pointer;
            font-family: 'yekan bakh';
        }

        .btn-login {
            background-color: var(--primary-200);
            color: var(--primary-700);
            margin-left: 16px;            
        }
        .btn-login:hover {
            background-color: var(--primary-300);
        }

        .btn-subscribe {
            background-color: var(--primary-600);
            color: var(--primary-50);
        }
        .btn-subscribe:hover {
            background-color: var(--primary-700);
        }

        .microphone-bar {
            background-color: var(--primary-100);
            border: 1px solid var(--primary-200);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .upload-box {
            border: 2px dashed var(--primary-300);
            background-color: var(--primary-100);
            transition: background-color 0.3s ease;
        }
        .upload-box:hover {
            background-color: var(--primary-200);
        }

        .waveform { /* استایل اولیه برای نمایش موج صدا - بعدا با جاوااسکریپت داینامیک می‌شود */
            width: 100%;
            height: 50px;
            background: repeating-linear-gradient(
                90deg,
                var(--primary-400),
                var(--primary-400) 2px,
                transparent 2px,
                transparent 6px
            );
            opacity: 0; /* در ابتدا مخفی */
            transition: opacity 0.3s ease-in-out;
        }
        .waveform.active {
            opacity: 1;
        }


/* استایل‌های به‌روز شده برای باکس متن تشخیص داده شده (شبیه textarea) */
.transcribed-text-box {
    /* استایل‌های قبلی */
    /* border: 1px solid var(--primary-300); */ /* توسط استایل جدید override می‌شود */
    background-color: white;
    /* min-height: 100px; */ /* توسط height یا min-height جدید override می‌شود */
    /* padding: 1rem; */ /* توسط padding جدید override می‌شود */
    /* border-radius: 0.5rem; */ /* توسط استایل جدید override می‌شود */
    margin-top: 1rem;
    display: none; /* در ابتدا مخفی */
    font-family: 'Yekan Bakh';
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    caret-color: var(--primary-700); /* رنگ نشانگر ویرایش */

    /* استایل‌های جدید برگرفته از textarea در کد دوم */
    width: 100%; /* w-full */
    min-height: 256px; /* h-64 معادل 16rem یا 256px */
    padding: 0.75rem; /* p-3 */
    border: 1px solid var(--primary-300); /* border border-primary-300 */
    border-radius: 0.5rem; /* rounded-md */
    resize: vertical; /* resize-y */
    outline: none; /* حذف outline پیش‌فرض */
    overflow-y: auto; /* اضافه کردن اسکرول عمودی در صورت نیاز */
}

 .transcribed-text-box.active {
    display: block;
}

/* استایل‌های فوکوس برای باکس متن (شبیه focus:ring-2 focus:ring-primary-400) */
.transcribed-text-box:focus {
     border-color: transparent; /* focus:border-transparent */
     box-shadow: 0 0 0 2px var(--primary-400); /* focus:ring-2 focus:ring-primary-400 */
}

/* کلاس‌های فونت جدید */
.font-yekan {
     font-family: 'Yekan Bakh', 'Tahoma', Arial, sans-serif;
}
.font-digi-madasi-bold {
     font-family: 'Digi Madasi Bold';
}


/*تکست باکس*/
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px solid var(--primary-200);
}


/* استایل‌های مربوط به انیمیشن موج صدای جدید */
#voiceWaveCanvas {
    width: 100%;
    height: 80px; /* ارتفاع مناسب برای موج */
    background-color: transparent; /* بدون پس‌زمینه برای ترکیب با والد */
    border-radius: 8px;
    display: none; /* در ابتدا مخفی */
    transition: opacity 0.5s ease-in-out;
    margin-top: 1rem; /* mt-4 */
}
#voiceWaveCanvas.active {
    display: block; /* نمایش در هنگام فعال بودن */
}

/* حذف استایل waveform قدیمی */
.waveform { display: none; }


/* --- NEW POPUP STYLES --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 151, 154, 0.3); /* #32979A with 30% opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
     font-family: 'Yekan Bakh', sans-serif;
     background-color: #ffffff30;
     padding: 2.5rem;
     border-radius: 1rem;
     width: 90%;
     max-width: 420px;
     box-shadow:0 10px 25px var(--primary-700);
     border: 1px solid rgba(255, 255, 255, 0.2);
     position: relative;
}
.popup-content h2 { 
    font-family: 'Digi Madasi Bold', 'Yekan Bakh', sans-serif; 
}
.swal2-popup { 
    font-family: 'Yekan Bakh', sans-serif !important; 
}