I have the following HTML and CSS to display the product price info:
<div class="mt-32">
                                <div id="discount-widget-container" role="region" aria-label="Discounted price information">
                                    <div class="discount-widget-price-row">
                                        <div class="discount-widget-discounted-price" aria-live="polite" aria-atomic="true">
                                            <?=$prices['special_price'] == 0 ? $hkdNBF->formatCurrency($prices['min_price'], "HKD") : $hkdNBF->formatCurrency($prices['special_price'], "HKD").($hasMultipleVariants ? " 起" : "")?>
                                    </div>
                                    <?php if(!$hasMultipleVariants) : ?>
                                    <?php if($discount_amount != 0) : ?>
                                    <div class="discount-widget-original-price"><?=$hkdNBF->formatCurrency($prices['min_price'], "HKD")?></div>
                                    <?php endif ;?>
                                    <?php endif ;?>
                                    </div>
                                    <div class="discount-widget-info-row">
                                        <?php if($discount_amount != 0) : ?>
                                            <span class="discount-widget-tag discount-widget-diff-tag" aria-live="polite" aria-atomic="true">
                                                <?="最高可節省 " . $hkdNBF->formatCurrency($discount_amount, "HKD") . " (-" . $discount_percentage . "%" . ")" ?>
                                            </span>
                                        <?php endif; ?>
                                        
                                    </div>
                                </div>
                            </div>

CSS:
/*The Discounted Widget for Product Page*/
#discount-widget-container {
    background: white;
    border: 1px solid #ddd;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
  }

  /* First row container */
  .discount-widget-price-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .discount-widget-discounted-price {
    font-size: 2.2rem;
    color: #e74c3c;
    font-weight: bold;
  }
  .discount-widget-original-price {
    font-size: 1.1rem;
    color: #999;
    text-decoration: line-through;
    align-self: flex-end;
  }

  /* Second row container */
  .discount-widget-info-row {
    display: flex;
    gap: 15px;
  }

  /* Tag style */
  .discount-widget-tag {
    padding: 6px 14px;
    border-radius: 20px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-block;
    white-space: nowrap;
  }

  .discount-widget-diff-tag {
    background-color: #3498db; /* Blue */
  }

  .discount-widget-percent-tag {
    background-color: #e67e22; /* Orange */
  }

  /* Responsive styling */

  /* Tablet: 480px to 767px */
  @media (max-width: 767px) and (min-width: 480px) {
    #discount-widget-container {
      padding: 18px 25px;
    }
    .discount-widget-discounted-price {
      font-size: 1.9rem;
    }
    .discount-widget-original-price {
      font-size: 1rem;
    }
    .discount-widget-tag {
      font-size: 0.9rem;
      padding: 5px 12px;
    }
  }

  /* Mobile: under 480px */
  @media (max-width: 479px) {
    #discount-widget-container {
      padding: 16px 20px;
    }
    .discount-widget-price-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 14px;
    }
    .discount-widget-discounted-price {
      font-size: 2rem;
    }
    .discount-widget-original-price {
      font-size: 1rem;
      align-self: flex-start;
    }
    .discount-widget-info-row {
      flex-direction: column;
      gap: 10px;
    }
    .discount-widget-tag {
      width: 100%;
      text-align: center;
      white-space: normal;
      font-size: 1rem;
      padding: 8px 0;
    }
  }


I want to add the button with styling for the rating by with the condition from php (<?php if ($product['product'][0]['is_purchased'] == 1 && !empty($my_rating))):
<button 
  type="button"
  class="btn btn-info rating-comp-open-btn"
  data-product-id="42"
  data-user-id="99"
  data-product-name="Cool Jacket"
  data-store-name="Fashion Hub"
  data-order-number="ORD987654321"
  data-purchase-date="2024-05-28T11:30:00"
>
  Write a Review
</button>