/* ==================================================
   فیلتر محصولات
================================================== */

.product-filters {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr auto auto;
    gap: 12px;
    margin-bottom: 25px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.product-filters input,
.product-filters select {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    color: var(--text);
    outline: none;
}

.product-filters button,
.review-form-container button {
    height: 48px;
    border: 0;
    border-radius: 12px;
    padding: 0 22px;
    background: var(--primary);
    color: white;
    font-weight: 700;
    transition: .3s;
    cursor: pointer;
}

.product-filters button:hover,
.review-form-container button:hover {
    background: var(--primary-dark);
}

.reset-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.reset-filter:hover {
    background: var(--surface-soft);
    color: var(--primary-dark);
}

.product-count {
    color: var(--muted);
    margin-bottom: 20px;
    font-size: 13px;
}


/* ==================================================
   کارت محصولات
================================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(70, 40, 60, .05);
    transition: .35s ease;
}

.product-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow);
    border-color: rgba(236, 101, 150, .4);
}

.product-image {
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #fff1f5, #f7efff);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.07);
}

.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65px;
    background: linear-gradient(135deg, #fff1f5, #f7efff);
}

.product-info {
    padding: 17px;
}

.product-category {
    display: inline-block;
    background: var(--surface-soft);
    color: var(--primary-dark);
    border-radius: 50px;
    padding: 4px 11px;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 9px;
}

.product-info h3 {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.8;
    min-height: 52px;
    margin-bottom: 7px;
}

.product-info p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 10px;
}

.product-price {
    color: var(--primary-dark);
    font-weight: 800;
    font-size: 13px;
    margin-top: 10px;
}


/* ==================================================
   علاقه‌مندی‌ها - طراحی اختصاصی بستنی چتر
================================================== */

.product-card .favorite-button {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 20;

    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;

    display: grid;
    place-items: center;

    overflow: visible;

    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff0f7 100%
    );

    box-shadow:
        0 7px 20px rgba(190, 56, 112, .18),
        inset 0 1px 0 #ffffff;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;
    isolation: isolate;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        border-color .28s ease;
}

/* حذف آیکون قدیمی CSS */
.product-card .favorite-button::before {
    content: none !important;
    display: none !important;
}

/* حلقه انیمیشنی اطراف قلب */
.product-card .favorite-button::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;

    border: 2px solid rgba(242, 65, 130, 0);
    border-radius: 50%;

    opacity: 0;
    transform: scale(.72);

    pointer-events: none;
}

/* اجرای انیمیشن حلقه */
.product-card .favorite-button.is-animating::after {
    animation: chatrHeartHalo .68s ease-out;
}

/* آیکون SVG قلب */
.product-card .favorite-button .favorite-icon {
    display: block;
    width: 31px;
    height: 31px;

    overflow: visible;

    filter: drop-shadow(
        0 3px 4px rgba(190, 48, 112, .22)
    );

    transform-origin: center;
}

/* قلب در حالت اولیه */
.product-card .favorite-button:not(.is-favorite) {
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff0f7 100%
    );
}

.product-card .favorite-button:not(.is-favorite):hover {
    transform: translateY(-4px) rotate(-7deg) scale(1.1);

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #ffe0ef 100%
    );

    border-color: rgba(237, 56, 108, .4);

    box-shadow:
        0 12px 28px rgba(220, 55, 125, .3),
        0 0 0 5px rgba(239, 91, 155, .09);
}

/* قلب انتخاب‌شده */
.product-card .favorite-button.is-favorite {
    background: linear-gradient(
        145deg,
        #fff4f7 0%,
        #ffd9e6 100%
    );

    border-color: rgba(239, 55, 105, .38);

    box-shadow:
        0 7px 22px rgba(228, 42, 94, .23),
        inset 0 1px 0 #ffffff;
}

/* هاور قلب انتخاب‌شده */
.product-card .favorite-button.is-favorite:hover {
    transform: translateY(-4px) scale(1.1);

    box-shadow:
        0 13px 30px rgba(228, 42, 94, .32),
        0 0 0 5px rgba(239, 91, 130, .1);
}

/* کلیک روی قلب */
.product-card .favorite-button:active {
    transform: scale(.88);
}

/* حالت انتظار */
.product-card .favorite-button:disabled {
    opacity: .72;
    cursor: wait;
}

/* فوکوس صفحه‌کلید */
.product-card .favorite-button:focus-visible {
    outline: 3px solid rgba(239, 64, 126, .5);
    outline-offset: 4px;
}

/* ذرات رنگی اطراف قلب */
.product-card .favorite-button .heart-particle {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--particle-color);

    box-shadow:
        0 0 7px var(--particle-color);

    pointer-events: none;
    z-index: 5;
}

/* انیمیشن حلقه قلب */
@keyframes chatrHeartHalo {
    0% {
        opacity: .9;
        transform: scale(.72);
        border-color: rgba(242, 65, 130, .7);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
        border-color: rgba(242, 65, 130, 0);
    }
}

/* حالت شب */
body.dark-mode .product-card .favorite-button {
    background: linear-gradient(
        145deg,
        #493443,
        #332536
    );

    border-color: rgba(255, 255, 255, .16);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.dark-mode .product-card .favorite-button:not(.is-favorite):hover {
    background: linear-gradient(
        145deg,
        #58394c,
        #3c2b40
    );
}

body.dark-mode .product-card .favorite-button.is-favorite {
    background: linear-gradient(
        145deg,
        #633448,
        #432638
    );

    border-color: rgba(255, 130, 170, .4);
}

/* اندازه قلب در موبایل */
@media (max-width: 650px) {
    .product-card .favorite-button {
        width: 43px;
        height: 43px;
        min-width: 43px;
        min-height: 43px;
        top: 9px;
        left: 9px;
    }

    .product-card .favorite-button .favorite-icon {
        width: 27px;
        height: 27px;
    }
}


/* ==================================================
   صفحه‌بندی
================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.pagination a {
    min-width: 39px;
    height: 39px;
    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
}

.pagination a:hover,
.pagination a.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}


/* ==================================================
   محصولات خالی
================================================== */

.empty-products,
.empty-message {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--muted);
}


/* ==================================================
   پیشنهادهای هفتگی
================================================== */

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.offer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .3s;
}

.offer-card:hover {
    transform: translateY(-6px);
}

.offer-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.offer-info {
    padding: 20px;
}

.offer-info h3 {
    font-size: 17px;
    margin-bottom: 8px;
    color: var(--primary-dark);
}

.offer-info p {
    font-size: 13px;
    color: var(--muted);
    line-height: 2;
}


/* ==================================================
   نظرات
================================================== */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 35px;
}

.review-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 20px;
    box-shadow: 0 5px 18px rgba(70, 40, 60, .04);
}

.review-card h3 {
    font-size: 15px;
    margin-bottom: 7px;
}

.review-rating {
    color: #f2b940;
    letter-spacing: 2px;
    margin-bottom: 10px;
    direction: ltr;
    text-align: right;
}

.review-card p {
    font-size: 13px;
    line-height: 2.1;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.review-form-container {
    max-width: 650px;
    margin: 35px auto 0;
    padding: 30px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;

    box-shadow: var(--shadow);
}

.review-form-container h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.review-form-container form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-form-container label {
    font-size: 13px;
    font-weight: 700;
    margin-top: 7px;
}

.review-form-container input,
.review-form-container select,
.review-form-container textarea {
    width: 100%;
    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--background);
    color: var(--text);

    outline: none;
    resize: vertical;
}

.review-form-container button {
    margin-top: 10px;
    width: 100%;
}

.review-form-container small {
    display: block;
    margin-top: 15px;
    color: var(--muted);
    line-height: 2;
}

#review-message {
    font-size: 13px;
    line-height: 1.8;
}

.success-message {
    color: #269b68;
}

.error-message {
    color: #d84343;
}


/* ==================================================
   واکنش‌گرایی
================================================== */

@media (max-width: 1050px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .offers-grid,
    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-image {
        height: 155px;
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 13px;
        min-height: 47px;
    }

    .product-category {
        font-size: 9px;
    }

    .product-price {
        font-size: 11px;
    }

    .product-filters {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .product-filters button,
    .reset-filter {
        min-height: 45px;
    }

    .offers-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .offer-card img {
        height: 190px;
    }

    .review-form-container {
        padding: 20px;
    }
}

@media (max-width: 360px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 210px;
    }
}


/* ==================================================
   کاهش حرکت برای کاربران حساس به انیمیشن
================================================== */

@media (prefers-reduced-motion: reduce) {
    .product-card .favorite-button,
    .product-card .favorite-button .favorite-icon,
    .product-card .favorite-button::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ==================================================
   بازطراحی نهایی قلب علاقه‌مندی‌ها
================================================== */

.product-card .favorite-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: absolute !important;
    top: 13px !important;
    left: 13px !important;
    z-index: 20 !important;

    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    overflow: visible !important;

    border: 1px solid rgba(255, 255, 255, .96) !important;
    border-radius: 50% !important;

    background: linear-gradient(
        145deg,
        #fff 0%,
        #fff0f7 100%
    ) !important;

    box-shadow:
        0 7px 20px rgba(190, 56, 112, .18),
        inset 0 1px 0 #fff !important;

    cursor: pointer !important;
    isolation: isolate !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background .28s ease !important;
}

.product-card .favorite-button::before {
    content: none !important;
    display: none !important;
}

.product-card .favorite-button::after {
    content: "" !important;

    position: absolute !important;
    inset: -5px !important;
    z-index: -1 !important;

    border: 2px solid rgba(242, 65, 130, 0) !important;
    border-radius: 50% !important;

    opacity: 0 !important;
    transform: scale(.72) !important;

    pointer-events: none !important;
}

.product-card .favorite-button.is-animating::after {
    animation: chatrHeartHalo .68s ease-out !important;
}

.product-card .favorite-button .favorite-icon {
    display: block !important;

    width: 31px !important;
    height: 31px !important;

    overflow: visible !important;

    filter: drop-shadow(
        0 3px 4px rgba(190, 48, 112, .22)
    ) !important;

    transform-origin: center !important;
}

.product-card .favorite-button:not(.is-favorite):hover {
    transform: translateY(-4px) rotate(-7deg) scale(1.1) !important;

    background: linear-gradient(
        145deg,
        #fff 0%,
        #ffe0ef 100%
    ) !important;

    box-shadow:
        0 12px 28px rgba(220, 55, 125, .3),
        0 0 0 5px rgba(239, 91, 155, .09) !important;
}

.product-card .favorite-button.is-favorite {
    background: linear-gradient(
        145deg,
        #fff4f7 0%,
        #ffd9e6 100%
    ) !important;

    border-color: rgba(239, 55, 105, .38) !important;

    box-shadow:
        0 7px 22px rgba(228, 42, 94, .23),
        inset 0 1px 0 #fff !important;
}

.product-card .favorite-button.is-favorite:hover {
    transform: translateY(-4px) scale(1.1) !important;

    box-shadow:
        0 13px 30px rgba(228, 42, 94, .32),
        0 0 0 5px rgba(239, 91, 130, .1) !important;
}

.product-card .favorite-button:active {
    transform: scale(.88) !important;
}

.product-card .favorite-button:disabled {
    opacity: .72 !important;
    cursor: wait !important;
}

.product-card .favorite-button .heart-particle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: var(--particle-color) !important;

    box-shadow:
        0 0 7px var(--particle-color) !important;

    pointer-events: none !important;
    z-index: 5 !important;
}

.product-card .favorite-button:focus-visible {
    outline: 3px solid rgba(239, 64, 126, .5) !important;
    outline-offset: 4px !important;
}

@keyframes chatrHeartHalo {
    0% {
        opacity: .9;
        transform: scale(.72);
        border-color: rgba(242, 65, 130, .7);
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
        border-color: rgba(242, 65, 130, 0);
    }
}

body.dark-mode .product-card .favorite-button {
    background: linear-gradient(
        145deg,
        #493443,
        #332536
    ) !important;

    border-color: rgba(255, 255, 255, .16) !important;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.dark-mode .product-card .favorite-button.is-favorite {
    background: linear-gradient(
        145deg,
        #633448,
        #432638
    ) !important;

    border-color: rgba(255, 130, 170, .4) !important;
}

@media (max-width: 650px) {
    .product-card .favorite-button {
        width: 43px !important;
        height: 43px !important;
        min-width: 43px !important;
        min-height: 43px !important;
        top: 9px !important;
        left: 9px !important;
    }

    .product-card .favorite-button .favorite-icon {
        width: 27px !important;
        height: 27px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card .favorite-button,
    .product-card .favorite-button .favorite-icon {
        transition: none !important;
        animation: none !important;
    }
}

/* طراحی ساده و جدید قلب علاقه‌مندی‌ها */

.product-card .favorite-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size: 35px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #e84b91 !important;

    background: #fff !important;
    border: 1px solid #ffc1d8 !important;
    border-radius: 50% !important;

    box-shadow: 0 5px 16px rgba(220, 65, 125, .14) !important;

    cursor: pointer !important;

    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease !important;
}

.product-card .favorite-button::before,
.product-card .favorite-button::after {
    content: none !important;
    display: none !important;
}

.product-card .favorite-button:not(.is-favorite) {
    color: #e84b91 !important;
}

.product-card .favorite-button:hover {
    transform: scale(1.1) !important;
    background: #fff0f6 !important;
    box-shadow: 0 7px 20px rgba(220, 65, 125, .23) !important;
}

.product-card .favorite-button.is-favorite {
    color: #ed285b !important;
    background: #ffe8ef !important;
    border-color: #ff9db9 !important;
    font-size: 32px !important;
}

.product-card .favorite-button.heart-pop {
    animation: simpleHeartPop .4s ease;
}

@keyframes simpleHeartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.28); }
    70% { transform: scale(.92); }
    100% { transform: scale(1); }
}

body.dark-mode .product-card .favorite-button {
    background: #382b36 !important;
    border-color: #775064 !important;
    color: #ff8db8 !important;
}

body.dark-mode .product-card .favorite-button.is-favorite {
    color: #ff456f !important;
    background: #512c3b !important;
}

@media (max-width: 650px) {
    .product-card .favorite-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 32px !important;
    }
}