/* Dark Mode For Shop Page */

.dark-mode .shop-page {
  /* background-color: #1a1a1a !important; */

  color: #e0e0e0 !important;

  /* Enhanced Breadcrumb Styling */
  .breadcrumb {
    color: #e0e0e0 !important;

    .text-shop_1-1940,
    .text-men-s-fashion {
      color: #e0e0e0 !important;
    }

    .left--stroke-_1-1941 svg path {
      fill: #b0b0b0 !important;
    }
  }

  /* Category Tabs */
  .frame-265 {
    .category {
      color: #b0b0b0 !important;

      &.active {
        color: #d9b69b !important;
        border-bottom-color: #d9b69b !important;
      }

      &:hover {
        color: #e0e0e0 !important;
      }
    }
  }

  .filters-and-products {
    .filters {
      background-color: #2d2d2d !important;

      h2 {
        color: #e0e0e0 !important;
      }

      /* Selected Filters */
      .selected-filters {
        .selected-filter-tag {
          background-color: #404040 !important;
          color: #e0e0e0 !important;
          border: 1px solid #505050 !important;

          .remove-filter {
            color: #b0b0b0 !important;

            &:hover {
              color: #ff5252 !important;
            }
          }
        }
      }

      .filter-group {
        background-color: #333333 !important;

        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05) !important;

        &:hover {
          box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1) !important;
        }

        .filter-btn {
          color: #e0e0e0 !important;

          background-color: #333333 !important;

          &:hover {
            color: #d9b69b !important;

            background-color: #404040 !important;
          }

          &:focus {
            outline-color: #d9b69b !important;
          }
        }

        .filter-options {
          color: #e0e0e0 !important;

          .filter-search input {
            background-color: #404040 !important;
            color: #e0e0e0 !important;
            border-color: #505050 !important;

            &::placeholder {
              color: #909090 !important;
            }
          }

          .price-range {
            input {
              background-color: #404040 !important;
              color: #e0e0e0 !important;
              border-color: #505050 !important;

              &::placeholder {
                color: #909090 !important;
              }
            }

            span {
              color: #b0b0b0 !important;
            }
          }

          .filter-option {
            &:hover {
              background-color: #404040 !important;
            }

            .option-label {
              color: #e0e0e0 !important;

              .count {
                color: #909090 !important;
              }
            }

            input {
              accent-color: #d9b69b !important;

              background-color: #404040 !important;
            }
          }
        }
      }

      /* Filter Actions */
      .filter-actions {
        .apply-filters {
          background-color: #d9b69b !important;
          color: #1a1a1a !important;

          &:hover {
            background-color: #c17a2e !important;
          }
        }

        .clear-filters {
          background-color: #404040 !important;
          color: #e0e0e0 !important;
          border: 1px solid #505050 !important;

          &:hover {
            background-color: #505050 !important;
          }
        }
      }

      /* Offer Cards */
      .offer-cards-container {
        .offer-card {
          background-color: #333333 !important;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;

          &:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
          }

          .offer-content {
            h2 {
              color: #e0e0e0 !important;
            }

            .offer-btn {
              background-color: #d9b69b !important;
              color: #1a1a1a !important;

              &:hover {
                background-color: #c17a2e !important;
              }
            }
          }

          .offer-img {
            opacity: 0.8 !important;
          }
        }
      }
    }

    .products {
      .customize-order-btn {
        background-color: #333333 !important;

        border-color: #404040 !important;

        color: #e0e0e0 !important;

        &:hover {
          background-color: #d9b69b !important;
          color: #1a1a1a !important;
        }
      }

      /* Section Titles */
      .section-title {
        color: #d9b69b !important;
        border-bottom: 1px solid #505050 !important;
      }

      .products-grid {
        .product-card {
          background-color: #2d2d2d !important;

          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;

          &:hover {
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;

            transform: translateY(-5px) !important;
          }

          .product-content {
            .product-header {
              .product-title {
                color: #e0e0e0 !important;
              }

              /* .price-container {
                .current-price {
                  color: #4caf50 !important;

                  &.sale-price {
                    color: #ff5252 !important;
                  }
                }

                .original-price {
                  color: #9e9e9e !important;
                }
              } */
            }

            .product-description {
              p {
                color: #b0b0b0 !important;
              }
            }

            .product-footer {
              .rating span,
              .sales-count {
                color: #9e9e9e !important;
              }
            }
          }

          .wishlist-icon {
            background-color: rgba(45, 45, 45, 0.8) !important;

            color: #e0e0e0 !important;

            &:hover {
              background-color: rgba(216, 141, 61, 0.8) !important;
            }

            &.active {
              color: #ff5252 !important;
            }
          }
        }
      }
    }
  }

  /* Subcategories */
  .subCat {
    background-color: #333333 !important;

    &:hover {
      background-color: #404040 !important;
    }

    p {
      color: #e0e0e0 !important;
    }
  }

  /* Loading spinner */
  .spinner-container {
    background-color: rgba(26, 26, 26, 0.8) !important;

    .spinner .dot {
      background-color: #d9b69b !important;
    }
  }
}

/* Enhanced Product Details Page Dark Mode Styles */
.dark-mode .breadcrumb {
  /* background-color: #2d2d2d !important; */
  color: #e0e0e0 !important;
}

.dark-mode .breadcrumb span {
  color: #e0e0e0 !important;
}

.dark-mode .breadcrumb svg path {
  fill: #b0b0b0 !important;
}

.dark-mode .product-section .image-slider {
  scrollbar-color: #d9b69b #333333 !important;
}

.dark-mode .product-section .image-slider::-webkit-scrollbar-track {
  background: #333333 !important;
}

.dark-mode .product-section .image-slider::-webkit-scrollbar-thumb {
  background: #d9b69b !important;
}

.dark-mode .product-section .thumbnail img {
  border-color: #333333 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .product-section .thumbnail img.active {
  border-color: #d9b69b !important;
}

.dark-mode .product-section .main-product-img {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  background-color: #2d2d2d !important;
}

.dark-mode .navigation-arrows .nav-button {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
}

.dark-mode .navigation-arrows .nav-button:hover {
  background-color: #c17a2e !important;
  color: #fff !important;
}

.dark-mode .magnified-view {
  border: 2px solid #d9b69b !important;
}

.dark-mode .info h1,
.dark-mode .info h4,
.dark-mode .info h5 {
  color: #e0e0e0 !important;
}

.dark-mode .info h5.text-muted {
  color: #b0b0b0 !important;
}

.dark-mode .price .current-price {
  color: #4caf50 !important;
}

.dark-mode .price .original-price {
  color: #909090 !important;
}

.dark-mode .price .discount {
  color: #ff5252 !important;
}

.dark-mode .ratings .stars {
  color: #ffc107 !important;
}

.dark-mode .ratings .rating-value,
.dark-mode .ratings .comments {
  color: #b0b0b0 !important;
}

.dark-mode .unit-btn {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
  border-color: #505050 !important;
}

.dark-mode .unit-btn:hover {
  background-color: rgba(217, 182, 155, 0.3) !important;
  color: #e0e0e0 !important;
}

.dark-mode .unit-btn.active-unit {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
  border-color: #d9b69b !important;
}

.dark-mode .unit-btn.active-unit::after {
  background-color: #c17a2e !important;
}

.dark-mode .color-selector-item {
  border-color: #505050 !important;
}

.dark-mode .color-selector-item.active {
  border-color: #d9b69b !important;
  box-shadow: 0 0 0 4px rgba(217, 182, 155, 0.3),
    0 4px 16px rgba(217, 182, 155, 0.2) !important;
}

.dark-mode input[type="number"],
.dark-mode .form-control {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
  border-color: #505050 !important;
}

.dark-mode input[type="number"]:focus,
.dark-mode .form-control:focus {
  border-color: #d9b69b !important;
  box-shadow: 0 0 0 0.2rem rgba(217, 182, 155, 0.25) !important;
}

.dark-mode input[type="number"]::placeholder,
.dark-mode .form-control::placeholder {
  color: #909090 !important;
}

.dark-mode .quantity-selector .quantity-controls {
  border-color: #505050 !important;
}

.dark-mode .quantity-selector .quantity-btn {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
}

.dark-mode .quantity-selector .quantity-btn:hover {
  background-color: #c17a2e !important;
  color: #fff !important;
}

.dark-mode .quantity-selector .quantity-input {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
  border-color: #505050 !important;
}

.dark-mode .add-to-cart {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 5px rgba(217, 182, 155, 0.3) !important;
}

.dark-mode .add-to-cart:hover {
  background-color: #c17a2e !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(217, 182, 155, 0.4) !important;
}

.dark-mode .try-on {
  background-color: #ff5252 !important;
  color: #fff !important;
  border-color: #ff3333 !important;
  box-shadow: 0 2px 5px rgba(255, 82, 82, 0.3) !important;
}

.dark-mode .try-on:hover {
  background-color: #ff3333 !important;
  box-shadow: 0 4px 8px rgba(255, 82, 82, 0.4) !important;
}

.dark-mode .additional-info p {
  color: #e0e0e0 !important;
}

.dark-mode .additional-info i {
  background-color: #404040 !important;
  color: #d9b69b !important;
}

/* Product Reviews Section in Dark Mode */
.dark-mode .product-reviews-container {
  color: #e0e0e0 !important;
}

.dark-mode .product-reviews-container .product-description-column,
.dark-mode .product-reviews-container .reviews-column {
  background-color: #2d2d2d !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.dark-mode .product-reviews-container h2 {
  color: #e0e0e0 !important;
  border-bottom-color: #d9b69b !important;
}

.dark-mode .product-reviews-container p {
  color: #b0b0b0 !important;
}

.dark-mode .product-reviews-container .reviews-scroll-container {
  scrollbar-color: #d9b69b #333333 !important;
}

.dark-mode
  .product-reviews-container
  .reviews-scroll-container::-webkit-scrollbar-track {
  background: #333333 !important;
}

.dark-mode
  .product-reviews-container
  .reviews-scroll-container::-webkit-scrollbar-thumb {
  background: #d9b69b !important;
}

.dark-mode .write-review-button {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
}

.dark-mode .write-review-button:hover {
  background-color: #c17a2e !important;
  color: #fff !important;
}

.dark-mode .modal-content {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

.dark-mode .modal-header {
  border-bottom-color: #505050 !important;
}

.dark-mode .modal-header .modal-title {
  color: #e0e0e0 !important;
}

.dark-mode .modal-header .btn-close {
  color: #e0e0e0 !important;
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.dark-mode .modal-footer {
  border-top-color: #505050 !important;
}

.dark-mode .modal-footer .btn-primary {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
}

.dark-mode .modal-footer .btn-white {
  background-color: #404040 !important;
  color: #e0e0e0 !important;
  border-color: #505050 !important;
}

/* Review component in dark mode */
.dark-mode app-show-reviews .review {
  background-color: #333333 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode app-show-reviews .user-name {
  color: #e0e0e0 !important;
}

.dark-mode app-show-reviews .user-email {
  color: #b0b0b0 !important;
}

.dark-mode app-show-reviews .stars {
  color: #ffc107 !important;
}

.dark-mode app-show-reviews .review-text {
  color: #b0b0b0 !important;
}

.dark-mode app-show-reviews .user-avatar {
  background-color: #d9b69b !important;
  color: #1a1a1a !important;
}

.dark-mode .cookie-banner {
  background-color: #212121 !important;
  h3 {
    color: #ffff !important;
  }
}

.dark-mode .notification-sidebar {
  background-color: #212121 !important;
}

.dark-mode .notification-item.unread,
.dark-mode .notification-item:hover {
  background-color: #595959 !important;
}

/* Designer contact modal in dark mode */
.dark-mode app-designer-contact {
  .modal-content {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;

    .modal-header {
      border-bottom-color: #505050 !important;

      .modal-title {
        color: #e0e0e0 !important;
      }

      .close {
        color: #e0e0e0 !important;

        &:hover {
          color: #ff5252 !important;
        }
      }
    }

    .modal-body {
      input,
      textarea,
      select {
        background-color: #404040 !important;
        color: #e0e0e0 !important;
        border-color: #505050 !important;

        &::placeholder {
          color: #909090 !important;
        }
      }
    }

    .modal-footer {
      border-top-color: #505050 !important;

      button {
        &.btn-secondary {
          background-color: #404040 !important;
          color: #e0e0e0 !important;
        }

        &.btn-primary {
          background-color: #d9b69b !important;
          color: #1a1a1a !important;
        }
      }
    }
  }
}

/* Login modal in dark mode */
.dark-mode app-login {
  .modal-content {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;

    input {
      background-color: #404040 !important;
      color: #e0e0e0 !important;
      border-color: #505050 !important;
    }

    button {
      &.btn-primary {
        background-color: #d9b69b !important;
        color: #1a1a1a !important;
      }
    }

    a {
      color: #d9b69b !important;
    }
  }
}