/* Add custom CSS styles below */ 
/* استهداف الشريط السفلي للحقوق في الفوتر وتغيير لونه + مدّه لحد الحواف */
footer.store-header .container.text-center,
.store-footer .container.text-center,
footer .store-footer__inner + div,
footer [class*="container"][class*="text-center"] {
    background-color: #F6CEA7 !important;
    color: #110B08 !important;
    border-top: none !important;

    /* مدّ الخلفية لحد أطراف الشاشة يمين وشمال */
    box-shadow: 0 0 0 100vmax #F6CEA7 !important;
    clip-path: inset(0 -100vmax) !important;
}

/* إزالة أي مسافة أو حشو بيعمل فراغ بني تحت الشريط */
footer .store-footer__inner + div,
.store-footer > div:last-child {
    margin-bottom: 0 !important;
}

/* منع ظهور سكرول أفقي بسبب الامتداد */
.store-footer,
footer {
    overflow-x: clip !important;
}

/* تلوين النصوص والروابط داخل هذا الشريط السفلي لتكون واضحة */
footer.store-header .container.text-center *,
.store-footer .container.text-center *,
.copyright-text,
.copyright-text * {
    color: #110B08 !important;
    fill: #110B08 !important;
}
/* 1. توحيد خلفية الفوتر وإضافة انحناء (Radius) واضح للحواف العلوية */
footer.store-header,
.store-footer,
#footer,
.footer-container,
[data-testid="store-footer"] {
    background-color: #6A4F2F !important;
    border-top-left-radius: 45px !important;
    border-top-right-radius: 45px !important;
    margin-top: 25px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. استهداف جميع الحاويات الفرعية لتفريغ الخلفيات */
.store-footer *,
#footer *,
footer.store-header * {
    background-color: transparent !important;
}

/* 3. فرض اللون الأبيض النقي وإلغاء أي شفافية على جميع نصوص الفوتر */
.store-footer,
.store-footer *,
#footer,
#footer *,
footer.store-header,
footer.store-header * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* إعادة تثبيت اللون الأبيض لجميع الروابط والعناوين والفقرات بدقة */
.store-footer a,
.store-footer p,
.store-footer span,
.store-footer div,
.store-footer li,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer h5,
.store-footer h6 {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 4. تنسيق خطوط الفواصل في الفوتر إن وجدت */
.store-footer hr,
.store-footer .footer-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 5. أيقونات التواصل في الفوتر */
.s-contacts-icon,
.s-contacts-item .s-contacts-icon,
salla-contacts .s-contacts-icon {
    color: #F6E2CF !important;
    border-color: #F6E2CF !important;
}

.s-contacts-icon svg,
.s-contacts-icon i,
.s-contacts-icon path {
    color: #F6E2CF !important;
    fill: #F6E2CF !important;
    stroke: #F6E2CF !important;
}
/* 1. خلفية الهيدر الرئيسي باللون البيج الذهبي #CFB388 */
header.store-header,
header.store-header .store-header__inner,
#mainnav,
.main-nav-container {
    background-color: #CFB388 !important;
}

/* 2. الشريط العلوي (Top Bar) باللون الأسود #000000 */
header.store-header .top-bar,
header.store-header .top-navbar,
header.store-header [class*="top-bar"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* 3. نصوص وروابط وأيقونات الشريط العلوي باللون الأبيض */
header.store-header .top-bar a,
header.store-header .top-bar span,
header.store-header .top-bar li,
header.store-header .top-navbar a,
header.store-header .top-navbar span,
header.store-header .top-navbar li,
header.store-header .s-menu-topnav-item,
header.store-header .top-bar svg,
header.store-header .top-bar i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* 4. إظهار وتلوين جميع عناصر وأيقونات الهيدر (البحث، السلة، الحساب، القوائم) باللون الأسود */
header.store-header a,
header.store-header button,
header.store-header i,
header.store-header svg,
header.store-header span,
header.store-header .main-menu a,
header.store-header .nav-link,
header.store-header [class*="search"],
header.store-header salla-search {
    color: #000000 !important;
    stroke: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ضبط حاوية البحث العامة */
header.store-header .search-wrapper,
header.store-header salla-search,
header.store-header form[action*="search"],
header.store-header .search-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    max-width: 320px !important;
    margin: 4px 10px !important;
}

/* حقل البحث مع مساحة داخلية جهة اليمين حتى لا يلمس النص الأيقونة */
header.store-header input[type="search"],
header.store-header .search-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 20px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 15px !important;
    padding-right: 42px !important; /* مساحة فارغة تمنع ركوب الكلمة فوق الأيقونة */
    text-align: right !important;
    width: 100% !important;
    outline: none !important;
}

/* تثبيت أيقونة البحث في أقصى اليمين داخل الحقل بمسافة ثابتة */
header.store-header .search-wrapper button,
header.store-header salla-search button,
header.store-header .search-wrapper svg,
header.store-header salla-search svg,
header.store-header .search-icon {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important; /* للسماح بالنقر المباشر على الحقل */
    color: #555555 !important;
    stroke: #555555 !important;
}

/* تنسيق كلمة البحث (Placeholder) */
header.store-header input::placeholder,
header.store-header .search-input::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}
/* إعادة إظهار باقي العناوين في الفوتر لشكلها الطبيعي */
footer .store-footer__inner h3 {
    font-size: inherit !important;
    background-image: none !important;
}

/* تكبير وتعديل اللوجو في الفوتر بألوانه الطبيعية */
footer .store-footer__inner a.flex.items-center.m-0 h3 {
    font-size: 0 !important;
    display: inline-block !important;
    width: 180px !important;    /* تم تكبير العرض */
    height: 70px !important;    /* تم تكبير الارتفاع */
    background-image: url('https://cdn.files.salla.network/other/829461432/bfd6ee58-b2bd-4137-9f76-aebc4b747893-original.webp') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    margin: 0 !important;
    filter: none !important;           /* إزالة الفلتر الأبيض نهائياً */
    -webkit-filter: none !important;    /* إزالة الفلتر لمتصفحات سفاري */
}
/* ===== ألوان المتجر ===== */
:root {
    --al-peach: #F6CEA7;
    --al-sand: #CDB38B;
    --al-brown: #6B4F2E;
    --al-dark: #110B08;
}

/* ===== الكارت نفسه ===== */
.s-product-card-entry {
    position: relative;
    background: #fff !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid rgba(107, 79, 46, 0.08) !important;
    box-shadow: 0 6px 20px rgba(17, 11, 8, 0.06) !important;
    transition: transform .45s cubic-bezier(.2,.8,.2,1),
                box-shadow .45s ease,
                border-color .45s ease !important;
}

.s-product-card-entry:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(107, 79, 46, 0.18) !important;
    border-color: var(--al-sand) !important;
}

/* ===== الصورة ===== */
.s-product-card-image {
    position: relative;
    overflow: hidden !important;
    border-radius: 18px !important;
    margin: 10px 10px 0 !important;
}

.s-product-card-image img {
    transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease !important;
}

.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.08);
    filter: brightness(1.03) contrast(1.03);
}

/* لمعة بتعدّي على الصورة */
.s-product-card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
}

.s-product-card-entry:hover .s-product-card-image::after {
    animation: al-shine .9s ease forwards;
}

@keyframes al-shine {
    to { left: 130%; }
}

/* تدرج خفيف أسفل الصورة */
.s-product-card-image::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 35%;
    background: linear-gradient(to top, rgba(17,11,8,.18), transparent);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 1;
    pointer-events: none;
}

.s-product-card-entry:hover .s-product-card-image::before {
    opacity: 1;
}

/* ===== المحتوى ===== */
.s-product-card-content {
    padding: 16px 18px 18px !important;
}

.s-product-card-content-title a {
    color: var(--al-dark) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    transition: color .3s ease !important;
}

.s-product-card-entry:hover .s-product-card-content-title a {
    color: var(--al-brown) !important;
}

/* السعر كـ بادج */
.s-product-card-price,
.s-product-card-sale-price h4 {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: var(--al-peach) !important;
    color: var(--al-dark) !important;
    padding: 4px 14px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
}

/* ===== زرار أضف إلى السلة ===== */
.s-product-card-entry .s-button-btn,
.s-product-card-content-footer button {
    position: relative;
    overflow: hidden !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--al-brown) !important;
    background: transparent !important;
    color: var(--al-brown) !important;
    font-weight: 600 !important;
    z-index: 1;
    transition: color .4s ease, transform .2s ease !important;
}

.s-product-card-entry .s-button-btn::before,
.s-product-card-content-footer button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--al-brown);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    z-index: -1;
}

.s-product-card-entry .s-button-btn:hover,
.s-product-card-content-footer button:hover {
    color: #fff !important;
}

.s-product-card-entry .s-button-btn:hover::before,
.s-product-card-content-footer button:hover::before {
    transform: scaleX(1);
}

.s-product-card-entry .s-button-btn:hover *,
.s-product-card-content-footer button:hover * {
    color: #fff !important;
    fill: #fff !important;
}

.s-product-card-entry .s-button-btn:active,
.s-product-card-content-footer button:active {
    transform: scale(.96);
}

/* ===== زرار المفضلة ===== */
.s-product-card-wishlist-btn {
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(6px);
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(17,11,8,.12) !important;
    transition: transform .3s ease !important;
}

.s-product-card-wishlist-btn:hover {
    transform: scale(1.12) rotate(-8deg);
}

/* ===== ظهور الكروت بحركة عند تحميل الصفحة ===== */
.s-product-card-entry {
    animation: al-fade-up .7s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes al-fade-up {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* احترام إعداد تقليل الحركة عند المستخدم */
@media (prefers-reduced-motion: reduce) {
    .s-product-card-entry,
    .s-product-card-entry * {
        animation: none !important;
        transition: none !important;
    }
}