/* Gas Gang Black and Yellow Theme */

:root {
  --primary-yellow: #FFD700;
  --primary-yellow-hover: #FFC700;
  --primary-yellow-light: #FFED4E;
  --background-black: #000000;
  --background-light: #1a1a1a;
  --text-on-dark: #FFFFFF;
  --text-on-yellow: #000000;
}

/* Override body background */
body {
  background-color: var(--background-black) !important;
  color: var(--text-on-dark) !important;
}

/* Header styling */
header {
  background-color: var(--background-black) !important;
  border-bottom: 2px solid var(--primary-yellow) !important;
}

/* Replace indigo colors with yellow */
.bg-indigo-600,
.bg-indigo-50 {
  background-color: var(--primary-yellow) !important;
  color: var(--text-on-yellow) !important;
}

.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-100:hover {
  background-color: var(--primary-yellow-hover) !important;
}

.text-indigo-600,
.text-indigo-700 {
  color: var(--primary-yellow) !important;
}

/* Buttons - Primary (Yellow) */
button[class*="bg-indigo"],
a[class*="bg-indigo"] {
  background-color: var(--primary-yellow) !important;
  color: var(--text-on-yellow) !important;
  font-weight: 600 !important;
  border: 2px solid var(--primary-yellow-light) !important;
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3) !important;
}

button[class*="bg-indigo"]:hover,
a[class*="bg-indigo"]:hover {
  background-color: var(--primary-yellow-hover) !important;
  border-color: var(--primary-yellow) !important;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4) !important;
  transform: translateY(-1px);
}

/* Secondary Buttons (Gray) */
button[class*="bg-gray"],
a[class*="bg-gray"] {
  border: 2px solid #4b5563 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

button[class*="bg-gray"]:hover,
a[class*="bg-gray"]:hover {
  border-color: #6b7280 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px);
}

/* Green Success Buttons (Add to Cart when in cart) */
button[class*="bg-green"],
a[class*="bg-green"] {
  border: 2px solid #34d399 !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

button[class*="bg-green"]:hover,
a[class*="bg-green"]:hover {
  border-color: #10b981 !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px);
}

/* Info Button (i icon) */
button[class*="bg-indigo-50"] {
  border: 2px solid var(--primary-yellow) !important;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.2) !important;
}

button[class*="bg-indigo-50"]:hover {
  background-color: var(--primary-yellow) !important;
  border-color: var(--primary-yellow-light) !important;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4) !important;
}

/* All buttons get smooth transitions */
button, a[role="button"] {
  transition: all 0.2s ease !important;
}

/* Cards and containers */
.bg-white {
  background-color: var(--background-light) !important;
  color: var(--text-on-dark) !important;
}

.bg-gray-50 {
  background-color: var(--background-black) !important;
}

/* Text colors */
.text-gray-900 {
  color: var(--text-on-dark) !important;
}

.text-gray-700,
.text-gray-600 {
  color: #d1d5db !important;
}

.text-gray-500 {
  color: #9ca3af !important;
}

/* Borders */
.border-gray-300,
.border-gray-200 {
  border-color: #374151 !important;
}

/* Input fields */
input, select, textarea {
  background-color: var(--background-light) !important;
  border: 2px solid #374151 !important;
  color: var(--text-on-dark) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary-yellow) !important;
  ring-color: var(--primary-yellow) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
}

/* Number input quantity fields - extra emphasis */
input[type="number"] {
  font-weight: 600 !important;
  text-align: center !important;
}

/* Price display */
.text-xl.font-bold.text-indigo-600 {
  color: var(--primary-yellow) !important;
}

/* Shadows */
.shadow, .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(255, 215, 0, 0.1), 0 2px 4px -1px rgba(255, 215, 0, 0.06) !important;
}

/* THC/CBD/Strain badges - high contrast with depth */
.bg-green-100 {
  background-color: #10b981 !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important;
}

.text-green-800 {
  color: #000000 !important;
  font-weight: 700 !important;
}

.bg-blue-100 {
  background-color: #3b82f6 !important;
  border: 2px solid #60a5fa !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

.text-blue-800 {
  color: #000000 !important;
  font-weight: 700 !important;
}

.bg-purple-100 {
  background-color: #a855f7 !important;
  border: 2px solid #c084fc !important;
  box-shadow: 0 1px 3px rgba(168, 85, 247, 0.3) !important;
}

.text-purple-800 {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Cart badge - header counter */
.bg-indigo-600 {
  background-color: var(--primary-yellow) !important;
  color: var(--text-on-yellow) !important;
  border: 2px solid var(--primary-yellow-light) !important;
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.4) !important;
  font-weight: 700 !important;
}

/* Links */
a {
  color: var(--primary-yellow) !important;
}

a:hover {
  color: var(--primary-yellow-hover) !important;
}

/* Modal overlays */
.bg-black.bg-opacity-50 {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Success/Error states */
.text-green-600 {
  color: #10b981 !important;
}

.text-red-600 {
  color: #ef4444 !important;
}

/* Gray hover states */
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover {
  background-color: #374151 !important;
}

.bg-gray-100,
.bg-gray-200 {
  background-color: #1f2937 !important;
  color: var(--text-on-dark) !important;
}

/* Product grid - cards with depth (only actual product cards, not headers) */
#product-grid > div.bg-white {
  border: 2px solid #374151 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

#product-grid > div.bg-white:hover {
  border-color: var(--primary-yellow) !important;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-2px);
  cursor: pointer;
}

/* Disabled buttons */
button:disabled {
  border: 2px solid #4b5563 !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Red buttons (Remove, Delete, Logout) */
button[class*="bg-red"],
button[class*="text-red"],
a[class*="bg-red"],
a[class*="text-red"] {
  border: 2px solid #f87171 !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

button[class*="bg-red"]:hover,
button[class*="text-red"]:hover,
a[class*="bg-red"]:hover,
a[class*="text-red"]:hover {
  border-color: #ef4444 !important;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px);
}

/* Category and Subcategory Headers */
#product-grid h2 {
  color: var(--text-on-dark) !important;
  border-bottom-color: var(--primary-yellow) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#product-grid h3 {
  color: #d1d5db !important;
  border-left-color: var(--primary-yellow) !important;
}