/* Product Page Design Plugin Styles */


/* product page */

.pewc-group-content-wrapper .pewc-field-label{
    margin-top: 0;
  }
  
  
  .woocommerce div.product form.cart button.single_add_to_cart_button, .woocommerce div.product form.cart button[name=add-to-cart]  {

    grid-column: 2 / -1;
    display: block;
    width: 100%;
  }



    .woocommerce div.product form.cart button.single_add_to_cart_button:hover, .woocommerce div.product form.cart button[name=add-to-cart]:hover {
    background: var(--wp--preset--gradient--fading-black-top);
  }

  .woocommerce div.product form.cart div.quantity{
    float: left;
    margin-right: 2rem;
  }

  .woocommerce div.product form.cart div.quantity input{
    float: left;
    margin: 0;

  }

  .woocommerce.pewc-has-extra-fields .single_variation_wrap .variations_button {
    display: grid;
  }

  .single-product table.variations{
    height: 5rem;
  }

  .single-product .woocommerce-variation.single_variation {
    float :right;
    margin-bottom: 0;
    padding: 5px;
    grid-column: 1 / -1;
  }

  .single-product .woocommerce-variation.single_variation .price{
    align-items: center;
  }

  .has-extra-fields .woocommerce-variation .woocommerce-variation-price {
    display : flex;
  }


  .wp-block-add-to-cart-form .woocommerce-variation-price {
    display: flex;
}
  .wp-block-add-to-cart-form .woocommerce-variation-price .price {
    align-items: center;
    flex: 1;
    flex-direction: row-reverse;
    justify-content: space-between;
}
  
  
  .single-product table.variations tr{
    display: flex;
    align-items: baseline;
    gap: 2rem;
  }
  
  .single-product table.variations tr th, .single-product table.variations tr td{
    padding: 0;
  }
  
  .single-product .quantity input{
    margin-bottom: 1.5rem;
    padding: 13px 9px !important;
  }

/* Remove empty paragraphs from post excerpt on product pages */
.single-product .wp-block-post-excerpt p:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Product Extras For WooCommerce - Tooltip for descriptions */
.pewc-preset-style .pewc-item-field-wrapper {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

.pewc-preset-style .pewc-item-field-wrapper .pewc-form-field {
  width: auto;
  height: 49.9219px;
} 
.single-product form.cart .pewc-product-extra-groups li input[type="text"]{
  width: auto;
}

/* Hide the description paragraph */
.pewc-item-field-wrapper .pewc-description {
  display: none;
}

/* Style the label to accommodate the info icon */
.pewc-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Info icon next to label */
.pewc-field-label-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.94rem;
}

.pewc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: help;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}

.pewc-info-icon:hover {
  background-color: var(--wp--preset--color--accent, #275bad);
}

/* Tooltip container */
.pewc-tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background-color: #333;
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  width: 300px;
  max-width: 90vw;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

/* Tooltip arrow - pointing down at the icon */
.pewc-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 6px solid transparent;
  border-top-color: #333;
}

/* Show tooltip on hover over icon or label text container */
.pewc-field-label-text:hover .pewc-tooltip,
.pewc-info-icon:hover ~ .pewc-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Show tooltip when hovering over the info icon specifically */
.pewc-field-label-text:has(.pewc-info-icon:hover) .pewc-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 480px){
  .pewc-form-field{
    max-width: 8rem;
  }

  .pewc-item-field-wrapper{
    gap: 1rem;
  }

  .single-product table.variations tr th, .single-product table.variations tr{
    gap: 1rem;
    align-items: center;
  }
}