/* ===============================
   ✨ Comparison Tray (Improved & Cleaned)
   =============================== */

/* --- Tray Container --- */
#compareTray {
  position: sticky;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  justify-content: center; /* Centers the inner content horizontally */
  padding: 0 16px; /* Horizontal padding for spacing from screen edges on smaller screens */
  background: #fff; /* Background for the overall tray area */
  box-shadow: 0 2px 16px rgba(0,0,0,0.08); /* Subtle shadow for the sticky tray */
  border-radius: 16px; /* Rounded corners for the tray */
  transition: box-shadow 0.2s; /* Smooth transition for shadow changes */
}

/* Class to hide the tray completely */
#compareTray.tray-hidden {
  display: none !important; /* Forces the tray to be hidden, overriding other display properties */
}

/* --- Tray Inner Content --- */
/* This div acts as the main content container inside the sticky tray */
#compareTray .tray-inner {
  width: 100%;
 /* max-width: 960px; /* Max width for the inner content on larger screens */
  background: #fff; /* Background for the inner content area */
  border: 1px solid #ccc; /* Border around the inner content */
  border-radius: 12px; /* Rounded corners for the inner content */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* More prominent shadow for the inner content */
  padding: 16px; /* Inner padding */
  display: flex;
  flex-direction: column; /* Stacks car list and buttons vertically by default (mobile-first) */
  gap: 16px; /* Spacing between car list and buttons */
  position: relative; /* Needed for positioning the close button */
}

/* --- Car List Row --- */
#compareList {
  display: flex;
  justify-content: center; /* Centers items horizontally when there's extra space */
  gap: 12px; /* Spacing between individual car items */
  overflow-x: auto; /* Allows horizontal scrolling if items exceed width */
  padding-bottom: 6px; /* Adds space for the scrollbar */
  flex: 1; /* Allows this section to grow and shrink */
  padding-right: 12px; /* Padding on the right for scrollable content */

  /* Custom Scrollbar Styling (Webkit - Chrome, Safari, Edge) */
  &::-webkit-scrollbar {
    height: 6px; /* Height of the horizontal scrollbar */
  }
  &::-webkit-scrollbar-thumb {
    background: #bbb; /* Color of the scrollbar thumb */
    border-radius: 3px; /* Rounded corners for the thumb */
  }
  &::-webkit-scrollbar-track {
    background: #eee; /* Color of the scrollbar track */
  }

  /* Custom Scrollbar Styling (Firefox) */
  scrollbar-width: thin; /* 'auto' or 'none' */
  scrollbar-color: #bbb #eee; /* thumb-color track-color */
}

/* --- Individual Car Items --- */
#compareTray .compare-item {
  position: relative; /* For positioning the remove button */
  min-width: 96px; /* Minimum width for each car item */
  max-width: 108px; /* Maximum width for each car item */
  padding: 8px; /* Inner padding */
  background: #f9f9f9; /* Background color for car item */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center text and image */
  font-size: 12px;
  color: #333;
  flex-shrink: 0; /* Prevents items from shrinking below min-width */
  box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* Subtle shadow for each item */
}

#compareTray .compare-item img {
  width: 60px;
  height: 60px;
  object-fit: cover; /* Ensures image covers the area without distortion */
  border-radius: 6px;
  margin-bottom: 4px;
}

#compareTray .compare-item button.remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #e3342f;
  color: #fff;
  border: none;
  border-radius: 50%; /* Makes it a circle */
  font-size: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: flex; /* Use flex to center the 'x' */
  justify-content: center;
  align-items: center;
  line-height: 1; /* Ensure 'x' is vertically centered */
  padding: 0; /* Remove default button padding */
}

/* --- Action Buttons Section (Compara, Elimina tot) --- */
#compareTray .compare-actions {
  display: flex;
  justify-content: space-between; /* Distributes space between car list and buttons */
  align-items: center; /* Vertically aligns items in this row */
  flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
  gap: 12px; /* Spacing between major sections (car list and buttons) */
}

/* Container for the "Compara" and "Elimina tot" buttons - Mobile-first defaults */
#compareTray .compare-buttons {
  display: flex;
  flex-direction: column; /* Stack buttons vertically by default */
  gap: 8px; /* Space between the buttons */
  align-items: stretch; /* Buttons fill the width of their container */
  width: 100%; /* Take full width on mobile */
  flex-shrink: 0; /* Prevent the buttons container from shrinking */
}

/* --- General Button Styling --- */
#compareTray button {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Specific styling for buttons inside .compare-buttons */
#compareTray .compare-buttons button {
  width: 100%; /* Buttons take full width in column layout on mobile, and will inherit this for desktop/tablet */
  text-align: center; /* Center text inside these specific buttons */
}

/* --- Specific Button Styles --- */
#goCompare {
  background: #152fa3;
  color: #fff;
}
#goCompare:hover {
  background: #0d1f6b;
}

#clearCompare {
  background: #e3342f;
  color: #fff;
}
#clearCompare:hover {
  background: #cc1f1a;
}

/* --- Hide Tray Button --- */
#hideCompare {
  background-color: #e5e7eb; /* Tailwind gray-200 */
  color: #111827; /* Tailwind gray-900 */
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #d1d5db; /* Tailwind gray-300 */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#hideCompare:hover {
  background-color: #d1d5db; /* Tailwind gray-300 */
}

/* --- Close Button (Top Right) --- */
#closeTray {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  color: #666;
  font-size: 20px;
  border: none;
  cursor: pointer;
  z-index: 10; /* Ensure it's above other content */
  padding: 0; /* Remove default button padding */
}
#closeTray:hover {
  color: #000;
}

/* --- Show Tray Button (fixed button to bring up tray) --- */
#showTrayBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1060; /* Higher z-index to be above the tray */
  background-color: #152fa3;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#showTrayBtn:hover {
  background-color: #0d1f6b;
}

#showTrayBtn.hidden {
  display: none !important;
}

/* ===============================
   Responsive Adjustments
   =============================== */

/* --- Desktop Specific (Large Screens: 1024px and up) --- */
@media (min-width: 1024px) {
  #compareTray {
    max-width: 66.6667%; /* Approximately 2/3 of the screen width */
    margin-left: auto;   /* Centers the tray horizontally */
    margin-right: auto;  /* Centers the tray horizontally */
    padding: 0; /* Remove horizontal padding from tray itself on desktop */
  }

  #compareTray .tray-inner {
    flex-direction: row; /* Layout inner content in a row on desktop */
    align-items: center; /* Vertically align items in the row */
    gap: 24px; /* More space between car list and buttons */
    padding: 16px 24px; /* Adjust inner padding for desktop */
  }

  #compareTray .compare-buttons {
    /* flex-direction and align-items remain 'column' and 'stretch' from base (as requested for desktop) */
    gap: 12px; /* Space between buttons */
    width: auto; /* Allow width to be determined by content */
    max-width: 200px; /* Optional: limit width of the button column */
    border-left: 1px solid #eee; /* Separator line */
    padding-left: 20px;
    margin-left: 12px;
  }
  /* #compareTray .compare-buttons button will inherit width: 100% from base */
}

/* --- Tablet/Medium Screens (640px to 1023px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
  #compareTray .tray-inner {
    flex-direction: row; /* Layout inner content in a row on tablets */
    align-items: center; /* Vertically align items in the row */
    gap: 16px; /* Spacing between car list and buttons */
    padding: 12px 16px; /* Adjust inner padding for tablets */
  }

  #compareTray .compare-buttons {
    /* flex-direction and align-items remain 'column' and 'stretch' from base (as requested for tablet) */
    gap: 10px; /* Space between buttons */
    width: auto; /* Allow width to be determined by content */
    max-width: 200px; /* Optional: limit width of the button column */
    border-left: 1px solid #eee; /* Separator line */
    padding-left: 16px;
    margin-left: 10px;
  }
  /* #compareTray .compare-buttons button will inherit width: 100% from base */
}

/* --- Mobile Responsiveness (Max 639px) --- */
@media (max-width: 639px) {
  #compareTray {
    padding: 12px; /* Overall padding for the tray on mobile */
    border-radius: 12px;
    width: 95%; /* Make it slightly narrower than full width */
    bottom: 16px; /* Adjust bottom margin for mobile */
    left: 2.5%; /* Center it with 95% width */
    right: 2.5%; /* Center it with 95% width */
  }
  
  #compareTray .tray-inner {
    padding: 12px; /* Adjust inner padding for mobile */
    gap: 12px; /* Smaller gap for mobile */
  }

  #compareTray .compare-actions {
    flex-direction: column; /* Stack actions vertically */
    align-items: stretch; /* Make buttons stretch to full width */
  }

  #compareTray button {
    width: 100%; /* All buttons within compareTray take full width on mobile */
    font-size: 13px; /* Slightly smaller font size */
    padding: 8px 16px; /* Adjust button padding */
  }

  #compareTray .compare-item {
    min-width: 70px; /* Smaller min-width for mobile items */
    max-width: 90px; /* Smaller max-width for mobile items */
    font-size: 10px; /* Smaller font size for item text */
    padding: 6px; /* Smaller padding for items */
  }

  #compareTray .compare-item img {
    width: 40px; /* Smaller image size */
    height: 40px;
  }

  #compareTray .compare-item button.remove {
    font-size: 10px; /* Smaller remove button */
    width: 16px;
    height: 16px;
    top: 2px;
    right: 2px;
  }

  #closeTray {
    top: 6px; /* Adjust close button position */
    right: 6px;
    font-size: 18px;
  }

  #compareList {
    padding-bottom: 4px; /* Adjust scrollbar padding */
    gap: 8px; /* Smaller gap between items */
  }
}