:root {
  --orange: #f75b00; /* Define the global orange color */
}
.manrope {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.text-orange {
  color: var(--orange);
}

.bg-orange {
  background-color: var(--orange);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
/* Style for details summary marker */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* Custom +/- marker for details */
aside details > summary .accordion-marker::before {
  /* Specific to sidebar */
  content: "+";
  font-size: 1.2em;
  font-weight: bold;
  margin-top: -2px;
  display: inline-block;
  width: 1em; /* Ensure space */
}
aside details[open] > summary .accordion-marker::before {
  /* Specific to sidebar */
  content: "-";
}

/* Hide default arrow specifically for sidebar filter details */
aside details > summary i.fa-chevron-down {
  transition: transform 0.2s ease-in-out;
}
aside details[open] > summary i.fa-chevron-down {
  transform: rotate(180deg);
}
aside details > summary::-webkit-details-marker {
  display: none;
}
aside details > summary {
  list-style-type: none;
}

/* Style for number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
/* Add padding to body bottom to prevent content being hidden by sticky bar */
body {
  font-family: "Manrope", sans-serif; /* Added fallback */
  padding-bottom: 0; /* Initial padding, JS will adjust */
  transition: padding-bottom 0.3s ease-in-out; /* Smooth transition */
}
/* Ensure modal content is scrollable */
#productModal .overflow-y-auto {
  /* Adjust based on header/footer height in modal if they are outside this div */
  /* If header is inside, this might not need a max-height */
}
/* Ensure compatibility section has enough space */
#productModal .pt-4.border-t {
  padding-bottom: 20px; /* Add some padding at the bottom of the modal scroll area */
}

/* Style for Add-to-Cart feedback */
.add-to-cart-btn.added-feedback {
  background-color: #10b981 !important; /* Green-500 */
  color: white !important;
  cursor: default;
  pointer-events: none; /* Prevent further clicks briefly */
}
.add-to-cart-btn.added-feedback i {
  display: none; /* Hide cart icon */
}
.add-to-cart-btn.added-feedback::before {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.875rem; /* text-sm */
}

/* Hide elements meant for specific pages */
/* (Could add more specific rules if needed) */

/* Sticky bar padding adjustment */
body.has-sticky-bar {
  /* padding-bottom will be set dynamically by JS */
}

/* Ensure compatibility section in modal is styled correctly */
.modal-compatibility-container details > summary {
  list-style: none; /* Ensure default markers are hidden */
}
.modal-compatibility-container details > summary::-webkit-details-marker {
  display: none; /* Ensure default markers are hidden */
}
.modal-compatibility-container details[open] > summary i.fa-caret-right {
  transform: rotate(90deg);
}
.modal-compatibility-container i.fa-caret-right {
  transition: transform 0.2s ease-in-out;
}
/* Smooth transitions */
.modal-content {
  transition: all 0.3s ease-out;
}

#vehicleSelectModal {
  transition: opacity 0.3s ease-in-out;
}

input,
button {
  transition: all 0.2s ease;
}

/* Button hover effects */
button:hover:not(:disabled):not(.category-clear) {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

button:active:not(:disabled):not(.category-clear) {
  transform: translateY(0);
}

/* Animation classes */
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.animate-error-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.error-highlight {
  border-color: #ef4444 !important;
  background-color: rgba(254, 226, 226, 0.4) !important;
}

/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

/* Loading spinner enhancements */
.fa-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Input field focus enhancements */
input:focus {
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
  outline: none;
}

/* Modal backdrop with blur effect */
#vehicleSelectModal {
  backdrop-filter: blur(3px);
}