/* Add custom CSS styles below */* Light Mode (Default) */
body {
    background-color: #ffffff;
    color: #000000;
}

/* Dark Mode */
.dark-mode body {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-mode .header, .dark-mode .header a {
    background-color: #1f1f1f;
    color: #e0e0e0;
}

/* Add all other dark mode styles here */




/* Background and Text Colors */
body {
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text for readability */
}

/* Header and Navigation */
.header, .header a, #header, .main-header, .header-wrapper, .site-header, .header-content {
    background-color: #1f1f1f; /* Dark background for the header */
    color: #e0e0e0; /* Light text */
}

header a, header a:hover, #header a, .site-header a {
    color: #e0e0e0 !important; /* Light text for links in the header */
}

/* Main Navigation Bar */
.main-nav-container, .main-nav-container a {
    background-color: #1f1f1f; /* Dark background for the main nav */
    color: #e0e0e0; /* Light text for links in the main nav */
}

.main-nav-container a:hover {
    color: #bb86fc; /* Light purple for hovered links */
}

/* Cart and Profile Icons */
.header-btn__icon.sicon-user-circle, 
.header-btn__icon.icon.sicon-shopping-bag {
    color: #ffffff !important; /* Bright white color for better visibility */
}

/* Button Styles */
button, 
.btn, 
.add-to-cart-button, 
.add-to-cart-button .btn-text, 
.s-add-product-button-with-quick-buy, 
.s-button-element.s-button-btn {
    background-color: #333333 !important; /* Unified dark background for all buttons */
    color: #ffffff !important; /* White text for contrast */
    border: 1px solid #444444 !important; /* Border for better visibility */
    border-radius: 5px !important; /* Slightly rounded corners for a modern look */
}

button:hover, 
.btn:hover, 
.add-to-cart-button:hover, 
.s-add-product-button-with-quick-buy:hover, 
.s-button-element.s-button-btn:hover {
    background-color: #444444 !important; /* Slightly lighter on hover */
    border-color: #555555 !important; /* Border color adjustment on hover */
}

/* Button Text Styling */
.s-button-text {
    color: #ffffff !important; /* Ensure button text remains white */
    font-weight: bold !important; /* Make the text bold for better readability */
}

/* Adjusting Button Layout */
.s-button-wide {
    width: 100% !important; /* Ensure buttons are full width */
    padding: 10px 20px !important; /* Add padding for better spacing */
}

/* Section Backgrounds */
.section, .product-section, .product-list, .footer, .main-content, .main-footer, .content, .product-item, .card, .sidebar, nav, .menu, .dropdown-menu {
    background-color: #1f1f1f !important; /* Dark background for sections */
    color: #e0e0e0; /* Light text */
}

/* Card and Item Backgrounds */
.product-item, .card, .item, .product-gallery, .product-info {
    background-color: #2a2a2a; /* Darker gray background for items and cards */
    border: 1px solid #333333; /* Border for definition */
}

.product-item:hover, .card:hover, .item:hover {
    background-color: #3a3a3a; /* Lighter on hover */
}

/* Unified Background Color */
.product-gallery, .product-info, .product-item .item-content {
    background-color: #2a2a2a !important; /* Unified darker gray background for consistency */
}

/* Footer */
footer, .footer {
    background-color: #1f1f1f; /* Dark background for footer */
    color: #e0e0e0;
}

/* Product Title Fix */
h1.text-gray-800 {
    color: #e0e0e0 !important; /* Light text color for better readability */
}

/* Product Options Dropdown */
.s-product-options-wrapper .s-form-control {
    background-color: #333333 !important; /* Dark background for dropdowns */
    color: #e0e0e0 !important; /* Light text for dropdowns */
    border: 1px solid #444444; /* Border for dropdowns */
}

.s-product-options-wrapper .s-form-control option {
    background-color: #333333; /* Dark background for options */
    color: #e0e0e0; /* Light text for options */
}

.s-product-options-option-label {
    color: #333333 !important; /* Darker text color to contrast with the white background */
}

.s-product-options-option small {
    color: #666666 !important; /* Slightly darker gray for small text under labels */
}

/* Product Form Section Backgrounds */
.product-form .bg-white, 
.sticky-product-bar.bg-white, 
.form-label, 
.price-wrapper, 
.price-wrapper h2, 
.price-wrapper .line-through {
    background-color: #ffffff !important; /* Light background for form sections */
    color: #333333 !important; /* Dark text for price and labels */
}

.s-quantity-input-container {
    background-color: #333333 !important; /* Dark background for quantity input */
    border: 1px solid #444444; /* Border for quantity input */
}

.s-quantity-input-input {
    color: #e0e0e0 !important; /* Light text for quantity input */
}

/* Comments Section */
.s-comments, .s-comments-container, .s-comments-header, .salla-comment-form {
    background-color: #1f1f1f !important; /* Dark background for comments section */
    color: #e0e0e0 !important; /* Light text for comments */
    border: none; /* Remove borders from the comments section */
}

.s-comments .s-comments-header {
    border-bottom: none; /* Remove border from comments header */
}

.s-comments .s-comment, .s-comments .s-comment-reply {
    background-color: #2a2a2a; /* Darker background for individual comments */
    color: #e0e0e0 !important; /* Light text for individual comments */
}

.s-comments .s-comment .s-comment-header {
    color: #bbbbbb !important; /* Lighter text for comment headers */
}

/* Remove Lines in Comments Section */
.s-comments-container, .s-comments-header {
    background-image: none !important; /* Ensure no lines or background images appear */
}

/* Order Summary Section Text Fixes */
.order-summary, 
.order-summary h2, 
.order-summary .total-price, 
.order-summary .item-price, 
.order-summary .summary-label, 
.order-summary .summary-total, 
.order-summary .summary-title, 
.order-summary .summary-item, 
.order-summary .summary-section {
    color: #333333 !important; /* Darker text for all items in order summary */
}

/* Specifically target the problematic text */
.order-summary h2, 
.order-summary .summary-title, 
.order-summary .item-price, 
.order-summary .total-price {
    color: #333333 !important; /* Ensure heading, price, and other key texts are dark */
}

/* For the "ملخص الطلب" heading */
.order-summary .summary-title {
    color: #333333 !important; /* Darker color for the heading */
}

/* For the "إتمام الطلب" button text */
.s-button-text {
    color: #ffffff !important; /* Ensure button text is white for readability */
}

/* General Text Fixes */
.order-summary .summary-label, 
.order-summary .summary-total, 
.order-summary .item-price {
    color: #333333 !important; /* Dark text for the labels and totals */
}

/* Fix for the lighter text in the price summary */
.order-summary .total-price, 
.order-summary .item-price {
    color: #333333 !important; /* Darker text color for the price */
}

/* Make the cart summary total text light */
.s-cart-summary-total {
    color: #e0e0e0 !important; /* Light color for readability against dark background */
}

/* Make the product card price text dark */
.s-product-card-price {
    color: #333333 !important; /* Dark color for readability against light background */
}

/* Make the wishlist button and icon text dark */
.s-product-card-wishlist-btn .s-button-text,
.s-product-card-wishlist-btn .sicon-heart {
    color: #333333 !important; /* Dark color for the text and icon */
}

.s-product-card-wishlist-btn {
    border-color: #333333 !important; /* Ensure the border is also dark */
    background-color: #ffffff !important; /* Optional: If the background should be light */
}

/* Ensure the button text is white */
.s-add-product-button-mini-checkout-content {
    color: #ffffff !important; /* Ensure the text within this element is white */
}

/* Ensure the SVG icon within the button is white */
.s-add-product-button-mini-checkout-content svg {
    fill: #ffffff !important; /* Ensure the SVG icon remains white */
}

/* Ensure both buttons have the same border */
.s-button-element.s-button-solid.s-button-primary,
.s-add-product-button-with-quick-buy {
    border: 1px solid #000000 !important; /* Black border for both buttons */
}

/* Make the header and user menu backgrounds match */
.header, .header a, #header, .main-header, .header-wrapper, .site-header, .header-content,
.s-user-menu-trigger {
    background-color: #1f1f1f !important; /* Match the background color with the header */
    color: #e0e0e0; /* Ensure the text remains light */
}

.s-user-menu-trigger-content {
    color: #e0e0e0 !important; /* Ensure the text inside the user menu trigger remains light */
}

.s-user-menu-trigger .sicon-user,
.s-user-menu-trigger i svg {
    fill: #e0e0e0 !important; /* Light color for the icon */
}

/* Ensure the subtotal text is dark */
#sub-total {
    color: #333333 !important; /* Dark color for better readability */
}

/* Ensure the subtotal text and cart total text are dark */
#sub-total,
[data-cart-total] {
    color: #333333 !important; /* Dark color for better readability */
}

/* Ensure the "ملخص الطلب" heading is dark */
.font-bold.text-sm.mb-5 {
    color: #333333 !important; /* Dark color for better readability */
}

/* Make the menu button icon white */
.sicon-menu.text-primary.text-2xl {
    color: #ffffff !important; /* White color for the menu icon */
}

/* Make the text within the menu white */
.main-menu.mm-spn--open li a,
.main-menu.mm-spn--open li a span {
    color: #ffffff !important; /* White color for the menu text */
}

.main-menu.mm-spn--open li a.text-gray-500 {
    color: #ffffff !important; /* Override any gray text within the menu */
}

/* Change the color of "القائمة الرئيسية" to white */
.main-menu.mm-spn--open li span, 
.main-menu.mm-spn--open li a {
    color: #ffffff !important; /* White color for all menu items */
}

/* Adjust the border of the user icon button to match the header */
.header-btn__icon.sicon-user-circle {
    border: 1px solid #1f1f1f !important; /* Match border color with the header background */
}

/* Make the "عرض الكل" link text white */
.s-slider-block__display-all {
    color: #ffffff !important; /* Set text color to white */
}/