/**
 * Uiuxhero Plugin Styles
 */

/* View Details Button Styles */
.uiuxhero-view-details-btn {
  display: block;
  width: 100%;
  margin-top: 10px !important;
  background-color: #410516 !important; /* Deep burgundy color */
  color: #ffffff !important;
  text-align: center;
  padding: 12px !important;
  border-radius: 25px !important; /* Rounded sides */
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  transition: all 0.3s ease;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.uiuxhero-view-details-btn:hover {
  background-color: #2d0310 !important; /* Darker burgundy on hover */
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.uiuxhero-view-details-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure proper spacing in product loop items */
.products .product .uiuxhero-view-details-btn {
  margin-bottom: 15px;
}

/* Price Format Styles - Product Cards and Single Product */
.uiuxhero-price-wrapper {
  display: inline-block;
  line-height: 1.6;
}

.uiuxhero-regular-price {
  color: #999;
  text-decoration: line-through;
  font-size: 0.95em;
  opacity: 0.8;
}

.uiuxhero-arrow {
  color: #410516;
  font-weight: bold;
  padding: 0 3px;
  font-size: 1.1em;
}

.uiuxhero-sale-price {
  color: #410516;
  font-weight: 700;
  text-decoration: none;
  font-size: 20px;
}

.uiuxhero-save-inline {
  color: #410516;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  margin-left: 5px;
}

/* Save Amount Styles on Product Detail Page (Additional Box) */
.uiuxhero-save-amount {
  background-color: transparent;
  border-left: 3px solid #410516;
  padding: 6px 12px;
  margin: 10px 0;
  border-radius: 2px;
  display: inline-block;
  font-size: 14px;
}

.uiuxhero-save-amount .save-text {
  color: #333;
  font-weight: 600;
}

.uiuxhero-save-amount .save-price {
  color: #410516;
  font-weight: 700;
  font-size: 18px;
}

.uiuxhero-save-amount .save-percentage {
  color: #410516;
  font-weight: 600;
  margin-left: 5px;
}

/* Custom Star Rating Styles */
.uiuxhero-rating-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  line-height: 1.4;
}

.uiuxhero-rating-wrapper .uiuxhero-stars {
  color: #ffa500;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}

.uiuxhero-rating-wrapper .star.filled {
  color: #ffa500;
}

.uiuxhero-rating-wrapper .star.half {
  color: #ffa500;
  opacity: 0.6;
}

.uiuxhero-rating-wrapper .star.empty {
  color: #ddd;
}

.uiuxhero-rating-wrapper .uiuxhero-rating-number {
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

.uiuxhero-rating-wrapper .uiuxhero-review-count {
  color: #666;
  font-size: 13px;
  font-weight: 400;
}

/* No reviews style */
.uiuxhero-rating-wrapper.no-reviews {
  margin: 8px 0;
}

.uiuxhero-rating-wrapper .uiuxhero-no-reviews {
  color: #410516;
  font-size: 13px;
  font-style: italic;
  text-decoration: none;
  transition: all 0.3s ease;
}

.uiuxhero-rating-wrapper .uiuxhero-no-reviews:hover {
  color: #2d0310;
  text-decoration: underline;
}

/* Responsive adjustments for tablets */
@media (max-width: 1024px) {
  .uiuxhero-view-details-btn {
    padding: 10px 18px !important;
    font-size: 14px;
  }

  .uiuxhero-price-wrapper {
    font-size: 24px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-stars {
    font-size: 15px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-rating-number {
    font-size: 13px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-review-count {
    font-size: 12px;
  }

  .uiuxhero-save-amount {
    font-size: 15px;
    padding: 12px 14px;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .uiuxhero-whatsapp-btn {
    padding: 12px 22px !important;
    font-size: 15px;
  }
}

/* Product card button order - Desktop & Mobile (Buy Now First) */
.product-grid-item .wd-bottom-actions,
.product-grid-item .wd-buttons,
.product-grid-item .wd-product-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px; /* Adds space between the ordered buttons */
}

/* Force "Buy Now" to always go to the left visually */
.product-grid-item .wd-buy-now-btn {
  order: -1 !important;
  flex: 1 1 auto;
}

/* Ensure Add to Cart fits to the right */
.product-grid-item .wd-add-btn {
  order: 1 !important;
  flex: 1 1 auto;
}

/* On Mobile Only: Convert "Add to Cart" to an Icon instead of text */
@media (max-width: 768px) {
  .product-grid-item .wd-add-btn {
    flex: 0 0 auto; /* Prevent button from expanding on mobile */
  }

  /* Hides the "Add to cart" text securely with max specificity */
  body .product-grid-item .wd-add-btn a span,
  body .product-grid-item .wd-add-btn .add_to_cart_button span,
  body .product-grid-item .wd-add-btn .button span,
  body .product-grid-item .wd-add-btn a::after,
  body .product-grid-item .wd-add-btn .add_to_cart_button::after,
  body .product-grid-item .wd-add-btn .button::after {
    display: none !important;
  }

  body .product-grid-item .wd-add-btn a,
  body .product-grid-item .wd-add-btn .add_to_cart_button,
  body .product-grid-item .wd-add-btn .button {
    position: relative;
    padding: 0 !important;
    width: 40px !important; /* Fixed dimension for circular button */
    height: 40px !important; /* Fixed dimension for circular button */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important; /* Fully rounded border */
    font-size: 0 !important; /* Hides un-wrapped text */
    line-height: 0 !important;
    color: transparent !important; /* Extra measure to hide text */
    text-indent: -9999px !important; /* Push any raw text out of bounds */
    overflow: hidden !important;
  }

  body .product-grid-item .wd-add-btn a::before,
  body .product-grid-item .wd-add-btn .add_to_cart_button::before,
  body .product-grid-item .wd-add-btn .button::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0;
    inset: 0 !important;
    margin: auto !important;
    width: 40px !important;
    height: 40px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='24' height='24' rx='12' fill='white'/%3E%3Crect x='0.5' y='0.5' width='24' height='24' rx='12' stroke='%23333333'/%3E%3Cpath d='M7 7H8.03125L9.75 15.25M9.75 15.25C9.38533 15.25 9.03559 15.3949 8.77773 15.6527C8.51987 15.9106 8.375 16.2603 8.375 16.625C8.375 16.9897 8.51987 17.3394 8.77773 17.5973C9.03559 17.8551 9.38533 18 9.75 18C10.1147 18 10.4644 17.8551 10.7223 17.5973C10.9801 17.3394 11.125 16.9897 11.125 16.625C11.125 16.2603 10.9801 15.9106 10.7223 15.6527C10.4644 15.3949 10.1147 15.25 9.75 15.25H15.25M15.25 15.25C14.8853 15.25 14.5356 15.3949 14.2777 15.6527C14.0199 15.9106 13.875 16.2603 13.875 16.625C13.875 16.9897 14.0199 17.3394 14.2777 17.5973C14.5356 17.8551 14.8853 18 15.25 18C15.6147 18 15.9644 17.8551 16.2223 17.5973C16.4801 17.3394 16.625 16.9897 16.625 16.625C16.625 16.2603 16.4801 15.9106 16.2223 15.6527C15.9644 15.3949 15.6147 15.25 15.25 15.25ZM15.7656 13.1875H9.40625M11.8125 9.0625H8.5895M15.9375 7V11.125M13.875 9.0625H18' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-indent: 0 !important; /* Reset indent just for the icon */
    transition: none !important; /* disabled hover transition */
    margin-top: -41px !important;
    margin-left: -1px !important;
  }

  body .product-grid-item .wd-add-btn a:hover::before,
  body .product-grid-item .wd-add-btn .add_to_cart_button:hover::before,
  body .product-grid-item .wd-add-btn .button:hover::before {
    /* No hover change since SVG has solid borders and white background */
  }
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  .uiuxhero-view-details-btn {
    padding: 12px 16px !important;
    font-size: 14px;
    margin-top: 8px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .uiuxhero-price-wrapper {
    font-size: 22px;
  }

  .uiuxhero-save-inline {
    display: block;
    margin-top: 4px;
    margin-left: 0 !important;
  }

  .uiuxhero-rating-wrapper {
    gap: 4px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-stars {
    font-size: 14px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-rating-number {
    font-size: 12px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-review-count {
    font-size: 11px;
  }

  .uiuxhero-save-amount {
    font-size: 14px;
    padding: 10px 12px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
    text-align: center;
  }

  .uiuxhero-save-amount .save-price {
    font-size: 16px;
    display: inline-block;
  }

  .uiuxhero-save-amount .save-percentage {
    display: inline-block;
    margin-left: 4px;
  }

  .uiuxhero-whatsapp-btn {
    padding: 14px 20px !important;
    font-size: 15px;
    width: 100%;
    display: flex;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .uiuxhero-whatsapp-container {
    margin: 15px 0;
    width: 100%;
  }

  .uiuxhero-whatsapp-btn .whatsapp-icon {
    width: 18px;
    height: 18px;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .uiuxhero-view-details-btn {
    padding: 10px 14px !important;
    font-size: 13px;
    margin-top: 8px !important;
  }

  .uiuxhero-regular-price,
  .uiuxhero-sale-price,
  .uiuxhero-save-inline {
    display: block;
    margin: 2px 0;
  }

  .uiuxhero-arrow {
    display: none;
  }

  .uiuxhero-rating-wrapper {
    flex-wrap: wrap;
    gap: 3px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-stars {
    font-size: 13px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-rating-number {
    font-size: 11px;
  }

  .uiuxhero-rating-wrapper .uiuxhero-review-count {
    font-size: 10px;
  }

  .uiuxhero-save-amount {
    font-size: 13px;
    padding: 8px 10px;
    margin: 10px 0;
  }

  .uiuxhero-save-amount .save-text {
    display: block;
    margin-bottom: 4px;
  }

  .uiuxhero-save-amount .save-price {
    font-size: 15px;
  }

  .uiuxhero-save-amount .save-percentage {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }

  .uiuxhero-whatsapp-btn {
    padding: 12px 16px !important;
    font-size: 14px;
    gap: 6px;
  }

  .uiuxhero-whatsapp-btn .whatsapp-icon {
    width: 16px;
    height: 16px;
  }
}

/* Compatibility with common themes */
.woocommerce ul.products li.product .uiuxhero-view-details-btn,
.woocommerce-page ul.products li.product .uiuxhero-view-details-btn {
  display: block;
  width: 100%;
}

/* Fix for themes with flex layouts */
.products .product {
  display: flex;
  flex-direction: column;
}

.products .product .button {
  margin-top: auto;
}

/* WhatsApp Button Styles */
.uiuxhero-whatsapp-container {
  margin: 20px 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.uiuxhero-whatsapp-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #25d366 !important; /* WhatsApp brand color */
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 44px; /* Minimum touch target size for mobile */
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.uiuxhero-whatsapp-btn:hover,
.uiuxhero-whatsapp-btn:focus,
.uiuxhero-whatsapp-btn:visited {
  background-color: #128c7e !important; /* Darker WhatsApp green on hover */
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
  text-decoration: none !important;
}

.uiuxhero-whatsapp-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
  color: #ffffff !important;
}

.uiuxhero-whatsapp-btn .whatsapp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
}

/* Ensure text is visible - override theme styles */
.uiuxhero-whatsapp-btn span,
.uiuxhero-whatsapp-btn:before,
.uiuxhero-whatsapp-btn:after {
  color: #ffffff !important;
}

a.uiuxhero-whatsapp-btn,
a.uiuxhero-whatsapp-btn:link,
a.uiuxhero-whatsapp-btn:visited,
a.uiuxhero-whatsapp-btn:hover,
a.uiuxhero-whatsapp-btn:active,
a.uiuxhero-whatsapp-btn:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Touch-friendly improvements */
.uiuxhero-view-details-btn,
.uiuxhero-whatsapp-btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  min-height: 44px; /* Apple's recommended minimum touch target */
}

/* Download Invoice Button Styles */
.uiuxhero-invoice-button-wrapper {
  margin: 30px 0;
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border: 2px dashed #410516;
  border-radius: 8px;
}

.uiuxhero-download-invoice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #410516 !important;
  color: #ffffff !important;
  padding: 14px 30px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(65, 5, 22, 0.3) !important;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uiuxhero-download-invoice-btn:hover,
.uiuxhero-download-invoice-btn:focus {
  background-color: #2d0310 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(65, 5, 22, 0.4) !important;
  text-decoration: none !important;
}

.uiuxhero-download-invoice-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(65, 5, 22, 0.3) !important;
}

.uiuxhero-download-invoice-btn svg {
  vertical-align: middle;
}

/* Responsive for invoice button */
@media (max-width: 768px) {
  .uiuxhero-invoice-button-wrapper {
    margin: 20px 0;
    padding: 15px;
  }

  .uiuxhero-download-invoice-btn {
    padding: 12px 24px !important;
    font-size: 15px !important;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .uiuxhero-download-invoice-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* WhatsApp Order Button Styles (Shortcode) */
.whatsapp-order-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: #25d366 !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 44px;
  margin: 10px 0;
}

.whatsapp-order-btn:hover,
.whatsapp-order-btn:focus {
  background-color: #128c7e !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
  text-decoration: none !important;
}

.whatsapp-order-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
}

.whatsapp-order-btn svg {
  flex-shrink: 0;
}
.uiuxhero-save-amount {
  background-color: #f8f9fa;
  border-left: 4px solid #410516;
  padding: 12px 15px;
  margin: 5px 0;
  border-radius: 4px;
  display: flex;
  font-size: 16px;
  line-height: 1.6;
  gap: 10px;
  align-items: center;
}
/* Responsive WhatsApp Button */
@media (max-width: 768px) {
  .whatsapp-order-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
    width: 100%;
    display: flex;
  }
}

@media (max-width: 480px) {
  .whatsapp-order-btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
  .uiuxhero-arrow {
    display: none !important;
    display: none;
  }
  .uiuxhero-price-wrapper {
    font-size: 15px !important;
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap;
  }
}

/* Fix double variations (Hides secondary swatch plugin or select dropdowns if multiple exist) */
.variations td.value > *:nth-child(2) {
  display: none !important;
}
.variations td.value select {
  display: none !important;
}

/* Ensure variation stock is visible */
.woocommerce-variation-availability {
  display: block !important;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32; /* Greenish for instock */
}

/* Minimalist adjustments for Single Product Price */
.single-product .summary .uiuxhero-price-wrapper {
  font-size: 1.1em;
}
.single-product .summary .uiuxhero-sale-price {
  font-size: 26px;
  letter-spacing: -0.5px;
}