/* assets/css/catalog/style.css - نسخه نهایی و اصلاح شده */

:root {
    --catalog-bg: #eef2f3;
    --catalog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    --page-bg: #fff;
    --text-color: #333;
    --accent-color: var(--wp--preset--color--brand-blue, #00AEEF);
}

/* 1. تنظیمات کانتینر اصلی */
.salnama-flipbook-wrapper {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, #fdfbfb 0%, #ebedee 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    direction: ltr; /* جهت چپ‌چین برای محاسبات کتابخانه */
    perspective: 4000px; 
}

.salnama-flipbook-container {
    width: 92vw;
    height: 90vh;
    max-width: 1600px;
    /* حذف ترنزیشن برای جلوگیری از پرش */
}

/* 2. استایل صفحات */
.page {
    background-color: var(--page-bg);
    overflow: hidden;
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    /* گرادینت محو برای حس کاغذ */
    background-image: linear-gradient(to right, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 5%);
}

.page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 3. بخش تصویر */
.product-image-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

.product-image-wrapper img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
    transition: transform 0.4s ease;
}

.page:hover .product-image-wrapper img {
    transform: scale(1.05);
}

/* 4. بخش اطلاعات محصول - اصلاح چیدمان */
.product-info {
    height: 18%;
    padding: 10px 30px; /* فضای کافی از طرفین */
    background: rgba(255,255,255,0.95);
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    direction: rtl; /* محتوای داخلی راست‌چین */
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 5;
}

.product-details-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- منطق آینه‌ای (Spine-Centric Logic) --- */
/* هدف: دکمه‌ها همیشه سمت وسط (شیرازه) باشند تا با ورق زدن تداخل نکنند */

/* حالت RTL:
   flex-direction: row یعنی: آیتم اول راست، آیتم دوم چپ.
   flex-direction: row-reverse یعنی: آیتم اول چپ، آیتم دوم راست.
   
   ساختار HTML:
   1. Text Group
   2. Button
*/

/* صفحات فرد (سمت راست کتاب): شیرازه سمت چپ است */
/* دکمه باید سمت چپ (شیرازه) باشد، متن سمت راست (لبه بیرونی) */
.page:nth-child(odd) .product-info {
    flex-direction: row; /* متن راست، دکمه چپ */
    text-align: right; 
    border-left: 4px solid var(--accent-color); /* خط تزیینی سمت شیرازه */
}

/* صفحات زوج (سمت چپ کتاب): شیرازه سمت راست است */
/* دکمه باید سمت راست (شیرازه) باشد، متن سمت چپ (لبه بیرونی) */
.page:nth-child(even) .product-info {
    flex-direction: row-reverse; /* متن چپ، دکمه راست */
    text-align: left;
    border-right: 4px solid var(--accent-color); /* خط تزیینی سمت شیرازه */
}

/* --- پایان منطق آینه‌ای --- */

/* تایپوگرافی */
.product-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-color);
    line-height: 1.3;
}

.product-price {
    font-size: 0.95rem;
    color: var(--accent-color);
    margin-top: 4px;
    font-weight: 600;
}

/* دکمه مشاهده */
.btn-view-product {
    /* 1. سیستم چیدمان */
    display: inline-flex;       /* استفاده از فلکس برای تراز دقیق */
    align-items: center;        /* تراز عمودی دقیق در وسط */
    justify-content: center;    /* تراز افقی دقیق در وسط */
    
    /* 2. ابعاد و فاصله */
    height: 42px;               /* ارتفاع ثابت و مشخص */
    padding: 0 25px;            /* پدینگ فقط از چپ و راست (بالا و پایین 0 باشد) */
    min-width: 110px;           /* حداقل عرض برای دکمه‌های کوتاه */
    
    /* 3. ظاهر و رنگ */
    background-color: var(--accent-color);
    color: #fff !important;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 174, 239, 0.3);
    
    /* 4. تایپوگرافی */
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;             /* بسیار مهم: حذف تأثیر ارتفاع خط قالب */
    
    /* 5. انیمیشن و وضعیت‌ها */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;     /* اطمینان از محاسبه درست ابعاد */
}

/* کاورها */
.cover-title { color: #fff; font-size: 2.5rem; margin-bottom: 20px; font-weight: bold; }
.cover-subtitle { color: #fff; font-size: 1.5rem; opacity: 0.9; }

/* فوتر شماره صفحه */
.page-footer {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #ccc;
}

/* دکمه‌های ناوبری */
.book-control-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    color: #555;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.book-control-btn:hover { background: var(--accent-color); color: #fff; transform: translateY(-50%) scale(1.1); }
.book-control-btn.prev { right: 20px; }
.book-control-btn.next { left: 20px; }

/* دکمه بازگشت به خانه */
.salnama-exit-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}
.salnama-exit-btn:hover {
    background: var(--accent-color);
    color: #fff;
    transform: scale(1.1) rotate(90deg);
}

/* موبایل */
@media (max-width: 768px) {
    .salnama-flipbook-container { width: 95vw; height: 70vh; }
    
    /* در موبایل چون تک صفحه است، چیدمان ساده وسط چین بهتر است */
    .product-info { 
        flex-direction: column !important; 
        justify-content: center !important; 
        text-align: center !important;
        border: none !important;
    }

    .btn-view-product {
        height: 38px;
        font-size: 0.85rem;
        padding: 0 20px;
    }
    
    .product-details-group { margin-bottom: 10px; }
    
    /* حذف خطوط تزئینی در موبایل */
    .page:nth-child(odd) .product-info,
    .page:nth-child(even) .product-info {
        border: none;
    }
}

/* --- استایل مخصوص جلد تصویری (اضافه شده جدید) --- */

/* حذف پدینگ برای کانتینر جلد */
.page-cover-full {
    padding: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

/* تصویر جلد: پوشش کامل صفحه */
.cover-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تصویر برش می‌خورد تا فضا را پر کند (زیبا و بدون دفرمه شدن) */
    /* object-fit: contain;  <-- اگر می‌خواهید کل طرح جلد دیده شود و حاشیه سفید بیفتد این را فعال کنید */
    display: block;
    border-radius: 0 4px 4px 0; /* گردی خفیف در لبه باز شو */
}

/* سایه داخلی روی جلد برای واقع‌گرایی بیشتر */
.page-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* گرادینت براق روی جلد */
    background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
    z-index: 2;
}