// LaterPay contribution elements

.wp-block-laterpay-contribution {

	.lp-button-wrapper {
		display: flex;
		flex-flow: row nowrap;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-box-pack: center;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	.lp-button {
		margin-top: 0.5em;
		cursor: pointer;
		color: rgb(255, 255, 255);
		background-color: #01a99d;
		border-radius: 8px;
		padding: 0 8px;
	}

	.lp-link {
		text-decoration: none;
		padding: 13px 18px 13px 40px;
		font-weight: 600;
		font-size: 16px;
	}

	.lp-cart {
		height: 19px;
		width: 19px;
		z-index: 1;
		transform: translate(16px, 19.5px);
		float: left;
		position: relative;
		top: -3px;
		background-image: url('../img/laterpay-icon-contribute.svg') !important;
	}



	.lp-dialog-wrapper {
		z-index: 2;
		-webkit-font-smoothing: antialiased;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		font-size: 16px;

		.lp-dialog {
			background: rgb(255, 255, 255);
			border-radius: 8px;
			box-shadow: rgba(0, 0, 0, 0.25) 0 0 10px -1px;
			box-sizing: border-box;
			color: rgb(34, 34, 34);
			font-size: 14px;
			font-style: normal;
			font-weight: normal;
			line-height: 1.2;
			margin: 1em auto;
			max-width: calc(448px);
			padding: 0;
			text-align: center;
			text-decoration: none;
			text-shadow: none;
			text-transform: none;
		}

		.lp-header-wrapper {
			border-radius: 8px 15px 0px 0px;
			padding-bottom: calc(10.5px);
			box-sizing: inherit;
			font-family: inherit;
			color: rgb(34,34,34);
			background-color: #fff;

			.lp-header-padding {
				background-color: transparent;
				max-width: 100%;
				height: auto;
				padding: calc(10.5px) calc(10.5px) 0;
				font-weight: normal;
				margin-left: auto;
				margin-right: auto;
				box-sizing: inherit;
				font-family: inherit;
			}

			.lp-header-text {
				font-size: calc(26.25px);
				font-weight: 600;
				letter-spacing: -.015em;
				line-height: 1.4;
				padding: 32px 21px 0;
				box-sizing: inherit;
				font-family: inherit;
			}
		}

		.lp-body-wrapper {
			.lp-amount-text {
				display: block;
				font-size: 17px;
				color: #888;
				font-weight: 600;
				letter-spacing: 0.15px;
				margin: 0 0 30px 0;
			}

			.lp-amount-presets-wrapper {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				max-width: 320px;
				margin: 0 auto;

				.lp-amount-presets {
					border: thin solid rgb(238, 239, 238);
					border-radius: 8px;

					.lp-amount-preset-wrapper {
						cursor: pointer;
						box-sizing: border-box;
						display: block;
						float: left;
						padding: 0 5px;

						&:first-child, &:last-child {
							padding: 0;
						}

						.lp-amount-preset-button {
							text-align: center;
							line-height: 50px;
							width: 55px;
							font-size: 16px;
							border-radius: 8px;
							color: rgb(93, 93, 93);
						}

						.lp-amount-preset-button-selected {
							background-color: rgb(1, 169, 157);
							font-weight: 600;
							color: rgb(255, 255, 255);
						}
					}
				}
			}

			.lp-custom-amount-wrapper {

				.lp-custom-amount {
					display: inline-block;
					font-size: 16px;
					margin: 0.3em auto;
					float: none;
					left: 0;
					right: 0;

					.lp-custom-input-wrapper {
						position: relative;

						i {
							position: absolute;
							display: block;
							top: 11px;
							pointer-events: none;
							width: 30px;
							text-align: center;
							font-style: normal;
							left: 5px;
						}
					}

					.lp-custom-amount-label {
						width: 100%;
						line-height: inherit;
						margin: auto;
						padding: 4px 6px;
						box-sizing: border-box;
						color: rgb(74, 74, 74);
						vertical-align: middle;
						font-weight: 700;
						font-size: 0.95em;
						display: block;
						cursor: default;

						.lp-custom-amount-text {
							font-size: 14px;
							margin-top: 2px;
							margin-bottom: 5px;
							color: #888;
							font-weight: 600;
							letter-spacing: 0.15px;
						}
					}

					.lp-custom-amount-input {
						font-family: inherit;
						line-height: inherit;
						font-size: 16px;
						width: 120px;
						text-align:left;
						border: thin solid rgb(238, 239, 238);
						border-radius: 8px;
						padding-left: 30px;
						height: 40px;
					}
				}
			}

			.lp-dialog-button-wrapper {
				display: inline-flex;
				margin-top: 10px;
			}
		}

		.lp-powered-by {
			margin-top: 30px;
			padding-bottom: 18px;
			color: rgb(65, 65, 65);
			font-size: 14px;
			text-align: center;
			vertical-align: top;

			.lp-powered-by-link {
				color: inherit;
				font-family: inherit;
				position: relative;
				font-size: 18px;
				box-shadow: none;
				outline: 0 none;
				vertical-align: top;
				text-decoration: none !important;
			}
		}
	}
}