/* Add custom CSS styles below */ 

/* Adjust the width and height to your liking */
.anime-item img.rounded-full {
    width: 70px !important;
    height: 70px !important;
}

/* Reduce the horizontal distance between category items */
.anime-item {
    margin-inline-end: 10px !important;
    width: auto !important;
}

/* Adjust the container to make sure the circles stay centered */
.anime-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* إزالة الخلفية والحدود من أيقونات الدفع */
.s-payments-list-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 1. Remove the default border and set the speed of the animation */
.btn--outline-primary {
    border: 1px solid transparent !important;
    transition: all 0.3s ease-in-out !important;
}

/* 2. On hover: show the border and make it curvy */
.btn--outline-primary:hover {
    border-radius: 30px !important;
    background-color: #800000 !important;
}

/* Target the main section container */
.s-block--fixed-banner.s-block--dynamic-banner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Target the wrapper inside the section */
.s-block--fixed-banner .anime-item {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Ensure the link and images behave as centered blocks */
.s-block--fixed-banner .banner {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 1. Set the transition speed for the SVG elements */
.sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease !important;
}

/* 2. Sun Beams: Rotate and fade out when toggled */
[data-theme="dark"] .sun-beams {
    transform: rotate(-45deg) !important;
    opacity: 0 !important;
}

/* 3. Sun Circle: Scale up to look like a full Moon */
[data-theme="dark"] .sun {
    transform: scale(1.75) !important;
}

/* 4. Moon Mask: Move the masking circle to "cut" the sun into a crescent */
[data-theme="dark"] .moon > circle {
    transform: translateX(-7px) !important;
}

/* 5. Icon Color */
.theme-toggle {
    color: #bba47e !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.theme-toggle:hover {
    opacity: 0.8 !important;
}

/* 1. Force a 2-column grid layout */
.s-block--enhanced-features .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
}

/* 2. Make the first item stretch horizontally */
.s-block--enhanced-features .s-block--enhanced-features__item:nth-child(1) {
    grid-column: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px !important;
    padding: 30px !important;
}

/* 3. Style the bottom two items to stay side-by-side */
.s-block--enhanced-features .s-block--enhanced-features__item:nth-child(2),
.s-block--enhanced-features .s-block--enhanced-features__item:nth-child(3) {
    grid-column: span 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
}

/* 4. Global alignment for text and icons inside all cards */
.s-block--enhanced-features__item {
    text-align: center !important;
    border: 1px solid #f3f3f3 !important;
    border-radius: 8px !important;
}

.s-block--enhanced-features__item img {
    margin-bottom: 15px !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

/* ===== إجبار لون السعر بعد الخصم فقط ===== */

/* السعر المخفض غير المشطوب */
.product-price > span:not(del),
.s-product-card-price > span:not(del),
.cart-item__price > span:not(del) {
    color: #8f5b61 !important;
    font-weight: 700 !important;
}

/* السعر قبل الخصم المشطوب */
.product-price del,
.s-product-card-price del,
.cart-item__price del {
    color: #000000 !important;
    opacity: 0.6 !important;
}

/* ===== تغيير كل الدوائر الوردية إلى عنابي ===== */

/* دائرة عدد السلة */
.cart-count,
.s-cart-count,
.s-header__cart-count,
.s-bottom-nav .cart-count,
.s-bottom-nav .s-cart-count {
    background-color: #8B0014 !important;
    color: #ffffff !important;
}

/* لون الإجمالي */
.total-price {
    color: #800000 !important;
}

/*
مهم:
تم تعطيل إخفاء رسالة المخزون مؤقتًا حتى تظهر لك حالة المخزون أثناء الفحص.
بعد حل مشكلة المخزون من لوحة سلة، إذا أردت إخفاء الرسالة فعّل الكود بحذف علامات التعليق.

#variant-inventory {
    display: none !important;
}
*/

/* 1. The Base State */
.btn--outline-primary {
    background-color: #800000 !important;
    color: #ffffff !important;
    border: 1px solid #800000 !important;
    transition: all 0.3s ease-in-out !important;
    font-size: 18px !important;
}

/* 2. تنسيق زر outline */
.btn--outline-primary {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    padding: 10px 25px !important;
    transition: 0.3s ease-in-out !important;
}

/* 3. إضافة النص الجديد */
.btn--outline-primary::before {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-left: 10px !important;
}

/* ===== زر عرض الكل مطابق لفيدونيه ===== */
.s-slider-block__display-all,
.s-block__display-all,
.s-block .btn--outline-primary {
    background: #ffffff !important;
    color: #6b0f0f !important;
    border: 1.5px solid #6b0f0f !important;
    border-radius: 0 !important;

    min-width: 145px !important;
    height: 48px !important;
    padding: 0 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    font-family: "DIN Next LT Arabic", "DIN Next Arabic", "Tajawal", Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* لون النص والسهم داخل زر عرض الكل */
.s-slider-block__display-all *,
.s-block__display-all *,
.s-block .btn--outline-primary * {
    color: #6b0f0f !important;
    fill: #6b0f0f !important;
    stroke: #6b0f0f !important;
}

/* منع تغير شكل زر عرض الكل عند الضغط أو المرور */
.s-slider-block__display-all:hover,
.s-block__display-all:hover,
.s-block .btn--outline-primary:hover,
.s-slider-block__display-all:focus,
.s-block__display-all:focus,
.s-block .btn--outline-primary:focus,
.s-slider-block__display-all:active,
.s-block__display-all:active,
.s-block .btn--outline-primary:active {
    background: #ffffff !important;
    color: #6b0f0f !important;
    border-color: #6b0f0f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* الخطين الجانبية حول زر عرض الكل */
.s-slider-block__display-all-wrapper,
.s-block__display-all-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 55px !important;
    margin-top: 24px !important;
    margin-bottom: 45px !important;
}

.s-slider-block__display-all-wrapper::before,
.s-slider-block__display-all-wrapper::after,
.s-block__display-all-wrapper::before,
.s-block__display-all-wrapper::after {
    content: "" !important;
    display: block !important;
    width: 26% !important;
    height: 1px !important;
    background: #e5e5e5 !important;
}

/* حجم سهم زر عرض الكل */
.s-slider-block__display-all svg,
.s-block__display-all svg,
.s-block .btn--outline-primary svg,
.s-slider-block__display-all i,
.s-block__display-all i,
.s-block .btn--outline-primary i {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    color: #6b0f0f !important;
    fill: #6b0f0f !important;
    stroke: #6b0f0f !important;
}

/* زر عرض الكل في الجوال */
@media (max-width: 768px) {
    .s-slider-block__display-all,
    .s-block__display-all,
    .s-block .btn--outline-primary {
        min-width: 88px !important;
        height: 34px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        gap: 5px !important;
    }

    .s-slider-block__display-all svg,
    .s-block__display-all svg,
    .s-block .btn--outline-primary svg,
    .s-slider-block__display-all i,
    .s-block__display-all i,
    .s-block .btn--outline-primary i {
        width: 8px !important;
        height: 8px !important;
        font-size: 8px !important;
    }

    .s-slider-block__display-all-wrapper,
    .s-block__display-all-wrapper {
        gap: 28px !important;
        margin-top: 18px !important;
        margin-bottom: 32px !important;
    }

    .s-slider-block__display-all-wrapper::before,
    .s-slider-block__display-all-wrapper::after,
    .s-block__display-all-wrapper::before,
    .s-block__display-all-wrapper::after {
        width: 27% !important;
    }
}

/* لون الأيقونة داخل الزر */
.s-button-btn svg,
section a.s-button-element svg {
    color: #7A0F0A !important;
    fill: #7A0F0A !important;
}

/* تكبير عنوان الأسئلة الشائعة */
.s-block--faqs .s-block__title,
.s-block--faqs h2,
section[data-section-id*="faq"] h2 {
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #74100d !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* الخط الصغير تحت العنوان مع الدائرة */
.s-block--faqs .s-block__title::after,
section[data-section-id*="faq"] h2::after {
    content: "" !important;
    display: block !important;
    width: 180px !important;
    height: 4px !important;
    background: #74100d !important;
    margin: 16px auto 0 !important;
    border-radius: 10px !important;
}

/* تصغير الزخرفة/الدائرة إن ظهرت */
.s-block--faqs .s-block__title::before,
section[data-section-id*="faq"] h2::before {
    transform: scale(0.65) !important;
}

/* إخفاء زر الرئيسية من الشريط السفلي */
.selia-bottom-nav-home {
    display: none !important;
}

/* تقليل الفراغ تحت عناوين الأقسام الرئيسية */
.s-block__title {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
}

/* تقليل المسافة بين العنوان والزخرفة */
.s-block__title h2,
.s-block__title h3,
.s-block__title .title {
    margin-bottom: 6px !important;
}

/* تقليل المسافة حول الخطوط والزخرفة */
.s-block__title::after,
.s-block__title .line,
.s-block__title .divider {
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}

/* تصغير المسافة بين العنوان والزخرفة بدون تغيير شكل الخط */
.s-block__title,
.section-title {
    margin-bottom: 10px !important;
}

/* لا نغير شكل الخط الزخرفي */
.s-block__title::after,
.section-title::after {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    width: auto !important;
    height: auto !important;
    border-radius: initial !important;
}

/* زر إضافة للسلة: خلفية عنابي وأيقونة بيضاء */
.s-add-to-cart-button,
button.add-to-cart,
button[type="submit"].s-button-primary {
    background: #6b1209 !important;
    border-color: #6b1209 !important;
    color: #fff !important;
}

.s-add-to-cart-button *,
button.add-to-cart *,
button[type="submit"].s-button-primary * {
    color: #fff !important;
    fill: #fff !important;
}

/* إجبار أيقونة المحفظة داخل زر إتمام الطلب تكون بيضاء */
button:has(svg),
a:has(svg) {
    --s-button-icon-color: #ffffff !important;
}

.s-button-primary svg,
.s-button-primary i,
.s-button-primary [class*="icon"],
.s-button-primary [class*="sicon"] {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* توسيط أيقونة القلب والعين داخل الدائرة في بطاقة المنتج */
.s-product-card .s-product-card-wishlist-btn,
.s-product-card button[class*="wishlist"],
.s-product-card button[class*="quick"],
.s-product-card button[class*="eye"],
.s-product-card .s-button-element {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* توسيط الأيقونات نفسها */
.s-product-card .s-product-card-wishlist-btn svg,
.s-product-card button[class*="wishlist"] svg,
.s-product-card button[class*="quick"] svg,
.s-product-card button[class*="eye"] svg,
.s-product-card .s-button-element svg,
.s-product-card .s-product-card-wishlist-btn i,
.s-product-card button[class*="wishlist"] i,
.s-product-card button[class*="quick"] i,
.s-product-card button[class*="eye"] i,
.s-product-card .s-button-element i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: #6b1209 !important;
    stroke: #6b1209 !important;
}

/* =========================
   ثيم الهدية: أيقونة بيضاء + خلفية عنابية
   صفحة المنتج + صفحة السلة
========================= */

/* الدائرة الكبيرة */
[class*="gift"] [class*="icon"],
[class*="gift"] .sicon,
[class*="gift"] .icon,
[class*="gift"] .gift-icon,
[class*="gift"] [role="img"] {
    background: #7A0B04 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
}

/* الأيقونة الكبيرة داخل الدائرة */
[class*="gift"] [class*="icon"] svg,
[class*="gift"] .sicon svg,
[class*="gift"] .icon svg,
[class*="gift"] .gift-icon svg,
[class*="gift"] [role="img"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* جميع تفاصيل الأيقونة */
[class*="gift"] [class*="icon"] svg *,
[class*="gift"] .sicon svg *,
[class*="gift"] .icon svg *,
[class*="gift"] .gift-icon svg *,
[class*="gift"] [role="img"] svg * {
    stroke: #ffffff !important;
    fill: none !important;
}

/* زر أرسلها كهدية */
[class*="gift"] button,
button[class*="gift"] {
    background: #7A0B04 !important;
    border: 1px solid #7A0B04 !important;
    color: #ffffff !important;
    border-radius: 28px !important;
}

/* أيقونة الزر */
[class*="gift"] button svg,
button[class*="gift"] svg,
[class*="gift"] button i,
button[class*="gift"] i {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* تفاصيل أيقونة الزر */
[class*="gift"] button svg *,
button[class*="gift"] svg * {
    stroke: #ffffff !important;
    fill: none !important;
}