/* Add custom CSS styles below */ 
body.index, 
.bg-gray-100, 
.app-inner {
    background-color: #fdfaf3 !important;
}

/* This targets the footer specifically */
.store-footer {
    background-color: #fdfaf3 !important;
    border-top: 1px solid #f0e6db !important;
}

/* This targets the inner section above the bottom bar */
.store-footer__inner {
    background-color: #fdfaf3 !important;
}

/* 2. Product Card Background */
.product-card {
    background-color: #fdfcfb !important; /* The warm white/cream */
    border: 1px solid #f0e6db !important; /* Optional: adds a very faint border */
}
/* 1. Force the solid background and remove the outline */
.s-button-element.s-button-btn.s-button-outline {
    background-color: #caa58c !important; /* Solid Brand Tan */
    border: none !important;              /* Removes the outline */
    color: #ffffff !important;           /* Forces text to be white */
    border-radius: 50px !important;       /* Restores the rounded shape */
    padding: 10px 20px !important;
}

/* 2. Ensure the text inside is visible and white */
.s-button-element.s-button-btn.s-button-outline * {
    color: #ffffff !important;
}

/* 3. Hover state for a professional feel */
.s-button-element.s-button-btn.s-button-outline:hover {
    background-color: #a47f66 !important; /* Slightly darker tan on hover */
}


/* 1. Change the Main Header Background */
.store-header, 
.top-navbar, 
.main-nav-container,
#mainnav {
    background-color: #fdfaf3 !important;
    border-bottom: 1px solid #f0e6db !important; /* Adds a very soft separator line */
}

/* 2. Ensure the sticky header stays the same color when scrolling */
.is-sticky .main-nav-container {
    background-color: #fdfaf3 !important;
}

/* Search Box Container */
.search-wrapper, 
.header-search input {
    background-color: #f7f0e9 !important; /* Soft tinted background */
    border-radius: 50px !important;       /* Modern rounded shape */
    color: #4a4a4a !important;           /* Darker text for readability */
}

/* Search Icon Color */
.header-search button i, 
.header-search .s-search-icon {
    color: #caa58c !important;
}

/* 2. The Placeholder Text (ادخل كلمة البحث) */
.header-search input::placeholder {
    color: #a47f66 !important;           /* Darker tan for readability */
    opacity: 0.8 !important;
}
/* 1. Target the SVG icon itself (Salla usually uses SVGs) */
.header-search svg, 
.header-search svg path,
.s-search-icon svg {
    stroke: #caa58c !important; /* Changes the outline of the icon */
    fill: none !important;      /* Keeps the inside clear */
}

/* 1. Remove background from the User/Profile icon */
.s-user-menu-trigger, 
.s-user-menu-trigger-nav-trigger,
.avatar-placeholder {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Target the image specifically to ensure it sits on the header color */
.s-user-menu-trigger img, 
.avatar-placeholder img {
    background-color: transparent !important;
    border-radius: 50% !important;
}

/* 3. Fix the Cart Icon background (the white circle around the bag) */
.s-cart-btn-wrapper, 
.s-cart-btn-inner {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Keep the red notification badge but make the bag icon match your tan */
.s-cart-btn-wrapper i {
    color: #caa58c !important;
}