/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

.ikon_variation_select{
    background-color: transparent !important;
    color: white !important;
    border: 1px solid white !important;
    border-radius: 80px !important;
}
.select-arrow {
    background-color: transparent !important;
    color: white !important;
    border: 1px solid transparent !important;
}
.ikon_select_label{
    font-weight: 800 !important;
    color: white !important;
}
.ikon_variation_select option {
    background-color: black !important;
    color: white !important;
    font-weight: 500 !important;
}
.mb-5{
    margin-bottom: 25px !important;
}
.woocommerce-Price-amount .woocommerce-Price-currencySymbol{
    font-size: 15px !important;
}
.woocommerce-Price-amount amount{
    font-size: 25px;
    font-weight: 600;
}
.qty {
    background-color: white !important;
    color: black !important;
}
/* Overall container: dark background, padding, etc. */
#thumbnail-slider.splide {
  position: relative;
  max-height: 600px;
  margin: 0 auto; /* center on the page */
}

/* Set the fixed height for each slide; adjust 400px as needed */
#thumbnail-slider .splide__slide {
    height: 600px;
    overflow: hidden;
}
/* Container for video to ensure it fills the slide */
#thumbnail-slider .video-container {
    position: relative;
    width: 100%;
    height: 100%;
}
#thumbnail-slider .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* The track (where slides scroll) */
#thumbnail-slider .splide__track {
  overflow: hidden; /* hide edges when sliding */
}

/* Make each slide’s image fully responsive with rounded corners */
#thumbnail-slider .splide__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrows: from Splide’s default if arrows: true */
.splide__arrow {
  background-color: transparent; 
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #fff;
  width: 40px;
  height: 40px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.splide__arrow:hover {
  opacity: 1;
}

/* Position arrows at bottom-right corner (adjust to taste) */
.splide__arrow--prev {
  position: absolute;
  bottom: 20px;
  right: 70px;
}

.splide__arrow--next {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/* Fractional counter at bottom-left */
.splide__counter {
  position: absolute;
  bottom: -30px;
  left: 20px;
  color: #ccc;
  font-family: sans-serif;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Example: Hide Splide's default pagination bullets if you only want fraction */
.splide__pagination {
  display: none !important;
}

/* --- Arrows Container --- */
#thumbnail-slider .splide__arrows {
  position: absolute; 
  bottom: -60px;      
  right: 20px;       
  display: flex;     
  gap: 8px;          /* space between the two arrows, adjust as needed */
  align-items: center;
  justify-content: center;
}

/* --- Individual Arrows --- */
#thumbnail-slider .splide__arrow {
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #fff;
  width: 40px;
  height: 40px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.splide__arrow > svg{
     fill: white !important;
}

#thumbnail-slider .splide__arrow:hover {
  opacity: 1;
}

/* Override if you had specific styling per arrow before */
#thumbnail-slider .splide__arrow--prev,
#thumbnail-slider .splide__arrow--next {
  position: static; /* Let the parent .splide__arrows container handle positioning */
}

.shop_table th, .shop_table tr{
    color: white !important;
}
.d-none{
	display: none !important;
}