.main-bg-color {
  background-color: var(--phoenix-body-bg);
}

.form-label {
  font-size: 10pt; /* Consider using rem or em for better scalability */
}

/* Navbar Specific Styles */
/* Removes the shadow from the dropdown caret.
   If this is intended to remove the default Bootstrap shadow, it's fine.
   If Phoenix adds its own, this might be overridden. */
.navbar .dropdown-menu.navbar-dropdown-caret:after {
  box-shadow: none !important;
}

/* Select2 (Third-party library) integration for invalid state */
.is-invalid .select2-container--default .select2-selection--single {
  border-color: #f32f53 !important; /* Bootstrap's danger color */
}

/* Logo Styling */
.logo-container {
  height: auto;
  max-height: 60px; /* Adjust based on your layout's needs */
  display: flex;
  align-items: center;
}

.logo-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* Ensures the entire logo is visible within its container */
}

/* Card Interaction Styles (Upsell & General Hover Effects) */
.upsell-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out; /* Added border to transition */
}

.upsell-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #0d6efd20; /* Light blue border on hover */
}

.upsell-card.selected {
  border: 2px solid #0d6efd; /* Primary blue border when selected */
  /* background-color: #e9f2ff; /* Currently commented out, but good for visual feedback */
}

.selected-overlay {
  display: block !important; /* Forces visibility of an overlay when element is selected */
}

/* General Hover & Transition Effects */
.hover-shadow:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.transition-all {
  transition: all 0.3s ease; /* Smooth transitions for properties changing over time */
}

/* Text Utility Classes */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Truncates text to 2 lines with ellipses */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image Sizing & Fitting */
.object-fit-cover {
  object-fit: cover; /* Ensures image covers its container, cropping if necessary */
}

/* Interactive Elements */
.items {
  /* Generic class for clickable items, consider more specific naming if used broadly */
  cursor: pointer;
}

/* Swiper2 (Third-party library) Custom Shadow */
.swal2-custom-shadow {
  box-shadow: 0 0 10px rgb(0 0 0 / 0%) !important; /* This effectively removes the shadow. If a specific shadow is desired, adjust the rgba values. */
  border-radius: 8px; /* Optional: adjust border radius */
}

/* Product Image Container Styling */
.image-container {
  width: 100%;
  height: 130px; /* Fixed height for consistent image display */
  overflow: hidden; /* Hides any part of the image outside the container */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Images fill the container */
  object-position: center; /* Centers the image within the container */
}

/* Responsive Adjustments for Mobile Screens */
@media (max-width: 576px) {
  /* Bootstrap's 'sm' breakpoint for small devices */
  .image-container {
    height: auto; /* Allow height to adjust based on content ratio for smaller screens */
  }

  .product-name {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  /* Consider if this should be `.product-description` or similar, if applicable */
  .text-body-tertiary {
    /* This class is general, ensure it only targets product details if that's the intention */
    font-size: 0.85rem;
  }
}

/* Ensure Swiper slides take up the full height of the slider container */
.swiper-slide {
  height: 100%; /* Important: Make sure slides fill available height */
  width: 100%; /* Important: Make sure slides fill available width */
  display: flex; /* Use flexbox to center content easily if needed */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  overflow: hidden; /* Hide anything that overflows the slide boundaries */
}

.swiper-item-full-cover {
  width: 100%; /* Make the image/video fill the width of its parent slide */
  height: 100%; /* Make the image/video fill the height of its parent slide */
  object-fit: cover; /* This is key! It ensures the content covers the area, cropping if necessary, maintaining aspect ratio */
  display: block; /* Ensures it behaves as a block element */
}

/* You might need to set a specific height for your swiper container
   if it's not already defined by its parent or other CSS.
   Example: */
.swiper-theme-container,
.swiper.theme-slider {
  height: 175px; /* Adjust this height as needed for your design */
  /* Or use a responsive height like 'min-height: 200px; max-height: 600px;' or 'height: 50vh;' */
}

/* If your videos have native controls, you might want to hide them for a true "background" feel */
.swiper-item-full-cover video::-webkit-media-controls {
  display: none !important;
}

.swiper-item-full-cover video::-webkit-media-controls-enclosure {
  display: none !important;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover,
.card-hover.active-hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-hover.border-secondary:hover,
.card-hover.border-secondary.active-hover {
  border-color: #0d6efd !important;
}

.chevron-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}

.chevron-icon.rotate {
  transform: rotate(180deg);
}

.navbar-nav .nav-link {
  transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover {
  color: var(--bs-primary) !important;
  background-color: rgba(13,110,253,0.05);
}

.dropdown-menu {
  transition: all 0.2s ease-in-out;
}

.dropdown-menu.show {
  transform: translateY(0);
  opacity: 1;
}

.footer-link {
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-link:hover {
    color: #fff;
}
.footer-social-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    color: #1a1a1a;
    transition: transform 0.3s;
}
.footer-social-icon:hover {
    transform: translateY(-3px);
}

  /* Minimal Custom CSS - Mostly Bootstrap */
  .filter-chip {
    transition: all 0.2s ease-in-out;
  }
  .filter-chip:hover {
    transform: translateY(-2px);
  }
  .product-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
  }
  .stock-badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .quantity-input {
    width: 50px;
    font-weight: 600;
  }