/**
 * Dark/light theme compatibility for cart dropdown
 */

:root {
  /* Light theme variables (default) */
  --tw-cart-dropdown-bg: white;
  --tw-cart-dropdown-border: #ccc;
  --tw-cart-dropdown-text: #333;
}

/* Dark theme variables */
.tw-dark {
  --tw-cart-dropdown-bg: #1E293B; /* slate-800 */
  --tw-cart-dropdown-border: #475569; /* slate-600 */
  --tw-cart-dropdown-text: #E2E8F0; /* slate-200 */
}

/* Additional dark mode styles for cart contents */
.tw-dark .cart-block--contents .cart-block--contents__items {
  color: var(--tw-cart-dropdown-text);
}

.tw-dark .cart-block--contents a {
  color: #38BDF8; /* sky-400 */
}

.tw-dark .cart-block--contents a:hover {
  color: #7DD3FC; /* sky-300 */
}

.tw-dark .cart-block--contents .cart-block--contents__links a {
  background-color: #0284C7; /* sky-600 */
  color: white;
  transition: background-color 0.2s;
}

.tw-dark .cart-block--contents .cart-block--contents__links a:hover {
  background-color: #0369A1; /* sky-700 */
}

/* Ensure cart buttons always have white text regardless of theme */
.cart-block--contents__links a,
.tw-dark .cart-block--contents__links a,
a.tw-text-white.tw-bg-blue-600,
.tw-dark a.tw-text-white.tw-bg-blue-600,
:not(.tw-dark) .cart--cart-block .cart-block--contents a.tw-bg-blue-600,
.tw-dark .cart--cart-block .cart-block--contents a.tw-bg-blue-600 {
  color: white !important;
}

/* Fix scrollbar issues in cart dropdown */
.cart-block--contents {
  overflow: visible !important; /* Prevent outer container from scrolling */
}

/* Make cart items scrollable with styled scrollbar */
.cart-block--contents__items {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--tw-scrollbar-thumb, rgba(156, 163, 175, 0.7)) var(--tw-scrollbar-track, transparent); /* Firefox */
}

/* Style scrollbars for WebKit browsers (Chrome, Safari, etc.) */
.cart-block--contents__items::-webkit-scrollbar {
  width: 5px;
}

.cart-block--contents__items::-webkit-scrollbar-track {
  background: var(--tw-scrollbar-track, transparent);
}

.cart-block--contents__items::-webkit-scrollbar-thumb {
  background-color: var(--tw-scrollbar-thumb, rgba(156, 163, 175, 0.7));
  border-radius: 20px;
}

/* Dark theme scrollbar variables */
.tw-dark {
  --tw-scrollbar-thumb: rgba(148, 163, 184, 0.5); /* slate-400 with opacity */
  --tw-scrollbar-track: rgba(30, 41, 59, 0.2); /* slate-800 with opacity */
}

/* Light theme scrollbar variables */
:root {
  --tw-scrollbar-thumb: rgba(156, 163, 175, 0.7); /* gray-400 with opacity */
  --tw-scrollbar-track: transparent;
}