@import "variables";
@import "mixins";

/** LIBS **/
@import "~owl.carousel/src/scss/owl.carousel";

.welight-container {
	width: 100%;
	margin-top: 20px !important;
	margin-bottom: 30px !important;

	.hidden {
		display: none !important;
	}

	.ong-carousel {
		display: flex;
		justify-content: center;
		width: 100% !important;

		&.style-simple-ong {
			.owl-nav {
				height: 100% !important;
				pointer-events: none !important;
				top: 0px !important;
				margin-top: 0px !important;

				> .owl-prev,
				> .owl-next {
					pointer-events: auto !important;

					> span {
						color: #000 !important;
						padding: 0 10px;
					}
				}
			}
		}

		.ong {
			@include border-radius(3px);
			position: relative;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			background-size: cover;
			background-position: center center;

			.overlayer {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: $transparent-black;
				z-index: 10;
			}

			> .ong-info {
				position: absolute;
				z-index: 999;
				width: 100%;
				height: 100%;
				overflow: auto;
				transition: all 300ms ease-in-out;
				transform: translateY(100%);
				padding: 30px 15px 0px 15px;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;

				> p {
					text-align: justify;
					color: #fff !important;
					font-weight: 500 !important;
				}

				.close {
					top: 0px;
					right: 10px;
					font-size: 24px;
					color: #fff;
					font-weight: lighter;
					position: absolute !important;
					cursor: pointer;
				}

				&.active {
					transform: translateY(0);
				}
			}

			> .ong-logo {
				@include box-shadow(0, 0, 8, $transparent-black);
				@include border-radius(50%);
				z-index: 20;
				margin: 80px 0px;
				width: 120px;
				height: 120px;
				background-repeat: no-repeat;
				background-size: 70% auto;
				background-position: center center;
				background-color: $color-white;
			}

			> .checkbox {
				align-self: flex-start;
				z-index: 50;
				// margin: 10px 0px 0px 7px;
				position: absolute;
				left: 7px;
				top: 10px;
			}

			> .more-link {
				align-self: flex-end;
				z-index: 50;
				// margin: 0px 7px 5px 0px;
				position: absolute;
				right: 7px;
				bottom: 5px;

				> a {
					color: $color-white;
					text-decoration: none;
					font-size: 16px;
					font-weight: 500 !important;
				}
			}

			/** SIMPLE STYLE **/
			&.style-simple-ong {
				flex-direction: column;
				justify-items: center;
				align-items: center;
				background: #fff;
				border: 3px solid transparentize($welight-primary-color, 0.4);

				&:hover {
					border-color: $welight-primary-color;
				}

				> .ong-logo {
					width: 90px !important;
					height: 90px !important;
					margin: 15px 0px 5px 0px !important;
				}

				> .checkbox {
					position: relative !important;
					top: inherit;
					left: inherit;
					align-self: center;
					margin-bottom: 10px;

					label.checkbox {
						border-color: $welight-primary-color;

						&::before,
						&::after {
							background-color: $welight-primary-color;
						}
					}
				}
			}
		}
	}

	.owl-carousel {
		&:hover {
			.owl-nav {
				opacity: 1 !important;
			}
		}
	}

	.owl-nav {
		@include transition(opacity ease 0.4s);
		opacity: 0 !important;
		position: absolute;
		left: 0px;
		top: 50%;
		margin-top: -29px;
		width: 100%;
		height: 58px;
		display: inline-flex;
		justify-content: space-between;
		padding: 0px;
		z-index: 15;
		background: transparent;

		.owl-prev,
		.owl-next {
			align-self: center;

			> span {
				font-size: 36px;
				color: $color-white;
				padding: 0 20px;
				font-weight: 400 !important;
			}
		}
	}

	.checkout-donation-amount {
		display: block;
		margin-bottom: 15px;
		width: 100%;
		text-align: center;

		> p {
			margin: 0px;
			padding: 0px;
			font-size: 15px;
			color: #444;
			font-weight: 400 !important;
		}

		> p.donation-amount-text {
			margin-top: 15px;
			font-size: 16px;
			text-decoration: underline;
		}
	}

	/** COMPONENTS **/
	@import "components/checkbox";
}

.tippy-ong {
	padding-bottom: 7px;

	font-weight: 400 !important;

	.tippy-ong-title {
		margin-bottom: 8px !important;
		color: #fff;
		font-size: 16px;
		font-weight: bold !important;
	}
}

.woocommerce {
	.cart_totals {
		table {
			tr.welight-donation-message td {
				padding: 40px 0px;
			}

			.checkout-donation-amount {
				display: block;
				width: 100%;

				> p {
					margin-bottom: 15px;
					padding: 0px 15px;
					font-size: 15px;
					color: #444;
					font-weight: 400 !important;

					strong {
						font-weight: bold !important;
					}
				}

				> p:last-child {
					margin-bottom: 0px !important;
				}

				> p.donation-amount-text {
					margin-top: 7px;
					font-size: 16px;
					text-decoration: underline;
				}
			}
		}
	}
}

.welight-thankyou-container {
	padding: 40px 0px;
	margin: 40px 0px;
	display: block;
	width: 100%;
	border-top: 2px solid $welight-primary-color;
	border-bottom: 2px solid $welight-primary-color;
	background-color: #fbfbfb;
	border-radius: 10px;

	.thankyou-title {
		font-size: 28px;
		font-weight: 400 !important;
		text-align: center;
		margin: 0px;
	}

	.thankyou-text {
		text-align: center;
		font-size: 26px;
		font-weight: lighter;
		margin-bottom: 10px;
	}

	p.welight-logo {
		text-align: center !important;
		width: 100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		> a {
			&.btn-welight {
				@include border-radius(7px);

				margin-right: 30px;
				padding: 10px 20px;
				background: $welight-primary-color;
				color: $color-white;
			}
		}

		img {
			margin: 0 auto !important;
			padding: 0px;
		}
	}
}