/**
 * WTA Custom WPML Language Switcher Styles
 * 
 * Customize these styles to match your theme.
 * All classes are prefixed with 'wta-wpml-' for easy customization.
 */

/* Main dropdown container */
.wta-wpml-dropdown {
	position: relative;
	display: inline-block;
}

/* Trigger button */
.wta-wpml-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	transition: all 0.2s ease;
	min-width: 120px;
	justify-content: space-between;
}

.wta-wpml-trigger:hover {
	background-color: #f5f5f5;
	border-color: #bbb;
}

.wta-wpml-trigger:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* Flag image */
.wta-wpml-flag {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
}

/* Label text */
.wta-wpml-label {
	flex: 1;
	text-align: left;
}

/* Arrow icon */
.wta-wpml-arrow {
	font-size: 10px;
	color: #666;
	transition: transform 0.2s ease;
}

.wta-wpml-dropdown.wta-wpml-open .wta-wpml-arrow {
	transform: rotate(180deg);
}

/* Menu container */
.wta-wpml-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	list-style: none;
	min-width: 100%;
	z-index: 9999;
	max-height: 300px;
	overflow-y: auto;
}

.wta-wpml-menu.wta-wpml-hidden {
	display: none;
}

/* Menu items */
.wta-wpml-item {
	margin: 0;
	padding: 0;
}

/* Language links */
.wta-wpml-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	color: #333;
	text-decoration: none;
	transition: background-color 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.wta-wpml-link:hover,
.wta-wpml-link:focus {
	background-color: #f5f5f5;
	outline: none;
}

.wta-wpml-item.wta-wpml-active .wta-wpml-link {
	background-color: #e8f4f8;
	font-weight: 600;
}

/* Check mark for active language */
.wta-wpml-check {
	margin-left: auto;
	color: #0073aa;
	font-weight: bold;
}

/* RTL support */
[dir="rtl"] .wta-wpml-dropdown {
	direction: rtl;
}

[dir="rtl"] .wta-wpml-label {
	text-align: right;
}

[dir="rtl"] .wta-wpml-check {
	margin-left: 0;
	margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.wta-wpml-trigger {
		min-width: 100px;
		font-size: 13px;
		padding: 6px 10px;
	}

	.wta-wpml-flag {
		width: 18px;
		height: 13px;
	}

	.wta-wpml-menu {
		max-height: 250px;
	}
}

/* Customization examples - uncomment and modify as needed */

/* 
 * Example: Full width dropdown
 * .wta-wpml-dropdown {
 *   width: 100%;
 * }
 * .wta-wpml-trigger {
 *   width: 100%;
 * }
 */

/* 
 * Example: Minimal style
 * .wta-wpml-trigger {
 *   border: none;
 *   background: transparent;
 *   padding: 4px 8px;
 * }
 */

/* 
 * Example: Dark theme
 * .wta-wpml-trigger {
 *   background-color: #2c2c2c;
 *   border-color: #444;
 *   color: #fff;
 * }
 * .wta-wpml-menu {
 *   background-color: #2c2c2c;
 *   border-color: #444;
 * }
 * .wta-wpml-link {
 *   color: #fff;
 * }
 */