/* =========================================================
   Edge Automotive Vehicle Page Styles
   v1.0 – Polished layout with blur modals & transitions
   Author: Rodrigo Moya Design LLC
   ========================================================= */

/* --- General Page Layout --- */
body {
  background-color: #111827; /* Tailwind gray-900 */
  color: #f9fafb;
  font-family: 'Lato', 'Inter', sans-serif;
  scroll-behavior: smooth;
}

/* --- Image Thumbnails --- */
.thumbnail-carousel::-webkit-scrollbar {
  height: 8px;
}
.thumbnail-carousel::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.6);
  border-radius: 4px;
}
.thumbnail-carousel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.8);
}

/* --- Vehicle Container --- */
article.bg-gray-800 {
  backdrop-filter: saturate(120%);
  transition: all 0.3s ease-in-out;
}
article.bg-gray-800:hover {
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.15);
}

/* --- Header Title --- */
h1, h2, h3 {
  letter-spacing: 0.02em;
}

/* --- Price Highlight --- */
h2.text-4xl {
  color: #3b82f6; /* Edge blue */
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* --- Buttons --- */
button, a.button {
  transition: all 0.3s ease;
}
button:hover, a.button:hover {
  transform: translateY(-1px);
}

/* --- Modal Enhancements --- */
#inquiry-modal,
#share-modal {
  backdrop-filter: blur(8px) brightness(0.8);
  -webkit-backdrop-filter: blur(8px) brightness(0.8);
  animation: fadeIn 0.25s ease-in;
}

#inquiry-modal > div,
#share-modal > div {
  animation: popIn 0.25s ease-in-out;
  transform-origin: center;
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popIn {
  from { transform: scale(0.96); opacity: 0.8; }
  to { transform: scale(1); opacity: 1; }
}

/* --- “X” Close Button --- */
a[title="Back to Inventory"] {
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.4));
}
a[title="Back to Inventory"]:hover {
  transform: rotate(90deg) scale(1.05);
}

/* --- Success Message (future UI use) --- */
.success-toast {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.4s ease;
}
.success-toast svg {
  flex-shrink: 0;
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px) {
  article.bg-gray-800 {
    padding: 1.5rem;
  }
  #inquiry-modal > div, #share-modal > div {
    padding: 1.5rem;
  }
}