/* =========================================
   1. GLOBAL & BASE
   ========================================= */
body, html, .app-inner, .s-main-wrapper, .site-wrapper, .s-page {
    background-color: #0A0A0A !important;
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

.s-section, section, .s-block, .store-features, .s-store-features {
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6, p, span, a, div, label, .feature-title, .feature-desc {
    color: #F0F0F0 !important;
}

/* =========================================
   2. HEADER BASE
   ========================================= */
header.store-header,
#mainnav,
.main-nav-container {
    background-color: #0F0F0F !important;
    border-bottom: 1px solid #1A1A1A !important;
}

header.store-header {
    position: relative !important;
    z-index: 100 !important;
}

#mainnav {
    height: 84px !important;
}

/* Hide the top-navbar completely without any space */
.top-navbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* =========================================
   3. LOGO
   ========================================= */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
}

.navbar-brand img {
    max-height: 55px !important;
    width: auto !important;
}

/* =========================================
   4. SEARCH TOGGLE BUTTON
   ========================================= */
button#header-search-toggle,
#header-search-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    background-color: transparent !important;
    border: 1.5px solid #444444 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
    box-sizing: border-box !important;
    position: static !important;
}

button#header-search-toggle svg,
#header-search-toggle svg {
    width: 15px !important;
    height: 15px !important;
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
    pointer-events: none !important;
    display: block !important;
    flex-shrink: 0 !important;
}

button#header-search-toggle:hover,
#header-search-toggle:hover,
button#header-search-toggle.is-active,
#header-search-toggle.is-active {
    border-color: #D32F2F !important;
    background-color: #1A1A1A !important;
}

button#header-search-toggle:hover svg,
#header-search-toggle:hover svg,
button#header-search-toggle.is-active svg,
#header-search-toggle.is-active svg {
    fill: #D32F2F !important;
}

/* =========================================
   5. USER MENU & DROPDOWN
   ========================================= */
salla-user-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Guest Login Button */
salla-user-menu .s-user-menu-login-btn,
.s-user-menu-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    background-color: transparent !important;
    border: 1.5px solid #444444 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, background-color 0.3s ease !important;
    position: static !important;
}

salla-user-menu .s-user-menu-login-btn svg,
.s-user-menu-login-btn svg,
salla-user-menu slot-fb svg,
salla-user-menu button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
    display: block !important;
    flex-shrink: 0 !important;
}

salla-user-menu .s-user-menu-login-btn svg path,
.s-user-menu-login-btn svg path,
salla-user-menu slot-fb svg path,
salla-user-menu button svg path {
    fill: #AAAAAA !important;
}

salla-user-menu .s-user-menu-login-btn:hover,
.s-user-menu-login-btn:hover {
    border-color: #D32F2F !important;
    background-color: #1A1A1A !important;
}

salla-user-menu .s-user-menu-login-btn:hover svg path,
.s-user-menu-login-btn:hover svg path {
    fill: #D32F2F !important;
}

.s-user-menu-login-btn::after {
    content: none !important;
    display: none !important;
}

/* Logged-in Trigger Slot */
.s-user-menu-trigger {
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

.s-user-menu-trigger-hello {
    color: #AAAAAA !important;
}

.s-user-menu-trigger-name {
    color: #FFFFFF !important;
    font-weight: bold !important;
    transition: color 0.3s ease !important;
}

.s-user-menu-trigger-icon svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-user-menu-trigger:hover .s-user-menu-trigger-name {
    color: #D32F2F !important;
}

.s-user-menu-trigger:hover .s-user-menu-trigger-icon svg path {
    fill: #D32F2F !important;
}

/* Dropdown Container */
.s-user-menu-dropdown {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown Header */
.s-user-menu-dropdown-header {
    background-color: #0A0A0A !important;
    border-bottom: 1px solid #222222 !important;
}

.s-user-menu-dropdown-header-content span {
    color: #AAAAAA !important;
}

.s-user-menu-dropdown-header-content p {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.s-user-menu-dropdown-header-close {
    background-color: transparent !important;
    border: none !important;
}

.s-user-menu-dropdown-header-close svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-user-menu-dropdown-header-close:hover svg path {
    fill: #D32F2F !important;
}

/* Dropdown List Items */
.s-user-menu-dropdown-list {
    background-color: #141414 !important;
}

.s-user-menu-dropdown-item {
    border-bottom: 1px solid #1E1E1E !important;
}

.s-user-menu-dropdown-item:last-child {
    border-bottom: none !important;
}

.s-user-menu-dropdown-item-link {
    background-color: transparent !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

.s-user-menu-dropdown-item-link:hover {
    background-color: #1A1A1A !important;
    color: #D32F2F !important;
}

.s-user-menu-dropdown-item-prefix svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path {
    fill: #D32F2F !important;
}

.s-user-menu-dropdown-item-title {
    color: inherit !important;
}

/* =========================================
   6. CART
   ========================================= */
salla-cart-summary {
    display: flex !important;
    align-items: center !important;
}

.s-cart-summary-wrapper {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 8px !important;
    border-radius: 50% !important;
    transition: background-color 0.3s ease !important;
}

.s-cart-summary-wrapper:hover {
    background-color: #1A1A1A !important;
}

/* Cart Icon - SVG */
.s-cart-summary-icon svg {
    width: 26px !important;
    height: 26px !important;
}

.s-cart-summary-icon svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

/* Cart Icon - Font Icon  */
.icon.sicon-shopping-bag {
    color: #AAAAAA !important;
    font-size: 22px !important;
    transition: color 0.3s ease !important;
}

/* Hover */
.s-cart-summary-wrapper:hover .s-cart-summary-icon svg path,
.s-cart-summary-wrapper:hover .icon.sicon-shopping-bag {
    fill: #D32F2F !important;
    color: #D32F2F !important;
}

/* Cart Counter */
.s-cart-summary-count {
    background-color: #D32F2F !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    font-size: 11px !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
}

/* Hide total price from header */
.s-cart-summary-content,
.s-cart-summary-total {
    display: none !important;
}

/* =========================================
   7. ICONS ROW GAP
   ========================================= */
.flex.items-center.justify-end.my-2\.5,
.flex.items-center.justify-end {
    gap: 8px !important;
}

/* =========================================
   8. SEARCH DROPDOWN
   ========================================= */
#header-search-dropdown {
    background-color: #111111 !important;
    border-bottom: 2px solid #1E1E1E !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease !important;
    position: relative !important;
    z-index: 99 !important;
}

#header-search-dropdown.is-open {
    max-height: 120px !important;
    opacity: 1 !important;
    padding: 14px 0 !important;
}

#header-search-dropdown .container {
    max-width: 680px !important;
}

#header-search-dropdown .search-dropdown-inner,
#header-search-dropdown .header-search {
    width: 100% !important;
    display: block !important;
}

#header-search-dropdown salla-search {
    display: block !important;
    width: 100% !important;
}

#header-search-dropdown .s-search-modal,
#header-search-dropdown .s-search-container,
#header-search-dropdown .s-search-inline,
#header-search-dropdown .s-search-input-wrapper {
    width: 100% !important;
    display: block !important;
}

#header-search-dropdown .s-search-input {
    height: 46px !important;
    width: 100% !important;
    border-radius: 50px !important;
    background-color: #222222 !important;
    border: 1px solid #333333 !important;
    color: #CCCCCC !important;
    padding: 0 20px !important;
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

#header-search-dropdown .s-search-input:focus {
    border-color: #D32F2F !important;
    outline: none !important;
}

#header-search-dropdown .s-search-input::placeholder {
    color: #888888 !important;
}

#header-search-dropdown .s-search-icon-wrap svg path {
    fill: #AAAAAA !important;
}

/* =========================================
   9. MOBILE MENU
   ========================================= */
#mobile-menu,
.mm-spn,
.mm-spn.mm-spn--light {
    background-color: #0F0F0F !important;
    color: #FFFFFF !important;
}

.mm-spn ul,
.mm-spn.mm-spn--light ul {
    background-color: #0F0F0F !important;
}

.mm-spn li::before,
.mm-spn li::after {
    border-color: #222222 !important;
}

.mm-spn a, .mm-spn span {
    color: #FFFFFF !important;
}

.mm-spn::before {
    background-color: #141414 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #222222 !important;
}

.btn--close.close-mobile-menu {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

.mburger i, .sicon-menu {
    color: #FFFFFF !important;
}

/* =========================================
   10. MAIN CONTENT — Remove space above banner
   ========================================= */
#main-content,
main#main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* =========================================
   11. BANNER — Full space fix
   ========================================= */
section.s-block--fixed-banner,
.s-block--fixed-banner {
    padding: 0 !important;
    margin: 0 !important;
    min-height: unset !important;
    height: auto !important;
}

/* Remove forced height */
.s-block--fixed-banner > div,
.s-block--fixed-banner .container {
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.wide-placeholder {
    min-height: unset !important;
    height: auto !important;
}

.banner--fixed {
    border-radius: 0 !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.banner--fixed picture {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override Salla's inline style */
.banner--fixed img,
.s-block--fixed-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;      
    object-position: center !important;
    min-height: unset !important;
}

/* =========================================
   12. SECTIONS SPACING
   ========================================= */
section.s-block {
    margin-top: 0 !important;
}

section.s-block + section.s-block {
    margin-top: 40px !important;
}

/* =========================================
   13. PRODUCT CARDS (Vertical/Grid)
   ========================================= */
.s-product-card, .product-card {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.s-product-card:hover, .product-card:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

.s-product-card-badge--sale, .badge--sale {
    background-color: transparent !important;
    color: #D32F2F !important;
    border: 1px solid #D32F2F !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}

.price--old {
    color: #666666 !important;
    text-decoration-color: #D32F2F !important;
}

.price--new {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.s-button--primary, .btn--primary, .s-button {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.s-button--primary:hover, .btn--primary:hover, .s-button:hover {
    background-color: #B71C1C !important;
    border-color: #B71C1C !important;
}

/* =========================================
   14. STORE FEATURES
   ========================================= */
.store-features-item, .s-store-features-item, .s-block--features__item {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
}

.store-features-item:hover, .s-store-features-item:hover, .s-block--features__item:hover {
    border-color: #D32F2F !important;
    transform: translateY(-5px) !important;
}

.feature-title, .s-block--features__item h2 {
    color: #FFFFFF !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
}

.feature-desc, .s-block--features__item p {
    color: #CCCCCC !important;
}

/* =========================================
   15. ADD TO CART TOAST
   ========================================= */
.s-add-product-toast {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Progress bar background track */
.s-add-product-toast__progress {
    background-color: #222222 !important;
}

/* Success Progress line */
.s-add-product-toast__progress-bar {
    background-color: #2ECC71 !important; 
}

/* Titles and product name */
.s-add-product-toast__title,
.s-add-product-toast__name {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.s-add-product-toast__name:hover {
    color: #D32F2F !important;
}

/* Close Icon */
.s-add-product-toast__close i {
    color: #AAAAAA !important;
    transition: color 0.3s ease !important;
}

.s-add-product-toast__close:hover i {
    color: #D32F2F !important;
}

/* Divider Line */
.s-add-product-toast__divider {
    border-color: #222222 !important;
    background-color: #222222 !important;
}

/* Pricing inside Toast */
.s-add-product-toast__price-sale {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.s-add-product-toast__price-original {
    color: #666666 !important;
    text-decoration-color: #D32F2F !important;
}

/* View Cart Button (Outline style fix for dark theme) */
.s-button-gray-outline {
    background-color: transparent !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

.s-button-gray-outline:hover {
    border-color: #D32F2F !important;
    color: #D32F2F !important;
}

.s-button-gray-outline svg path {
    stroke: currentColor !important;
}

/* =========================================
   16. HORIZONTAL PRODUCT CARDS (LIST VIEW)
   ========================================= */
/* Container styling to match vertical cards */
.s-product-card-horizontal,
.s-product-card-entry.s-product-card-horizontal {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Hover effect */
.s-product-card-horizontal:hover,
.s-product-card-entry.s-product-card-horizontal:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* Title text */
.s-product-card-content-title a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.s-product-card-content-title a:hover {
    color: #D32F2F !important;
}

/* Pricing - Sale Price (White & Bold) */
.s-product-card-sale-price h4 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Pricing - Regular Price (Gray & Strikethrough) */
.s-product-card-sale-price span {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    font-size: 14px !important;
    margin-right: 8px !important;
}

/* Add to Cart Button (Primary Outline) */
.s-product-card-horizontal .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

.s-product-card-horizontal .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
    color: #FFFFFF !important;
}

/* Wishlist Button (Light Outline) */
.s-product-card-horizontal .s-button-light-outline {
    background-color: transparent !important;
    border: 1px solid #444444 !important;
    color: #AAAAAA !important;
    transition: all 0.3s ease !important;
}

.s-product-card-horizontal .s-button-light-outline:hover {
    border-color: #D32F2F !important;
    color: #D32F2F !important;
}

/* =========================================
   17. NEW VERTICAL PRODUCT CARDS (SCOPED FIX)
   ========================================= */

/* Main Card Container - Restricted to the product list grid */
.s-products-list .product-entry, 
.s-products-list .product-entry--vertical {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
}

/* Hover Effect for Card */
.s-products-list .product-entry:hover, 
.s-products-list .product-entry--vertical:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* Image Wrapping and Sizing */
.s-products-list .product-entry__image {
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0A0A0A !important; 
}

.s-products-list .product-entry__image img {
    object-fit: contain !important; 
    max-height: 100% !important;
}

/* Absolute Positioning for Wishlist Button */
.s-products-list .btn--wishlist, 
.s-products-list .heart-next-add-button {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important; 
    z-index: 10 !important;
}

/* Content Area Wrapper */
.s-products-list .product-entry .content-wrap, 
.s-products-list .product-entry__content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Product Title */
.s-products-list .product-entry__title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    line-height: 1.4 !important;
}

.s-products-list .product-entry__title:hover {
    color: #D32F2F !important;
}

/* Pricing Section */
.s-products-list .product-entry__price {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.s-products-list .product-entry__price .sale-price {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.s-products-list .product-entry__price .regular-price {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    font-size: 13px !important;
}

/* Add to Cart Container */
.s-products-list .add-to-cart-conatiner {
    margin-top: auto !important; 
    padding-top: 15px !important;
    width: 100% !important;
}

/* Add to Cart Button Outline Fixes */
.s-products-list .add-to-cart-conatiner .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
}

.s-products-list .add-to-cart-conatiner .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
}

/* =========================================
   18. FOOTER & SUB-FOOTER RE-DESIGN
   ========================================= */
footer.store-footer {
    background-color: #0A0A0A !important;
    border-top: 1px solid #1A1A1A !important;
}

/* Sub-footer (The bottom bar) */
.store-footer__sub,
.footer-sub,
footer.store-footer > .bg-gray-100, 
footer.store-footer > div:last-child {
    background-color: #000000 !important; 
    border-top: 1px solid #151515 !important;
    padding: 15px 30px !important;
}

/* Flex container for the sub-footer */
.store-footer__sub .container,
.footer-sub .container,
footer.store-footer > div:last-child .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 100% !important;
}

/* 1. Left side (Socials / Logo) */
.footer-social,
.s-store-footer-socials,
.social-links {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* 2. Center (Copyright) */
.footer-copyright,
.s-store-footer-copyright {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

.footer-copyright p, 
.footer-copyright span {
    color: #888888 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* 3. Right side (Payments) */
.footer-payments,
.s-store-footer-payments,
.payment-methods {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

/* Make payment icons grayscale like the reference */
.footer-payments img,
.payment-methods img,
.s-store-footer-payments img {
    filter: grayscale(100%) brightness(200%) !important;
    opacity: 0.7 !important;
    height: 24px !important;
    width: auto !important;
    transition: all 0.3s ease !important;
}

.footer-payments img:hover,
.payment-methods img:hover,
.s-store-footer-payments img:hover {
    filter: grayscale(0%) brightness(100%) !important;
    opacity: 1 !important;
}

/* Social icons styling */
.footer-social a,
.social-links a,
.s-store-footer-socials a {
    color: #AAAAAA !important;
    transition: all 0.3s ease !important;
}

.footer-social a svg,
.social-links a svg,
.s-store-footer-socials a svg,
.footer-social a i,
.social-links a i {
    fill: #AAAAAA !important;
    color: #AAAAAA !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    transition: all 0.3s ease !important;
}

.footer-social a:hover,
.social-links a:hover,
.s-store-footer-socials a:hover,
.footer-social a:hover svg,
.social-links a:hover svg,
.s-store-footer-socials a:hover svg,
.footer-social a:hover i,
.social-links a:hover i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Mobile responsiveness for the bottom bar */
@media (max-width: 768px) {
    .store-footer__sub .container,
    .footer-sub .container,
    footer.store-footer > div:last-child .container {
        flex-direction: column !important;
        gap: 15px !important;
        justify-content: center !important;
    }

    .footer-social,
    .footer-copyright,
    .footer-payments,
    .social-links,
    .s-store-footer-copyright,
    .payment-methods,
    .s-store-footer-socials,
    .s-store-footer-payments {
        justify-content: center !important;
        order: unset !important;
        flex: unset !important;
        width: 100% !important;
    }
}

/* =========================================
   19. REPLACE FOOTER TEXT WITH LOGO
   ========================================= */
.store-footer .footer-title,
.store-footer .footer-about h3,
.store-footer .s-store-footer-title {
    /* Hide the original text */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    
    /* Inject the image as background */
    background-image: url('https://cdn.files.salla.network/theme/1392479179/bfef0823-b4cb-4085-b1e1-b51ecbfc6c93.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important; /* Set to right for Arabic layout */
    
    /* Give it physical dimensions */
    display: block !important;
    height: 55px !important; /* Adjust height based on preference */
    width: 180px !important; /* Adjust width to fit the logo properly */
    margin-bottom: 15px !important;
}

/* =========================================
   22. CART PAGE STYLING (Cart Page)
   ========================================= */

/* 1. Card Backgrounds (Product Item, Order Summary, Free Shipping, Gifting) */
.cart-item,
.sticky .bg-white,
#free-shipping,
#cart-gifting {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
}

/* 2. Main Titles and Product Name */
.cart-item h1 a,
.sticky h2,
.shipping-item {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

.cart-item h1 a:hover {
    color: #D32F2F !important;
}

/* 3. Subtitles and Gray Texts (Total Products, Weight, etc.) */
.text-gray-500,
.text-sm.text-gray-500,
.cart-item p,
.s-list-tile-item-subtitle div {
    color: #AAAAAA !important;
}

/* 4. Prices and Totals */
.item-price,
[data-cart-total],
#sub-total {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

/* Strikethrough Discount Price */
.item-original-price,
.item-regular-price {
    color: #666666 !important;
    text-decoration-color: #D32F2F !important;
}

/* 5. Product Image Inside Cart */
.cart-item img {
    background-color: #0A0A0A !important;
    border: 1px solid #222222 !important;
}

/* 6. Dividers and Inner Borders */
.border-gray-200,
.border-t,
.border-b {
    border-color: #222222 !important;
}

/* 7. Quantity Counter (Quantity Input) */
.s-quantity-input-container {
    background-color: #0A0A0A !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
}

.s-quantity-input-input {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

.s-quantity-input-button svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-quantity-input-button:hover svg path {
    fill: #D32F2F !important;
}

/* 8. Remove Product Button from Cart */
.btn--delete.s-button-danger {
    background-color: transparent !important;
    color: #AAAAAA !important;
    border: 1px solid #333333 !important;
    transition: all 0.3s ease !important;
}

.btn--delete.s-button-danger:hover {
    background-color: #D32F2F !important;
    color: #FFFFFF !important;
    border-color: #D32F2F !important;
}

.btn--delete.s-button-danger i {
    color: inherit !important;
}

/* 9. Send as a Gift Section (Gifting) */
.s-list-tile-item-title span svg path,
.s-gifting-widget-action-content svg path {
    fill: #D32F2F !important;
}

.s-list-tile-item-title h3 {
    color: #FFFFFF !important;
}

/* 10. Free Shipping Progress Bar */
#free-shipping-bar {
    background-color: #222222 !important;
}
#free-shipping-bar .progress-bg {
    background-color: #D32F2F !important;
}

/* =========================================
   23. MODALS, POPUPS & LOGIN IFRAME
   ========================================= */

/* 1. Full Modal Background */
.s-modal-body,
.s-modal-content,
.s-modal-wrapper,
.s-modal {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
}

/* 2. Inner Text Coloring */
.s-modal-body *,
.s-modal-content * {
    color: #FFFFFF !important;
}

/* 3. Close Button (❌) */
.s-modal-close {
    background-color: transparent !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.s-modal-close svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-modal-close:hover svg path {
    fill: #D32F2F !important;
}

/* 4. Login Iframe Dark Mode Fix */
.s-login-modal .s-modal-body iframe,
iframe[src*="accounts.salla.com"] {
    background-color: #FFFFFF !important;
    filter: invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.9) !important;
    border-radius: 8px !important;
}

/* Fallback for general iframes */
.s-modal-body iframe {
    border-radius: 8px !important;
}

/* 5. Remove any white shadows or default margins for the Modal Header */
.s-modal-header {
    background-color: #141414 !important;
    border-bottom: 1px solid #222222 !important;
    padding: 10px 15px !important;
}

/* =========================================
   20. HIDE MAIN FOOTER (OPTIONAL)
   ========================================= */
/*
.store-footer__inner,
footer.store-footer > .container:first-child {
    display: none !important;
}
*/



#featured-products-style2-3 custom-salla-product-card {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

#featured-products-style2-3 custom-salla-product-card:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

#featured-products-style2-3 .s-product-card-image {
    background-color: #0A0A0A !important;
}

#featured-products-style2-3 .s-product-card-wishlist-btn.s-button-element {
    background-color: rgba(10, 10, 10, 0.80) !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(4px) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

#featured-products-style2-3 .s-product-card-wishlist-btn.s-button-element:hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

#featured-products-style2-3 .s-product-card-content-title a {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

#featured-products-style2-3 .s-product-card-content-title a:hover {
    color: #D32F2F !important;
}

#featured-products-style2-3 .s-product-card-price,
#featured-products-style2-3 .s-product-card-sale-price h4 {
    color: #FFFFFF !important;
}

#featured-products-style2-3 .s-product-card-sale-price span {
    color: #666666 !important;
    text-decoration-color: #D32F2F !important;
}

#featured-products-style2-3 .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
    transition: background-color 0.3s ease !important;
}

#featured-products-style2-3 .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
}

#featured-products-style2-3 .s-slider-nav-arrow {
    background-color: #141414 !important;
    border: 1px solid #444444 !important;
    transition: all 0.3s ease !important;
}

#featured-products-style2-3 .s-slider-nav-arrow svg path {
    fill: #FFFFFF !important;
    transition: fill 0.3s ease !important;
}

#featured-products-style2-3 .s-slider-nav-arrow:not(:disabled):not(.swiper-button-disabled):hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

#featured-products-style2-3 .s-slider-nav-arrow.swiper-button-disabled,
#featured-products-style2-3 .s-slider-nav-arrow:disabled {
    background-color: transparent !important;
    border-color: #222222 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

#featured-products-style2-3 .s-slider-nav-arrow.swiper-button-disabled svg path,
#featured-products-style2-3 .s-slider-nav-arrow:disabled svg path {
    fill: #666666 !important;
}

#featured-products-style2-3 .s-slider-nav-arrow {
    background-color: #141414 !important;
    border: 1px solid #444444 !important;
    box-shadow: 0 0 15px rgba(85, 85, 85, 0.5) !important;
    transition: all 0.3s ease !important;
}

#featured-products-style2-3 .s-slider-nav-arrow:not(:disabled):not(.swiper-button-disabled):hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.4) !important;
}

.s-slider-block__title h2 {
    color: #FFFFFF !important;
}

.s-slider-nav-arrow {
    background-color: #141414 !important;
    border: 1px solid #444444 !important;
    box-shadow: 0 0 15px rgba(85, 85, 85, 0.5) !important;
    transition: all 0.3s ease !important;
}

.s-slider-nav-arrow svg path {
    fill: #FFFFFF !important;
    transition: fill 0.3s ease !important;
}

.s-slider-nav-arrow:not(:disabled):not(.swiper-button-disabled):hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.4) !important;
}

.s-slider-nav-arrow.swiper-button-disabled,
.s-slider-nav-arrow:disabled {
    background-color: transparent !important;
    border-color: #222222 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.s-slider-nav-arrow.swiper-button-disabled svg path,
.s-slider-nav-arrow:disabled svg path {
    fill: #666666 !important;
}

.s-social-share-btn.s-button-element,
.btn--wishlist.s-button-element {
    background-color: #141414 !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

.s-social-share-btn.s-button-element svg path,
.btn--wishlist.s-button-element i {
    fill: #AAAAAA !important;
    color: #AAAAAA !important;
    transition: all 0.3s ease !important;
}

.s-social-share-btn.s-button-element:hover,
.btn--wishlist.s-button-element:hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

.s-social-share-btn.s-button-element:hover svg path,
.btn--wishlist.s-button-element:hover i {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.s-social-share-list a {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.s-social-share-list a:hover {
    border-color: #D32F2F !important;
    transform: translateY(-2px) !important;
}

.s-social-share-list a svg {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-social-share-list a.a2a_button_facebook:hover svg {
    fill: #1877F2 !important;
}

.s-social-share-list a.a2a_button_twitter:hover svg {
    fill: #1DA1F2 !important;
}

.s-social-share-list a.a2a_button_whatsapp:hover svg {
    fill: #25D366 !important;
}

.s-social-share-list a.a2a_button_email:hover svg {
    fill: #D32F2F !important;
}

.s-social-share-list a.a2a_button_copy_link:hover svg {
    fill: #FFFFFF !important;
}

.s-comments-product,
.s-comments-container,
.s-comments-header {
    background-color: transparent !important;
    border-color: #222222 !important;
}

.s-comments-product *,
.s-comments-product h3,
.s-comments-product span {
    color: #FFFFFF !important;
}

salla-comment-form textarea,
salla-comment-form input,
.s-comments-product textarea,
.s-comments-product input {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

salla-comment-form textarea:focus,
salla-comment-form input:focus,
.s-comments-product textarea:focus,
.s-comments-product input:focus {
    border-color: #D32F2F !important;
    outline: none !important;
}

salla-slider custom-salla-product-card,
salla-products-slider custom-salla-product-card {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

salla-slider custom-salla-product-card:hover,
salla-products-slider custom-salla-product-card:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

salla-slider .s-product-card-image,
salla-products-slider .s-product-card-image {
    background-color: #0A0A0A !important;
}

salla-slider .s-product-card-wishlist-btn.s-button-element,
salla-products-slider .s-product-card-wishlist-btn.s-button-element {
    background-color: rgba(10, 10, 10, 0.80) !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(4px) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

salla-slider .s-product-card-wishlist-btn.s-button-element:hover,
salla-products-slider .s-product-card-wishlist-btn.s-button-element:hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

salla-slider .s-product-card-content-title a,
salla-products-slider .s-product-card-content-title a {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

salla-slider .s-product-card-content-title a:hover,
salla-products-slider .s-product-card-content-title a:hover {
    color: #D32F2F !important;
}

salla-slider .s-product-card-price,
salla-slider .s-product-card-sale-price h4,
salla-products-slider .s-product-card-price,
salla-products-slider .s-product-card-sale-price h4 {
    color: #FFFFFF !important;
}

salla-slider .s-product-card-sale-price span,
salla-products-slider .s-product-card-sale-price span {
    color: #666666 !important;
    text-decoration-color: #D32F2F !important;
}

salla-slider .s-button-primary-outline,
salla-products-slider .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
    transition: background-color 0.3s ease !important;
}

salla-slider .s-button-primary-outline:hover,
salla-products-slider .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
}
.s-button-light-outline.s-button-disabled,
button.s-button-disabled:disabled {
    background-color: transparent !important;
    border: 1px solid #333333 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    transition: none !important;
}

.s-button-light-outline.s-button-disabled:hover,
button.s-button-disabled:disabled:hover {
    background-color: transparent !important;
    border-color: #333333 !important;
    color: #666666 !important;
    box-shadow: none !important;

  .before-price.line-through,
.price_is_on_sale .before-price,
.price-wrapper .before-price {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    -webkit-text-decoration-color: #D32F2F !important;
}

.before-price.line-through i,
.price_is_on_sale .before-price i,
.price-wrapper .before-price i {
    text-decoration: inherit !important;
}
  .price-wrapper .total-price {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.price-wrapper .before-price {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
}

/* 1. Sort Filter Dropdown */
label[for="product-filter"] {
    color: #FFFFFF !important;
}

#product-filter.form-input {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

#product-filter.form-input:focus {
    border-color: #D32F2F !important;
    outline: none !important;
    box-shadow: none !important;
}

#product-filter.form-input option {
    background-color: #141414 !important;
    color: #FFFFFF !important;
}

/* 2. Products List Cards (Grid View) */
salla-products-list custom-salla-product-card {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

salla-products-list custom-salla-product-card:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

salla-products-list .s-product-card-image {
    background-color: #0A0A0A !important;
}

salla-products-list .s-product-card-wishlist-btn.s-button-element {
    background-color: rgba(10, 10, 10, 0.80) !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(4px) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

salla-products-list .s-product-card-wishlist-btn.s-button-element:hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

salla-products-list .s-product-card-content-title a {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

salla-products-list .s-product-card-content-title a:hover {
    color: #D32F2F !important;
}

salla-products-list .s-product-card-price,
salla-products-list .s-product-card-sale-price h4 {
    color: #FFFFFF !important;
}

salla-products-list .s-product-card-sale-price span {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    -webkit-text-decoration-color: #D32F2F !important;
}

salla-products-list .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
    transition: background-color 0.3s ease !important;
}

salla-products-list .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
}

/* 3. Add to Cart Toast Notification */
.s-add-product-toast {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.s-add-product-toast__progress {
    background-color: #222222 !important;
}

.s-add-product-toast__progress-bar {
    background-color: #D32F2F !important;
}

.s-add-product-toast__title,
.s-add-product-toast__name {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

.s-add-product-toast__name:hover {
    color: #D32F2F !important;
}

.s-add-product-toast__close {
    background-color: transparent !important;
    border: none !important;
}

.s-add-product-toast__close i {
    color: #AAAAAA !important;
    transition: color 0.3s ease !important;
}

.s-add-product-toast__close:hover i {
    color: #D32F2F !important;
}

.s-add-product-toast__divider {
    background-color: #222222 !important;
    border-color: #222222 !important;
}

.s-add-product-toast__price-sale {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.s-add-product-toast__price-original {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    -webkit-text-decoration-color: #D32F2F !important;
}

.s-add-product-toast__image {
    border: 1px solid #222222 !important;
    border-radius: 6px !important;
    background-color: #0A0A0A !important;
}

/* Toast Actions (Buttons) */
.s-add-product-toast__actions .s-button-solid.s-button-primary {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
    color: #FFFFFF !important;
}

.s-add-product-toast__actions .s-button-solid.s-button-primary:hover {
    background-color: #B71C1C !important;
    border-color: #B71C1C !important;
}

.s-add-product-toast__actions .s-button-outline.s-button-gray-outline {
    background-color: transparent !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
}

.s-add-product-toast__actions .s-button-outline.s-button-gray-outline:hover {
    border-color: #D32F2F !important;
    color: #D32F2F !important;
}

/* Inherit font color for the SVG inside the gray outline button */
.s-add-product-toast__actions .s-button-outline.s-button-gray-outline svg path {
    stroke: currentColor !important;
}
}

/* 1. Sort Filter Dropdown Fix */
#product-filter,
select.form-input {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
    padding-inline-end: 30px !important;
    border-radius: 6px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#product-filter option,
select.form-input option {
    background-color: #141414 !important;
    color: #FFFFFF !important;
}

label[for="product-filter"] {
    color: #FFFFFF !important;
}

/* 2. Universal Product Card Fix (Overrides White Backgrounds) */
custom-salla-product-card {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

custom-salla-product-card:hover {
    border-color: #D32F2F !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* Force the inner content wrapper to be dark */
custom-salla-product-card .s-product-card-content,
.s-product-card-content {
    background-color: #141414 !important;
}

/* Force the image wrapper to be slightly darker */
custom-salla-product-card .s-product-card-image,
.s-product-card-image {
    background-color: #0A0A0A !important;
}

/* Universal Title Color */
custom-salla-product-card .s-product-card-content-title a,
.s-product-card-content-title a {
    color: #FFFFFF !important;
}

/* Universal Price Colors */
custom-salla-product-card .s-product-card-price,
custom-salla-product-card .s-product-card-sale-price h4,
custom-salla-product-card .total-price {
    color: #FFFFFF !important;
}

custom-salla-product-card .s-product-card-sale-price span,
custom-salla-product-card .before-price,
.price-wrapper .before-price {
    color: #666666 !important;
    text-decoration: line-through !important;
    text-decoration-color: #D32F2F !important;
    -webkit-text-decoration-color: #D32F2F !important;
}

/* Universal Wishlist Button */
custom-salla-product-card .s-product-card-wishlist-btn.s-button-element {
    background-color: rgba(10, 10, 10, 0.80) !important;
    border: 1px solid #444444 !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(4px) !important;
}

custom-salla-product-card .s-product-card-wishlist-btn.s-button-element:hover {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

/* Universal Add to Cart Button */
custom-salla-product-card .s-button-primary-outline,
.s-product-card-content-footer .s-button-primary-outline {
    background-color: transparent !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
}

custom-salla-product-card .s-button-primary-outline:hover,
.s-product-card-content-footer .s-button-primary-outline:hover {
    background-color: #D32F2F !important;
}


salla-cart-summary-card,
.s-cart-summary-card {
    background-color: #141414 !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.s-cart-summary-card-sheet,
.s-cart-summary-card-sheet-wrap {
    background-color: #141414 !important;
}

.s-cart-summary-card-sheet-header {
    border-bottom: 1px solid #222222 !important;
    background-color: transparent !important;
}

.s-cart-summary-card-sheet-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.s-cart-summary-card-line span {
    color: #AAAAAA !important;
}

.s-cart-summary-card-line b {
    color: #FFFFFF !important;
}

.s-cart-summary-card-bar {
    background-color: #0A0A0A !important;
    border-top: 1px solid #222222 !important;
}

.s-cart-summary-card-bar-label-text,
.s-cart-summary-card-bar-count {
    color: #AAAAAA !important;
}

.s-cart-summary-card-bar-total {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.s-cart-summary-card-action {
    background-color: #0A0A0A !important;
}

#s-cart-summary-card-submit .s-button-primary,
.s-cart-summary-card-action .s-button-primary {
    background-color: #D32F2F !important;
    border: 1px solid #D32F2F !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

#s-cart-summary-card-submit .s-button-primary:hover,
.s-cart-summary-card-action .s-button-primary:hover {
    background-color: #B71C1C !important;
    border-color: #B71C1C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4) !important;
}

/* =========================================
   21. CUSTOM MAIN MENU — Desktop + Mobile Drawer
   ========================================= */

/* منع الـ custom element من عمل عرض غريب بنفسه */
custom-main-menu {
    display: contents !important;
}

/* --- Desktop Horizontal Menu --- */
.rpm-main-menu {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.rpm-main-menu-item {
    position: relative !important;
}

.rpm-main-menu-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: #F0F0F0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

.rpm-main-menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    right: 16px !important;
    left: 16px !important;
    height: 2px !important;
    background-color: #D32F2F !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.3s ease !important;
}

.rpm-main-menu-link:hover {
    color: #D32F2F !important;
}

.rpm-main-menu-link:hover::after {
    transform: scaleX(1) !important;
}

/* اخفاء المنيو الديسكتوب في الشاشات الصغيرة */
@media (max-width: 1023px) {
    .rpm-main-menu {
        display: none !important;
    }
}

/* --- إخفاء نظام الـ mmenu الأصلي المكسور نهائيًا --- */
#mobile-menu.mm-spn,
.mm-ocd {
    display: none !important;
}

/* --- Custom Mobile Drawer (بديل احترافي) --- */
#rpm-mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

#rpm-mobile-backdrop.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#rpm-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important;
    width: 300px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    background-color: #0F0F0F !important;
    z-index: 9999 !important;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.6) !important;
    transition: right 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

#rpm-mobile-drawer.is-open {
    right: 0 !important;
}

#rpm-mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #1E1E1E !important;
    flex-shrink: 0 !important;
}

#rpm-mobile-drawer-header h3 {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#rpm-mobile-drawer-close {
    background-color: transparent !important;
    border: none !important;
    color: #AAAAAA !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 4px !important;
    transition: color 0.3s ease !important;
}

#rpm-mobile-drawer-close:hover {
    color: #D32F2F !important;
}

#rpm-mobile-drawer-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow-y: auto !important;
}

#rpm-mobile-drawer-list li a {
    display: block !important;
    padding: 16px 20px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-bottom: 1px solid #171717 !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
}

#rpm-mobile-drawer-list li a:hover {
    color: #D32F2F !important;
    background-color: #161616 !important;
}

@media (min-width: 1024px) {
    #rpm-mobile-drawer,
    #rpm-mobile-backdrop {
        display: none !important;
    }
}

/* =========================================
   22. NATIVE MOBILE MENU (#mobile-menu) — Match Hover Style
   ========================================= */

/* الروابط جوه الـ desktop root-level li */
#mobile-menu .main-menu > li[data-menu-item] > a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: #F0F0F0 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#mobile-menu .main-menu > li[data-menu-item] > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    right: 16px !important;
    left: 16px !important;
    height: 2px !important;
    background-color: #D32F2F !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.3s ease !important;
}

#mobile-menu .main-menu > li[data-menu-item] > a:hover {
    color: #D32F2F !important;
}

#mobile-menu .main-menu > li[data-menu-item] > a:hover::after {
    transform: scaleX(1) !important;
}

/* حالة "العنصر المحدد / الصفحة الحالية" */
#mobile-menu .main-menu > li[data-menu-item] > a.rpm-active {
    color: #D32F2F !important;
}

#mobile-menu .main-menu > li[data-menu-item] > a.rpm-active::after {
    transform: scaleX(1) !important;
}

/* الروابط جوه الـ mobile (lg:hidden) items */
#mobile-menu .main-menu > li.lg\:hidden > a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
    padding: 16px 20px !important;
    display: block !important;
    border-bottom: 1px solid #171717 !important;
}

#mobile-menu .main-menu > li.lg\:hidden > a:hover,
#mobile-menu .main-menu > li.lg\:hidden > a.rpm-active {
    color: #D32F2F !important;
    background-color: #161616 !important;
}

/* نفس الحالة (active) على منيو الديسكتوب والدروار بتاعنا */
.rpm-main-menu-link.rpm-active {
    color: #D32F2F !important;
}

.rpm-main-menu-link.rpm-active::after {
    transform: scaleX(1) !important;
}

#rpm-mobile-drawer-list li a.rpm-active {
    color: #D32F2F !important;
    background-color: #161616 !important;
}

/* =========================================
   24. FORCE-HIDE OLD SALLA MMENU REMNANTS
   ========================================= */
.btn--close-sm.close-mobile-menu,
button.btn--close-sm.close-mobile-menu.sicon-cancel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* منع أي فتح فجائي لنظام mmenu الأصلي حتى لو الكلاس اتضاف على body */
body.menu-opened .btn--close-sm.close-mobile-menu,
body.mm-ocd-opened .btn--close-sm.close-mobile-menu {
    display: none !important;
}

.mm-ocd,
.mm-ocd__content,
.mm-ocd__backdrop {
    display: none !important;
}
/* =========================================
   25. HIDE OLD NATIVE #mobile-menu ENTIRELY
   ========================================= */
#mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}


.profile-header.gradient-bg {
    background: #0A0A0A !important;
    background-image: none !important;
    border-bottom: 1px solid #1A1A1A !important;
}

salla-breadcrumb .s-breadcrumb-wrapper .s-breadcrumb-item a,
salla-breadcrumb .s-breadcrumb-wrapper .s-breadcrumb-item {
    color: #AAAAAA !important;
}

salla-breadcrumb .s-breadcrumb-wrapper .s-breadcrumb-item a:hover {
    color: #D32F2F !important;
}

salla-breadcrumb .s-breadcrumb-wrapper .s-breadcrumb-arrow svg {
    fill: #666666 !important;
}

nav.sidebar, .lg\:bg-white {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.s-user-menu-inline {
    background-color: transparent !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item {
    border-bottom: 1px solid #1E1E1E !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item:last-child {
    border-bottom: none !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item-link {
    background-color: transparent !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
    padding: 12px 16px !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item-link:hover {
    background-color: #1A1A1A !important;
    color: #D32F2F !important;
    border-radius: 4px !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item-prefix svg path,
.s-user-menu-inline .s-user-menu-dropdown-item-prefix i {
    fill: #AAAAAA !important;
    color: #AAAAAA !important;
    transition: fill 0.3s ease, color 0.3s ease !important;
}

.s-user-menu-inline .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path,
.s-user-menu-inline .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix i {
    fill: #D32F2F !important;
    color: #D32F2F !important;
}

.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
    color: #FF5252 !important;
}

.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-prefix svg path {
    fill: #FF5252 !important;
}

.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
    background-color: rgba(255, 82, 82, 0.1) !important;
    color: #FF0000 !important;
}

/* =========================================
   26. USER SETTINGS PAGE
   ========================================= */

/* Settings Sections / Cards Container */
.s-user-settings-wrapper .s-user-settings-section {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* Hover Effect for standard settings sections */
.s-user-settings-wrapper .s-user-settings-section:hover {
    border-color: #333333 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Reset Salla List Tile defaults */
.s-user-settings-section salla-list-tile,
.s-user-settings-section .s-list-tile-item {
    background-color: transparent !important;
    border: none !important;
}

/* Icons */
.s-user-settings-section-icon svg path {
    fill: #AAAAAA !important;
    transition: fill 0.3s ease !important;
}

.s-user-settings-section:hover .s-user-settings-section-icon svg path {
    fill: #FFFFFF !important;
}

/* Section Titles */
.s-user-settings-section-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Section Subtitles */
.s-user-settings-section-subtitle {
    color: #888888 !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
}

/* =========================================
   TOGGLE SWITCH (Promotional Messages)
   ========================================= */

/* Default State (Off) */
.s-toggle-switcher {
    background-color: #333333 !important;
    border: 1px solid #444444 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Checked State (On) */
.s-toggle-input:checked + .s-toggle-switcher {
    background-color: #D32F2F !important;
    border-color: #D32F2F !important;
}

/* =========================================
   DEACTIVATE ACCOUNT SECTION (Danger Zone)
   ========================================= */

/* Give the deactivate section a distinct red warning tint */
.s-user-settings-section-deactivate-user {
    border-color: rgba(211, 47, 47, 0.3) !important;
}

.s-user-settings-section-deactivate-user:hover {
    border-color: rgba(211, 47, 47, 0.8) !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.15) !important;
}

/* Red Icon for Deactivation */
.s-user-settings-section-deactivate-user .s-user-settings-section-icon svg path {
    fill: #FF5252 !important;
}

/* Red Title for Deactivation */
.s-user-settings-section-deactivate-user .s-user-settings-section-title {
    color: #FF5252 !important;
}

/* Danger Outline Button Styling */
.s-button-danger-outline,
.s-user-settings-section-action .s-button-danger-outline {
    background-color: transparent !important;
    border: 1px solid #FF5252 !important;
    color: #FF5252 !important;
    transition: all 0.3s ease !important;
}

/* Danger Button Hover */
.s-button-danger-outline:hover,
.s-user-settings-section-action .s-button-danger-outline:hover {
    background-color: #FF5252 !important;
    color: #FFFFFF !important;
    border-color: #FF5252 !important;
}

/* Ensure Button Text color inherits properly on hover */
.s-button-danger-outline:hover .s-button-text {
    color: #FFFFFF !important;
}

/* =========================================
   32. THANK YOU PAGE (ORDER CONFIRMATION)
   ========================================= */

/* Top Wave Background Alignment */
.thank-you .bg-primary {
    background-color: transparent !important;
}

/* Match the SVG wave color to the main card */
.thank-you svg.text-primary path {
    fill: #141414 !important;
}

/* Breadcrumbs */
.thank-you .text-primary-reverse, 
.thank-you .fix-align {
    color: #AAAAAA !important;
    transition: color 0.3s ease !important;
}

.thank-you a.text-primary-reverse:hover {
    color: #D32F2F !important;
}

/* Main Thank You Card */
.thank-you .bg-white {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Typography (Titles & Subtitles) */
.thank-you h1 {
    color: #FFFFFF !important;
}

.thank-you p.text-gray-500 {
    color: #AAAAAA !important;
}

.thank-you .article p {
    color: #CCCCCC !important;
}

/* Order Number Copy Button */
.thank-you .s-button-dark-link {
    color: #FFFFFF !important;
    background-color: transparent !important;
    transition: color 0.3s ease !important;
}

.thank-you .s-button-dark-link:hover {
    color: #D32F2F !important;
}

.thank-you .copy-icon {
    color: #AAAAAA !important;
}

/* Bottom Blocks (Invoice Email & Support) */
.thank-you .thankyou-block {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
}

.thank-you .thankyou-block:hover {
    border-color: #333333 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Icons inside the bottom blocks */
.thank-you .thankyou-block .bg-gray-100 {
    background-color: #0A0A0A !important;
    border: 1px solid #333333 !important;
}

.thank-you .thankyou-block .bg-gray-100 i {
    color: #D32F2F !important;
}

/* Block Texts & Phone Numbers */
.thank-you .thankyou-block p {
    color: #FFFFFF !important;
}

.thank-you .thankyou-block .unicode i {
    color: #AAAAAA !important;
}

.thank-you .thankyou-block a.hover\:text-primary:hover {
    color: #D32F2F !important;
}

/* Email Invoice Form Input */
.thank-you #invoice-form input.form-input {
    background-color: #0A0A0A !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
}

.thank-you #invoice-form input.form-input:focus {
    border-color: #D32F2F !important;
    box-shadow: none !important;
}

.thank-you #invoice-form input.form-input::placeholder {
    color: #666666 !important;
}

/* =========================================
   33. SINGLE ORDER DETAILS PAGE
   ========================================= */

/* Override default white utility classes in the main content */
.main-content .bg-white {
    background-color: #141414 !important;
}

.main-content .border-gray-100 {
    border-color: #222222 !important;
}

.main-content .divide-border-color > :not([hidden]) ~ :not([hidden]) {
    border-color: #222222 !important;
}

/* Order Header Information (Date, Status, Print) */
.single-order-header-item {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
}

.single-order-header-item .text-gray-400 {
    color: #AAAAAA !important;
}

.single-order-header-item b {
    color: #FFFFFF !important;
}

/* Override Salla's inline color for the order status */
.single-order-header-item span[style*="color"] {
    color: #CCCCCC !important; 
}

.single-order-header-item i.sicon-time {
    color: #D32F2F !important;
}

/* Shipping Company Block */
.shipping-orders .flex.bg-white {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-bottom: none !important; /* Connects visually with items */
}

.shipping-orders span {
    color: #FFFFFF !important;
}

/* Order Items List */
.order-item.bg-white {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-top: 1px solid #222222 !important; 
}

.order-item a {
    color: #FFFFFF !important;
}

.order-item a:hover {
    color: #D32F2F !important;
}

.order-item b {
    color: #FFFFFF !important;
}

.order-item span.font-normal {
    color: #AAAAAA !important;
}

/* Order Totals Card */
.s-order-totals-card-panel {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.s-order-totals-card-heading {
    color: #FFFFFF !important;
    background-color: #0A0A0A !important;
    border-bottom: 1px solid #222222 !important;
}

.s-order-totals-card-row {
    border-bottom: 1px solid #222222 !important;
}

.s-order-totals-card-row:last-child {
    border-bottom: none !important;
}

.s-order-totals-card-label,
.s-order-totals-card-shipping,
.s-order-totals-card-total-label {
    color: #AAAAAA !important;
}

.s-order-totals-card-value span,
.s-order-totals-card-total-value b {
    color: #FFFFFF !important;
}

.s-order-totals-card-total {
    background-color: #0A0A0A !important;
    border-top: 1px solid #222222 !important;
}

/* Reorder Block */
.main-content .bg-white.rounded-md.p-5 h3 {
    color: #FFFFFF !important;
}

.main-content .bg-white.rounded-md.p-5 p.text-gray-500 {
    color: #AAAAAA !important;
}