#sulo-checkout {
	position: relative;
	#sulo-checkout-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: $dark-gray;
		position: absolute;
		top: $navbar-height;
		bottom: 0;
		left: 0;
		right: 0;
	}
	background: rgba($primary-color, 0.03);
	.row {
		max-width: $user-dashboard-max-width;
	}
	counter-reset: section;

	// One section in the checkout 
	// We have three (item list, shipping, payment)
	.section {
		
		h4:before {
			counter-increment: section;
			content: counter(section) ". ";
		}
		.store-header {
			.photo-container {
				max-width: 6rem;
			}
			h3 {
				text-transform: none;
			}
		}

		.subsection {
			margin-bottom: $global-margin;
			&:last-child {
				margin-bottom: 0;
			}
			.subsection-title {
				margin-bottom: 0.5rem;
				// margin-top: 4rem;
				// font-weight: $global-weight-bold;
				letter-spacing: 1px;
			}
		}
		.section-list {
			margin-bottom: 0.5rem;
			border-radius: $global-radius;
			border: $global-border-secondary;
		}

		&.section--item-list {
			.section-title {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.section-list {
				li {
					padding: 0.5rem;
					&:last-child {
						padding-bottom: 0;
					}
				}
				// border-bottom: none;
			}
			.product-info {
				// First column with photo and item info
				&:first-child a {
					display: flex;
					align-items: center;
					div {
						line-height: 1.2;
						span {
							display: inline-block;
							overflow: hidden;
							font-size: 0.9rem;
							max-height: 2.2rem;
						}
						small {
							font-weight: $global-weight-bold;
						}
					}
				}
				&:last-child {
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			}
			.photo-container {
				max-width: 3rem;
				min-width: 3rem;
				margin-right: 0.5rem;
				width: 4rem;
			}
		}

		&.section--shipping {
			.sl-shipping--name {
				font-weight: $global-weight-bold;
			}
			.sl-shipping--address {
				font-size: 100%;
			}

			.action-buttons {
				display: flex;
				justify-content: center;
				.button:first-child{
					margin-right: 0.5rem;
				}
			}
			// 	.section-list--shipping {
			.section-list-item {
				padding: 0;
				p {
					margin-bottom: 0;
					line-height: 1.2;
				}
				&:hover {
					background: rgba($light-gray, 0.2);
					a {
						color: $body-font-color;
					}
				}
				a {
					padding: 1rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.row {
					width: 100%;
				}
				.shipping-info {
					display: flex;
					align-items: center;
					input {
						margin-right: 0.5rem;
						width: 2rem;
						flex: 0 0 auto;
					}
				}
				.shipping-cost {
					text-align: right;
					margin-left:  0.5rem;
					
					small {
						font-size: 70%;
					}
				}
			}
		
		}
		&.section--payment {
			.section-list--cards {
				.section-list-item--card, .section-list-item--new-card {
					padding: 0.25rem 0;
				}
				.section-list-item--new-card {
					.button {
						margin: $global-margin;
					}
					// padding: $global-padding;
				}
			}
		}
	}

	.promo-code-container {
		.button, input, p {
			margin-bottom: 0;
		}
	}
	.promo-code-form {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.button {
			flex: 0 0 auto;
		}
		input {
			max-width: 10rem;
			margin-right: $global-margin;
		}
	}

	// Hide footer in checkout to disable navigations for the user
	.footer {
		background: transparent;
		.row {
			display: none;
		}
		.copyright {
			color: $dark-gray;
		}
	}
}


/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
#sulo-card-element {
	@include form-element;
	margin-bottom: 0;
  &.StripeElement--invalid {
		$background: $input-error-color;
		$background-alpha: 0.025;
	    background-color: rgba($background, $background-alpha);
	    border-color: $background;
	}
}

#card-errors {
	color: $alert-color;
	margin-bottom: 0.5rem;
}

.StripeElement--focus {
  // box-shadow: 0 1px 3px 0 #cfd7df;
}


.StripeElement--webkit-autofill {
  // background-color: #fefde5 !important;
}


