/* =========================================
   SUN FUN - Salla Store Custom CSS
   ========================================= */
@import url(https://raw.githack.com/elwa2/cssres/main/freeraed.css);
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');
 
/* 1. تعريف الألوان الأساسية من الشعار */
:root {
    --sun-orange: #F28C28; /* لون حرفي SU والبرتقالي */
    --sun-yellow: #FFD700; /* لون الشمس والأصفر */
    --fun-blue: #00A2E8;   /* لون حرف F والأزرق */
    --fun-green: #8CC63F;  /* لون حرف N والأخضر */
    --light-bg: #F9FCFF;   /* خلفية فاتحة جداً مائلة للأزرق النظيف */
    --dark-text: #333333;
    --border-radius-main: 25px; /* زوايا دائرية لطابع طفولي */
}

/* 2. الخلفية العامة والخطوط */
body {
    background-color: var(--light-bg) !important;
    color: var(--dark-text);
}
/* ================= الأساسيات ================= */
body, *:not(i):not([class*="sicon"]) {
    font-family: "Readex Pro", system-ui, sans-serif !important;
}

/* 3. تنسيق القائمة العلوية (الهيدر) */
header, .store-header, .header-wrapper {
    background: #ffffff !important;
    border-bottom: 4px solid var(--sun-orange) !important;
    box-shadow: 0 4px 15px rgba(0, 162, 232, 0.1) !important;
}

/* 4. تنسيق أزرار المتجر (إضافة للسلة، متابعة، إلخ) */
.btn, .salla-btn, .btn-primary, .add-to-cart-btn {
    background-color: var(--fun-blue) !important;
    border: none !important;
    border-radius: 50px !important; /* زر بيضاوي بالكامل */
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(0, 162, 232, 0.3) !important;
}

/* تأثير عند تمرير الماوس على الأزرار (حركة ارتداد خفيفة) */
.btn:hover, .salla-btn:hover, .btn-primary:hover, .add-to-cart-btn:hover {
    background-color: var(--sun-orange) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 15px rgba(242, 140, 40, 0.4) !important;
}

/* 5. تنسيق كروت المنتجات (Product Cards) */
.product-item, .product-card, .s-product-card {
    background: #ffffff !important;
    border-radius: var(--border-radius-main) !important;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

/* تأثير عند تمرير الماوس على كرت المنتج */
.product-item:hover, .product-card:hover, .s-product-card:hover {
    border-color: var(--fun-green) !important;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(140, 198, 63, 0.2) !important;
}

/* 6. عناوين المنتجات والأسعار */
.product-title, .product-title a, .s-product-card-title {
    color: var(--fun-blue) !important;
    font-weight: 700 !important;
}

.product-price, .price, .s-product-card-price {
    color: var(--sun-orange) !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
}

/* 7. أيقونات التخفيضات والتاجات (Badges) */
.badge, .discount-badge, .s-badge {
    background-color: var(--fun-green) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 5px 10px !important;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(140, 198, 63, 0.4);
}
/* 8. تذييل الصفحة (الفوتر) */
footer, .store-footer,
.footer-is-light .store-footer {
    background: #0B7FC0 !important;              /* شريط الحقوق السفلي: أزرق أغمق */
    color: #fff !important;
    border-top: 5px dashed var(--sun-yellow) !important;
}

/* القسم العلوي (الروابط والتواصل) */
.store-footer .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner {
    background: var(--fun-blue) !important;
    color: #fff !important;
}

/* كل النصوص داخل الفوتر */
.store-footer h3,
.store-footer p,
.store-footer span,
.store-footer b,
.store-footer a,
.store-footer .text-text-grey {
    color: #fff !important;
}

.store-footer h3 {
    font-weight: 700 !important;
    margin-bottom: 1rem;
}

/* السجل التجاري والوصف بلون أخف قليلاً */
.store-footer p,
.store-footer .text-text-grey {
    opacity: .9;
}

.store-footer a:hover {
    color: var(--sun-yellow) !important;
}

/* دوائر الأيقونات (الجوال والتواصل) */
.store-footer .contact-social a,
.store-footer a .rounded-full,
.store-footer [class*="rounded-full"] {
    border-color: rgba(255,255,255,.4) !important;
    color: #fff !important;
}

.store-footer .contact-social a:hover {
    background: var(--sun-yellow) !important;
    color: var(--dark-text) !important;
}

/* شعارات الدفع: بيضاء على خلفية زرقاء */
.store-footer .payment-methods img,
.store-footer salla-payments img {
    background: #fff;
    border-radius: 10px;
}