/* styles.css */

/* Define CSS Variables in :root */
:root {
	/* Modal Content */
	--modal-content-bg-color: #ffffff;
	--modal-content-padding: 15px;
	--modal-content-border-radius: 8px;

	/* Modal Title */
	--modal-title-color: #000000;
	--modal-title-font-size: 1.5em;

	/* Country Details */
	--country-name-color: #000000;
	--country-name-font-size: 1em;
	--country-currency-color: #000000;
	--country-currency-font-size: 1em;

	/* Flag */
	--flag-width: 48px;
	--flag_width_mobile: 32px;

	--pop_up_animation: 1.0;

	/* Close Button */
	--modal-close-color: #000000;
	--modal-close-font-size: 1.2em;

	/* Grid Columns */
	--grid-columns-desktop: 3;
	--grid-columns-mobile: 2;

	/* Active country */
	--active-bg-color: #f0f0f0;
	--active-border-radius: 8px;

	/* Continent header */
	--market-size: 1.5em;
	--market-color: #000000;

	/* Localization button styles */
	--button_bg_color: #ff0000;
	--button_text_color: #ffffff;
	--button_flag_width: 24px;
	--button_border_radius: 4px;
	--button_gap: 10px;
	--button_font_size: 16px;

	/* Localization button padding top, bottom, left, right */
	--button_padding_top: 10px;
	--button_padding_bottom: 10px;
	--button_padding_left: 10px;
	--button_padding_right: 10px;

	--pop_up_search_width: 35%;

	/* Language */
	--country-language-font-size: 1em;
	--country-language-color: #000000;
}

/* Modal Overlay */
.modal-overlay-novoid-mff {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.modal-overlay-novoid-mff.active-novoid-mff {
	display: flex;
	opacity: 1;
}

/* Continent (Market) */
.continent-name-title-novoid-mff {
	font-size: var(--market-size);
	color: var(--market-color);
	margin: 30px 0 5px 0;
	font-weight: 500;
}

/* Modal Content */
.modal-content-novoid-mff {
	background-color: var(--modal-content-bg-color);
	width: 70%;
	max-width: 1000px;
	max-height: 70%;
	padding: var(--modal-content-padding);
	overflow: scroll; /* Ensure scrolling is enabled */
	border-radius: var(--modal-content-border-radius);
	position: relative;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	animation: fadeIn 0.3s ease;
}

#countrySearchInput {
	border-radius: var(--modal-content-border-radius);
}

.modal-content-novoid-mff::-webkit-scrollbar {
	width: 3px; /* Adjust the width for thinness */
	background: transparent;
}

.modal-content-novoid-mff::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0); /* Invisible when not scrolling */
	border-radius: 3px;
	transition: background-color 0.3s;
}

.modal-content-novoid-mff:hover::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.5); /* Visible on hover */
}

/* Modal Title */
.modal-title-novoid-mff {
	text-align: center;
	margin: 10px 0px 20px 0px;
	font-size: var(--modal-title-font-size);
	color: var(--modal-title-color);
	font-weight: 200;
}

.available_languages-novoid-mff {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 400px;
	align-items: end;
	row-gap: 0;
	column-gap: 5px;
}

.language-option-novoid-mff {
	display: inline;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	color: var(--country-language-color);
	font-size: var(--country-language-font-size);
	margin-bottom: -5px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.language-separator-novoid-mff {
	display: inline-block;
	width: 1px;
	height: var(--country-language-font-size);
	background-color: var(--country-language-color);
	vertical-align: middle;
}

.language-option-novoid-mff::after {
	text-decoration: none;
}

.active-language-novoid-mff {
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.language-option-novoid-mff:hover {
	text-decoration: underline;
}

/* Close Button */
.modal-close-novoid-mff {
	background: none;
	border: none;
	font-size: var(--modal-close-font-size);
	color: var(--modal-close-color);
	cursor: pointer;
	transition: color 0.3s ease;
}

.modal-close-novoid-mff:hover {
	filter: brightness(1.8);
}

.modal-header-novoid-mff {
	position: sticky;
	top: 0;
	right: 0;
	display: flex;
	justify-content: end;
	align-items: center;
	background-color: transparent;
	z-index: 10;
}

/* Header Button */
.header-button-novoid-mff {
	cursor: pointer;
	padding-top: var(--button_padding_top);
	padding-bottom: var(--button_padding_bottom);
	padding-left: var(--button_padding_left);
	padding-right: var(--button_padding_right);
	background-color: var(--button_bg_color);
	color: var(--button_text_color);
	font-size: var(--button_font_size);
	border: none;
	border-radius: var(--button_border_radius);
	display: flex;
	align-items: center;
	gap: var(--button_gap);
	transition: all 0.4s ease;
}

.header-button-flag-novoid-mff {
	width: var(--button_flag_width);
	height: var(--button_flag_width);
	margin-right: 5px;
}

.header-button-novoid-mff:hover {
	transform: scale(var(--pop_up_animation));
}

/* Countries Grid */
.countries-grid-novoid-mff {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
	gap: 15px;
}

/* Country Item */
.country-item-novoid-mff {
	padding: 10px;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
	display: flex;
	align-items: center;
	gap: 15px;
	border-radius: var(--active-border-radius);
}

.country-item-active-novoid-mff {
	background-color: var(--active-bg-color);
}

.country-item-novoid-mff:hover {
	transform: translateY(-4px);
}

/* Country Details */
.country-details-novoid-mff {
	display: flex;
	flex-direction: column;
}

.country-name-novoid-mff {
	color: var(--country-name-color);
	font-size: var(--country-name-font-size);
	font-weight: 600;
}

.country-currency-novoid-mff {
	color: var(--country-currency-color);
	font-size: var(--country-currency-font-size);
	line-height: 15px;
}

/* Flag Image */
.country-flag-novoid-mff {
	width: var(--flag-width);
	height: var(--flag-width);
	object-fit: cover;
	border-radius: 50%;
}

.loading-full-screen-novoid-mff {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 11;
	align-items: center;
	justify-content: center;
}

.spinner-novoid-mff {
	display: block !important;
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3; /* Light gray */
	border-top: 5px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes fadeIn {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

input#countrySearchInput {
    margin: 0;
	border: 1px solid black;
}

input#countrySearchInput::placeholder{color: black;}

/* Responsive Adjustments */
@media (max-width: 768px) {
	button.header-button-novoid-mff * {
		display: none;
	}
	img.header-button-flag-novoid-mff {
		display: block;
	}
	.header-button-flag-novoid-mff {
		width: var(--flag_width_mobile);
		height: var(--flag_width_mobile);
	}
	.countries-grid-novoid-mff {
		grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
	}
	.modal-content-novoid-mff {
		width: 95%;
		max-height: 85%;
	}
}

@media (min-width: 768px) {
	.search-bar-novoid-mff{
		width: var(--pop_up_search_width);
    	margin: auto;
    	margin-bottom: 20px;
	}
}