/* ==========================================================
   1. إخفاء النص التعريفي المكرر أو التلقائي في الفوتر والإبقاء على النص الخاص بنا فقط
   ========================================================== */
footer.store-footer > div:not(.footer-logo-container) p,
footer.store-footer .store-description:not(.footer-logo-container p) {
    display: none !important;
}

/* 2. ضبط حجم الشعار وإلغاء المسافات السفلية */
footer.store-footer .footer-logo-container,
footer.store-footer .footer-logo,
footer.store-footer a.logo {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

footer.store-footer .footer-logo-container img,
footer.store-footer .footer-logo img,
footer.store-footer a.logo img,
footer.store-footer img {
    width: 200px !important;       
    max-width: 100% !important;     
    height: auto !important;
    max-height: none !important;    
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 0px auto !important; 
}

/* 3. تقريب النص التعريفي من الشعار مباشرة */
footer.store-footer .footer-logo-container p,
footer.store-footer p {
    margin-top: 6px !important;    
    padding-top: 0 !important;
    line-height: 1.4 !important;
}

/* ==========================================================
   4. تنسيق قسم "روابط مهمة" والأكورديون (بدون حركات أو تحويم)
   ========================================================== */
.accordion-ready {
    cursor: pointer !important;
    user-select: none !important;
    display: block !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
}

.accordion-ready:hover {
    transform: none !important;
    color: inherit !important;
    background: none !important;
}

/* ==========================================================
   5. توحيد خلفية الموقع بالكامل باللون البيج وتنسيق الفوتر
   ========================================================== */
body, html {
    overflow-x: hidden !important; 
}

body, html, #app, .site-wrapper,
header.store-header, main.site-main, footer.store-footer {
    background-color: #F5F2EB !important;
}

footer.store-footer .store-footer__inner {
    background-color: #F5F2EB !important;
    padding: 30px !important;
    border-radius: 12px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   6. ضبط أحجام وتنسيقات أيقونة السجل التجاري
   ========================================================== */
.s-cr-container img.s-trust-badges-image,
img.s-trust-badges-image[alt="السجل التجاري"] {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 auto 5px auto !important;
}

.custom-cr-box {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 12px !important;
    text-align: right !important;
}

.custom-cr-label, .custom-cr-num {
    display: block !important;
    font-size: 14px !important;
    color: #000000 !important;
    font-weight: bold !important;
    margin-bottom: 2px !important;
}

/* ==========================================================
   7. إصلاح قسم التواصل: العناوين والأيقونات
   ========================================================== */
footer h3, .store-footer h3, [class*="footer"] h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 12px !important;
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
}

footer .store-footer__social, 
.store-footer .store-footer__social,
footer [class*="contact"], 
.store-footer [class*="contact"],
footer [class*="info"],
.store-footer [class*="info"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

/* الحاوية الدائرية البيضاء الخارجية وإزالة الإطارات العشوائية */
footer [class*="contact"] a, 
.store-footer [class*="contact"] a,
footer [class*="info"] a, 
.store-footer [class*="info"] a,
footer .store-footer__social a,
.store-footer .store-footer__social a {
    position: relative !important;
    display: inline-block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    overflow: hidden !important;
    outline: none !important;
}

footer [class*="contact"] a *,
.store-footer [class*="contact"] a *,
footer .store-footer__social a *,
.store-footer .store-footer__social a *,
footer [class*="contact"] a::before,
footer [class*="contact"] a::after,
.store-footer [class*="contact"] a::before,
.store-footer [class*="contact"] a::after,
footer .store-footer__social a::before,
footer .store-footer__social a::after,
.store-footer .store-footer__social a::before,
.store-footer .store-footer__social a::after {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* التوسيط الهندسي المطلق للأيقونات والرموز */
footer [class*="contact"] a i, 
.store-footer [class*="contact"] a i,
footer [class*="contact"] a svg, 
.store-footer [class*="contact"] a svg,
footer .store-footer__social a i,
.store-footer .store-footer__social a i,
footer .store-footer__social a svg,
.store-footer .store-footer__social a svg,
footer [class*="contact"] a::before,
.store-footer [class*="contact"] a::before,
footer .store-footer__social a::before,
.store-footer .store-footer__social a::before,
footer [class*="contact"] a i::before,
.store-footer [class*="contact"] a i::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #4b5563 !important;
    fill: #4b5563 !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* تأثير مرور الماوس (Hover) */
footer [class*="contact"] a:hover, 
.store-footer [class*="contact"] a:hover,
footer [class*="info"] a:hover, 
.store-footer [class*="info"] a:hover,
footer .store-footer__social a:hover,
.store-footer .store-footer__social a:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

footer [class*="contact"] a:hover i, 
.store-footer [class*="contact"] a:hover i,
footer [class*="contact"] a:hover svg, 
.store-footer [class*="contact"] a:hover svg,
footer .store-footer__social a:hover i,
.store-footer .store-footer__social a:hover i,
footer .store-footer__social a:hover svg,
.store-footer .store-footer__social a:hover svg,
footer [class*="contact"] a:hover::before,
.store-footer [class*="contact"] a:hover::before,
footer .store-footer__social a:hover::before,
.store-footer .store-footer__social a:hover::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ==========================================================
   8. لمسات احترافية: تأثيرات الحركة والتفاعل (Animations & Hover)
   ========================================================== */
.reveal-element {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.reveal-element.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.smart-header {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

.smart-header.scrolled {
    background-color: rgba(255, 255, 255, 0.90) !important; 
    backdrop-filter: blur(10px) !important; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
}

.product-item, .product-card, .btn, button {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.product-item:hover, .product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    z-index: 2;
}

/* إخفاء قسم السوشيال ميديا الأول المخصص للديسكتوب */
salla-social[data-testid="store-footer-social"] {
    display: none !important;
}
div:has(> salla-social[data-testid="store-footer-social"]) {
    display: none !important;
}