/* ========================================================= */
/* تحسين الصفحة الرئيسية لمتجر الإلكترونيات - YouCan */
/* ========================================================= */
/* 1. تثبيت وتجميل الترويسة العلوية */
header.header-wrapper, .navbar {
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important;
border-bottom: 1px solid #e2e8f0 !important;
background: #ffffff !important;
}
/* 2. تجميل شريط الإعلانات العلوي */
.announcement-bar {
font-weight: 700 !important;
letter-spacing: 0.3px !important;
padding: 8px 0 !important;
}
/* 3. تصميم البانر الرئيسي وأزراره */
.hero-slider .slider-content h1, .banner-title {
font-size: 2.2rem !important;
font-weight: 900 !important;
color: #0f172a !important;
line-height: 1.3 !important;
}
.hero-slider .slider-content p, .banner-subtitle {
color: #475569 !important;
font-size: 1.1rem !important;
margin-top: 10px !important;
}
.hero-slider .btn, .banner-btn {
background: #16a34a !important;
border-radius: 8px !important;
font-weight: 800 !important;
padding: 14px 28px !important;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
border: none !important;
transition: transform 0.2s ease !important;
}
.hero-slider .btn:hover, .banner-btn:hover {
transform: translateY(-2px) !important;
background: #15803d !important;
}
/* 4. إعطاء بطاقات المنتجات مظهراً تقنياً راقياً */
.product-item, .product-card {
border-radius: 12px !important;
border: 1px solid #e2e8f0 !important;
background: #ffffff !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}
.product-item:hover, .product-card:hover {
transform: translateY(-4px) !important;
border-color: #2563eb !important;
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.15) !important;
}
/* 5. تجميل أسعار المنتجات */
.product-price, .price {
font-weight: 900 !important;
color: #0f172a !important;
font-size: 1.25rem !important;
}
.badge-sale, .sale-badge {
background: #ef4444 !important;
color: #ffffff !important;
font-weight: 800 !important;
border-radius: 6px !important;
padding: 4px 8px !important;
}