.language-select {
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	color: #2d3748;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
	min-width: 140px;
	position: relative;
	background: white no-repeat;
	background-size: 20px, 12px;
}

/* Flag for currently selected option */
.language-select[value="en"] {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" width="20" height="15"><path fill="%2301228e" d="M0 0h640v480H0z"/><path stroke="%23fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><path fill="%23bd0034" d="M0 0h364.8v258.5H0z"/></svg>'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.language-select[value="el"] {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="20" height="15"><rect width="600" height="400" fill="%230d5eaf"/><path fill="%23fff" d="M0 0h600v400H0z"/><path fill="%230d5eaf" d="M0 0h600v133.3H0zM0 266.7h600V400H0z"/></svg>'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.language-select:hover {
	border-color: #a0aec0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.language-select:focus {
	outline: none;
	border-color: #4299e1;
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* Dropdown options styling */
.language-select option {
	padding: 12px 15px 12px 45px; /* Increased left padding for flags */
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 20px;
	font-size: 15px;
	color: #2d3748;
}

/* English flag for option */
.language-select option[value="en"] {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" width="20" height="15"><path fill="%2301228e" d="M0 0h640v480H0z"/><path stroke="%23fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><path fill="%23bd0034" d="M0 0h364.8v258.5H0z"/></svg>');
}

/* Greek flag for option */
.language-select option[value="el"] {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="20" height="15"><rect width="600" height="400" fill="%230d5eaf"/><path fill="%23fff" d="M0 0h600v400H0z"/><path fill="%230d5eaf" d="M0 0h600v133.3H0zM0 266.7h600V400H0z"/></svg>');
}

/* Selected option highlight */
.language-select option:checked,
.language-select option:selected {
	background-color: #ebf8ff;
	font-weight: 600;
}

/* Remove the old ::after pseudo-element since we're using background-image */
.language-select::after {
	display: none;
}

/* For better cross-browser compatibility */
.language-select::-ms-expand {
	display: none; /* Hide default arrow in IE/Edge */
}

/* Firefox specific */
@-moz-document url-prefix() {
	.language-select {
		padding-left: 50px; /* Firefox needs more padding */
		text-indent: -10px;
	}

	.language-select option {
		padding-left: 45px;
	}
}