/* =================================================================
   تنظیمات کلی
================================================================= */
.amina-product-loop {
    display: grid;
    /* دو ستون با عرض برابر */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* فاصله بین کارت‌ها */
    padding: 20px;
    max-width: 1200px;
    /*min-width:1200px;*/
    margin: 0 auto;
}
.amina-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 12px;
    margin-bottom: 50px;
}
.amina-pagination-item .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    color: #4c4c4c;
    background-color: #fff;
    transition: all 0.3s;
    cursor: pointer;
    user-select: none;
}
li.active{
    border-radius: 8px;
}
li.active .page-numbers
{
    background-color: var(--toranj-primary-color);
    color: #fff;
}
/* =================================================================
   استایل کارت محصول (Product Card)
================================================================= */
.product-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 8px 16px;
    grid-template-areas:
        "image title"
        "image description"
        "footer footer";
}

.product-image { grid-area: image; }
.product-title { grid-area: title; }
.product-description { grid-area: description; }
.product-footer { grid-area: footer; }

.product-image img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0; /* برای جلوگیری از بهم‌ریختگی در Flexbox */
}

.product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.product-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.product-description {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin: 8px 0;
    flex-grow: 1;
}

.product-description p {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin: 0;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: auto; /* فوتر را به پایین‌ترین بخش هل می‌دهد */
}

.product-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #34495e;
    white-space: nowrap;
    flex-shrink: 0;
}

/* نگهدارنده دکمه‌های افزودن به سبد و نمایش سریع */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =================================================================
   استایل دکمه‌های افزودن/کاستن (بر اساس کلاس‌های PHP شما)
================================================================= */
.amina-quick-order {
    display: flex;
    align-items: center;
}


.amina-quick-order .amina-btn {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* استایل حالت اولیه (فقط دکمه +) */
.amina-quick-order .amina-btn.plus:only-child {
    border: 1px solid #00695C;
    color: #00695C;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 8px 24px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.amina-quick-order .amina-btn.plus:only-child:hover {
    background-color: #f0f8f7;
}

/* استایل حالت کنترلر (وقتی محصول در سبد خرید است) */
.amina-quick-order .amina-qty {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 12px;
    min-width: 20px;
    text-align: center;
}

.amina-quick-order .amina-btn.plus,
.amina-quick-order .amina-btn.minus {
    background-color: #004D40;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
}

/* برای اینکه حالت اولیه دکمه پلاس با حالت کنترلر تداخل نکند */
.amina-quick-order .amina-qty + .amina-btn.plus {
    border: none;
    padding: 0;
}


/* =================================================================
   استایل دکمه نمایش سریع (Quick View)
================================================================= */
.quick-view-btn {
    border: 1px solid #00695C;
    background-color: #f0f8f7;
    color: #00695C !important;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.quick-view-btn:hover {
    background-color: #e0f2f1;
}


/* =================================================================
   استایل پاپ‌آپ نمایش سریع (Modal)
================================================================= */
.quick-view-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000;
}
.quick-view-overlay.active {
    display: flex;
}
.quick-view-modal {
    background-color: white; padding: 24px; border-radius: 12px; max-width: 800px; width: 90%; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.close-btn {
    position: absolute; top: 15px; left: 15px; background: none; border: none; font-size: 2rem; color: #888; cursor: pointer; line-height: 1; z-index: 10;
}
.modal-content {
    display: flex; gap: 24px;
}
.modal-image img {
    width: 100%; max-width: 350px; border-radius: 8px;
}
.modal-details {
    display: flex; flex-direction: column; text-align: right; width: 100%;
}
.modal-actions {
    display: flex; align-items: center; gap: 12px; margin-top: 24px;
}


/* =================================================================
   ۳. بخش ریسپانسیو
================================================================= */

/* حالت تبلت */
@media (max-width: 1024px) {
    .amina-product-loop {
        grid-template-columns: 1fr; /* تک ستونه شدن */
    }





/* =================================================================
   بخش ریسپانسیو برای موبایل (صفحه‌های کوچکتر از ۷۶۸ پیکسل)
================================================================= */
@media (max-width: 768px) {

    /* ۱. کارت محصول به حالت عمودی درمی‌آید */
    .product-card {
        /* چیدمان داخلی کارت برای موبایل به حالت ستونی تغییر می‌کند */
        grid-template-columns: 1fr; /* همه چیز در یک ستون */
        grid-template-areas:
            "image"
            "title"
            "description"
            "footer";
        text-align: center;
    }

    .product-image {
        margin: 0 auto; /* عکس در مرکز قرار می‌گیرد */
    }

    .product-image img {
        width: 100%; /* عکس تمام عرض کارت را می‌گیرد */
        height: auto;
        max-width: 250px; /* برای جلوگیری از بزرگ شدن بیش از حد عکس */
    }
    
    .product-info {
        align-items: center; /* متن‌ها و دکمه‌ها در مرکز قرار می‌گیرند */
    }

    .product-footer {
        flex-direction: column; /* فوتر هم عمودی می‌شود */
        gap: 16px;
    }

    /* قیمت به بالای دکمه‌ها منتقل می‌شود */
    .product-price {
        order: 1; 
    }
    .action-buttons {
        order: 2;
    }

    /* ۲. پاپ‌آپ نمایش سریع برای موبایل بهینه‌سازی می‌شود */
    .quick-view-modal {
        width: 95%;
        padding: 16px;
    }
    
    .modal-content {
        flex-direction: column; /* محتوای پاپ‌آپ هم عمودی می‌شود */
        align-items: center;
    }

    .modal-image img {
        max-width: 100%;
    }
    
    .modal-details {
        text-align: center;
        align-items: center;
    }
    
    .modal-title {
        font-size: 1.5rem;
    }

    .modal-actions {
        flex-direction: column; /* دکمه‌های داخل پاپ‌آپ هم عمودی می‌شوند */
        width: 100%;
    }
}