/* =================== */
/* Global Styles */
body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  font-family: Arial, sans-serif; /* Set default font */
  background: #f5f8fa; /* Set background color */
  color: #222; /* Set text color */
  user-select: none; /* Disable text selection */
  -webkit-user-select: none; /* Disable text selection for Webkit browsers */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack elements vertically */
  min-height: 100vh; /* Ensure full viewport height */
}

/* ==================== */
/* Logo Styling */
.logo-center {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Horizontally center the logo */
  margin-top: 30px; /* Add top margin */
}

.logo-main {
  height: 80px; /* Set logo height */
}

/* ==================== */
/* VIN Price Section */
.price-center {
  text-align: center; /* Center-align the text */
  font-size: 20px; /* Set font size */
  font-weight: bold; /* Set font weight */
  margin-top: 10px; /* Add margin above the price */
}

/* ==================== */
/* Button Styling */
.connect-container {
  display: flex; /* Use flexbox */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center items horizontally */
  margin: 15px 0; /* Add margin above and below */
}

.hint-text {
  font-size: 14px; /* Set font size for hint text */
  color: #555; /* Set color */
  margin-top: 8px; /* Add margin above */
  text-align: center; /* Center-align text */
  max-width: 320px; /* Limit width of hint text */
}

/* ==================== */
/* General Button Styling */
.button {
  font-size: 18px; /* Set font size */
  font-weight: bold; /* Make text bold */
  padding: 12px 28px; /* Add padding */
  border-radius: 10px; /* Round the corners */
  background: linear-gradient(90deg, #007bff, #0056b3); /* Blue gradient background */
  color: white; /* Set text color */
  border: none; /* Remove border */
  cursor: pointer; /* Change cursor to pointer */
  transition: 0.3s; /* Smooth transition effect */
}

.button:hover {
  background: linear-gradient(90deg, #0056b3, #003f7f); /* Change background on hover */
}

/* ==================== */
/* Main Content Styling */
.main-content {
  padding: 20px; /* Add padding around content */
  max-width: 800px; /* Limit maximum width */
  margin: auto; /* Center-align the content */
}

.main-content h2 {
  font-size: 22px; /* Set heading size */
  margin-top: 30px; /* Add margin above the heading */
  color: #333; /* Set heading color */
  text-align: center; /* Center-align heading */
}

/* List Styling for Details */
.vin-details,
.vin-earn {
  list-style: none; /* Remove list bullets */
  padding: 0; /* Remove padding */
  margin: 10px auto; /* Add margin */
  max-width: 600px; /* Limit maximum width */
  font-size: 16px; /* Set font size */
}

.vin-details li,
.vin-earn li {
  margin: 8px 0; /* Add margin between items */
  line-height: 1.5; /* Set line height for better readability */
}

.vin-details a,
.vin-earn a {
  color: #007bff; /* Set link color */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Make links bold */
}

.vin-details a:hover,
.vin-earn a:hover {
  text-decoration: underline; /* Underline links on hover */
}

.copy-address {
  background: #eaf4ff; /* Set background color */
  padding: 5px 10px; /* Add padding */
  border-radius: 6px; /* Round corners */
  cursor: pointer; /* Change cursor to pointer */
  color: #007bff; /* Set text color */
  font-weight: bold; /* Make text bold */
}

/* ==================== */
/* Swap Interface Styling */
#swap-interface {
  display: none; /* Hide swap interface by default */
  background: white; /* Set background color */
  padding: 20px; /* Add padding */
  border-radius: 12px; /* Round corners */
  max-width: 600px; /* Limit maximum width */
  margin: 30px auto; /* Center-align and add margin */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Add subtle shadow */
}

.swap-header {
  display: flex; /* Use flexbox */
  flex-direction: column; /* Stack header items vertically */
  align-items: center; /* Center-align items */
  margin-bottom: 20px; /* Add bottom margin */
}

.wallet-address {
  font-size: 16px; /* Set font size */
  font-weight: bold; /* Make text bold */
  color: #007bff; /* Set color */
  margin-top: 10px; /* Add top margin */
}

.swap-wrapper {
  display: flex; /* Use flexbox */
  justify-content: space-between; /* Space out the items */
  gap: 20px; /* Set gap between items */
  margin-top: 20px; /* Add margin above */
  flex-wrap: wrap; /* Allow wrapping of items */
}

.token-input {
  flex: 1; /* Allow token input fields to grow */
  background: #f9f9f9; /* Set background color */
  padding: 15px; /* Add padding */
  border-radius: 10px; /* Round corners */
  text-align: center; /* Center-align text */
  box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* Add subtle shadow */
}

.token-symbol {
  font-weight: bold; /* Make token symbol bold */
  margin-bottom: 10px; /* Add margin below token symbol */
}

.token-info {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center-align items */
  align-items: center; /* Align items vertically */
  gap: 10px; /* Add gap between items */
}

.token-info img {
  width: 30px; /* Set image width */
  height: 30px; /* Set image height */
}

.token-input input {
  width: 100%; /* Make input field full width */
  padding: 10px; /* Add padding */
  margin-top: 10px; /* Add top margin */
  font-size: 16px; /* Set font size */
  border-radius: 8px; /* Round corners */
  border: 1px solid #ccc; /* Add border */
  text-align: center; /* Center-align text */
}

#swap-direction {
  align-self: center; /* Center-align the button */
  font-size: 24px; /* Set font size */
  border: none; /* Remove border */
  background: #28a745; /* Set background color */
  color: white; /* Set text color */
  border-radius: 50%; /* Make button round */
  width: 48px; /* Set button width */
  height: 48px; /* Set button height */
  cursor: pointer; /* Change cursor to pointer */
}

.swap-details {
  margin-top: 20px; /* Add margin above details */
  text-align: center; /* Center-align text */
  font-size: 14px; /* Set font size */
  color: #555; /* Set text color */
}

/* ==================== */
/* Add Viction Network Section */
#add-viction {
  display: block; /* Make section visible */
  margin: 30px 0; /* Add margin above and below */
  text-align: center; /* Center-align text */
}

#add-viction h2 {
  font-size: 22px; /* Set heading size */
  color: #333; /* Set heading color */
}

#add-viction .vin-details {
  list-style: none; /* Remove list bullets */
  padding: 0; /* Remove padding */
  margin: 10px auto; /* Add margin */
  max-width: 600px; /* Limit maximum width */
  font-size: 16px; /* Set font size */
}

#add-viction .copyable {
  background: #eaf4ff; /* Set background color */
  padding: 5px 10px; /* Add padding */
  border-radius: 6px; /* Round corners */
  cursor: pointer; /* Change cursor to pointer */
  color: #007bff; /* Set text color */
  font-weight: bold; /* Make text bold */
}

#add-viction .copyable:hover {
  background: #d7eaff; /* Change background on hover */
}

/* ==================== */
/* Footer Styling */
.footer {
  background: #007bff; /* Set footer background color */
  color: white; /* Set text color */
  text-align: center; /* Center-align text */
  padding: 20px 10px; /* Add padding */
  margin-top: auto; /* Push footer to the bottom */
}

.social-links {
  display: flex; /* Use flexbox */
  justify-content: center; /* Center-align items */
  gap: 15px; /* Add gap between items */
  margin: 10px 0; /* Add margin above and below */
}

.social-btn {
  background: white; /* Set button background */
  color: #007bff; /* Set text color */
  padding: 8px 16px; /* Add padding */
  border-radius: 5px; /* Round corners */
  font-weight: bold; /* Make text bold */
  text-decoration: none; /* Remove underline */
}

.social-btn:hover {
  background: #0056b3; /* Change background on hover */
  color: white; /* Change text color on hover */
}

/* ==================== */
/* Responsive Design */
@media (max-width: 768px) {
  .swap-wrapper {
    flex-direction: column; /* Stack elements vertically on small screens */
  }

  .token-input {
    min-width: 100%; /* Make token input fields full width */
  }
}

#vin-price {
  color: #FFD700; /* Set gold color for VIN price */
  font-weight: 600; /* Make text bold */
  font-size: 22px; /* Set font size */
  text-shadow: none; /* Remove text shadow */
}

#logo-main {
  display: block; /* Ensure logo is a block element */
  margin: 0 auto 10px auto; /* Center-align the logo */
  width: 150px;  /* Increase logo width for larger size */
  height: 150px; /* Increase logo height for larger size */
  object-fit: contain; /* Ensure logo maintains aspect ratio */
  image-rendering: pixelated; /* Enhance image clarity by rendering in high quality */
  background-color: transparent; /* Set transparent background */
}


/* Reduce space between sections to just 1 line */
#connect-container, #add-viction, .main-content {
  margin-bottom: 10px; /* Set smaller margin below each section */
}

/* Reduce space between the button and hint text */
.connect-container .hint-text {
  margin-top: 5px; /* Reduce margin between button and hint */
}

/* Reduce space between each list item in the details sections */
.vin-details li, .vin-earn li {
  margin: 5px 0; /* Reduce the margin between list items */
}

/* Adjust margin between token balance display and swap interface */
#from-balance, #to-balance {
  margin-bottom: 5px; /* Small margin between token balance and other elements */
}

/* Adjust spacing around the swap interface */
#swap-interface {
  margin-top: 15px; /* Reduce margin above swap interface */
  padding: 15px; /* Adjust padding inside the swap interface */
}