/*** CONFIG ***/
:root{

	--checkout-f-xs: var(--f-size-xs);
	--checkout-f-sm: var(--f-size-sm);
	--checkout-f-h6: var(--f-size-h6);
	--checkout-f-h5: var(--f-size-h5);
	--checkout-f-h4: var(--f-size-h4);
	--checkout-f-h3: var(--f-size-h3);
	--checkout-f-h2: var(--f-size-h2);
	--checkout-f-h1: var(--f-size-h1);

	--checkout-c-dark: var(--dark);
	--checkout-c-light: var(--light);
	--checkout-c-gray-300: var(--gray-300);
	--checkout-c-error: #eb0000;

	--checkout-size-xs: var(--size-xs);
	--checkout-size-sm: var(--size-sm);
	--checkout-size-md: var(--size-md);
	--checkout-size-lg: var(--size-lg);

	--checkout-radius: var(--radius-outside);

	--checkout-border-color: var(--gray-100);

	--checkout-primary: var(--primary);
}

.basic-page-cart{
	background-color: var(--checkout-c-light);
}
.basic-page-checkout{
	background-color: var(--checkout-c-light);
}

.mb-md{
	margin-bottom: var(--checkout-size-md);
}
.mb-lg{
	margin-bottom: var(--checkout-size-lg);
}


.f-sm{
	font-size: var(--checkout-f-sm);
}

.c-light{
	color: var(--checkout-c-gray-300);
}


.checkout{
	padding-bottom: var(--checkout-size-lg);
}

.checkout .panel{
	background-color: #fff;
	border: 1px solid var(--checkout-border-color);
	padding: var(--size-md);
	transition: border-color 0.3s;
	border-radius: var(--checkout-radius);
	box-shadow: 0px 3px 10px -6px rgba(0,0,0,.2);
}
.checkout .panel.error{
	border-color: var(--checkout-c-error);
}
.checkout .panel.borderless{
	border: 0;
	padding: 0;
	background-color: transparent;
	box-shadow: -3px 3px 6px -6px rgba(0,0,0,0);
}
.checkout .panel .row{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}
.checkout .panel .row .col-2{
	padding: 0 8px;
	width: 16.66%;
}
.checkout .panel .row .col-4{
	padding: 0 8px;
	width: 33.33%;
}
.checkout .panel .row .col-6{
	padding: 0 8px;
	width: 50%;
}
.checkout .panel .row .col-12{
	padding: 0 8px;
	width: 100%;
}

.checkout > .custom-row{
	display: flex;
	margin: 0 -15px;
}
.checkout > .custom-row .col-main{
	padding: 0 15px;
	flex: 1;
	width: 100%;
}

.checkout .col-summary .panel{
	background-color: #fff;
	width: 370px;
}
.checkout .col-summary .sticky{
	position: sticky;
	top: 80px;
}
.checkout .col-summary .panel h4{
	margin-bottom: var(--checkout-size-sm);
}
.checkout .col-summary .items .item{
	display: flex;
	align-items: center;
	padding: var(--checkout-size-xs) 0;
	border-bottom: 1px solid #efefef;
}

.checkout .col-summary .items .item .img{
	width: 50px;
	min-width: 50px;
	height: 50px;
	margin-right: 10px;
}
.checkout .col-summary .items .item .img img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.checkout .col-summary .items .item.img-cover .img img{
	object-fit: cover;
}
.checkout .col-summary .items .item.align-top{
	align-items: flex-start;
}

.checkout .col-summary .desc-items{
	flex: 1;
}
.checkout .col-summary .desc-item{
	display: flex;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid #efefef;
}
.checkout .col-summary .desc-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.checkout .col-summary .desc{
	padding-right: 10px;
	flex:1;
	font-size: var(--checkout-f-sm);
	/*line-height: 1.2;*/
}
.checkout .col-summary .desc .title{
	font-weight: 500;
}

.checkout .col-summary .desc span{
	margin-right: 5px;
}
.checkout .col-summary .desc .more{
	color: var(--checkout-c-gray-300);
	font-size: var(--checkout-f-xs);
}


.checkout .col-summary .price{
	font-size: var(--checkout-f-sm);
	min-width: 68px;
	font-weight: 500;
	text-align: right;
	/*line-height: 1.2;*/
}

.checkout .col-summary .summary-single-section{
	padding: var(--checkout-size-xs) 0;
	border-bottom: 1px solid #efefef;
	display: flex;
	align-items: center;
	font-size: var(--checkout-f-sm);
	display: none;
}
.checkout .col-summary .summary-single-section:last-child{
	padding-bottom: 0;
	border-bottom: 0;
}
.checkout .col-summary .summary-single-section.active{
	display: flex;
}
.checkout .col-summary .summary-single-section .desc{padding-left: 0;}

.checkout .col-summary .summary-single-section .desc .sm{
	color: var(--checkout-c-gray-300);
	font-size: var(--checkout-f-sm);
	/*line-height: 1.2;*/
}

.checkout .col-summary .summary-single-section.pay-now .desc{
	font-size: var(--checkout-f-h6);
	font-weight: 600;
}
.checkout .col-summary .summary-single-section.pay-now .price{
	font-size: var(--checkout-f-h6);
	font-weight: 600;
}

.checkout .col-summary .summary-price{
	padding-top: var(--checkout-size-xs);
	font-weight: 600;
	display: flex;
	/*line-height: 1.2;*/
}
.checkout .col-summary .summary-price span{
	margin-left: auto;
}

.checkout .col-summary .panel > div:last-child{
	padding-bottom: 0;
	border-bottom: 0;
}
.advance-payment .pay-now{
	font-size: initial;
}



/* inputs */

.floating-wrapper{
	position: relative;
}
.floating-wrapper .input-floating{
	border: 1px solid var(--checkout-border-color);
    display: block;
    width: 100%;
	padding: 16px 12px;
	outline: none!important;
	line-height: 20px;
	transition: border-color 0.3s;
	border-radius: var(--checkout-radius);
}

.floating-wrapper.error .input-floating{
	border-color: var(--checkout-c-error);
}


.floating-wrapper label{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 100%;
	padding: 16px 12px;
	overflow: hidden;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity .1s ease-in-out,transform .1s ease-in-out;
	margin:0;
	line-height: 1;
}
.floating-wrapper label.required::after{
	content: "*";
	margin-left: 3px;
}

.floating-wrapper .input-floating:focus, .floating-wrapper.filled .input-floating, .floating-wrapper.active .input-floating{
	padding: 24px 12px 8px 12px;
}
.floating-wrapper .input-floating:focus ~ label, .floating-wrapper.filled .input-floating ~ label, .floating-wrapper.active .input-floating ~ label{
	opacity: 0.8;
	transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
	font-size: var(--checkout-f-sm);
}

.floating-wrapper .helper{
	font-size: var(--checkout-f-sm);
	display: none;
	color: var(--checkout-c-error);
}
.floating-wrapper .helper.active{
	display: block;
	margin-top: 3px;
}





label.relative{
	position: relative;
}
label.relative .description{
	user-select: none;
	padding-left: 30px;
	/*line-height: 1.2;*/
}
label.relative .description{
	color: var(--base);
	font-weight: 500;
	cursor: pointer;
}
label.relative .description span{
	color: var(--checkout-c-gray-300);
	font-weight: 400;
}
label.relative .description a{
	color: var(--primary);
}
label.relative .description a:hover{
	text-decoration: underline;
}

#billing{
	display: none;
	margin-top: var(--checkout-size-md);
}

.items input{
	bottom: 2px;
	margin: auto;
	top: 2px;
}

.checkout input[type=checkbox],
.checkout input[type=radio] {
	--active: var(--primary);
	--active-inner: #fff;
	--focus: 0px var(--primary-lighter);
	--border: var(--primary);
	--border-hover: var(--primary);
	--background: #fff;
	--disabled: var(--gray-100);
	--disabled-inner: var(--gray-200);
	--disabled-border: var(--gray-200);
	position: absolute;
	top: 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 20px;
	padding: 0;
	outline: none;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	border: 1px solid var(--bc, var(--border));
	background: var(--b, var(--background));
	transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	border-radius: var(--checkout-radius);
}
.checkout input[type=checkbox]:after,
.checkout input[type=radio]:after {
	content: "";
	display: block;
	left: 0;
	top: 0;
	position: absolute;
	transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.checkout input[type=checkbox]:checked,
.checkout input[type=radio]:checked {
	--b: var(--active);
	--bc: var(--active);
	--d-o: .3s;
	--d-t: .6s;
	--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.checkout input[type=checkbox]:disabled,
.checkout input[type=radio]:disabled {
	--b: var(--disabled);
	cursor: not-allowed;
	opacity: 0.9;
	border-color: var(--disabled-border);
}
.checkout input[type=checkbox]:disabled:checked,
.checkout input[type=radio]:disabled:checked {
	--b: var(--disabled-inner);
	--bc: var(--border);
}
.checkout input[type=checkbox]:disabled + label,
.checkout input[type=radio]:disabled + label {
	cursor: not-allowed;
}
.checkout input[type=checkbox]:hover:not(:checked):not(:disabled),
.checkout input[type=radio]:hover:not(:checked):not(:disabled) {
	--bc: var(--border-hover);
}
.checkout input[type=checkbox]:focus,
.checkout input[type=radio]:focus {
	box-shadow: 0 0 0 var(--focus);
}
.checkout input[type=checkbox]:not(.switch),
.checkout input[type=radio]:not(.switch) {
	width: 20px;
	min-width: 20px;
}
.checkout input[type=checkbox]:not(.switch):after,
.checkout input[type=radio]:not(.switch):after {
	opacity: var(--o, 0);
}
.checkout input[type=checkbox]:not(.switch):checked,
.checkout input[type=radio]:not(.switch):checked {
	--o: 1;
}
.checkout input[type=checkbox] + label,
.checkout input[type=radio] + label {
	font-size: 14px;
	line-height: 21px;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	margin-left: 4px;
}

.checkout input[type=checkbox]:not(.switch):after {
	width: 6px;
	height: 12px;
	border: 2px solid var(--active-inner);
	border-top: 0;
	border-left: 0;
	left: 6px;
	top: 2px;
	transform: rotate(var(--r, 20deg));
}
.checkout input[type=checkbox]:not(.switch):checked {
	--r: 43deg;
}

.checkout input[type=radio] {
	border-radius: 50%;
}
.checkout input[type=radio]:after {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--active-inner);
	opacity: 0;
	transform: scale(0);
}
.checkout input[type=radio]:checked::after{
	transform: scale(0.35);
}
/* end */








/* shipping and payment */
.checkout .panel.items label{
	margin-bottom: var(--checkout-size-md);
	width: 100%;
}
.checkout .panel.items label.hidden{
	display: none;
}
.checkout .panel.items label:last-child{
	margin-bottom: 0;
}
.checkout .panel.items .row .col{
	padding: 0 10px;
	flex: initial;
}
.checkout .panel.items .row .col-img{
	width: auto;
	width: 60px;
	display: flex;
	justify-content: center;
    align-items: center;
}
.checkout .panel.items .row .col-img img{
	width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.checkout .panel.items .row .col-img.icon img{
	width: 60%;
    height: 60%;
}
.checkout .panel.items .row .col-text{
	flex: 1;
}
.checkout .panel.items .row .col-text .info{
	font-weight: 400;
	font-size: var(--checkout-f-sm);
	color: var(--checkout-c-gray-300);
	/*line-height: 1.2;*/
}
.checkout .panel.items .row .col-text .mob-price{
	display: none;
	margin-top: 3px;
	font-weight: 500;
	font-size: var(--checkout-f-sm);
}
.checkout .panel.items .row .col-price{
	width: 100px;
	text-align: right;
}
.checkout .panel.items .description{
	padding-left: 44px;
}
/* end */


/* advance-payment */
.col-summary .advance-payment{
	display: none;
	border-top: 1px solid #efefef;
	margin-top: var(--checkout-size-xs);
}
.panel.advance-payment{
	display: none;
}
.panel.advance-payment.active{
	display: block;
}
.advance-payment .items .item{
	border-bottom: 1px solid #efefef;
	margin-bottom: 6px;
    padding-bottom: 6px;
}
.advance-payment .items .item:last-child{
	margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.advance-payment .items .item .title{
	font-weight: 600;
	position: relative;
}
.advance-payment .items .item .title span{
	position: absolute;
	top: 0;
	right: 0;
}
.advance-payment .items .item .desc{
	font-size: var(--checkout-f-sm);
	color: var(--checkout-c-gray-300);
}
.advance-payment .items .item .sub-item{
	font-size: var(--checkout-f-sm);
	position: relative;
}
.advance-payment .items .item .sub-item::before{
	content:"-";
	padding-right: 5px;
}
.advance-payment .items .item .sub-item span{
	position: absolute;
	top: 0;
	right: 0;
}

.advance-payment-action-wrapper{
	display: flex;
	margin-top: 15px;
	border-top: 1px solid #efefef;
	padding-top: 15px;
}
.advance-payment-action-wrapper .desc{
	width: 50%;
}
.advance-payment-action-wrapper .chooser{
	width: 50%;
	display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.cardpay-chooser {
    border-radius: var(--checkout-radius);
    padding: 1px;
    display: flex;
    border: 1px solid #efefef;
}
.cardpay-chooser input[type=radio] + label {
    margin-left: 0;
    color: #fff;
    padding: 8px 10px;
    margin-bottom: 0;
    line-height: 1;
    font-size: initial;
    background-color: #fff;
    color: var(--dark);
}
.cardpay-chooser input[type=radio]:checked + label {
    color: #fff;
    background: #fff;
    border-radius: var(--checkout-radius);
    background-color: var(--checkout-primary);
}
.cardpay-chooser input{
	position: static!important;
	display: none!important;
}

#pay-later-info{
	display: none;
	font-size: var(--checkout-f-sm);
	color: var(--checkout-c-gray-300);
	margin-top: 3px;
}


/* end */













.row.gx-sm{
	--bs-gutter-x: 2rem;
}


.description .helper {
    font-size: var(--checkout-f-sm);
    display: none;
    color: #fff;
    font-weight: 400;
    background-color: var(--checkout-c-error);
    padding: 4px 8px;
}
.description .helper.active {
    display: inline-block;
    margin-top: 5px;
}


/* checkout-actions */
.checkout-actions{
	width: 100%;
	padding-top: var(--size-sm);
}
.checkout-actions .back{
	width: calc(30% - 5px);
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--checkout-border-color);
    color: var(--dark);
   	border-radius: var(--checkout-radius);
    transition: background-color 0.3s, border-color 0.3s;
}
.checkout-actions .back:hover{
	background-color: var(--checkout-border-color);
}
.checkout-actions .btn-default{
	width: 100%;
	text-align: center;
	display: block;
}
/* end */


.modal-checkout .modal-header{
	padding-bottom: 0!important;
}
.modal-checkout .text-main-1 .block{
	padding-left: 0;
	padding-right: 0;
}
.mb-block{
	margin-bottom: var(--size-md);
}
.modal-checkout .builder-content section:last-child{
	margin-bottom: 0;
}










@media (max-width: 1199.98px){
	.checkout .col-summary .panel{width: 340px;}
}

@media (max-width: 991.98px){
	.checkout > .custom-row{flex-wrap: wrap;}
	.checkout > .custom-row .col-main{width: 100%;}
	.checkout > .custom-row .col-summary{width: 100%;}
	.checkout .col-summary .panel{width: 100%;}
	.checkout .col-summary{margin-top: var(--size-md);}

	.checkout > .custom-row .col-summary{padding-top: var(--checkout-size-md);}

	
}

@media (max-width: 767.98px){
	.checkout .panel.items .description{padding-left: 30px;}
	.checkout .panel.items .row .col-price{width: 85px;}
}

@media (max-width: 575.98px){
	:root{
		--checkout-f-xs: 12px;
		--checkout-f-sm: 14px;
		--checkout-f-h6: 16px;
	}

	.checkout .panel .row .col-6{width: 100%;}
	.checkout .panel .row .col-4{width: 66.66%;}
	.checkout .panel .row .col-2{width: 33.33%!important;flex: 0 0 33.33%;max-width: 33.33%;}

	.checkout .panel #billing .row .col-xs-12{width: 100%;}

	.checkout .panel.items .row .col-img{width: 50px;}

	.checkout .panel.items .row .col{padding: 0 8px;}

	.checkout input[type=checkbox]:not(.switch), .checkout input[type=radio]:not(.switch){width: 18px;height: 18px;min-width: 18px;}
	.checkout input[type=checkbox]:not(.switch):after{left: 5px;top: 1px;}
	.checkout input[type=radio]:after{width: 16px; height: 16px;}

	.checkout .panel.items .description{padding-left: 26px;}
	.checkout .panel.items .row .col-price{width: 100%;}

	.checkout .panel.items .row .col-text .mob-price{display: block;}
	.checkout .panel.items .row .col-price{display: none;}

	.checkout .panel{padding: var(--size-sm);}
}