body{ width: 100%; background-color:#F4F6F9; font-family: Poppins; margin: 0; padding: 0; background-repeat: no-repeat;} /* JH Removed height: 100vh; */
	body.darktheme{background-color:#343434;}
	.header{ float:left; width:100%; text-align:center;}
	.header .inner{ float:none; width:100%; max-width:900px; display:inline-block; padding:20px; box-sizing:border-box; margin:auto; }
	.logo{float:left; width:100px;}
	.paymentlogo{float:right; width:150px;}
	img{ width:100%; }
	.paymentbuttons img{ width:auto; height:50px; }
	.content{ width:100%; display:inline-block; float:left; text-align:center; }
	.orangeinner{width:100%; max-width:900px; display:inline-block; box-sizing:border-box; margin:auto; background-color:transparent; height:auto;} /* JH Removed: padding:30px; */
	.whiteinner{background-color:transparent; max-width:500px; margin:auto; width:100%; height:100%; display:block; float:none; min-height:200px; padding-left: 10px;padding-right: 10px;box-sizing: border-box;} /* JH Removed: padding: 20px; */
	.totalblock{ width: 100%; max-width: 500px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; border-radius: 0; margin: 20px auto; height: auto; position: relative; padding: 20px 20px; display: flex; box-sizing:border-box;}
	.total{display:inline-block; width:50%; float:left; color:#fff; font-size:21px; text-align:left;}
	.price{display:inline-block; width:50%; float:right; color:#fff; font-size:21px; text-align:right;}
	.paymentbuttons { display: flex !important; width: 100%; text-align: center; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
	.paymentmethod{ display: block; width: 100%; margin: 20px auto 40px auto; max-width: 500px;}
	.paymentmethod span{ display: block; font-size:12px; color:#fff; margin:20px auto; text-align:center; width:100%; }
	/*.paymentbuttons button{ opacity:0.6; box-shadow: 2px 2px 5px #ccc; width: 100%; background-color:#fff; border-radius:20px; border:1px solid #666; padding:15px 20px; margin: 0 10px;}*/
	.paymentbuttons button{ color:#000; font-size:21px; height: 70px; opacity:1; width: 100%; background-color:#fff; border-radius:20px; border:2px solid #666; margin-bottom: 10px; font-family: 'Poppins';  }
	button:hover{cursor:pointer; opacity:1;}
	.paymentbuttons a{ margin:5px; }
	.footer{float:left; width:100%; text-align:center;}
	.footer .inner{font-weight:200; float:none; width:100%; max-width:900px; display:inline-block; padding:20px; box-sizing:border-box; margin:auto; color:#fff; font-size:14px; }
	.footer .inner a { font-weight: 400; color: #fff; text-decoration: none; display: inline-block; width: 100%; margin: 20px 10px; float: right; width: auto; }
	.footer .inner span{ float:left; width:auto; margin:20px 0; }
	.paynow{ display:block; margin:10px auto; }
	.paynow button { width: auto; background-color: #31b603; color: #fff; font-size: 21px; padding: 16px 60px; border-radius: 20px; border:2px solid #fff; }
	.paynow button:hover{ border:2px solid forestgreen; }
	.paymentform{ display:block; margin:20px auto; text-align:center; }

	.paymentbuttons button.active{ opacity: 1; border: 3px solid #000; box-sizing: border-box; }

	#payment_PP:before{     content: '';
    background-image: url(images/paypal.png);
    background-size: contain;
    background-position: left;
    padding-right: 45px;
    background-repeat: no-repeat;
    margin-left: -15px;
   }

    #payment_COD:before{     content: '';
    background-image: url(images/cash.png);
    background-size: contain;
    background-position: left;
    padding-right: 46px;
    margin-left: -10px;
    background-repeat: no-repeat;}

    #payment_CCTR:before{     content: '';
    background-image: url(images/card.png);
    background-size: contain;
    background-position: left;
    padding-right: 50px;
    margin-left: -15px;
    background-repeat: no-repeat;}

	#st-apple-pay {
		opacity: 1;
		background-color: #fff;
		border-radius: 20px;
		border: 1px solid #666;
		height: 60px;
		padding: 5px 20px;
		width: 100%;
		margin: 0 0 10px 0;
		align-items: center;
		justify-content: center;
	}

	#st-apple-pay a {
		height: 60px;
	}

	#st-google-pay { padding: 0px 0; width: 100%; height: 70px; }

	#st-apple-pay a{ height:50px; } 

    .apple-pay-btn { height: 40px !important; min-height:40px !important; }

    .apple-pay-btn-wrapper {height: 40px !important; }

    .gpay-button.white.pay.en{ background-size:150px; }


  .loading-screen {  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 9999;  }

  .loader { width: 40px; height: 40px; border: 4px solid #ccc; border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite;  }

body.darktheme .loading-screen { background: #121212; }
body.darktheme .loader { border: 4px solid #444; border-top: 4px solid #eee; }


.pay-timer-wrap {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 10;
}

.pay-timer {
	width: fit-content;
	min-width: 50px;
	padding: 12px 16px;
	border-radius: 18px;
	background: linear-gradient(180deg, #ffffff, #f6f7f9);
	box-shadow: 0 8px 24px rgba(0,0,0,.10);
	border: 1px solid rgba(0,0,0,.06);
	text-align: center;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #111827;
}

.pay-timer-label {
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	margin-bottom: 4px;
}

.pay-timer-time {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1;
}

.pay-timer.warning .pay-timer-time {
	color: #b45309;
}

.pay-timer.expired .pay-timer-time {
	color: #b91c1c;
}	


.failedlogo {
    background-image: url(images/secure_failed.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 120px;
    margin-bottom: 20px;
    margin-top: 100px;
    width: 100%;
}
.completelogo {
    background-image: url(images/secure_complete.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 120px;
    margin-bottom: 20px;
    margin-top: 100px;
    width: 100%;
}

.failedcontent { width: 94%; display: inline-block; float: left; text-align: center; margin-left: 3%; background-color:#c23b27 !important;}
.completecontent { width: 94%; display: inline-block; float: left; text-align: center; margin-left: 3%; background-color:#4db96b !important;}

.confirmation {
    font-size: 40px;
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    margin: 60px auto 20px auto;
    font-weight: 600;
}

.addtext{color:#fff; font-size:18px; font-weight:400; margin-bottom:80px;}

.homebtnfailed{    background-color: #fff;
    border: 0;
    color:#c23b27;
    font-weight: 600;
    font-size:18px;
    text-align: center;
    text-decoration: none;
    padding: 15px 45px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);}

    a.homebtnfailed{ color:#c23b27; }
	

  #cod-submit-order, #submit-order{ padding: 15px 30px; border-radius: 20px; width: 90%; max-width: 500px; font-size: 18px; font-family: 'Poppins';
    text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #000; border-color:#fff;}

.completebutton { position: fixed; bottom: 0; width: 100%; left: 0; background: #fff; padding-bottom: 10px; padding-top: 10px; box-shadow: 0px 0px 10px #ccc;}
	.darktheme .paymentmethod span { color: #fff; }
	.darktheme .totalblock { background-color: transparent; color: #fff; border-bottom: 2px solid #fff; }
	.darktheme .totalblock span{ color:#fff; }
	.darktheme .paymentbuttons button { box-shadow: 2px 2px 5px #000; }
	.darktheme label[for="st-card-number-input"] { color:#fff; }
	.darktheme #cod-submit-order, .darktheme #submit-order{ border: 2px solid #fff; }

	.backbtn{ float: left; margin: 20px 0 10px 0; font-weight:500; color:#000;}
	.darktheme .backbtn{ color:#fff; }
	.backbtn:before{ content:'<'; padding-right:5px;  }
	.backbtn:hover{ cursor:pointer; }

	.mainlogo{     background-image: url(images/secure.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: 60%;
    height: 40px;
    margin-bottom: 40px;
    margin-top: 40px;
    margin-left: 20px;}

        .content {
        width: 98%;
        display: inline-block;
        float: left;
        text-align: center;
        margin: 1%;
        background: #343434;
        border-radius: 20px;
    }

    .detailsblock{
    	float:left;
    	width:100%;
    	padding-left:20px;
    	margin-bottom:20px;
    }

    .detailsblock span{ display:block; width:100%; margin-bottom:5px; color:#fff; font-size:12px; text-align:left; }

    .loflogo{     display: block;
    width: 100%;
    text-align: Center;
    margin: 10px auto;
    background-image: url(images/loflogomain.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 50px;
    background-position: center; }

    .paymentform label{ color:#fff; }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

	/* Payment Form */

	.paymentform{ font-family:'Poppins', sans-serif; padding-bottom:100px; }

	iframe[id^=st-] { height: 110px; border: 0; width: 100%; max-width: 500px;}

	#st-card-number-input, #st-expiration-date-input, #st-security-code-input { border-radius: 20px; border-color: #666; padding: 20px 25px; }

	body.darktheme #st-card-number iframe label{ color:#fff !important; }

	button#submitorder{padding: 15px 40px; border-radius: 30px; font-size: 21px; border-color: #000; }


	@media screen and (max-width:900px){

	body { background-size: cover; background-position: right; }
	.logo{ width:70px; }
	.paymentlogo{ width:100px; }
	.content {  width: 100%; display: inline-block; float: left; text-align: center; margin-left: 0; height: auto; overflow: auto; border-radius: 0; max-width: 100%; overflow-x: hidden; }	
    .orangeinner{ }/* JH removed padding:15px; */
	.footer .inner{ font-size:10px; }
	.totalblock { width: 100%; max-width: 500px;}

	@media screen and (max-width:500px){
	.whiteinner{  } /* JH removed padding:20px 0; */
	.footer .inner a { display: block; width: 100%; margin: 0 0 30px 0; float: right; }
	.footer .inner span{ float:none; width:100%; margin:20px 0; }
	.paymentbuttons{ display:block; }
	.paymentbuttons button{width: 100%; text-align:center; margin-bottom:10px;}
	.paymentbuttons button img{ width:100px; }

	}