/*** 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-c-success: #00bf24;

	--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 .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 */
label{
	user-select: none;
}
.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: 18px 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:not(.error) .input-floating:focus{
    border-color: var(--gray-300);
}

.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;
}

select.input-floating{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor: pointer;
	background-color: #fff; /* ios fix */
	color: var(--dark)!important; /* ios fix */
}
.floating-wrapper.select::after{
	content: "";
	display: block;
	position: absolute;
	cursor: pointer;
	right: 12px;
	top: 50%;
	margin-top: -2px;
	width: 0;
	height: 0;
	border-top: 5px solid #000;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
}



label.relative{
	position: relative;
}
label.relative .description{
	user-select: none;
	padding-left: 30px;
}
label.relative .description{
	color: var(--checkout-c-dark);
	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);
}



.specialpayments .more{
	display: none;
	margin-top: var(--checkout-size-sm);
}
.specialpayments .more.active{display: block;}

.show-when-specialpayment{display: none;}
.show-when-specialpayment.active{display: block;}
.show-when-specialpayment.active .cod.hidden{display: block!important;}




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

.checkout input[type=checkbox],
.checkout input[type=radio] {
	--active: var(--primary);
	--active-inner: #fff;
	--focus: 1px solid 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: -1px;
	-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 {
	outline: var(--focus);
	outline-offset: 2px;
}
.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{
	width: 100%;
	margin-top: var(--size-xs);
}
.checkout .panel.items label.hidden{
	display: none;
}

.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;
	padding-right: 60px;
}
.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);
    white-space: nowrap;
}
.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;
}



/* online check-in */
.online-checkin [data-checkin-item]{
	border-bottom: 1px solid var(--gray-100);
	padding-bottom: 6px;
	margin-bottom: 6px;
}
.online-checkin [data-checkin-item]:last-child{
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.online-checkin [data-checkin-item] [data-bs-toggle='modal']{cursor: pointer;}
.online-checkin .more{display: none;}
.online-checkin .more.active{display: block;margin-top:var(--checkout-size-sm);}
.online-checkin .set-item{color: var(--primary);}
.online-checkin [data-checkin-item]:hover .set-item{text-decoration: underline;}
.online-checkin [data-checkin-item] .d-flex span.status svg{margin-right: var(--size-xs);}
.online-checkin [data-checkin-item] .d-flex span.data{margin-left: 4px;}
.online-checkin .status svg{
	width: 18px;
	height: 18px;
}
.online-checkin [data-checkin-address]{
	padding-top: var(--size-sm);
}

.online-checkin [data-checkin-item] [data-bs-toggle='modal'] .btn-default{display: block;}
.online-checkin [data-checkin-item] [data-bs-toggle='modal'] .btn-default span{
	min-width: 120px;
	text-align: center;
	display: inline-block;
}

.online-checkin .modal .modal-content .modal-body{
	padding:0;
}
@media (min-width: 767.98px){
	.online-checkin .modal .modal-lg{--bs-modal-width: 700px;}
}


.online-checkin .modal-content-wrapper{
	padding: var(--size-md);
}
.online-checkin .modal-content-wrapper hr{
	margin: var(--size-md) 0;
	border-top: 1px solid var(--gray-100);
	opacity: 1;
}
.online-checkin .steps-nav{
	height: 100%;
	padding: var(--size-md);
	/*border-left: 1px solid var(--gray-100);*/
	display: flex;
	flex-direction: column;
	background-color: var(--light);
}
.online-checkin .steps-nav .step-nav-item{
	margin-bottom: var(--size-sm);
	cursor: pointer;
}
.online-checkin .steps-nav .step-nav-item .num{
	width: 24px;
	height: 24px;
	min-width: 24px;
	/*border: 1px solid var(--dark);*/
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24px;
	transition: background-color .2s, border-color .2s, color .2s;
	background-color: var(--gray-200);
}
.online-checkin .steps-nav .step-nav-item .row{
	align-items: center;
	font-weight: 500;
}
.online-checkin .steps-nav .step-nav-item.active .num{
	background-color: var(--primary);
	color: #fff;
	font-size: var(--f-size-sm);
	border-color: var(--primary);
}

.online-checkin [data-step]{display: none;}
.online-checkin [data-step].active{display: block;}

.input-floating[readonly]{pointer-events: none;background-color: var(--light);}
/* end */





@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.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);}
}

@media (max-width: 450px){
	.advance-payment-action-wrapper{flex-direction: column;}
	.advance-payment-action-wrapper .chooser{width: 100%;}
	.cardpay-chooser{width: 100%;margin-top: var(--checkout-size-xs);}
	.cardpay-chooser input[type=radio] + label{flex:1;text-align: center;}
}