/* ============================================
   Interactive Effects for Artbella
   Hover & Tap Effects
   ============================================ */

/* ============================================
   1. Product Cards - كروت المنتجات
   ============================================ */

.product-item,
.product-card,
.item-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.product-item:hover,
.product-card:hover,
.item-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Product Images Zoom */
.product-item:hover img,
.product-card:hover img,
.item-card:hover img {
    transform: scale(1.05) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-image,
.product-img {
    overflow: hidden !important;
}

/* ============================================
   2. Buttons - الأزرار
   ============================================ */

.btn,
button,
.button,
input[type="submit"],
input[type="button"] {
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn:hover,
button:hover,
.button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(241, 27, 112, 0.3) !important;
}

.btn:active,
button:active,
.button:active {
    transform: translateY(0) !important;
}

/* Primary Button */
.btn-primary:hover,
.btn-main:hover {
    background-color: #d01560 !important;
    box-shadow: 0 6px 16px rgba(241, 27, 112, 0.4) !important;
}

/* ============================================
   3. Links - الروابط
   ============================================ */

a {
    transition: all 0.2s ease !important;
    position: relative !important;
}

a:hover {
    transform: translateX(-2px) !important;
}

/* Underline Effect */
a.link-underline {
    position: relative !important;
}

a.link-underline::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    bottom: -2px !important;
    left: 0 !important;
    background-color: #F11B70 !important;
    transition: width 0.3s ease !important;
}

a.link-underline:hover::after {
    width: 100% !important;
}

/* ============================================
   4. Category Cards - كروت الفئات
   ============================================ */

.category-item,
.category-card {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.category-item:hover,
.category-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

.category-item:hover img,
.category-card:hover img {
    transform: scale(1.1) rotate(2deg) !important;
    transition: transform 0.4s ease !important;
}

/* ============================================
   5. Vendor/Store Cards - كروت البائعين
   ============================================ */

.vendor-item,
.vendor-card,
.store-item,
.store-card {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.vendor-item:hover,
.vendor-card:hover,
.store-item:hover,
.store-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ============================================
   6. Navigation Menu - القوائم
   ============================================ */

.nav-link,
.menu-item,
.navigation-item {
    transition: all 0.2s ease !important;
    position: relative !important;
}

.nav-link:hover,
.menu-item:hover,
.navigation-item:hover {
    color: #F11B70 !important;
    transform: translateX(-3px) !important;
}

.nav-link::before,
.menu-item::before {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    bottom: 0 !important;
    right: 0 !important;
    background-color: #F11B70 !important;
    transition: width 0.3s ease !important;
}

.nav-link:hover::before,
.menu-item:hover::before {
    width: 100% !important;
}

/* ============================================
   7. Form Inputs - حقول الإدخال
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
    transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #F11B70 !important;
    box-shadow: 0 0 0 3px rgba(241, 27, 112, 0.1) !important;
    transform: scale(1.01) !important;
}

/* ============================================
   8. Badges & Tags - الشارات
   ============================================ */

.badge,
.tag,
.label {
    transition: all 0.2s ease !important;
}

.badge:hover,
.tag:hover,
.label:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   9. Icons - الأيقونات
   ============================================ */

i,
.icon,
[class*="icon-"] {
    transition: all 0.3s ease !important;
}

a:hover i,
button:hover i,
.btn:hover i {
    transform: scale(1.2) rotate(5deg) !important;
}

/* ============================================
   10. Images - الصور
   ============================================ */

img {
    transition: all 0.3s ease !important;
}

a:hover img {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
}

/* ============================================
   11. Dropdown Menus - القوائم المنسدلة
   ============================================ */

.dropdown-menu,
.submenu {
    transition: all 0.3s ease !important;
    transform-origin: top !important;
}

.dropdown-item {
    transition: all 0.2s ease !important;
}

.dropdown-item:hover {
    background-color: rgba(241, 27, 112, 0.1) !important;
    transform: translateX(-5px) !important;
    padding-right: 25px !important;
}

/* ============================================
   12. Cards General - الكروت العامة
   ============================================ */

.card {
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   13. Social Icons - أيقونات التواصل
   ============================================ */

.social-icon,
.social-link {
    transition: all 0.3s ease !important;
}

.social-icon:hover,
.social-link:hover {
    transform: translateY(-3px) rotate(5deg) !important;
    color: #F11B70 !important;
}

/* ============================================
   14. Search Bar - شريط البحث
   ============================================ */

.search-input,
.search-box {
    transition: all 0.3s ease !important;
}

.search-input:focus,
.search-box:focus {
    width: 110% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   15. Pagination - الترقيم
   ============================================ */

.pagination a,
.page-link {
    transition: all 0.2s ease !important;
}

.pagination a:hover,
.page-link:hover {
    transform: scale(1.1) !important;
    background-color: #F11B70 !important;
    color: white !important;
}

/* ============================================
   16. Mobile Tap Effects
   ============================================ */

@media (max-width: 768px) {
    /* Active/Tap States */
    .product-item:active,
    .product-card:active,
    .btn:active,
    button:active {
        transform: scale(0.98) !important;
    }
    
    /* Tap Highlight */
    * {
        -webkit-tap-highlight-color: rgba(241, 27, 112, 0.2) !important;
    }
}

/* ============================================
   17. Ripple Effect - تأثير الموجة
   ============================================ */

.btn,
button,
.button {
    position: relative !important;
    overflow: hidden !important;
}

.btn::after,
button::after,
.button::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

.btn:active::after,
button:active::after,
.button:active::after {
    width: 300px !important;
    height: 300px !important;
}

/* ============================================
   18. Smooth Transitions
   ============================================ */

* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   19. Focus States - حالات التركيز
   ============================================ */

*:focus {
    outline: 2px solid #F11B70 !important;
    outline-offset: 2px !important;
}

button:focus,
.btn:focus,
a:focus {
    box-shadow: 0 0 0 3px rgba(241, 27, 112, 0.3) !important;
}

/* ============================================
   20. Accessibility - إمكانية الوصول
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}