/* Ultrawide Screen CSS Fixes
   For screens with resolution 3440x1440 and above
   Fixes category ticker width and button size issues
*/

/* Make category ticker use full width on ultra-wide screens */
@media (min-width: 3440px) {
  /* Adjust container width for ultra-wide screens */
  .container.shopping-right-side-bar {
    max-width: 3200px!important;
  }

  /* Ensure category ticker uses full width */
  .category-ticker-container {
    width: 100%;
  }

  .category-ticker-wrapper::before,
  .category-ticker-wrapper::after {
    width: 120px; /* Increased from 40px */
  }

  /* Adjust category items for better distribution */
  .category-item {
    width: calc(100vw / 18); /* Show at least 6 items on ultra-wide screens */
    min-width: 140px;
    max-width: 180px; /* Reduce max-width to ensure more items fit */
  }

  /* Make Details buttons smaller on ultra-wide screens */
  .btn.btn-danger.mt-3.w-100 {
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
  }

  /* Make filter text smaller on ultra-wide screens */
  h3.fs-5.fw-bold.mb-0 {
    font-size: 1rem !important; /* Smaller font size for filter heading */
  }

  /* Make filter reset button smaller on ultra-wide screens */
  .btn.btn-outline-danger.btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Make accordion buttons smaller on ultra-wide screens */
  .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  /* Make form elements smaller on ultra-wide screens */
  .form-check-label {
    font-size: 0.85rem;
  }

  /* Adjust spacing for better appearance on ultra-wide screens */
  .filter-accordion .accordion-body {
    padding: 0.75rem;
  }

  .form-check {
    margin-bottom: 0.3rem;
  }

  /* Make search input smaller on ultra-wide screens */
  .search-input {
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
    height: 38px;
  }

  .search-icon {
    right: 10px;
  }

  .search-icon svg {
    width: 14px;
    height: 14px;
  }

  /* Make year filter elements smaller on ultra-wide screens */
  .year-filter .form-label.small {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  .year-filter .form-control-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    height: 32px;
  }
}

/* Additional adjustments for the Details buttons on all screen sizes */
.btn.btn-danger.mt-3.w-100 {
  max-height: 40px;
  line-height: 1.2;
}