/* مصحح: Styles المنقّحة والمقترحات لتحسين الوصول والموثوقية */

/* عام: تجنب قيمة غير صالحة #ff -> استبدلت بـ #fff (أبيض) */
.s-product-card-image,
.bg-gray-100,
.store-footer,
.mm-spn.mm-spn--navbar.mm-spn--main,
.md\:flex,
body,
.mm-spn.mm-spn--light,
.s-comments-product,
.store-footer__inner,
.main-nav-container.fixed-header .inner,
.topnav-is-dark .top-navbar,
.main-nav-container {
    background: #fff !important;
}

/* تحسين شبكات الأعمدة: استخدمت قيم منطقية (1fr) وعدد أعمدة مطابق للاسم */
@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:gap-8 {
        gap: 0rem;
    }
}

@media (max-width: 600px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:gap-8 {
        gap: 1rem;
    }

    .banner-entry {
        height: 165px;
    }
}

/* روابط العنوان */
.s-product-card-content-title a {
    color: #8401B8;
}

/* wishlist button positioning */
.s-product-card-vertical .s-product-card-wishlist-btn {
    top: 5.5rem;
}
.s-product-card-vertical .s-product-card-wishlist-btn button {
    background-color: var(--color-primary) !important;
}

/* زر فاتح اللون */
.s-button-light {
    color: #fff;
}

/* === Floating WhatsApp — تحسينات ===
   1) أصلحت محتوى ::after المكرر (محتوى واحد فقط يُستخدم)
   2) أضفت نسخة قابلة للوصول كعنصر HTML موصى به (.whatsapp-floating)
   3) جعلت الحالة الافتراضية أيقونة صغيرة، وحالة hover/expand تظهر نصاً عربياً
*/

/* المفضل: استخدم عنصر حقيقي في HTML مثل:
   <button class="whatsapp-floating" aria-label="تواصل عبر واتساب">...</button>
   CSS أدناه يدعم هذا العنصر (أكثر قابليّة للوصول).
*/
.whatsapp-floating {
    position: fixed;
    bottom: 19px;
    right: 17px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 32px;
    background: #46a51e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.42);
    border: none;
    cursor: pointer;
    font-size: 0; /* icon-only by default; use an <svg> or <span class="sr-only"> for accessible text */
    transition: all .2s ease-in-out;
}

/* Expanded state (hover / focus) */
.whatsapp-floating:focus,
.whatsapp-floating:hover {
    width: 260px;
    height: 60px;
    border-radius: 8px;
    font-size: 20px;
    padding: 0 16px;
    justify-content: center;
    background: #46a51e;
    color: rgba(255,255,255,0.95);
}

/* داخل الزر: أيقونة ونص */
.whatsapp-floating .wa-icon {
    font-size: 32px;
    margin-right: 10px;
}
.whatsapp-floating .wa-label {
    display: none;
    font-family: "dinnextltarabic-regular", sans-serif;
    font-size: 18px;
}
.whatsapp-floating:focus .wa-label,
.whatsapp-floating:hover .wa-label {
    display: inline;
}

/* Fallback: pseudo-element approach (إذا لم يمكنك تعديل HTML) */
.sicon-whatsapp2 {
    position: relative;
}
.sicon-whatsapp2::after {
    content: ""; /* ضع أيقونة افتراضية أو رمز unicode للأيقونة */
    text-align: center;
    cursor: pointer;
    background: #46a51e;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.42);
    width: 56px;
    height: 56px;
    border-radius: 32px;
    position: fixed;
    bottom: 19px;
    right: 17px;
    transform: rotate(0deg);
    transition: all .2s ease-in-out;
}

/* توسيع pseudo-element عند hover */
.sicon-whatsapp2:hover::after,
body[style] .sicon-whatsapp2::after,
body[cz-shortcut-listen="true"] .sicon-whatsapp2::after,
i.sicon-whatsapp2::after {
    /* عند بعض البيئات نرغب بالحجم الكبير افتراضيًا */
    /* لكن ناحتفظ بحجم أيقونة صغير حتى التفاعل */
}

/* Expand state (hover) - نص عربي واضح */
.sicon-whatsapp2:hover::after {
    content: " في خدمتك 😊 ";
    width: 260px;
    height: 60px;
    border-radius: 8px;
    font-size: 20px;
    font-family: "dinnextltarabic-regular", sans-serif;
    color: rgba(255,255,255,0.95);
    line-height: 1;
    padding: 0 16px;
}

/* keyframes معدّلة لاستخدام ألوان rgba */
@keyframes trns {
    0% { color: rgba(255,255,255,0); }
    100% { color: rgba(255,255,255,0.6); }
}