/** Buttons **/

.button {
	border-radius: var(--border-radius-sm);
	display: inline-block;
	padding: var(--space-sm) var(--space-md);
	color: var(--smx-color-white);
	background: var(--smx-color-primary);
	text-decoration: none;
	border: none;
	text-align: center;
	cursor: pointer;

	&:hover {
		background: var(--smx-color-primary-contrast);
	}

	&.icon-only {
		padding: var(--space-md) var(--space-md);
	}

	svg {
		height: 1rem;
		width: auto;
	}

	&.small-icon {
		svg {
			transform: scale(0.86);
		}
	}

	&.small {
		padding: var(--space-xs) var(--space-sm);
		&.icon-only {
			padding: var(--space-sm) var(--space-sm);
		}
		svg {
			height: 0.68rem;
			width: auto;
		}
	}

	&.outline {
		background: transparent;
		color: var(--smx-color-primary);
		border: 1px solid var(--smx-color-primary);
	}

	&.light {
		background: var(--smx-color-white);
		color: var(--smx-color-text);
	}
	&.dark {
		background: var(--smx-color-background-dark);
		color: var(--smx-color-white);
	}
	&.flat {
		background: transparent;
		&.dark {
			color: var(--smx-color-text);

			&:hover {
				background: var(--smx-color-background-light);
			}
		}
		&.light {
			color: var(--smx-color-white);
			&:hover {
				&:hover {
					background: var(--smx-color-background-dark);
				}
			}
		}
	}

	&.round {
		border-radius: 5rem;
	}

	&.cta_button {
		font-size: var(--font-size-lg);
		background: linear-gradient(
			to bottom,
			var(--smx-color-primary) 0%,
			var(--smx-color-primary-contrast) 100%
		);
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.36);
		padding: var(--space-sm) var(--space-lg);
		font-weight: 400;
	}
}

/* Panel */

/* Language Selector */
.smx-language-switcher {
	display: none;
}

.lang-select-button {
	padding: var(--space-xs) var(--space-md);
	border: none;
	border-radius: 6px;
	background: var(--smx-color-white);
	cursor: pointer;
	font-size: var(--font-tex);
	padding-left: var(--space-xxl);
	position: relative;
}
.lang-select-button:after {
	content: ' ';
	position: absolute;
	left: var(--space-xs);
	width: 1.68rem;
	height: 1.1rem;
	border-radius: var(--border-radius-sm);
	background-color: var(--smx-color-background-light);
	background-size: cover;
}
.pt-br::after {
	background-image: url('../images/flags/pt-br.png');
}
.en::after {
	background-image: url('../images/flags/en.png');
}
.es::after {
	background-image: url('../images/flags/es.png');
}
.lang-modal-panel {
	ul.smx-language-switcher {
		li {
			position: relative;
			a {
				padding-left: 2.2rem;
				display: block;
				&::after {
					content: ' ';
					position: absolute;
					left: var(--space-xs);
					width: 1.68rem;
					height: 1.1rem;
					border-radius: var(--border-radius-sm);
					background-color: var(--smx-color-background-light);
					background-size: cover;
					pointer-events: none;
					margin-top: var(--space-xs);
				}
			}

			&.pt-br a::after {
				background-image: url('../images/flags/pt-br.png');
			}
			&.en a::after {
				background-image: url('../images/flags/en.png');
			}
			&.es a::after {
				background-image: url('../images/flags/es.png');
			}
		}
	}
}

/* modal */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(var(--smx-color-background-dark-rgb), 0.4);
	backdrop-filter: var(--backdrop-blur-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: var(--z-index-top);

	@media (max-width: 768px) {
		align-items: end;
		transition: opacity 0.3s;
		transition-delay: 0.2s;
	}
}

.modal.open {
	opacity: 1;
	pointer-events: all;
}

.modal-panel {
	background: var(--smx-color-white);
	border-radius: var(--border-radius-xl);
	padding: var(--space-lg);
	padding-top: var(--space-xxl);
	min-width: 220px;
	position: relative;

	.close {
		padding: var(--space-xs) var(--space-sm);
		text-align: center;
		font-size: var(--font-size-xl);
		color: var(--smx-color-text-bold);
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
		width: 2.36rem;
		height: 2.36rem;
		display: flex;
		align-items: center;
		border-radius: var(--border-radius-full);

		svg {
			margin: 0 auto;
		}
	}

	@media (max-width: 768px) {
		width: 100vw;
		border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
		transform: translateY(100vh);
		transition: transform 0.3s ease-out;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		li {
			a {
				text-decoration: none;
				color: var(--smx-color-text-bold);
				display: block;
				padding: var(--space-sm) var(--space-md);
				border-radius: var(--border-radius-sm);

				&:hover {
					background: var(--smx-color-background-light);
				}
			}
		}
	}
}
@media (max-width: 768px) {
	.modal.open {
		.modal-panel {
			transform: translateY(0);
		}
	}
}

/** BG VIDEO**/

.smx-video-bg {
	position: relative;
	width: 100%;
	height: 50vh;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.5);

	video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
		object-fit: cover;
		z-index: -1;
	}

	.content {
		position: relative;
		z-index: 1;
		color: white;
		text-align: center;
	}
}

/** MAP **/

.smx-map {
	background: var(--smx-color-white);
	background: url('../images/hive.webp');
	background-size: cover;
	background-attachment: fixed;

	.container-mobile {
		background: url('../images/latin-america-map.webp');
		background-position: center top;
		background-repeat: no-repeat;
		background-size: auto 100%;

		position: relative;
		height: 44vh;

		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--space-md);
		gap: 0.3rem;

		h2 {
			color: var(--smx-color-text-bold);
			font-weight: bold;
			font-size: var(--font-title-sm);
			border-bottom: 1px solid var(--smx-color-primary);
			width: 66%;
			margin-bottom: 1rem;

			b {
				font-weight: bold;
				color: var(--smx-color-primary);
			}

			@media (max-width: 768px) {
				font-size: var(--font-subtitle);
			}
		}

		.map-chip-mobile {
			span {
				padding: 0 var(--space-sm);
				border-radius: var(--border-radius-xl);
				border: 1.6px solid var(--smx-color-primary);
				font-size: var(--font-size-md);
				color: var(--smx-color-primary-contrast);
				font-weight: 400;
				backdrop-filter: var(--backdrop-blur);
				display: inline-block;
			}
		}
	}

	.container {
		background: url('../images/latin-america-map.webp');
		background-position: right top;
		background-repeat: no-repeat;
		background-size: auto 100%;

		position: relative;
		height: 70vh;

		h2 {
			top: 40%;
			color: var(--smx-color-text-bold);
			font-weight: bold;
			font-size: var(--font-title-sm);
			border-bottom: 1px solid var(--smx-color-primary);
			width: 50%;
			position: absolute;

			b {
				font-weight: bold;
				color: var(--smx-color-primary);
			}
		}

		.map-chip {
			position: absolute;
			right: 0;
			top: 0;

			padding: 0 var(--space-sm);
			padding-right: var(--space-xl);
			border-radius: var(--border-radius-xl);
			border: 1.6px solid var(--smx-color-primary);
			font-size: var(--font-size-md);
			color: var(--smx-color-primary-contrast);
			font-weight: 400;
			z-index: 1;
			background-color: rgba(var(--smx-color-background-light-rgb), 0.86);

			backdrop-filter: var(--backdrop-blur);

			&::after {
				content: '';
				width: 1.2rem;
				height: 1.2rem;
				border: 1.3px dashed var(--smx-color-primary);
				border-radius: var(--border-radius-lg);
				position: absolute;
				right: 1px;
				margin: 2px;
			}

			&.brazil {
				right: 6%;
				top: 61.7%;
			}
			&.mexico {
				top: 5%;
				right: 45%;
			}
			&.colombia {
				right: 25%;
				top: 31%;
			}
			&.peru {
				right: 26%;
				top: 50%;
			}
			&.chile {
				right: 23.5%;
				top: 67%;
			}
			&.uruguai {
				top: 76%;
				right: 15.5%;
			}
			&.argentina {
				top: 82%;
				right: 22.4%;
			}
		}
	}
}