<template lang="">
    <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[20px]">

        <!-- Subtotal, Shipping and tax  -->
       <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[20px]">
            <div class="tdprb-w-full tdprb-flex tdprb-justify-center tdprb-items-start">
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[20px]">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Subtotal</span>
                </div>
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-end tdprb-items-center">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[500] tdprb-text-[22px] tdprb-leading-[30px] tdprb-text-">{{roundOffPrice(totalPrice)}}</span>
                </div>
            </div>
            <div class="tdprb-w-full tdprb-flex tdprb-justify-center tdprb-items-start">
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[20px]">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Shipping</span> 
                    <span ref="tdprbToolTip1" class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-relative tdprb-cursor-pointer">
                        <svg @mouseover="toggleTooltip('Shipping')" @mouseleave="toggleTooltip('')" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14480)">
                            <path d="M7 0C3.13111 0 0 3.13075 0 7C0 10.8688 3.13075 14 7 14C10.8689 14 14 10.8693 14 7C14 3.13116 10.8693 0 7 0ZM7.71884 9.7787C7.71884 9.99986 7.39635 10.221 7.00014 10.221C6.5855 10.221 6.29068 9.99986 6.29068 9.7787V6.26812C6.29068 6.01013 6.58552 5.83502 7.00014 5.83502C7.39635 5.83502 7.71884 6.01013 7.71884 6.26812V9.7787ZM7.00016 4.98739C6.57631 4.98739 6.24463 4.67411 6.24463 4.32395C6.24463 3.97381 6.57634 3.66975 7.00016 3.66975C7.4148 3.66975 7.74654 3.97381 7.74654 4.32395C7.74654 4.67411 7.41478 4.98739 7.00016 4.98739Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14480">
                            <rect width="14" height="14" :fill="white()"/>
                            </clipPath>
                            </defs>
                        </svg>            
                        <Tooltip  v-if="activeTooltip == 'Shipping'" title="Shipping" :description="descriptionShipping" @closeTooltip="closeTooltip" />
                    </span>
                </div>
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-end tdprb-items-center">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Free</span>
                </div>
            </div>
            <div class="tdprb-w-full tdprb-flex tdprb-justify-center tdprb-items-start">
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[20px]">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Tax</span> 
                    <span ref="tdprbToolTip2"  class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-relative tdprb-cursor-pointer">
                        <svg  @mouseover="toggleTooltip('Tax')" @mouseleave="toggleTooltip('')"  width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14480)">
                            <path d="M7 0C3.13111 0 0 3.13075 0 7C0 10.8688 3.13075 14 7 14C10.8689 14 14 10.8693 14 7C14 3.13116 10.8693 0 7 0ZM7.71884 9.7787C7.71884 9.99986 7.39635 10.221 7.00014 10.221C6.5855 10.221 6.29068 9.99986 6.29068 9.7787V6.26812C6.29068 6.01013 6.58552 5.83502 7.00014 5.83502C7.39635 5.83502 7.71884 6.01013 7.71884 6.26812V9.7787ZM7.00016 4.98739C6.57631 4.98739 6.24463 4.67411 6.24463 4.32395C6.24463 3.97381 6.57634 3.66975 7.00016 3.66975C7.4148 3.66975 7.74654 3.97381 7.74654 4.32395C7.74654 4.67411 7.41478 4.98739 7.00016 4.98739Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14480">
                            <rect width="14" height="14" :fill="white()"/>
                            </clipPath>
                            </defs>
                        </svg>
                        <Tooltip  v-if="activeTooltip == 'Tax'" title="Tax" :description="descriptionTax" @closeTooltip="closeTooltip" />

                    </span>
                </div>
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-end tdprb-items-center">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Calculated at next step</span>
                </div>
            </div>
       </div>
        <!-- Subtotal, Shipping and tax  -->

        <!-- Apply a discount code -->
        <!-- <div class="tdprb-w-full tdprb-h-[55px] tdprb-flex tdprb-justify-center tdprb-items-center tdprb-border-y tdprb-border-y-borderColor">
            <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[20px] tdprb-px-[10px]">
                <span class="tdprb-flex tdprb-justify-center tdprb-items-center">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_162_14521)">
                        <path d="M15 22.6051L17.7064 24.028L17.1895 21.0144L19.379 18.8801L16.3532 18.4404L15 15.6986L13.6468 18.4404L10.621 18.8801L12.8104 21.0144L12.2936 24.028L15 22.6051Z" :stroke="outerSpace" stroke-width="2" stroke-miterlimit="10"/>
                        <mask id="mask0_162_14521" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="30">
                        <path d="M0 3.8147e-06H30V30H0V3.8147e-06Z" :fill="white()"/>
                        </mask>
                        <g mask="url(#mask0_162_14521)">
                        <path d="M27.3633 21.6211V18.1055C27.3633 17.1346 28.1503 16.3477 29.1211 16.3477V11.0742H0.878906V16.3477C1.84975 16.3477 2.63672 17.1346 2.63672 18.1055V21.6211C2.63672 22.5918 1.84975 23.3789 0.878906 23.3789V28.6523H29.1211V23.3789C28.1503 23.3789 27.3633 22.5918 27.3633 21.6211Z" :stroke="outerSpace" stroke-width="2" stroke-miterlimit="10"/>
                        <path d="M26.1637 11.0742L24.7773 8.67299C24.2919 7.83223 24.5799 6.75721 25.4207 6.27182L22.784 1.70484L6.55579 11.0742" :stroke="outerSpace" stroke-width="2" stroke-miterlimit="10"/>
                        </g>
                        </g>
                        <defs>
                        <clipPath id="clip0_162_14521">
                        <rect width="30" height="30" :fill="white()"/>
                        </clipPath>
                        </defs>
                    </svg>                        
                </span>
                <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[500] tdprb-text-[16px] tdprb-leading-[19.2px] tdprb-text-textSecondaryColor">Apply a discount code</span>
            </div>
        </div> -->
        <!-- Apply a discount code -->

        <!-- Estimated Total -->
        <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[10px] tdprb-px-[10px] tdprb-pt-[10px] tdprb-border-t tdprb-border-t-borderColor">
            <div class="tdprb-w-full tdprb-flex tdprb-justify-center tdprb-items-start">
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[20px]">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[500] tdprb-text-[22px] tdprb-leading-[30px] tdprb-text-">Estimated Total</span>
                </div>
                <div class="tdprb-w-1/2 tdprb-h-full tdprb-flex tdprb-justify-end tdprb-items-center">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[500] tdprb-text-[22px] tdprb-leading-[30px] tdprb-text-">{{roundOffPrice(totalPrice)}}</span>
                </div>
            </div>
            <div class="tdprb-w-full tdprb-flex tdprb-justify-center tdprb-items-start">
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-[10px]">
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-">Financing from</span> 
                    <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[600] tdprb-text-[16px] tdprb-leading-[19.2px] tdprb-text-themeColor">$35/mo</span>
                </div>
            </div>
        </div>
        <!-- Estimated Total -->

        <!-- Proceed to shopping bag button  -->
        <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[20px]">
            <button :disabled="addToCartVar.loading" @click="add_to_cart_func" class="tdprb-w-full tdprb-h-[60px]  tdprb-flex tdprb-justify-center tdprb-items-center tdprb-text-backgroundColor tdprb-bg-themeColor hover:tdprb-text-themeColor hover:tdprb-bg-backgroundColor hover:tdprb-border hover:tdprb-border-borderColor tdprb-rounded tdprb-font-lato tdprb-text-[22px] tdprb-leading-[30px] tdprb-font-[500] tdprb-text-center"> 
                {{ addToCartVar.loading ? 'Adding to cart...' : configTexts.checkout_button_text }}
            </button>
        </div>
        <!-- Proceed to shopping bag button  -->

        <!-- Order security, guarantee and delivery contents -->
        <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[10px] tdprb-px-[10px]">
            <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Your order is protected by the Rare Carat Money-Back Guarantee</span> 
            <span class="tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Ships insured by Mon, Mar 18 with FedEx overnight one day delivery. Need it sooner? </span> 
        </div>
        <!-- Order security, guarantee and delivery contents -->

        <!-- Your order includes -->
        <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[20px] tdprb-px-[10px] tdprb-border-b tdprb-border-borderColor tdprb-pb-[30px]">
            <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center">
                <span class="tdprb-font-lato tdprb-font-[400] tdprb-text-[14px] tdprb-leading-[16.8px] tdprb-text-textSecondaryColor">Your order includes:</span>
            </div>
            <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[10px]">
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14488)">
                            <path d="M4.13 5.67L3.15 6.65L6.3 9.8L13.3 2.8L12.32 1.82L6.3 7.84L4.13 5.67ZM12.6 7C12.6 10.08 10.08 12.6 7 12.6C3.92 12.6 1.4 10.08 1.4 7C1.4 3.92 3.92 1.4 7 1.4C7.56 1.4 8.05 1.47 8.54 1.61L9.66003 0.49C8.82 0.21 7.91 0 7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7H12.6Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14488">
                            <rect width="14" height="14" :fill="prussianBlue()"/>
                            </clipPath>
                            </defs>
                        </svg> 
                    </span>
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Free 30 Day Returns</span> 
                </div>
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14488)">
                            <path d="M4.13 5.67L3.15 6.65L6.3 9.8L13.3 2.8L12.32 1.82L6.3 7.84L4.13 5.67ZM12.6 7C12.6 10.08 10.08 12.6 7 12.6C3.92 12.6 1.4 10.08 1.4 7C1.4 3.92 3.92 1.4 7 1.4C7.56 1.4 8.05 1.47 8.54 1.61L9.66003 0.49C8.82 0.21 7.91 0 7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7H12.6Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14488">
                            <rect width="14" height="14" :fill="prussianBlue()"/>
                            </clipPath>
                            </defs>
                        </svg> 
                    </span>
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Free 90-Day Resizing</span> 
                </div>
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14488)">
                            <path d="M4.13 5.67L3.15 6.65L6.3 9.8L13.3 2.8L12.32 1.82L6.3 7.84L4.13 5.67ZM12.6 7C12.6 10.08 10.08 12.6 7 12.6C3.92 12.6 1.4 10.08 1.4 7C1.4 3.92 3.92 1.4 7 1.4C7.56 1.4 8.05 1.47 8.54 1.61L9.66003 0.49C8.82 0.21 7.91 0 7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7H12.6Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14488">
                            <rect width="14" height="14" :fill="prussianBlue()"/>
                            </clipPath>
                            </defs>
                        </svg> 
                    </span>
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Free Lifetime Warranty</span> 
                </div>
            </div>
        </div>
        <!-- Your order includes -->

        <!-- Why Ring Builder? -->
        <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[20px] tdprb-px-[10px]">
            <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center">
                <span class="tdprb-font-lato tdprb-font-[500] tdprb-text-[22px] tdprb-leading-[30px] tdprb-text-">Why Ring Builder?</span>
            </div>
            <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-center tdprb-items-center tdprb-gap-[10px]">
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14513)">
                            <path d="M5.35498 10.8389C5.12886 10.8389 4.94482 10.6549 4.94482 10.4288C4.94482 10.2022 4.76122 10.0186 4.53467 10.0186C4.30812 10.0186 4.12451 10.2022 4.12451 10.4288C4.12451 10.9651 4.46951 11.422 4.9492 11.5901V11.9492C4.9492 12.1758 5.13281 12.3594 5.35936 12.3594C5.58591 12.3594 5.76952 12.1758 5.76952 11.9492V11.5871C6.24461 11.4167 6.58545 10.9619 6.58545 10.4288C6.58545 9.75029 6.03345 9.19829 5.35498 9.19829C5.12886 9.19829 4.94482 9.01425 4.94482 8.78813C4.94482 8.5619 5.12886 8.37798 5.35498 8.37798C5.5811 8.37798 5.76514 8.5619 5.76514 8.78813C5.76514 9.01468 5.94875 9.19829 6.17529 9.19829C6.40184 9.19829 6.58545 9.01468 6.58545 8.78813C6.58545 8.25504 6.24461 7.80023 5.76952 7.62965V7.02734C5.76952 6.8008 5.58591 6.61719 5.35936 6.61719C5.13281 6.61719 4.9492 6.8008 4.9492 7.02734V7.62666C4.46951 7.79478 4.12451 8.25172 4.12451 8.78813C4.12451 9.4666 4.67651 10.0186 5.35498 10.0186C5.5811 10.0186 5.76514 10.2025 5.76514 10.4288C5.76514 10.6549 5.5811 10.8389 5.35498 10.8389Z" :fill="prussianBlue()"/>
                            <path d="M1.67181 13.3302C2.52534 13.7871 3.69717 14 5.35938 14C6.71182 14 7.72974 13.8599 8.52057 13.5619C8.74648 13.8295 9.08411 14 9.46094 14H12.7695C13.448 14 14 13.448 14 12.7695C14 12.4547 13.8809 12.1671 13.6857 11.9492C13.881 11.7313 14 11.4438 14 11.1289C14 10.814 13.8809 10.5265 13.6857 10.3086C13.881 10.0907 14 9.80316 14 9.48828C14 9.1734 13.8809 8.88586 13.6857 8.66797C13.881 8.45007 14 8.16254 14 7.84766C14 7.16919 13.448 6.61719 12.7695 6.61719H9.46094C9.42099 6.61719 9.38147 6.61922 9.34248 6.62306C8.93083 6.12447 8.44847 5.70641 7.91698 5.38576C8.11169 5.16808 8.23047 4.88086 8.23047 4.56641C8.23047 4.07625 7.94229 3.65221 7.52647 3.4545L8.21028 1.35768C8.25098 1.23271 8.2294 1.09589 8.15228 0.989609C8.07506 0.883224 7.95169 0.820312 7.82031 0.820312H6.51935C6.34995 0.342865 5.89407 0 5.35938 0C4.82457 0 4.36848 0.342865 4.19919 0.820312H2.89844C2.76706 0.820312 2.64369 0.883224 2.56647 0.989609C2.48935 1.09589 2.46777 1.23271 2.50847 1.35768L3.19228 3.4545C2.77646 3.65221 2.48828 4.07625 2.48828 4.56641C2.48828 4.88107 2.60716 5.1685 2.8022 5.38629C1.15656 6.37953 0 8.26593 0 10.3086C0 11.7197 0.562469 12.7362 1.67181 13.3302ZM13.1797 9.48828C13.1797 9.7144 12.9957 9.89844 12.7695 9.89844H9.46094C9.23482 9.89844 9.05078 9.7144 9.05078 9.48828C9.05078 9.26216 9.23482 9.07812 9.46094 9.07812H12.7695C12.9957 9.07812 13.1797 9.26216 13.1797 9.48828ZM13.1797 11.1289C13.1797 11.355 12.9957 11.5391 12.7695 11.5391H9.46094C9.23482 11.5391 9.05078 11.355 9.05078 11.1289C9.05078 10.9028 9.23482 10.7188 9.46094 10.7188H12.7695C12.9957 10.7188 13.1797 10.9028 13.1797 11.1289ZM12.7695 13.1797H9.46094C9.23482 13.1797 9.05078 12.9957 9.05078 12.7695C9.05078 12.5434 9.23482 12.3594 9.46094 12.3594H12.7695C12.9957 12.3594 13.1797 12.5434 13.1797 12.7695C13.1797 12.9957 12.9957 13.1797 12.7695 13.1797ZM13.1797 7.84766C13.1797 8.07378 12.9957 8.25781 12.7695 8.25781H9.46094C9.23482 8.25781 9.05078 8.07378 9.05078 7.84766C9.05078 7.62154 9.23482 7.4375 9.46094 7.4375H12.7695C12.9957 7.4375 13.1797 7.62154 13.1797 7.84766ZM6.98825 4.97656H3.73061C3.72697 4.97646 3.72334 4.97656 3.71971 4.97656H3.71875C3.49263 4.97656 3.30859 4.79253 3.30859 4.56641C3.30859 4.34071 3.49188 4.157 3.71747 4.15636H3.71864C3.7196 4.15636 3.72057 4.15625 3.72153 4.15625H6.99712C6.99808 4.15625 6.99915 4.15636 7.00011 4.15636H7.00128C7.22687 4.157 7.41016 4.34071 7.41016 4.56641C7.41016 4.79253 7.22612 4.97656 7 4.97656H6.99872C6.9953 4.97656 6.99178 4.97646 6.98825 4.97656ZM4.53906 1.64062C4.76561 1.64062 4.94922 1.45702 4.94922 1.23047C4.94922 1.00435 5.13326 0.820312 5.35938 0.820312C5.58549 0.820312 5.76953 1.00435 5.76953 1.23047V2.05078C5.76953 2.27733 5.95314 2.46094 6.17969 2.46094C6.40623 2.46094 6.58984 2.27733 6.58984 2.05078V1.64062H7.25517L6.70232 3.33594H4.01643L3.46358 1.64062H4.53906ZM3.79875 5.79688H6.9184C7.53951 6.05632 8.10561 6.46487 8.57771 6.9922C8.36302 7.21384 8.23047 7.51547 8.23047 7.84766C8.23047 8.16254 8.34956 8.45007 8.54482 8.66797C8.34956 8.88586 8.23047 9.1734 8.23047 9.48828C8.23047 9.80316 8.34956 10.0907 8.54482 10.3086C8.34956 10.5265 8.23047 10.814 8.23047 11.1289C8.23047 11.4438 8.34956 11.7313 8.54482 11.9492C8.34956 12.1671 8.23047 12.4547 8.23047 12.7695C8.23047 12.778 8.2309 12.7863 8.23111 12.7946C7.53726 13.0566 6.61313 13.1797 5.35938 13.1797C3.83752 13.1797 2.78874 12.9977 2.05901 12.607C1.21391 12.1545 0.820312 11.4242 0.820312 10.3086C0.820312 8.37402 2.04138 6.53046 3.79875 5.79688Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14513">
                            <rect width="14" height="14" :fill="prussianBlue()"/>
                            </clipPath>
                            </defs>
                        </svg>     
                    </span>
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">100% Money-Back Guarantee</span> 
                </div>
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_162_14500)">
                            <path d="M13.9309 5.1265L11.6433 1.45115C11.5598 1.31694 11.4129 1.23535 11.2549 1.23535H2.74517C2.58718 1.23535 2.44032 1.31694 2.35673 1.45115L0.0691666 5.1265C-0.040645 5.30295 -0.0179226 5.5311 0.124674 5.68223L6.66711 12.621C6.75357 12.7127 6.87404 12.7647 7.00001 12.7647C7.12599 12.7647 7.24646 12.7127 7.33292 12.6209L13.8754 5.68223C14.0178 5.53094 14.0407 5.30295 13.9309 5.1265ZM7.00004 11.6403L1.03223 5.31088L2.99938 2.15038H11.0008L12.9678 5.31088L7.00004 11.6403Z" :fill="prussianBlue()"/>
                            <path d="M13.5425 4.91071H0.457642V5.82573H13.5425V4.91071Z" :fill="prussianBlue()"/>
                            <path d="M4.69964 5.32442L5.40513 1.7822L4.50763 1.60345L3.77562 5.27881C3.75839 5.36573 3.76662 5.45572 3.79957 5.53808L6.57516 12.477L7.42475 12.1373L4.69964 5.32442Z" :fill="prussianBlue()"/>
                            <path d="M10.2536 5.24207L9.49106 1.67346L8.59633 1.8647L9.32971 5.29651L6.57581 12.1363L7.42449 12.4779L10.2307 5.50864C10.2646 5.42401 10.2727 5.33113 10.2536 5.24207Z" :fill="prussianBlue()"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_162_14500">
                            <rect width="14" height="14" :fill="prussianBlue()"/>
                            </clipPath>
                            </defs>
                        </svg>
                    </span>
                    <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Authenticity Inspection</span> 
                </div>
                <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-flex-col tdprb-justify-start tdprb-items-center tdprb-gap-1">
                    <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3">
                        <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_162_14516)">
                                <path d="M13.6245 2.97945C13.6245 2.80184 13.5172 2.6418 13.3529 2.5743L7.16649 0.0328501C7.05984 -0.01095 6.94026 -0.01095 6.83361 0.0328501L0.647171 2.5743C0.482893 2.64178 0.37561 2.80184 0.37561 2.97945V11.0206C0.37561 11.1982 0.482866 11.3582 0.647171 11.4257L6.83361 13.9671C6.93911 14.0105 7.0577 14.0114 7.16594 13.9671C7.17123 13.9654 6.93701 14.0614 13.3529 11.4257C13.5172 11.3582 13.6245 11.1982 13.6245 11.0206V2.97945ZM7.00005 5.08421L4.72058 4.14779L9.64676 1.99882L12.0787 2.99787L7.00005 5.08421ZM1.25161 3.66974L3.21827 4.47766V6.75702C3.21827 6.9989 3.41438 7.19502 3.65627 7.19502C3.89815 7.19502 4.09427 6.9989 4.09427 6.75702V4.83753L6.56205 5.85131V12.9085L1.25161 10.727V3.66974ZM7.00005 0.911508L8.51844 1.53528L3.59226 3.68425L1.92143 2.99785L7.00005 0.911508ZM7.43805 5.85131L12.7485 3.66974V10.727L7.43805 12.9085V5.85131Z" :fill="prussianBlue()"/>
                                </g>
                                <defs>
                                <clipPath id="clip0_162_14516">
                                <rect width="14" height="14" :fill="prussianBlue()"/>
                                </clipPath>
                                </defs>
                            </svg>                            
                        </span>
                        <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-lato tdprb-font-[400] tdprb-text-[15px] tdprb-leading-[18px] tdprb-text-textSecondaryColor">Discreet, Quality Packaging:</span> 
                    </div>
                    <div class="tdprb-w-full tdprb-h-full tdprb-flex tdprb-justify-start tdprb-items-center tdprb-gap-3 tdprb-pl-[25px]">
                        <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center">
                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.11667 2.18749C5.47167 1.21332 4.31083 0.944991 3.57583 1.35332C2.22833 2.09999 1.75 4.75999 1.75 6.99999C1.75 9.23999 2.22833 11.9 3.57583 12.6467C3.81413 12.7744 4.08132 12.8387 4.35167 12.8333C5.34442 12.7306 6.29532 12.3795 7.11667 11.8125C8.925 10.7508 12.25 8.11416 12.25 6.99999C12.25 5.88582 8.925 3.24916 7.11667 2.18749Z" :fill="prussianBlue()"/>
                            </svg>                            
                        </span>
                        <span class="tdprb-h-full tdprb-flex tdprb-justify-center tdprb-items-center tdprb-font-poppins tdprb-font-[500] tdprb-text-[10px] tdprb-leading-[15px] tdprb-text-textSecondaryColor">Watch Unboxing Video</span> 
                    </div>
                </div>
            </div>
        </div>
        <!-- Why Ring Builder? -->

    </div>
</template>
<script>
export default {
    props: {
        configTexts: {
            type: Object,
        },
        data: {
            type: Object,
        },
        addToCartVar: {
            type: Object,
        }
    },
    emits: ['addToCart'],
    data() {
        return {
            descriptionShipping:`No Description!`,
            descriptionTax:`The actual tax amount will be calculated based on the applicable state/province and local sales taxes from your delivery address.`,
            activeTooltip: null,
        }
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    computed: {
        totalPrice() {
            return Number.parseFloat(this.data.diamond.price) + Number.parseFloat(this.data.setting.total_price);
        }
    },
    methods: {
        white() {
            return this.$colors().white;
        },
        prussianBlue() {
            return this.$colors().prussianBlue;
        },
        outerSpace() {
            return this.$colors().outerSpace;
        },
        roundOffPrice(price) {
            return this.$roundToTwoDecimals(price)
        },
        increasedPrice(price) {
            return this.$increasePriceByPercentage(price, 20)
        },
        add_to_cart_func() {
            this.$emit('addToCart')
        },
        toggleTooltip(title) {
            this.activeTooltip = this.activeTooltip == title ? null : title;
        },
        closeTooltip() {
            this.activeTooltip = null;
        },
        handleClickOutside(event) {
            if (this.$refs.tdprbToolTip && !this.$refs.tdprbToolTip.contains(event.target)) {
                this.closeTooltip()
            }
        },
    },

    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },
}
</script>
<style lang="">

</style>