/* Dark Mode Styles */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --border-primary: #dee2e6;
  --border-secondary: #e9ecef;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --card-bg: #ffffff;
  --nav-bg: #ffffff;
  --shadow: rgba(0, 0, 0, 0.1);
}

/* Dark mode color scheme */
body.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #888888;
  --border-primary: #404040;
  --border-secondary: #2d2d2d;
  --input-bg: #2d2d2d;
  --input-border: #404040;
  --card-bg: #1e1e1e;
  --nav-bg: #1e1e1e;
  --shadow: rgba(0, 0, 0, 0.3);
}

/* Apply dark mode styles */
body.dark-mode {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main content area background */
body.dark-mode main.container {
  background-color: transparent !important;
}

/* Feed container */
body.dark-mode .feed-container {
  background-color: transparent !important;
}

/* Post cards mobile specific */
@media (max-width: 768px) {
  body.dark-mode .post-card {
    background: linear-gradient(145deg, #1a1a1a, #2d2d2d) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-top: 1px solid #404040 !important;
    border-bottom: 1px solid #404040 !important;
  }
}

/* Navigation */
body.dark-mode .bg-white {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border-primary);
}

body.dark-mode .text-gray-800 {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-600 {
  color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-500 {
  color: var(--text-muted) !important;
}

/* Cards and containers */
body.dark-mode .bg-white,
body.dark-mode .post-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}

/* Forms and inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Buttons */
body.dark-mode .btn-secondary {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--border-primary) !important;
}

/* Borders */
body.dark-mode .border,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
  border-color: var(--border-primary) !important;
}

/* Shadows */
body.dark-mode .shadow,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-md {
  box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow) !important;
}

/* Profile specific */
body.dark-mode .profile-header {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

/* Dropdown menus */
body.dark-mode .dropdown-menu {
  background-color: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}

body.dark-mode .dropdown-item {
  color: var(--text-primary) !important;
}

body.dark-mode .dropdown-item:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Links */
body.dark-mode a {
  color: #3b82f6 !important;
}

body.dark-mode a:hover {
  color: #60a5fa !important;
}

/* Post content */
body.dark-mode .post-content {
  color: var(--text-primary) !important;
}

body.dark-mode .post-meta {
  color: var(--text-secondary) !important;
}

/* Post cards improvements */
body.dark-mode .post-card,
body.dark-mode .bg-white {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Main content area */
body.dark-mode .container {
  background-color: var(--bg-primary) !important;
}

body.dark-mode main {
  background-color: var(--bg-primary) !important;
}

/* Search and other components */
body.dark-mode .search-container input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

/* Modal and overlays */
body.dark-mode .modal-content,
body.dark-mode #checkoutModal .bg-white {
  background-color: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}

body.dark-mode .modal-header {
  border-bottom-color: var(--border-primary) !important;
}

body.dark-mode .modal-footer,
body.dark-mode #checkoutModal .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
  border-top-color: var(--border-primary) !important;
}

/* Checkout modal positioning for dark mode */
body.dark-mode #checkoutModal:not(.hidden) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding-top: 15vh !important;
}

body.dark-mode #checkoutModal.hidden {
  display: none !important;
}

/* Checkout modal buttons for dark mode */
body.dark-mode #close-checkout-modal {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

body.dark-mode #close-checkout-modal:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Specific text colors */
body.dark-mode .text-black {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-800 {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-700 {
  color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-600 {
  color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-500 {
  color: var(--text-muted) !important;
}

/* Post author and content text improvements */
body.dark-mode .post-author {
  color: #e5e7eb !important;
  font-weight: 600 !important;
}

body.dark-mode .post-description {
  color: #d1d5db !important;
  line-height: 1.6 !important;
}

body.dark-mode .post-time {
  color: #9ca3af !important;
}

/* Like and comment buttons */
body.dark-mode .like-button,
body.dark-mode .comment-button {
  color: #9ca3af !important;
  transition: color 0.2s ease !important;
}

body.dark-mode .like-button:hover,
body.dark-mode .comment-button:hover {
  color: #60a5fa !important;
}

body.dark-mode .like-button.liked {
  color: #ef4444 !important;
}

/* Hashtags and mentions */
body.dark-mode .hashtag,
body.dark-mode .mention {
  color: #60a5fa !important;
  font-weight: 500 !important;
}

body.dark-mode .hashtag:hover,
body.dark-mode .mention:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

/* Message bubbles */
body.dark-mode .message-sent {
  background-color: #0084ff !important;
}

body.dark-mode .message-received {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Tables */
body.dark-mode table {
  background-color: var(--card-bg) !important;
}

body.dark-mode th,
body.dark-mode td {
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* Loading states and overlays */
body.dark-mode .loading-overlay {
  background-color: rgba(18, 18, 18, 0.8) !important;
}

/* Icons and SVGs */
body.dark-mode .icon {
  filter: invert(1);
}

/* Accordion for creating posts */
body.dark-mode #toggleShareExperience {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

body.dark-mode #toggleShareExperience:hover {
  background-color: var(--bg-tertiary) !important;
}

body.dark-mode #toggleShareExperience h2 {
  color: var(--text-primary) !important;
}

body.dark-mode #toggleShareExperience svg {
  color: var(--text-secondary) !important;
}

body.dark-mode #shareExperienceForm {
  background-color: var(--card-bg) !important;
}

/* Fixed positioning icons improvements */
/* Messages button (left side) */
body.dark-mode .messages-button {
  background-color: #2563eb !important; /* Bright blue for messages */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .messages-button:hover {
  background-color: #1d4ed8 !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.6) !important;
  transform: translateY(-2px);
}

/* Cart button (right side) */
body.dark-mode .cart-button {
  background-color: #059669 !important; /* Bright green for cart */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .cart-button:hover {
  background-color: #047857 !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.6) !important;
  transform: translateY(-2px);
}

/* Cart and message badges */
body.dark-mode .cart-count,
body.dark-mode .fixed .bg-red-500 {
  background-color: #ffffff !important;
  color: #059669 !important;
  border: 2px solid #059669 !important;
  font-weight: bold !important;
}

body.dark-mode .unread-count,
body.dark-mode .fixed .bg-red-600 {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  font-weight: bold !important;
}

/* SVG icons in floating buttons */
body.dark-mode .messages-button svg,
body.dark-mode .cart-button svg {
  color: #ffffff !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Ensure button text is white */
body.dark-mode .messages-button span,
body.dark-mode .cart-button span {
  color: #ffffff !important;
}

/* Badge styling improvements */
body.dark-mode .messages-button .unread-count {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

body.dark-mode .cart-button .cart-count {
  background-color: #ffffff !important;
  color: #059669 !important;
  border: 2px solid #059669 !important;
}

/* Enhanced post styling */
body.dark-mode .post-card {
  background: linear-gradient(145deg, #1e1e1e, #2d2d2d) !important;
  border: 1px solid #404040 !important;
  border-radius: 12px !important;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Username and interaction buttons */
body.dark-mode .post-card .text-blue-600 {
  color: #60a5fa !important;
}

body.dark-mode .post-card .text-blue-600:hover {
  color: #93c5fd !important;
}

/* Main background improvements */
body.dark-mode {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
}

body.dark-mode .bg-gray-100 {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%) !important;
}

/* Catalog and Cart Specific Styles */
/* Catalog page styling */
body.dark-mode .container {
  background-color: var(--bg-primary) !important;
}

/* Grid items and general card styling */
body.dark-mode .grid > div,
body.dark-mode .bg-white.rounded-lg,
body.dark-mode .bg-white.shadow,
body.dark-mode .bg-white.shadow-sm {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .grid > div:hover,
body.dark-mode .bg-white.rounded-lg:hover,
body.dark-mode .bg-white.shadow:hover,
body.dark-mode .bg-white.shadow-sm:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Catalog item cards specific */
body.dark-mode .hover\\:shadow-md:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Form elements in catalog and cart */
body.dark-mode .border.rounded-lg,
body.dark-mode .border.px-4.py-2,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--input-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 1px #60a5fa !important;
}

/* Table styling for cart */
body.dark-mode .min-w-full,
body.dark-mode table {
  background-color: var(--card-bg) !important;
}

body.dark-mode .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

body.dark-mode .divide-y.divide-gray-200 > * {
  border-color: var(--border-primary) !important;
}

body.dark-mode .hover\\:bg-gray-50:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Cart page styling */
body.dark-mode .cart-container {
  background-color: var(--bg-primary) !important;
}

/* Image placeholders and containers */
body.dark-mode .bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

body.dark-mode .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Item details and vendor links */
body.dark-mode .text-blue-600 {
  color: #60a5fa !important;
}

body.dark-mode .text-blue-600:hover,
body.dark-mode .hover\\:text-blue-800:hover {
  color: #93c5fd !important;
}

body.dark-mode .text-green-600 {
  color: #10b981 !important;
}

/* Badge styling */
body.dark-mode .bg-gray-800 {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
}

/* Cart item names and descriptions */
body.dark-mode .cart-item-name {
  color: var(--text-primary) !important;
}

body.dark-mode .cart-item-seller {
  color: #60a5fa !important;
}

body.dark-mode .cart-item-details {
  color: var(--text-secondary) !important;
}

/* Buttons in catalog and cart */
body.dark-mode .bg-blue-500,
body.dark-mode .bg-blue-600 {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

body.dark-mode .bg-blue-500:hover,
body.dark-mode .hover\\:bg-blue-700:hover,
body.dark-mode .hover\\:bg-blue-600:hover {
  background-color: #2563eb !important;
}

body.dark-mode .bg-green-500,
body.dark-mode .bg-green-600 {
  background-color: #059669 !important;
  color: #ffffff !important;
}

body.dark-mode .bg-green-500:hover,
body.dark-mode .hover\\:bg-green-700:hover,
body.dark-mode .hover\\:bg-green-600:hover {
  background-color: #047857 !important;
}

body.dark-mode .bg-purple-500,
body.dark-mode .bg-purple-600 {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

body.dark-mode .bg-purple-500:hover,
body.dark-mode .hover\\:bg-purple-700:hover,
body.dark-mode .hover\\:bg-purple-600:hover {
  background-color: #6d28d9 !important;
}

body.dark-mode .bg-red-500,
body.dark-mode .bg-red-600 {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

body.dark-mode .bg-red-500:hover,
body.dark-mode .hover\\:bg-red-700:hover,
body.dark-mode .hover\\:bg-red-600:hover {
  background-color: #b91c1c !important;
}

/* Text colors for various elements */
body.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
  color: var(--text-secondary) !important;
}

body.dark-mode .text-sm,
body.dark-mode .text-xs {
  color: inherit !important;
}

/* Price and specific text colors */
body.dark-mode .price-display {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

body.dark-mode .price-free {
  color: #059669 !important;
}

/* Quantity controls */
body.dark-mode .quantity-controls button {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .quantity-controls button:hover {
  background-color: var(--input-bg) !important;
}

/* Empty state messages */
body.dark-mode .empty-cart-message {
  color: var(--text-secondary) !important;
}

/* Category badges and labels in catalog items */
body.dark-mode .bg-gray-100.text-gray-800 {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .bg-purple-100.text-purple-800 {
  background-color: #4c1d95 !important;
  color: #c4b5fd !important;
}

body.dark-mode .bg-blue-100.text-blue-800 {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
}

body.dark-mode .bg-green-100.text-green-800 {
  background-color: #14532d !important;
  color: #86efac !important;
}

body.dark-mode .bg-red-100.text-red-800 {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

body.dark-mode .bg-yellow-100.text-yellow-800 {
  background-color: #78350f !important;
  color: #fde047 !important;
}

/* Category text colors for specific elements */
body.dark-mode span.text-xs.bg-gray-100,
body.dark-mode span.text-xs.bg-purple-100,
body.dark-mode span.text-xs.bg-blue-100,
body.dark-mode span.text-xs.bg-green-100,
body.dark-mode span.text-xs.bg-red-100,
body.dark-mode span.text-xs.bg-yellow-100 {
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Transitions for smooth mode switching */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}