/* Add custom CSS styles below */ 
a.flex.items-center.border.p-1\.5.md\:p-2.text-sm.leading-none.enhanced-contact-item {
    display: none;
}
html[lang="en"] .main-menu a,
html[lang="en"] .main-menu span,
html[lang="en"] .sub-menu a,
html[lang="en"] .sub-menu span,
html[lang="en"] nav#mobile-menu a,
html[lang="en"] nav#mobile-menu span {
    text-transform: capitalize !important;
}

.s-trust-badges-label, .s-trust-badges-number {
    font-size: 12px;
    line-height: 0.25rem;
}

.flex.rtl\:space-x-reverse.space-x-2.items-end.justify-center div p.text-sm.text-text-grey.mb-1{
     font-size: 12px;
    line-height: 0.25rem; 
}

.flex.rtl\:space-x-reverse.space-x-2.items-end.justify-center div .text-sm{
     font-size: 12px;
    line-height: 0.25rem; 
}
a.load-img-onclick img {
    width: 35px;
}
img.s-trust-badges-image{
  width: 35px;
}
.s-cart-item-offers-title {
color: var(--color-primary-dark);
  font-weight: 600;
}

.cart .flex.flex-col.items-start.lg\:flex-row.pb-6.lg\:pb-20 {
  padding-bottom: 1px;
}
[aria-label="phone"] {
  display: none !important;
}

section.s-block.s-block--square-links.square-links-7 p.text-sm.leading-6.text-store-text-secondary {
    text-decoration: underline;
  font-weight: bold;
}


html[lang="ar"] .square-links-6 {
    display: none !important;
}
html[lang="en"] .square-links-5 {
    display: none !important;
}
html[lang="ar"] .square-links-8 {
    display: none !important;
}
html[lang="en"] .square-links-7 {
    display: none !important;
}







/* 1. Force freeze all default Salla animations and marquee movements */
.promotion-banner,
.promotion-banner__inner,
.promotion-banner__inner ul,
.promotion-banner__inner ul li {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Hide extra cloned items generated by Salla's slider engine */
.promotion-banner__inner ul li:not(:first-child) {
    display: none !important;
}

/* 2. Absolute center alignment for the link container */
.promotion-banner__inner a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    position: relative !important;
    min-height: 24px;
    margin: 0 auto !important;
    transform: none !important;
    animation: none !important;
}

/* 3. Smooth Fade In/Out items anchored perfectly in the middle */
.promotion-fade-item {
    display: block;
    color: #ffffff;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.6s ease-in-out !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap;
    width: max-content;
}

.promotion-fade-item.active {
    opacity: 1;
}

/* Style the installment widget after moving it to the sticky bar container */
.sticky-product-bar salla-installment {
    display: block;
    width: 100%;
    margin-top: 20px !important; /* Space between add-to-cart button and widgets */
    padding-top: 15px;
    border-top: 1px solid #eee; /* Optional top border for a cleaner look */
}


html[lang="ar"] .advanced-slider--0 {
    display: block !important;
}
html[lang="ar"] .advanced-slider--1 {
    display: none !important;
}


html[lang="en"] .advanced-slider--0 {
    display: none !important;
}
html[lang="en"] .advanced-slider--1 {
    display: block !important;
}

.s-block.s-block--square-links.square-links-2 .mx-auto.max-w-7xl.px-6.lg\:px-8 {
  background-color: #f6dcd9;
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Style the Sub-Sub-Categories beneath the header */
/* Custom discount badge styling */
/* Bulletproof styling for spaced subcategory badges */
.custom-sub-badge {
background-color: #8b1938 !important;
  color: #ffffff !important;
  padding: 3px 4px !important;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 5px rgba(139, 25, 56, 0.25);
  display: inline-block;
  animation: sub-badge-pulse 2.5s infinite ease-in-out;
}

/* Strikethrough style for the old price */
.strikethrough-price {
    text-decoration: line-through;
    color: #9ca3af; /* Gray color to differentiate the old price */
    margin: 0 6px; /* Spacing between the two prices */
    font-weight: normal; /* Remove bold styling if inherited */
    font-size: 0.95em; /* Slightly reduce the font size */
}

@media (max-width: 768px) {
    salla-installment {
        display: none !important;
    }
}
#page-main-title span {
  color: #8f213f;
}



/* Apply styles only on desktop screens to preserve mobile layout */
@media (min-width: 1024px) {
    
    /* Make the main menu container relative so the full-width dropdown aligns to it */
    .main-menu-row {
        position: relative !important;
    }

    /* 
       MAGIC SELECTOR: :has()
       Target ONLY the root menu items that contain a 3rd level menu (sub-subcategories).
       Items with only 1 level of dropdown will be ignored and keep Salla's default style.
    */
    .main-menu > li.root-level:has(.sub-menu li.has-children) {
        position: static !important;
    }

    /* Styling the Mega Menu container ONLY for deep categories */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important; /* Override Salla's w-56 class */
        background-color: #ffffff !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.05) !important;
        padding: 40px 5% !important;
        z-index: 999 !important;
        border-top: 1px solid #f3f3f3 !important;
    }

    /* Convert the large menu content into columns */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 40px !important;
        justify-content: center !important; 
    }

    /* Styling the columns (Level 2 categories) */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.lg\:\!block {
        flex: 0 1 200px !important; /* Set column width */
        display: flex !important;
        flex-direction: column !important;
    }

    /* Styling column header links to look like titles */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.lg\:\!block > a {
        font-weight: bold !important;
        color: #333 !important;
        border-bottom: 2px solid #eaeaea !important;
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
        display: block !important;
        text-transform: uppercase !important;
    }

    /* Reset Salla's dropdown behavior for Level 3 items to show them as static text list */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.has-children > .sub-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Styling the final links (Level 3 items) inside the columns */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.has-children > .sub-menu ul li a {
        color: #666 !important;
        padding: 8px 0 !important;
        display: block !important;
        font-size: 14px !important;
        font-weight: normal !important;
        transition: color 0.3s ease !important;
    }

    /* Hover effect for Level 3 links */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.has-children > .sub-menu ul li a:hover {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    /* Ensure icons/arrows in the mega menu headers don't look weird */
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.lg\:\!block > a i,
    .main-menu > li.root-level:has(.sub-menu li.has-children) > .sub-menu > ul > li.lg\:\!block > a .sicon-keyboard_arrow_left {
        display: none !important; /* Hide dropdown arrows on column titles */
    }
}


/* 
   Target the "New Arrivals" category by its aria-label in both Arabic (with/without Hamza) and English.
   We target the <span> inside the <a> tag to apply the animation properly.
*/
.main-menu a[aria-label*="وصل حديثاً"] span,
.main-menu a[aria-label*="وصل حديثا"] span,
.main-menu a[aria-label*="New Arrivals"] span {
    color: #8f213f !important; /* Eye-catching bright red color */
    font-weight: 900 !important; /* Make it bolder than other links */
    display: inline-block !important; /* Required for the transform scale to work */
    animation: attention-pulse 1.5s ease-in-out infinite !important; /* Infinite looping animation */
}

/* 
   Keyframes for the pulsing animation 
   It scales the text up slightly and creates a subtle glow effect.
*/
@keyframes attention-pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 59, 48, 0);
    }
    50% {
        transform: scale(1.15); /* Enlarge by 15% */
        text-shadow: 0 0 8px rgba(255, 59, 48, 0.5); /* Add a glowing shadow */
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(255, 59, 48, 0);
    }
}


/* --- Custom Product Tabs Styling - Fix Spreading & Borders --- */

/* --- Custom Product Tabs Styling - Final Polish --- */

/* 1. Reset parent wrapper to full width block */
.product-more-info.vertical .product-more-info__inner {
    display: block !important;
    width: 100% !important;
}

/* 2. The Container for Tabs */
.product-more-info .content-ul-tab .nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px !important; /* Generous space between tabs */
    border-bottom: 1px solid #e5e7eb !important; /* The full-width light gray line */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    overflow-x: auto !important;
}

/* Hide scrollbar on the tabs container */
.product-more-info .content-ul-tab .nav::-webkit-scrollbar {
    display: none !important;
}

/* 3. Reset list items */
.product-more-info .more-info-tabs__nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
}

/* 4. The Nav Item Links (Inactive State) */
.product-more-info .more-info-tabs__nav-link {
    padding: 15px 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important; 
    margin-bottom: -1px !important; /* MAGIC: Pulls the border down to perfectly overlap the gray line */
    font-size: 16px !important;
    color: #6b7280 !important; /* Gray text for inactive */
    display: inline-block !important;
    box-shadow: none !important; /* Force kill Salla's red shadows/lines */
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

/* Force kill Salla pseudo-element lines */
.product-more-info .more-info-tabs__nav-link::after,
.product-more-info .more-info-tabs__nav-link::before {
    display: none !important;
    content: none !important;
}

/* Base font weight for inactive */
.product-more-info .more-info-tabs__nav-link span {
    font-weight: 500 !important; 
}

/* 5. Active Tab (Selected State) */
.product-more-info .more-info-tabs__nav-link.active {
    color: #000000 !important; /* Solid black text */
    border-bottom: 2px solid #000000 !important; /* Thick black bottom line */
}

/* Bold text for active tab */
.product-more-info .more-info-tabs__nav-link.active span {
    font-weight: 700 !important; 
}

/* 6. Hide Salla's mobile accordion headers */
.product-more-info .more-info-tabs__nav-link.mobile {
    display: none !important;
}

/* 7. Content Area Styling */
.product-more-info .more-info-tabs__content {
    width: 100% !important;
    padding-top: 30px !important; /* Generous spacing above content */
    padding-bottom: 30px !important;
    display: block !important;
    border: none !important;
}

/* 8. Content pane inner styling */
.product-more-info .tab-pane {
    display: none; 
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important; /* Better readability */
    color: #374151 !important;
    animation: customTabFadeIn 0.3s ease-in-out;
}

.product-more-info .tab-pane.active.show {
    display: block !important;
}

@keyframes customTabFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}