/* Add custom CSS styles below */

/* الوضع الليلي */
body.dark-mode *, .dark-mode div * {
    color: #fff !important;
    border-color: rgb(42 42 42);
}

body.dark-mode .bg-white, .dark-mode .s-comments-product, .dark-mode .tamara-product-widget, .dark-mode .spotii-wrapper,
.dark-mode #tabbyPromoWrapper {
    border-color: rgb(42 42 42) !important;
    background-color: rgb(32 32 32) !important;
}

.dark-mode .s-filters-widget-container, body.dark-mode .slide--cat-entry, body.dark-mode .s-product-card-entry, body.dark-mode .s-block--features__item, .dark-mode .brand-item, .dark-mode .s-reviews-testimonial, .dark-mode .store-footer {
    color: #fff !important;
    background-color: rgb(32 32 32);
}

.dark-mode .form-input, .dark-mode .s-price-range-number-input, .dark-mode .bg-gray-100, .dark-mode .s-modal-body {
    color: #fff !important;
    border-color: rgb(42 42 42);
    background-color: rgb(42 42 42);
}

.dark-mode .s-button-primary-outline {
    background-color: rgb(42 42 42);
}

.dark-mode .store-footer__inner, .dark-mode .s-button-light-outline, .dark-mode .s-login-modal-input {
    background-color: rgb(42 42 42) !important;
    color: #fff;
}

.dark-mode .s-modal-close {
    background-color: transparent !important;
}

@media only screen and (min-width: 1024px) {
    .dark-mode .main-menu li > a {
        background-color: rgb(32 32 32);
    }

    .dark-mode .main-menu .has-children li a:hover, .dark-mode .main-menu .has-children .has-children:hover > a {
        color: var(--color-primary);
        background-color: rgb(55 55 55);
    }
}

.dark-mode .s-modal-body * {
    color: #f7eeff !important;
}

.dark-mode {
    --color-primary: #7dc4d1;
    --color-primary-dark: #40a3c7;
    --color-primary-light: #2aa9c0;
    --color-primary-reverse: #ccffff;
}

/* ----- تعديل عند نفاد الكمية ----- */

/* جعل المنتج باهت */
.s-product-card-entry.is-sold-out {
    opacity: 0.5;
    position: relative;
}

/* عرض عبارة "نفدت الكمية" داخل مستطيل أحمر */
.s-product-card-entry.is-sold-out::after {
    content: "نفدت الكمية";
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}