/* ==================================== */
/* متغیرهای iOS Style */
/* ==================================== */
:root {
    --ios-tap-scale: 0.97;
    --ios-tap-opacity: 0.1;
    --ios-tap-easing: cubic-bezier(0.2, 0, 0, 1.05);
    /* فنر زدن قوی */

    --btn-color-default: #333;
    --btn-color-active: #ffffff77;
    /* رنگ فعال شبیه آبی iOS */
}

/* ==================================== */
/* ۱. رفتارهای پایه و بهینه‌سازی */
/* ==================================== */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

button,
a,
[data-touch],
.btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    /* Transition اصلی (فنری) و بهینه‌سازی GPU */
    transition: transform 0.25s var(--ios-tap-easing) !important;
    will-change: transform, opacity, color;

    color: var(--btn-color-default);
}

/* ==================================== */
/* ۲. انیمیشن محتوای داخلی (آیکون/متن) */
/* ==================================== */
button>*,
a>*,
[data-touch]>*,
.btn>* {
    /* ترانزیشن رنگ برای محتوای داخلی */
    transition: color 0.2s ease-out, fill 0.2s ease-out;
}


/* ==================================== */
/* ۳. حالت فعال (Touch/Click) */
/* ==================================== */
button:active,
a:active,
[data-touch]:active,
.btn:active {
    /* فشرده شدن با مقیاس و زمان کوتاه‌تر */
    transform: scale(var(--ios-tap-scale)) !important;
    transition-duration: 0.15s;

    /* تغییر رنگ اصلی دکمه */
    color: var(--btn-color-active);
}

/* تغییر رنگ آیکون‌ها و متن‌های داخلی */
button:active>*,
a:active>*,
[data-touch]:active>*,
.btn:active>* {
    color: var(--btn-color-active);
    fill: var(--btn-color-active);
}


/* ==================================== */
/* ۴. هایلایت لمس شفاف */
/* ==================================== */
button::after,
a::after,
[data-touch]::after,
.btn::after {
    /* ... کدهای After (لایه شفاف) قبلی ... */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.391);
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    z-index: 1;
}

button:active::after,
a:active::after,
[data-touch]:active::after,
.btn:active::after {
    opacity: var(--ios-tap-opacity);
}
/* استایل برای بج شمارنده سبد خرید */
.cart-badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ef4444; /* رنگ قرمز */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* استایل مخصوص برای بج موبایل (اگر از قبل استایل ندارد) */
#mobile-cart-badge {
    background-color: #ef4444;
    color: white;
    font-size: 0.7rem;
    border-radius: 50%;
    padding: 1px 5px;
    position: absolute;
    top: 5px;
    left: 50%; /* تنظیم دقیق بسته به دیزاین شما */
    transform: translateX(-50%);
}