/* ==================== ۱. معرفی فونت ایران‌سانس ==================== */
@font-face {
    font-family: 'IRANSans';
    src: url('fonts/iransans.eot'); /* IE9 Compat Modes */
    src: url('fonts/iransans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/iransans.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/iransans.woff') format('woff'), /* Modern Browsers */
         url('fonts/iransans.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

/* ==================== ۲. استایل‌های پایه و ریست عمومی ==================== */
* {
    box-sizing: border-box;
    font-family: 'IRANSans', Tahoma, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: #0b071e; /* رنگ تیره تستی؛ بعداً با تصویر پس‌زمینه جایگزین می‌شود */
}

/* کانتینر کل صفحه جهت وسط‌چین کردن کارت اصلی */
.page-background {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* در صورت داشتن تصویر پس‌زمینه سنتی، خط زیر را فعال کنید: */
    background: url('../src/bg.jpg') no-repeat center center fixed; background-size: cover;
}

/* ==================== ۳. باکس مرکزی سفید (Main Card) ==================== */
.main-card {
    background: #ffffff;
    width: 100%;
    max-width: 600px; /* حداکثر عرض در دسکتاپ */
    border-radius: 40px; /* گوشه‌های گرد مطابق تصویر شما */
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* لوگوی بالای صفحه */
.card-header {
    margin-bottom: 25px;
    text-align: center;
}
.site-logo {
    max-width: 180px;
    height: auto;
}

/* ==================== ۴. استایل متن شعر و تفسیر ==================== */
.fortune-content {
    width: 100%;
    text-align: center;
}

/* بخش ابیات شعر */
.poem-text {
    font-size: 17px;
    color: #222;
    line-height: 2;
    margin-bottom: 25px;
    font-weight: bold;
    white-space: pre-line; /* حفظ شکستگی خطوط شعر متنی */
}

/* بخش متن تفسیر */
.interpretation-text {
    font-size: 14px;
    color: #444;
    line-height: 1.8;
    background: #fdfaf4;
    padding: 15px;
    border-radius: 15px;
    border-right: 4px solid #bba374; /* نوار طلایی رنگ کنار باکس تفسیر */
    margin-bottom: 25px;
    text-align: justify;
}

/* ==================== ۵. دکمه صوت و بنر تبلیغاتی ==================== */
.audio-player-wrapper {
    margin-bottom: 25px;
}
.audio-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.audio-btn img {
    max-width: 160px;
    height: auto;
    transition: transform 0.2s;
}
.audio-btn img:hover {
    transform: scale(1.05);
}

/* کانتینر رسپانسیو بنر */
.banner-container {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}
.banner-container a {
    display: block;
    width: 100%;
}
.banner-container img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* ==================== ۶. ناوبری انتهای صفحه (دکمه‌ها) ==================== */
.card-navigation {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px; /* فاصله بین دو دکمه */
    margin-bottom: 15px;
}
.nav-btn img {
    max-width: 260px; /* افزایش سایز دکمه‌ها در حالت دسکتاپ */
    height: auto;
    display: block;
    transition: transform 0.2s;
}
.nav-btn img:hover {
    transform: scale(1.05);
}

/* کپی‌رایت کوچک فوتر */
.footer-copyright {
    font-size: 11px;
    color: #aaa;
}
.footer-copyright a {
    color: #888;
    text-decoration: none;
}

/* ==================== ۷. مدیا کوئری برای نمایشگرهای بسیار کوچک (موبایل) ==================== */
@media (max-width: 480px) {
    .main-card {
        border-radius: 25px;
        padding: 20px 15px;
    }
    .poem-text {
        font-size: 15px;
    }
    .card-navigation {
        flex-direction: row; 
        justify-content: space-around;
        width: 100%; /* مطمئن می‌شویم کانتینر کل عرض باکس را می‌گیرد */
        gap: 8px;    /* فاصله کم بین دو دکمه برای جا شدن در صفحات کوچک */
    }
    .nav-btn {
        flex: 1; /* به دکمه‌ها اجازه می‌دهد فضای در دسترس را پر کنند */
        text-align: center;
    }
    .nav-btn img {
        width: 100%;       /* عکس کل فضای دکمه را پر کند */
        max-width: 280px;  /* سایز ایده‌آل و بزرگ برای موبایل بدون بیرون زدن از کادر سفید */
        height: auto;
    }
}