body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0a0a0a; 
  color: #fff;
}

header {
  background-color: #000; 
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #222; 
}

.payment-icons {
  display: flex;
  align-items: flex-end; /* Align icons and text to the bottom */
  gap: 8px; /* Space between icons and text */
  margin-top: 5px; /* Reduced gap above the payment section */
  position: absolute; /* Position absolutely at the bottom of the card */
  bottom: 10px; /* Increased from 20px to 10px to move downward slightly more (adjust as needed) */
  left: 20px; /* Align to the left of the seller-card */
}

.icons-container {
  display: flex;
  gap: 6px; /* Space between individual icons */
  align-items: flex-end; /* Ensure icons align to the bottom with the text */
}

.label {
  font-size: 1.5em;
  font-weight: bold;
  color: #9c27b0; 
  display: flex;
  align-items: center;
}

.crypto-icon {
  width: 28px !important;
  height: 28px !important;
  margin: 0; /* Remove any default margins */
  padding: 0; /* Remove any default padding */
  object-fit: contain; /* Ensure the image fits within the dimensions without distortion */
  display: block; /* Ensure the image behaves as a block element for consistent rendering */
  border: 1px solid transparent; /* Add a border for debugging (visible if image fails) */
}

.crypto-icon:not([src])::after {
  content: "⚠"; /* Warning symbol as fallback if image src is missing */
  display: block;
  width: 28px;
  height: 28px;
  font-size: 16px;
  color: #bbb;
  text-align: center;
  line-height: 28px;
  background-color: #333;
  border-radius: 4px;
}

.crypto-icon[src^="http"]::after {
  content: ""; /* Remove fallback for online images */
  display: none;
}

/* Fallback if images fail to load (optional, replace with actual fallback image if needed) */
.crypto-icon:invalid {
  content: url('fallback-icon.png'); /* Optional: Add a fallback icon if needed */
  display: block;
  width: 28px;
  height: 28px;
  background-color: #333;
  border-radius: 4px;
}

.payment-text {
  font-size: 12px;
  color: #bbb;
  white-space: nowrap;
  line-height: 1; /* Prevents extra vertical spacing in the text */
  padding-top: 0; /* Removed padding to align text with icons */
  align-self: flex-end; /* Ensures text aligns with the bottom of the icons */
}
  
.label img {
  height: 30px; 
  margin-right: 10px;
}

nav a {
  color: #ddd;
  text-decoration: none;
  padding: 10px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #7e57c2; 
  background-color: #333;
}

.hero {
  background-color: #000; /* Fallback background color if image fails to load */
  padding: 50px 20px;
  text-align: center;
  border-bottom: 1px solid #222;
}

.hero h1 {
  font-size: 3em;
  font-weight: 700;
  margin-bottom: 10px;
  color: #7e57c2;
}

.hero p {
  font-size: 1.2em;
  margin-bottom: 20px;
  color: #ccc;
}

.hero .search-container input[type="text"] {
  padding: 12px;
  width: 75%;
  max-width: 450px;
  margin-right: 10px;
  border: 2px solid #7e57c2;
  background-color: #333;
  color: #ffffff;
  border-radius: 8px;
}

.hero .search-container button {
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  background-color: #7e57c2; /* Adjusted for consistency */
  padding: 12px 15px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.hero .search-container button:hover {
  background-color: #7e57c2;
  transform: scale(1.05);
}

.hero .tag-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.hero .tag-container .tag {
  padding: 5px 10px;
  margin: 5px;
  background-color: #555; 
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
  position: relative;
}

.hero .tag-container .tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 10px); 
  height: calc(100% + 10px); 
  background: linear-gradient(to bottom, #bb86fc, #7e57c2); 
  border-radius: 5px;
  opacity: 0.5; 
  z-index: -1; 
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease; 
}

.hero .tag-container .tag:hover {
  background-color: #7e57c2; 
}

.hero .tag-container .tag:hover::before {
  opacity: 0.8;
}

.categories {
  background-image: url('Mockup-2.jpg'); /* Path to the background image */
  background-size: cover; /* Ensures the image covers the entire categories section */
  background-position: center; /* Centers the image in the categories section */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  padding: 30px 20px;
  background-color: #141414; /* Fallback background color if image fails to load */
  border-bottom: 1px solid #222; 
  position: relative; /* Ensure content can be positioned above the background */
  overflow: hidden; /* Prevent overflow of any content outside the categories section */
}

.categories h2 {
  text-align: center; /* Ensures text inside the container is centered */
  margin-bottom: 50px;
  color: #fff; /* Maintains purple text as requested */
  font-size: 40px;
  position: relative; /* Ensure h2 stays above the background */
  z-index: 2; /* Ensure h2 is above the background image */
  display: block; /* Changed from inline-block to block for better centering control */
  padding: 10px 20px; /* Maintains padding inside the container */
  background-color: rgba(30, 30, 30, 0.8); /* Maintains darker semi-transparent container */
  border-radius: 8px; /* Maintains rounded corners */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Maintains subtle shadow */
  width: fit-content; /* Ensures the container wraps tightly around the text while centering */
  margin-left: auto; /* Centers the container horizontally */
  margin-right: auto; /* Centers the container horizontally */
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Forces exactly 4 columns per row */
  gap: 40px; /* Maintains spacing between items */
  justify-items: center;
  margin-bottom: 50px;
  max-width: 1300px; /* Maintains overall width control */
  margin-left: auto; /* Centers the grid horizontally */
  margin-right: auto; /* Centers the grid horizontally */
  position: relative; /* Ensure grid stays above the background */
  z-index: 2; /* Ensure grid is above the background image */
}

.category-item {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Adjusted shadow for darker theme */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #ddd;
  padding: 20px; /* Maintains compact padding */
  border-radius: 10px; /* Maintains rounded corners */
  transition: transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transitions for hover */
  position: relative; 
  z-index: 1; 
  width: 180px; /* Maintains fixed width */
  height: 180px; /* Maintains reduced height */
  background-color: rgba(30, 30, 30, 0.9); /* Darker container for better readability over background */
  backdrop-filter: blur(5px); /* Optional: Slight blur for a modern, translucent effect */
}

.category-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px; /* Match the width of .category-item */
  height: 180px; /* Match the height of .category-item */
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c); /* Darker gradient for hover effect */
  border-radius: 10px; /* Match border-radius of .category-item */
  opacity: 0; /* Hidden by default, revealed on hover */
  z-index: -1; 
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease; 
}

.category-item:hover::before {
  opacity: 0.8; /* Fully visible on hover for a subtle effect */
}

.category-item img {
  width: 60px; /* Maintains reduced icon size */
  height: 60px; /* Maintains reduced icon size */
  padding-top: 10px; /* Maintains reduced padding */
  margin-bottom: 10px; /* Maintains reduced margin */
}

.category-item span {
  font-size: 14px; /* Maintains smaller text for shorter containers */
  text-align: center;
  margin-top: auto; /* Pushes text to the bottom of the container */
  padding: 0 10px; /* Maintains padding for better text fit */
}

.category-item:hover {
  transform: translateY(-8px); /* Maintains vertical shift for shorter containers */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); /* Maintains shadow for shorter containers */
  background-color: #252525; /* Maintains lighter dark color on hover for contrast */
  color: #fff;
}

.featured-sellers {
  padding: 30px 20px;
  background-color: #000;
}

.featured-sellers h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #eee;
  font-size: 40px;
  font-weight: bold;
}

.seller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Seller card styling with hover effects */
.seller-card {
  border: 2px solid #7e57c2;
  padding: 20px;
  margin: 15px 35px;
  text-align: center;
  border-radius: 10px;
  background-color: #000; /* Matches your dark black theme */
  box-shadow: 0px 4px 10px rgba(126, 87, 194, 0.2); /* Subtle shadow with purple tint */
  position: relative; /* Required for absolute positioning of payment-icons */
  min-height: 500px; /* Ensure consistent height to prevent content overflow affecting positioning */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth hover transitions */
}

.seller-card:hover {
  transform: translateY(-10px); /* Lift the card slightly on hover */
  box-shadow: 0px 8px 20px rgba(126, 87, 194, 0.3); /* Enhanced shadow with purple tint */
  background-color: #1a1a1a; /* Slightly lighter dark black on hover for contrast */
}

.seller-card img {
  border: 2px solid #7e57c2;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1px;
  margin-top: 15px;
}

.seller-card h3 {
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 1.3em;
  color: #ddd;
}

.seller-card p {
  margin: 15px 35px;
  font-size: 1.1em;
  color: #ccc;
}

.seller-card button {
  padding: 12px 15px;
  background-color: #7e57c2;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.seller-card button:hover {
  background-color: #7e57c2;
  transform: scale(1.05);
}

.seller-rating {
  color: #ffc107;
  font-size: 0.9em;
}

.seller-card .tags {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.seller-card .tags .tag {
  padding: 3px 8px;
  margin: 0 3px;
  background-color: #555;
  color: #fff;
  border-radius: 3px;
  font-size: 0.8em;
}

footer {
  background-color: #000; 
  color: #fff;
  text-align: center;
  padding: 20px;
  border-top: 1px solid #222; 
}

/* Chat bubble (initial state) */
#chat-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #7e57c2; /* Purple accent from your theme */
  border-radius: 50%; /* Circular shape for bubble */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  z-index: 1000; /* Ensure it stays above other content */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth fade and scale for hiding */
}

#chat-bubble.hidden {
  opacity: 0; /* Hide the bubble when chat window is open */
  pointer-events: none; /* Prevent interaction when hidden */
  transform: scale(0); /* Shrink to disappear smoothly */
}

#chat-bubble:hover {
  transform: scale(1.1); /* Slight scale on hover for interactivity */
}

#chat-bubble .chat-icon {
  font-size: 24px; /* Size of the chat icon (💬) */
  color: #fff; /* White text/icon for contrast */
}

/* Expanded chat window (hidden by default) */
#chat-window {
  position: fixed;
  bottom: 80px; /* Position 80px from the bottom, at bottom-right */
  right: 20px; /* 20px from the right edge */
  width: 320px; /* Slightly wider for better readability */
  max-height: 500px; /* Increased height for more message space */
  min-height: 400px;
  background-color: #252525; /* Dark background matching your theme */
  border-radius: 20px; /* Larger, smoother rounded corners for a bubble effect */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* Enhanced shadow for a popup effect */
  display: flex;
  flex-direction: column;
  z-index: 1000; /* Ensure it stays above other content */
  transform: scale(0); /* Hidden by default with scale */
  transform-origin: bottom right; /* Scale from bottom-right corner */
  transition: transform 0.3s ease, opacity 0.3s ease, bottom 0s, right 0s; /* Ensure position doesn’t animate */
  opacity: 0; /* Hidden by default */
}

#chat-window.hidden {
  display: none; /* Ensures the window is completely hidden when not active */
}

#chat-window.active {
  transform: scale(1); /* Visible when active */
  opacity: 1; /* Fully opaque when active */
  bottom: 20px; /* Fixed at 80px from the bottom */
  right: 20px; /* Fixed at 20px from the right */
}

/* Chat window header (like a chat bubble top) */
#chat-window-header {
  background-color: #7e57c2; /* Purple accent for header, matching your theme */
  color: #fff;
  padding: 12px; /* Slightly more padding for better spacing */
  border-radius: 20px 20px 0 0; /* Match the larger border-radius of the window */
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px; /* Slightly larger text for readability */
}

/* Chat controls (minimize and close buttons) */
.chat-controls {
  display: flex;
  gap: 10px; /* Space between minimize and close buttons */
}

#chat-minimize-button, #chat-close-button {
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2em; /* Slightly larger for better visibility */
  padding: 5px 10px; /* More padding for click area */
  transition: color 0.3s ease;
}

#chat-minimize-button:hover, #chat-close-button:hover {
  color: #ff9800; /* Orange for hover feedback, consistent with your theme */
}

/* Chat messages area */
#chat-messages {
  padding: 15px; /* Increased padding for better spacing */
  flex-grow: 1;
  overflow-y: auto;
  color: #eee;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e; /* Slightly lighter dark background, matching your theme */
}

/* Chat message styles */
.chat-message {
  margin-bottom: 12px; /* Increased margin for better spacing */
  padding: 12px; /* Increased padding for better readability */
  border-radius: 12px; /* Larger, smoother corners for a bubble effect */
  max-width: 85%; /* Slightly wider for better text flow */
  word-wrap: break-word;
  font-size: 14px;
}

.chat-message.user {
  background-color: #7e57c2; /* Purple for user messages, matching your theme */
  color: white;
  align-self: flex-end; 
  border-radius: 12px 0 12px 12px; /* Chat bubble shape for user, larger corners */
}

.chat-message.bot {
  background-color: #555; /* Dark gray for bot messages, consistent with dark theme */
  color: white;
  align-self: flex-start;
  border-radius: 0 12px 12px 12px; /* Chat bubble shape for bot, larger corners */
}

/* Chat input area */
#chat-input-area {
  display: flex;
  padding: 15px; /* Increased padding for better spacing */
  border-top: 1px solid #555;
  background-color: #141414; /* Darkest background, matching your theme */
}

#chat-input {
  flex-grow: 1;
  padding: 10px; /* Increased padding for better usability */
  border: 1px solid #555;
  border-radius: 8px; /* Larger, smoother corners */
  background-color: #444; /* Dark input background, consistent with theme */
  color: #fff;
  outline: none;
  font-size: 14px; /* Consistent text size */
}

#chat-send-button {
  padding: 10px 15px; /* Increased padding for better click area */
  background-color: #7e57c2; /* Purple accent for send button, matching your theme */
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 8px; /* Larger, smoother corners */
  margin-left: 10px; /* Increased margin for spacing */
  transition: background 0.3s ease, transform 0.2s ease;
}

#chat-send-button:hover {
  background-color: #6a3d9e; /* Darker purple on hover, consistent with theme */
  transform: scale(1.05);
}

header .logo {
  display: flex;
  align-items: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #7e57c2; 
}

header .logo img {
  height: 25px; 
  margin-right: 10px;
}