/*
Theme Name: Scooter Theme
Theme URI: https://pwdmobilityphilippines.local
Author: PWD Mobility Philippines
Description: Custom Tailwind CSS theme for PWD Mobility Philippines mobility scooter catalog.
Version: 1.0
*/

/* Custom CSS for Image Aspect Ratio (Add this to your theme's main stylesheet) */
html {
    scroll-behavior: smooth;
  }
  

/* Optional: Hide scrollbar in webkit browsers (Chrome, Safari, Edge) */
#thumbnail-container::-webkit-scrollbar {
    display: none;
}
/* For Firefox */
#thumbnail-container {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

/* In your theme's style.css or main CSS file */

/* For Accessories Image Aspect Ratio */
.accessory-image-wrapper-16-9 {
    padding-bottom: 56.25%; /* This creates a 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0; /* Collapses the height to let padding-bottom control it */
    position: relative; /* Establishes positioning context for child image */
    overflow: hidden; /* Ensures image doesn't spill out and helps with rounded corners */
}

/* Ensure the image fills its wrapper */
.accessory-image-wrapper-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Crops the image to fit without distortion */
}

/* Fix for space between main slider and thumbnails */
#slider.flexslider {
    margin-bottom: 0 !important; /* Remove the 60px margin. Use 10px, 15px if you want a little space */
    width: 100%; /* or fixed width like 500px */
    overflow: hidden;
    position: relative;
    border: none;
  outline: none;
}

.flex-direction-nav a:hover:before {
    color: #00B0FF; /* or any highlight color */
  }

  .flex-direction-nav a {
    z-index: 20;
  }
  

.flex-direction-nav a:before {
    font-family: 'flexslider-icon' !important;
    font-size: 32px !important;
    content: "\f001" !important; /* flex-prev */
    line-height: 40px;
    display: block;
    text-align: center;
  }
  
  .flex-direction-nav .flex-next:before {
    content: "\f002" !important; /* flex-next */
  }

  #carousel .flex-viewport {
  background-color: var(--primary-color); /* Or use your exact dark background */
}

#carousel,
#carousel .flex-viewport,
#carousel .slides,
#carousel .slides li {
  border: none;
  outline: none;
}