Mini Shell

<?php
if(isset($_POST['method_type'])){
	//($_REQUEST['method_type'] == '1') ? header("location:../renew-paypalpage.php?usf=".$userid) : header("location:../offline.php?usf=".$userid);

	if($_POST['pay_mode']==1){$path="../payhere_pay.php?usf=".$userid."&qcd=".$userRess['reg_code'];$pay_status='Online';}else{$path="../offline.php?usf=".$userid;$pay_status='Offline';}
	?>
	<script>
		window.location = "<?=$path?>";
	</script>
	<?php
}

?>


<style>
/* Type RAdio btns */
.radioex{width:20px;height:20px;}.radio-div label{font-size: 20px;font-weight: normal !important; cursor:pointer}.form-group {margin-bottom: 20px !important;}
.radio-div{
	display: grid;
	grid-template-columns: 1fr 2fr;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.custom-radios input, .custom-radios input::before, .custom-radios input::after{
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -o-transition: .2s;
}
.custom-radios{
  margin-top: -8px;
}
.custom-radios input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  width: 100px;
  height: 29px;
  padding: 2px;
  border: 1px solid #999;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  background-color: #ddd;
  outline: none !important;
}
.custom-radios input::before{
  content: '';
  position:absolute;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
}
.custom-radios .on-ln::after{
  content: 'Online';
}
.custom-radios .off-ln::after{
  content: 'Offline';
}
.custom-radios input::after{
  position:absolute;
  margin-top: 3px;
  margin-left: 30px;
  font-size: 14px;
}
.custom-radios input:checked{
  background-color: #5cb85c;
  border: 1px solid #3e8c3e;
}
.custom-radios input:checked::before{
  margin-left: 72px;
}
.custom-radios input:checked::after{
  color: #fff;
  margin-left: 20px;
}
.iconsbtn-cont{
  
}
.submit-and-reset{
  margin-top: 20px;
}
@media screen and (max-width: 768px){
  .submit-and-reset{
    margin-top: 44px !important;
    margin-bottom: 30px;
  }
  .custom-radios input{
    margin-bottom: 20px;
  }
  .iconsbtn-cont{
    
  }
  /*
  .radio-btns-set{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 0px;
  }
  */
}

.payment-type-comp{
	position: relative;
	left: 0;
	top: 0;
	display: grid;
}
.payment-type-comp form{
	text-align: center;
	display: grid;
	grid-template-rows: 1fr 2fr 1fr;
}
</style>

<div class="payment-type-comp exp-alert-comp" id="paymentTypeComp">
	<form method="post" action="#" name="">
		<div class=""><h1>Select a Payment Method</h1></div>
		<div class="radio-btns-set">
			<br>
			<div class="radio-div custom-radios">
				<label>
					<input type="radio" name="pay_mode" class="radioex on-ln" value="1" checked>
				</label> 
				<div class="iconsbtn-cont">
					<img src="../img/pay_icn.png" alt="" style="width: 300px;">
				</div>
			</div><br>

			<div class="radio-div custom-radios">
				<label>
					<input type="radio" name="pay_mode" class="radioex off-ln" value="2">
				</label>
				<div class="iconsbtn-cont">
					<img src="../img/bank-dip.jpg" alt="" style="width: 300px;">
				</div>

			</div>

		</div>

		<div>
			<button class="upgBtn" name="method_type" type="submit">Continue</button>
		</div>
	</form>
</div>