/*
    --theme-primary: #314e92;
    --theme-dark: #2f3261;
*/

.checkout-page {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #f1f3f6;
}

.checkout-container {
	display: flex;
	background-color: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.1);
	max-width: 1100px;
	margin-inline: auto;
}

.checkout-address-section {
	width: 60%;
	padding-right: 15px;
}

.checkout-billing-section {
	width: 40%;
}

.checkout-section-border {
	/* border: 1px solid #e1e1e1; */
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 15px;
}

.checkout-section-border:last-child {
	margin-bottom: 0;
}

.checkout-page .section-title {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 0.6em;
}

.checkout-page .section-sub-title {
	font-size: 16px;
	text-align: center;
	color: #000;
}

.checkout-page .section-text {
	font-weight: 500;
	font-size: 15px;
	margin-bottom: 1em;
}

.checkout-page .section-text:last-child {
	margin-bottom: 0;
}

.account-options {
	display: flex;
	/* padding: 0 30px; */
}

.checkout-account-btn {
	padding: 7px 25px;
	display: block;
	border: 2px solid var(--primary_fg);
	margin-right: 20px;
	text-align: center;
	cursor: pointer;
	border-radius: 0.3rem;
}

.checkout-account-btn.btn-fill {
	background-color: var(--primary_fg);
	color: #fff;
}

.checkout-account-btn.btn-outline {
	background-color: #fff;
	color: var(--primary_fg);
}

.checkout-account-btn span {
	display: block;
}

.checkout-account-btn .btn-text {
	font-weight: 400;
	font-size: 16px;
}

.checkout-account-btn .btn-bold {
	font-weight: 600;
	font-size: 14px;
}

.delivery-address-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-gap: 15px;
	align-items: flex-start;
}

.delivery-address-item {
	padding: 0;
	margin-bottom: 0;
	background-color: #f8f8f8;
	border: 0;
}

.delivery-address-content {
	padding: 10px;
}

.address-title {
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 1em;
}

.address-text {
	font-size: 13px;
	line-height: 1.3;
	margin-bottom: 10px;
}

.delivery-selection-options {
	border-top: inherit;
	padding: 10px;
	font-size: 12px;
	background-color: #ffffde;
	text-align: center;
	overflow: hidden;
}

.delivery-selection-options .delivery-option-check,
.delivery-selection-options .delivery-option-label {
	display: inline-block;
	vertical-align: middle;
}

.delivery-selection-options .delivery-option-label {
	margin-right: 10px;
	font-size: 16px;
	font-weight: 600;
}

.add-address-item {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	min-height: 130px;
	padding: 30px;
}

.new-address-btn {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 15px auto;
	min-height: 30px;
	cursor: pointer;
}

.new-address-icon {
	width: 50px;
	height: 50px;
	background-image: url(../images/icons/location.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.new-address-btn:hover .new-address-icon {
	animation: flip 0.5s ease-in-out 0s 1;
}

@keyframes flip {
	0%,
	32%,
	64%,
	100% {
		transform: translate(-50%, -50%) rotate(0);
	}

	16%,
	48%,
	80% {
		transform: translate(-50%, -50%) rotateY(-90deg);
	}
}

.checkout-cart-items {
	margin-bottom: 10px;
}

.checkout-cart-product {
	display: flex;
	padding: 10px 0;
}

.checkout-cart-product:first-child {
	padding-top: 0;
}

.checkout-cart-product + .checkout-cart-product {
	border-top: 1px solid #ddd;
}

.cart-item-image {
	width: 100px;
	text-align: center;
	margin-right: 15px;
	flex: 0 0 80px;
	height: 100%;
}

.cart-item-image img {
	display: block;
	width: 100%;
}

.cart-item-ship-details {
	width: 100%;
}

.cart-item-title {
	font-weight: 500;
}

.cart-item-title a {
	color: #314e92;
	text-decoration: none;
}

.cart-variant-option {
	margin-top: 5px;
	font-size: 12px;
}

.product-pricing-group {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	display: flex;
	font-size: 14px;
	align-items: center;
}

.product-pricing-group .cart-item-price {
	width: 40%;
}

.product-pricing-group .cart-item-price del {
	font-size: 12px;
}

.product-pricing-group .cart-item-price p {
	font-weight: 500;
	color: #000;
}

.product-pricing-group .qty {
	text-align: center;
	width: 30%;
}

.product-pricing-group .cart-qty-change,
.product-pricing-group .cart-qty-change1 {
	width: 22px;
}

.product-pricing-group .product-details-group {
	margin-top: 0;
}

.product-pricing-group .qty select {
	padding: 5px 10px;
	border: 1px solid #666;
	border-radius: 2px;
}

.product-pricing-group .sub_total {
	font-weight: 500;
	color: #000;
	font-size: 14px;
	width: auto;
	margin-left: auto;
	white-space: nowrap;
	text-align: right;
}

.cart-item-row {
	display: flex;
	/* padding: 10px 0 0; */
}

.cart-item-row .store {
	font-size: 12px;
}

.cart-item-row .cross {
	margin-left: auto;
	font-size: 18px;
	cursor: pointer;
	color: red;
}

.cart-item-row .cross i {
	display: block;
}

.add-coupon-group {
	margin-bottom: 10px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}

.add-coupon-input-group {
	display: flex;
}

.select-coupon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 7px 15px;
	font-size: 15px;
	cursor: pointer;
	border: 2px solid var(--primary_fg);
	border-radius: 4px;
	background-color: var(--primary_fg);
	color: #fff;
	transition: ease 0.25s;
	transition-property: background-color, color;
}

.select-coupon-btn:hover {
	background-color: #fff;
	color: var(--primary_fg);
}

.select-coupon-icon {
	font-size: 20px;
	/* color: var(--theme-primary); */
	margin-right: 5px;
}

.select-coupon-icon i {
	display: block;
}

.select-coupon-text {
	font-weight: 500;
}

html.modal-active {
	overflow: hidden;
}

.coupon-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	place-items: center;
	padding: 10px;
	z-index: 100;
	display: none;
	opacity: 0;
	transition: ease 0.25s opacity;
	overflow: auto;
	overflow-x: hidden;
}

.coupon-modal.active {
	display: grid;
}

.coupon-modal.show {
	opacity: 1;
}

.coupon-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.7;
}

.coupon-modal-content {
	position: relative;
	z-index: 1;
	width: 650px;
	height: auto;
	max-width: 95vw;
	max-height: 100%;
	border-radius: 6px;
	background-color: #fff;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transform: translateY(30px);
	transition: ease 0.25s transform;
}

.coupon-modal.show .coupon-modal-content {
	transform: translateY(0);
}

.coupon-modal-header {
	padding: 25px;
}

.coupon-modal-header .add-coupon-input-group {
	max-width: 400px;
	margin-right: auto;
}

.coupon-modal-header-row {
	display: flex;
	margin-bottom: 20px;
	justify-content: space-between;
}

.coupon-modal-title {
	font-size: 22px;
	font-weight: 500;
}

.coupon-modal-close-btn {
	font-size: 48px;
	font-weight: 300;
	line-height: 0.5;
	position: relative;
	z-index: 30;
}

.coupon-modal-body {
	max-height: calc(100vh - 180px);
	min-height: 250px;
	overflow: auto;
	height: 550px;
	position: relative;
}

.loading .coupon-modal-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0.5;
	z-index: 2;
}

.loading .coupon-modal-content::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: 4px solid var(--theme-primary);
	border-top-color: transparent;
	animation: load-rotate 1s linear infinite;
	z-index: 3;
}

@keyframes load-rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.coupons-list-title {
	padding: 10px 25px;
	font-size: 20px;
	background-color: #eaeaea;
	position: sticky;
	top: 0;
	z-index: 5;
}

.coupons-list-content {
	padding: 10px;
	padding-bottom: 0;
	background-color: #f9f9f9;
}

.coupon-item {
	padding: 15px 15px;
	margin-bottom: 10px;
	background-color: #fff;
	box-shadow: 0 1px 5px rgb(0 0 0 / 13%);
	border-radius: 4px;
}

.coupon-item-name {
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 5px;
}

.coupon-item-description {
	font-size: 14px;
	margin-bottom: 7px;
}

.coupon-item-info {
	font-weight: 600;
	margin-bottom: 0;
}

.coupon-validity-error {
	margin-top: 1px;
	color: #b2504a;
	font-size: 13px;
	font-weight: 500;
}

.coupon-action-row {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.coupon-item-code {
	width: 150px;
	text-align: center;
	padding: 7px 15px;
	background-color: #eef3ff;
	border: 1px dashed #aaa;
}

.coupon-select-btn {
	margin-left: auto;
	width: 120px;
	border-radius: 4px;
	border: 1px solid var(--theme-primary);
	background-color: var(--theme-primary);
	padding: 6px 10px;
	color: #fff;
	font-weight: 500;
	cursor: pointer;
	transition: ease-in-out 0.25s;
	transition-property: background-color, color, box-shadow;
}

.coupon-select-btn:not(:disabled):hover {
	background-color: #fff;
	color: var(--theme-primary);
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.coupon-select-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.coupon-input {
	padding: 8px 10px;
	border-radius: 4px 0 0 4px;
	border: 1px solid #ddd;
	width: 100%;
	border-right: 0;
	font-weight: 500;
}

.coupon-apply-btn {
	padding: 6px 10px;
	border-radius: 0 4px 4px 0;
	border: 1px solid var(--primary_fg);
	background-color: var(--primary_fg);
	color: var(--primary_bg);
	font-weight: 500;
	cursor: pointer;
	transition: ease-in-out 0.25s;
	transition-property: background-color, color, box-shadow;
}

.coupon-modal-content .coupon-apply-btn {
	min-width: 100px;
}

.coupon-apply-btn:hover {
	background-color: #fff;
	color: var(--primary_fg);
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.coupon-message {
	font-size: 14px;
	font-weight: 500;
	padding: 5px;
}

.remove-coupon-code {
	padding: 5px;
	background-color: transparent;
	color: #b2504a;
	font-weight: 500;
	font-size: 12px;
}

.add-coupon-group .remove-coupon-code {
	display: none;
}

.add-coupon-group.coupon-selected .remove-coupon-code {
	display: inline-block;
}

.add-coupon-group.coupon-selected .add-coupon-input-group {
	display: none;
}

.add-coupon-group.coupon-valid {
	color: #00aa00;
}

.bill-amount-rows {
	font-size: 14px;
	margin-bottom: 10px;
}

.bill-amt-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

.bill-amt-row em {
	color: #666;
}

.bill-amt-row-bold {
	font-weight: 600;
}

.cart-payment-link {
	display: block;
	width: 100%;
	padding: 7px;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	background-color: #00aa00;
	color: #fff;
	text-decoration: none;
	border: 3px solid #00aa00;
	transition: ease-in-out 0.25s;
	transition-property: background-color, color, box-shadow;
	cursor: pointer;
	border-radius: 4px;
}

.cart-payment-link:hover {
	background-color: #fff;
	color: #00aa00;
}

.cart-payment-link:disabled {
	background-color: #cacaca;
	color: #000;
	border-color: #aaa;
	cursor: not-allowed;
}

.processing {
	position: fixed;
	display: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 300;
}

.checkout-switch {
	margin: 15px 0;
	display: flex;
	justify-content: center;
}

.checkout-switch.single-switch {
	justify-content: center;
}

.checkout-switch-option {
	position: relative;
	width: 49%;
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
	margin: auto;
}

.checkout-switch-option input {
	position: absolute;
	opacity: 0;
	bottom: 0;
	left: 100%;
	transform: translateX(-50%);
	pointer-events: none;
}

.checkout-option-label {
	width: 100%;
	height: 100%;
	padding: 7px;
	font-size: 14px;
	font-weight: 500;
	display: block;
	transition: ease 0.25s;
	transition-property: color, background-color;
	cursor: pointer;
	text-align: center;
}

.checkout-option-label:hover {
	background-color: #eee;
}

.checkout-switch-option input:checked + .checkout-option-label {
	background-color: var(--theme-primary);
	color: #fff;
}

.processing .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}

.lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}

.lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}

.lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}

.lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
}

.lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}

.lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}

.lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}

.lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}

.section-label input {
	vertical-align: middle;
	margin-top: -2px;
}

.checkout-user-name {
	color: var(--theme-primary);
}

.empty-cart-img {
	display: block;
	width: 40%;
	margin: auto;
}

.cart-empty-text {
	text-align: center;
	margin-top: 5px;
	color: #666;
	font-weight: 500;
}

.cart-continue-shopping {
	display: block;
	width: 120px;
	text-align: center;
	margin: 10px auto 0;
	background-color: var(--primary_fg);
	color: var(--primary_bg);
	border: 2px solid var(--primary_fg);
	font-weight: 500;
	text-decoration: none;
	padding: 6px;
	border-radius: 4px;
	transition: ease 0.25s;
	transition-property: color, background-color, box-shadow;
}

.cart-continue-shopping:hover {
	background-color: var(--primary_bg);
	color: var(--primary_fg);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.coupon-apply-code {
	color: var(--theme-primary);
}

.no-delivery-charge-alert {
	color: #00aa00;
	font-weight: 600;
}

.no-delivery-charge-price {
	color: var(--theme-primary);
}

.wallet-balance-amount {
	color: var(--theme-primary);
}

@keyframes lds-roller {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.page-cart-view {
	display: none;
}

.free-product-config {
	margin-bottom: 10px;
}

.free-config-available {
	background-color: #d8efd8;
}

.free-config-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}

.free-config-product {
	border: 1px solid #eaeaea;
	border-radius: 4px;
	overflow: hidden;
	background-color: #fff;
	display: flex;
	flex-direction: column;
}

.free-config-product.selected {
	background-color: #baf7ba;
	border-color: #00aa00;
}

.free-product-img {
	margin-bottom: 10px;
	position: relative;
}

.free-product-img::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 100%;
}

.free-product-img img {
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.free-product-details {
	padding: 10px;
	text-align: center;
	margin-top: auto;
}

.free-product-name {
	color: var(--theme-primary);
	font-weight: 500;
	text-decoration: none;
	margin-bottom: 5px;
}

.free-product-size {
	color: #444;
	font-size: 14px;
}

.free-product-pricing {
	font-weight: 500;
}

.select-free-config-btn {
	margin-top: 5px;
	background-color: var(--theme-primary);
	color: #fff;
	border-radius: 4px;
	border: 1px solid var(--theme-primary);
	font-weight: 500;
	padding: 5px 15px;
	cursor: pointer;
}

.buy-label {
	font-weight: 500;
	margin-top: 10px;
	font-size: 15px;
}

.free-config-unavailable {
	background-color: #fbebea;
}

@media (min-width: 769px) {
}

@media (max-width: 768px) {
	.checkout-page {
		padding: 10px;
	}

	.checkout-container {
		flex-direction: column;
		padding: 10px;
	}

	.checkout-address-section,
	.checkout-billing-section {
		width: 100%;
	}

	.checkout-address-section {
		padding-right: 0;
		margin-bottom: 10px;
	}

	.account-options {
		padding: 0;
		justify-content: space-between;
	}

	.checkout-account-btn {
		margin: 0;
		padding: 7px 15px;
	}

	.checkout-account-btn .btn-text {
		font-size: 12px;
	}

	.checkout-account-btn .btn-bold {
		font-size: 11px;
	}

	.delivery-address-list {
		display: block;
	}

	.delivery-address-item {
		margin-bottom: 15px;
	}

	.add-address-item {
		height: 130px;
		margin-bottom: 0;
	}

	.checkout-section-border {
		/* padding: 15px 10px; */
	}

	.new-address-btn {
		min-height: auto;
	}

	.checkout-page .section-title {
		font-size: 12px;
	}

	.address-title {
		font-size: 14px;
	}

	.address-text {
		font-size: 12px;
	}

	.checkout-page .section-text,
	.cart-item-ship-details,
	.product-pricing-group,
	.product-pricing-group .sub_total {
		font-size: 13px;
	}

	.product-pricing-group {
		flex-wrap: wrap;
		align-items: center;
	}

	.product-pricing-group .product-details-group {
		margin-top: 0;
	}

	.product-pricing-group .cart-item-price {
		width: 60%;
	}

	.product-pricing-group .qty {
		width: 40%;
	}

	.bill-amount-rows {
		font-size: 12px;
		color: #000;
	}

	.checkout-page .section-sub-title,
	.cart-empty-text {
		font-size: 12px;
	}

	.coupon-input::placeholder {
		font-size: 12px;
	}

	.coupon-message {
		font-size: 12px;
	}

	.no-delivery-charge-alert {
		font-size: 12px;
	}

	.checkout-option-label {
		font-size: 12px;
	}

	.cart-payment-link {
		font-size: 12px;
	}

	.coupon-apply-btn {
		font-size: 12px;
	}

	.delivery-selection-options .delivery-option-label {
		font-size: 12px;
	}

	.cart-continue-shopping {
		font-size: 12px;
	}

	.checkout-page .wallet-balance-view {
		margin-bottom: 3px;
	}

	.use-wallet-label {
		font-size: 12px;
	}

	.add-coupon-group {
		text-align: center;
	}

	.select-coupon-btn {
		font-size: 12px;
		width: auto;
		margin-inline: auto;
	}
}