/*
 Theme Name:   PWR CAP Child Theme
 Theme URI:    https://pwrcap.com
 Description:  Use this child theme to extend bricks.
 Author:       Etragardh
 Author URI:   https://youtube.com/@etragardh
 Template:     bricks
 Version:      1.0
 Text Domain:  pwrcap
*/

/*
form.cart .quantity .minus:hover svg,
form.cart .quantity .plus:hover svg,
form.woocommerce-cart-form .quantity .minus:hover svg,
form.woocommerce-cart-form .quantity .plus:hover svg {
  stroke: green;
}
*/

article#brx-content, #primary {
  padding-top:20px;
  padding-bottom:20px;
  min-height:calc(100vh - 115px);
}

.wp-block-woocommerce-cart {
  margin:0 auto;
  max-width:1100px;
}

@media (max-width: 991px) {
  article#brx-content, #primary {
    padding: 20px 15px;
  }
}

/** range slider **/

.custom-range-slider-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 1:3 ratio */
  gap: 10px; /* Gap between the label and the slider */
  align-items: center; /* Align items vertically */
  width: 100%;
}

.custom-range-slider-container label {
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." when the label is too long */
  white-space: nowrap; /* Prevents label from wrapping to the next line */
  max-width: 100%; /* Ensure label is limited by the container's width */
}

.slider-wrapper {
  position: relative;
  width: 100%;
}

.slider-bar {
  position: relative;
  background-color: #4f4f4f;
  height: 8px;
  border-radius: 5px;
  width: 100%;
}

.filled-bar {
  background-color: #3498db; /* Color the left side of the bar */
  height: 100%;
  border-radius: 5px 0 0 5px;
}

.slider-value {
  position: absolute;
  top: -15px;
  transform: translateX(-50%);
  background-color: #3498db;
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}


/** // Range slider **/

/** model viewer **/

/* Model Viewer */
model-viewer {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin: auto;
  display: block;
}

/* Thumbnail Bar */
.thumbnail-bar {
  width:100%;
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
  text-align: center; /* Ensure thumbnails are centered under the model */
}

/* Thumbnail Images */
.thumbnail-bar img {
  width: 80px; /* Set thumbnail size */
  height: 80px;
  object-fit: cover; /* Ensure the image fits without distortion */
  border: 2px solid #4f4f4f;
  border-radius: 6px;
  cursor: pointer;
  transition: border 0.2s ease, transform 0.2s ease; /* Add smooth transition */
}

/* Hover and Active States for Thumbnails */
.thumbnail-bar img.active,
.thumbnail-bar img:hover {
  border-color: #715b1e;
  transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Responsive Adjustments */
@media (max-width: 478px) {
  model-viewer {
    height: 250px; /* Adjust the model viewer height on small screens */
  }

  .thumbnail-bar img {
    width: 60px; /* Slightly smaller thumbnails for small screens */
    height: 60px;
  }
}


/*
.custom-model-viewer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.thumbnail-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.thumbnail-bar img {
  cursor: pointer;
  transition: transform 0.3s ease;
  border: 2px solid transparent;
}

.thumbnail-bar img.active {
  border-color: #3498db;
  transform: scale(1.1);
}

.model-viewer {
  width: 100%;
  height: 500px;
}

.model-viewer:focus {
  outline: none;
}
*/

/** Woocommerce lightbox fix **/
.pswp {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  outline: none;
}