{debug}
<style>
    .whmp_order_combo.whmp_radio_combo {
        position: relative;
        padding: 15px 20px;
        background: #fff;
        border: solid 1px #4480c5;
        border-radius: 5px;
    }

    .whmp_order_combo.whmp_radio_combo label.whmpress_radio {
        display: block;
        background: #fff;
        border: 1px solid #dfecff;
        border-radius: 4px;
        -webkit-transition: .2s;
        transition: .2s;
        padding: 15px;
        padding-left: 39px;
        font-weight: 300;
        color: #16438a;
        position: relative;
        margin-bottom: 5px;
        padding-bottom: 0;

    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio:hover{
        border-color: #4480c5;
        -webkit-box-shadow: 0 2px 4px rgba(68, 128, 197, .44);
        box-shadow: 0 2px 4px rgba(68, 128, 197, .44);
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked .whmpress_creative_free_domain {
        background-color: #d9efe7;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked {
        background-color: #f1f4fb;
        border-color: #4480c5;
        -webkit-box-shadow: 0 2px 4px rgba(68, 128, 197, .44);
        box-shadow: 0 2px 4px rgba(68, 128, 197, .44);
    }

    .whmp_order_combo.whmp_radio_combo label.whmpress_radio span.creative_discount {
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        background-color: #9EB8DC;
        border-radius: 10px;
        -webkit-transition: .2s;
        transition: .2s;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio:hover span.creative_discount,
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked span.creative_discount{
        background: #4389E2;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio input[type=radio] {
        display: none;
    }

    .whmp_order_combo.whmp_radio_combo label.whmpress_radio span.whcom_circle_radio {
        position: absolute;
        top: 20px;
        left: 10px;
        height: 18px;
        width: 18px;
        color: white;
        background-color: #fff;
        border: 1px solid #2e578b;
        border-radius: 50%;
        -webkit-transition: .2s;
        transition: .2s;
    }

    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked span.whcom_circle_radio:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2e578b;
        -webkit-transition: .2s;
        transition: .2s;
    }

    .whmpress_creative-gator-extended {
        width: 100%;
        max-width: 682px;
        margin: 0 auto;
    }
    .whmpress_creative-gator-extended .whmpress_creative_title{
        margin-top: 0px;
        margin-bottom: 30px;
        color: #fff;
        font-size: 22px;
        line-height: 30px;
        font-weight: 400;
    }
    .whmpress_creative-gator-extended ul{
        list-style: none;
        margin: 0;
        color: #b9d0ef;
    }
    .whmpress_creative-gator-extended ul li{
        position: relative;
        margin-bottom: 10px;
        font-weight: 300;
    }
    .whmpress_creative-gator-extended ul li.creative-text{
        padding-left: 24px;
    }
    .whmpress_creative-gator-extended ul li.creative-text i{
        position: absolute;
        left: 0;
        top: 3px;
    }
    .whmpress_creative-gator-extended .whmpress_creative_heading{
        text-align: center;
    }
    .whmpress_creative-gator-extended .whmpress_creative_heading h4 {
        margin: 0px;
        color: #B9D0EF;
        font-size: 16px;
        line-height: 27px;
        font-weight: 600;
        letter-spacing: 1.6px;
    }
    .whmpress_creative-gator-extended .whmpress_creative_heading h2 {
        margin-top: 0;
        margin-bottom: 40px;
        color: #fff;
        font-size: 35px;
        line-height: 46px;
        font-weight: 700;
    }
    .whmpress_creative-gator-extended .whmpress_creative_button{
        text-align: center;
    }
    .whmpress_creative-gator-extended .whmpress_creative_button button {
        border-color: transparent;
        background: #FF6A17;
        color: #fff;
        border-radius: 5px;
        font-size: 23px;
        font-weight: 700;
    }
    .whmpress_creative-gator-extended .whmpress_creative_total {
        margin: 15px 0;
        color: #2E578B;
        font-weight: 700;
        font-size: 18px;
        text-align: center;
    }
    .whmpress_creative-gator-extended .whmpress_creative_free_domain{
        font-size: 14px;
        line-height: 15px;
        color: #40b186;
        display: block;
        font-weight: 400;
        text-align: center;
        margin-top: 5px;
        padding: 10px 0 10px 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        vertical-align: middle;
        margin: auto -27px;
        left: -12px;
        position: relative;
    }
</style>


<div class="whmpress_creative-gator-extended">
    <div class="whmpress_creative_heading">
        <h4 class="">You added Plan {$product_name}</h4>
        <h2>Choose the duration of your subscription:</h2>
    </div>
    <div class="whcom_row">
        <div class="whcom_col_xl_5">
            <h3 class="whmpress_creative_title">
                <span>
                    <span>The longeryour subscription, the </span>
                </span>
                <strong>
                        <span>more you save</span>
                </strong>
            </h3>
            <ul>
                <li>This plans include:</li>
                {foreach $highlighted_description as $single_line_description}
                <li class="creative-text"><i class="fa fa-check"></i>{$single_line_description}</li>
                {/foreach}
            </ul>
        </div>
        <div class="whcom_col_xl_7">
            <div class="whmp_order_combo whmp_radio_combo">
                <form action="{$action_url}">
                    <input type="hidden" value="add" name="a">
                    <input type="hidden" value="{$pid}" name="pid">
                    <input type="hidden" value="{$currency_id}" name="currency">

                    <div class="whmpress_radio_container">
                        <div class="whcom_row">
                            <!--<input type="radio" value="">Select Duration</input>-->

                            {foreach from=$reverse_data item=whmp}
                                {assign var=unique_id value=10|mt_rand:100}
                                <div class="whcom_col_lg_12 radio-labels">
                                    <label for="{$unique_id}" data-value="{$whmp.prefix}{$whmp.product_price}{$whmp.suffix}" class="whmpress_radio">
                                        <span class="whcom_circle_radio"></span>
                                        <input name="billingcycle" class="whcom_op_input wcop_input" type="radio"
                                               value="{$whmp.duration}" id="{$unique_id}"
                                               data-option-index="">{$whmp.num_duration}  {if $whmp.discount}
                                            <span class="creative_discount">-{$whmp.discount}%</span>
                                        {/if}
                                        <span style="background-color: transparent; float: right; font-size: 16px; text-align: right;"><span style="font-size: 13px;"> {if $whmp.total_monthly_amount ne ''} <span>From</span> <del>{$whmp.prefix}{$whmp.total_monthly_amount}</del> <span>for</span><br>{/if}</span>
                                            {$whmp.prefix}<strong>{if $whmp.sudo_product_price ne ''}{($whmp.sudo_product_price.sudo_price)|round:2 } {else} {$whmp.product_price} {/if}</strong> {$whmp.suffix} / month*</span>
                                        <span style="clear: both; display: block;"></span>
                                        {if $whmp.is_free_domain  eq 'true'}<span class="whmpress_creative_free_domain">FREE Domain available  <a class="domain-info" href="#" data-toggle="modal" data-target="#free-domain"></a></span>{/if}
                                    </label>
                                </div>
                            {/foreach}
                        </div>
                    </div>
                    <div id="total_to_pay" class="whmpress_creative_total">
                       <!-- Don't remove this div. It's not an empty. Total amount to pay is here  -->
                    </div>
                    <div class="whmpress_creative_button">
                        {$product_order_button}
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>
<script>
    jQuery('label.whmpress_radio').on('change', function () {
        //== Displaying total amount that is to paid
        jQuery('#total_to_pay').text('Total' +" " + jQuery(this).data('value'));

        //== select relevant option
        jQuery('label.whmpress_radio').removeClass('whmpress_checked');
        jQuery(this).closest('label').addClass("whmpress_checked");
    });

    //== First label remain checked by default
    jQuery(document).ready(function(){
        var radio_label_selector = jQuery(".radio-labels");
        jQuery('#total_to_pay').text('Total' +" " + radio_label_selector.find('label').first().data('value'));
        radio_label_selector.find('label').first().addClass('whmpress_checked');
    });
</script>