/*
Developed by: WPE - https://wpe.oscaralderete.com
Requests: consultas.wpe@gmail.com
*/
:root {
	--wpe_wcu-header-bg: #0A8800;
	--wpe_wcu-footer-bg: #fff;
	--wpe_wcu-footer-bg-hover: #ebebeb;
	--wpe_wcu-footer-color: rgb(102, 102, 102);
	--wpe_wcu-ul-height: 1.6em;
	--wpe_wcu-animation: wpe_whycooseus-slideuptext 6s linear infinite;
	--wpe_wcu-btn-close-size: 2rem;
	--wpe_wcu-btn-bg: #FB7701;
	--wpe_wcu-btn-color: #fff;
	--wpe_wcu-btn-outline: 1px solid var(--wpe_wcu-header-bg);
	--wpe_wcu-svg-info: var(--wpe_wcu-header-bg);
	--wpe_wcu-svg-danger: #F7232E;
	--wpe_wcu-svg-sale: #7E7AC0;
}

#wpe_whychooseus-bar.wpe_whychooseus-bar {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	user-select: none;

	* {
		margin: 0;
		padding: 0;
	}

	>article {
		border: solid 1px var(--wpe_wcu-header-bg);
		border-radius: .25rem;
		margin: 0;
		padding: 0;

		a {
			text-decoration: none;
		}

		header,
		footer {
			display: flex;
			flex-direction: row;
			padding: .8em;
			margin: 0 !important;
			align-items: center;
			cursor: pointer;

			>div:first-child {
				flex: 1;
			}

			svg {
				height: .7em;
				width: auto;
				margin-left: .5em;
			}
		}

		header {
			background-color: var(--wpe_wcu-header-bg);
			color: var(--wpe_wcu-footer-bg);

			.wpe_whycooseus-slideuptext {
				position: relative;

				ul {
					display: flex;
					list-style-type: none;
					flex-direction: row;
					animation: none;
					padding: 0;
					margin: 0;

					li {
						padding: 0;
						margin: 0;
						height: var(--wpe_wcu-ul-height);
						line-height: var(--wpe_wcu-ul-height);

						span {
							display: inline-block;
							margin: 0 1rem;
						}
					}

					li:last-child {
						display: none;
					}
				}
			}

			svg {
				fill: var(--wpe_wcu-footer-bg);
			}
		}

		footer {
			background-color: var(--wpe_wcu-footer-bg);
			border-radius: 0 0 .25em .25em;
			height: var(--wpe_wcu-ul-height);
			line-height: var(--wpe_wcu-ul-height);

			&:hover {
				background-color: var(--wpe_wcu-footer-bg-hover);
			}

			svg {
				fill: var(--wpe_wcu-footer-color);
			}
		}
	}
}

@media (max-width: 48em) {
	#wpe_whychooseus-bar.wpe_whychooseus-bar {
		>article {
			header {
				.wpe_whycooseus-slideuptext {
					height: var(--wpe_wcu-ul-height);
					overflow: hidden;

					ul {
						flex-direction: column;
						animation: var(--wpe_wcu-animation);

						li {
							text-align: right;
							height: var(--wpe_wcu-ul-height);
							line-height: var(--wpe_wcu-ul-height);

							&:last-child {
								display: block;
							}

							span {
								display: none;
							}
						}

					}
				}
			}

			footer {
				display: none;
			}
		}
	}
}

@keyframes wpe_whycooseus-slideuptext {
	0% {
		transform: translateY(0);
	}

	24% {
		transform: translateY(0);
	}

	34% {
		transform: translateY(calc(var(--wpe_wcu-ul-height) * -1));
	}

	57% {
		transform: translateY(calc(var(--wpe_wcu-ul-height) * -1));
	}

	67% {
		transform: translateY(calc(var(--wpe_wcu-ul-height) * -2));
	}

	90% {
		transform: translateY(calc(var(--wpe_wcu-ul-height) * -2));
	}

	100% {
		transform: translateY(calc(var(--wpe_wcu-ul-height) * -3));
	}
}

#wpe_whychooseus-modal.wpe_whychooseus-modal {
	user-select: none;
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	animation: .3s all .3s ease-in;

	&.active {
		opacity: 1;
		visibility: visible;
	}

	>article {
		position: relative;

		svg {
			height: 4em;
			width: auto;
		}

		>section {
			background-color: var(--wpe_wcu-footer-bg);
			width: 30em;
			padding: var(--wpe_wcu-btn-close-size);
			border-radius: .25em;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 0 .4em #ddd;

			>svg {
				&.info {
					stroke: var(--wpe_wcu-svg-info);
					fill: var(--wpe_wcu-svg-info);
				}

				&.danger {
					stroke: var(--wpe_wcu-svg-danger);
					fill: var(--wpe_wcu-svg-danger);
				}

				&.sale {
					stroke: var(--wpe_wcu-svg-sale);
					fill: var(--wpe_wcu-svg-sale);
				}
			}

			header {
				font-weight: bold;
				margin-bottom: .5em;
				text-align: center;
			}

			div,
			a {
				font-size: 90%;
				text-align: center;
			}

			button {
				display: inline-block !important;
				width: auto !important;
				border-radius: 100em;
				margin: 1em 0;
				padding: 1em 3em;
				border: none;
				background-color: var(--wpe_wcu-btn-bg);
				color: var(--wpe_wcu-btn-color);
				cursor: pointer;

				&:focus,
				&:hover {
					outline: var(--wpe_wcu-btn-outline);
					color: var(--wpe_wcu-header-bg);
				}
			}
		}

		>button {
			position: absolute;
			top: 0;
			right: 0;
			border: none;
			border-radius: 50%;
			width: var(--wpe_wcu-btn-close-size);
			height: var(--wpe_wcu-btn-close-size);
			padding: 0;
			margin: 0;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E") center center no-repeat transparent;
			background-size: 1.5em auto;
			cursor: pointer;

			&:focus,
			&:hover {
				outline: var(--wpe_wcu-btn-outline);
			}
		}
	}
}