/* 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;  /* Controls the gap between items */
    width: auto !important;             /* Allows items to sit tighter together */
}

/* 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;       /* This creates the curvy/pill shape */
    background-color: #800000 !important; /* Keeps the inside clear */
}

/* Target the main section container */
.s-block--fixed-banner.s-block--dynamic-banner {
    display: flex !important;
    justify-content: center !important; /* Centers horizontally */
    align-items: center !important;     /* Centers vertically if the section has height */
    width: 100% !important;
    padding-left: 15px;                 /* Prevents touching screen edges */
    padding-right: 15px;
}

/* Target the wrapper inside the section */
.s-block--fixed-banner .anime-item {
    width: 100% !important;
    max-width: 1200px;                  /* Change this to your preferred banner width */
    margin: 0 auto !important;          /* Standard centering fallback */
    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;
}


/* 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;
}

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

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

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

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

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




/* 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 (top one) stretch horizontally */
.s-block--enhanced-features .s-block--enhanced-features__item:nth-child(1) {
    grid-column: 1 / span 2 !important; /* Spans across both columns */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 180px; /* Adjust this to make it taller/shorter */
    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; /* Matches the subtle border in your image */
    border-radius: 8px;
}

.s-block--enhanced-features__item img {
    margin-bottom: 15px !important;
    max-height: 80px !important; /* Keeps icons uniform */
    object-fit: contain;م
} 

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

/* السعر المخفض (غير المشطوب) */
.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;
}



/* Add custom CSS styles below */ 
.total-price {
    color: #800000 !important;
}

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

/* 1. The Base State (Transparent background, colored border/text) */
.btn--outline-primary {
    background-color: #800000 !important;
    color: #ffffff !important; /* Replace with your primary color hex */
    border: 1px solid #800000 !important;
    transition: all 0.3s ease-in-out !important;
  font-size: 18px !important; /* تكبير الخط */
}

/* 2. إخفاء النص القديم وتنسيق الزر */
.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. إضافة النص الجديد "عرض المزيد" بخط Cairo */
.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;
}