/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* Light mode styling */
#product_description {
    color: white;
}

/* Dark mode styling */
body.dark #product_description {
    color: #888;
}

/* Styling for all h2 elements */
h2 {
    color: white; /* Default color for h2 */
    font-size: 1.5em; /* Adjust the font size as needed */
    margin: 10px 0; /* Add margin for spacing */
}

/* Dark mode styling for h2 */
body.dark h2 {
    color: #101820; /* Color for h2 in dark mode */
}
#coupon-input {
  color: black; /* Sets the text color to black */
}

.text-\[var\(--s-color\)\] {
  color: var(--s-color);
}

@media (prefers-color-scheme: dark) {
  .text-\[var\(--s-color\)\] {
    color: white;
  }
}

.s-product-card-price {
  color: inherit; /* Default color, inherited from parent */
}

@media (prefers-color-scheme: white) {
  .s-product-card-price {
    color: white !important; /* Override color in dark mode */
  }
}

/* For dark mode: when body has class "dark" */
body.dark .imported-links,
body.dark .imported-links a,
body.dark .imported-links h3 {
  color: #000 !important;
  transition: filter 0.3s ease, color 0.3s ease;
}

/* For normal (light) mode: when body does NOT have the "dark" class */
body:not(.dark) .imported-links,
body:not(.dark) .imported-links a,
body:not(.dark) .imported-links h3 {
  color: #fff !important;
  transition: filter 0.3s ease, color 0.3s ease;
}

/* Hover effect: slight dimming for links */
.imported-links a:hover {
  filter: brightness(0.9);
}

/*----cart section----*/
/* Default Light Mode Styling */
.md\:flex {
    color: black; /* Set text to black for light mode */
}

h1, h2, .item-price, .item-total {
    color: black; /* Ensure text is visible in light mode */
}

a {
    color: black; /* Links should be black in light mode */
}

/* Dark Mode Styling */
body.dark .md\:flex {
    color: white !important; /* Ensure text is white in dark mode */
}

body.dark h1, 
body.dark h2, 
body.dark .item-price, 
body.dark .item-total {
    color: white !important; /* Force white text in dark mode */
}

body.dark a {
    color: #ddd !important; /* Lighter link color in dark mode */
}

/* Fix for text-[var(--s-color)] if the variable is not properly set */
.text-\[var\(--s-color\)\] {
    color: var(--s-color, black); /* Default to black in light mode */
}

body.dark .text-\[var\(--s-color\)\] {
    color: var(--s-color, white); /* Default to white in dark mode */
}

/* Smooth Transition for Mode Switching */
body, h1, h2, a, .item-price, .item-total {
    transition: color 0.3s ease-in-out;
}