/* ============================================================
   Gorriceta Change Language – Frontend Styles
   Matches the dark navy rounded button design from screenshot
   ============================================================ */

/* ── Wrapper ── */
.gcl-wrapper {
	display: inline-flex;
	position: relative;
	font-family: inherit;
	user-select: none;
	z-index: 100;
}

/* ── Trigger Button ── */
.gcl-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #000D29;
	border: 1.5px solid #2a3a5c;
	border-radius: 6px;
	padding: 6px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	min-width: 0;
}



/* ── Flag wrap (circle crop) ── */
.gcl-flag-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.gcl-flag-emoji {
	font-size: 26px;
	line-height: 1;
	display: block;
}

.gcl-flag-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Optional text label on trigger ── */
.gcl-trigger-label {
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

/* ── Chevron ── */
.gcl-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 14px;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	flex-shrink: 0;
}

.gcl-chevron svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* Chevron rotates when open */
.gcl-wrapper.gcl-open .gcl-chevron {
	transform: rotate(180deg);
}

/* ── Dropdown ── */
.gcl-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 180px;
	background-color: #0f1729;
	border: 1.5px solid #2a3a5c;
	border-radius: 14px;
	padding: 6px;
	list-style: none;
	margin: 0;
	box-shadow: 0 16px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.97);
	transform-origin: top left;
	transition: opacity 0.22s ease,
	            visibility 0.22s ease,
	            transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 9999;
}

/* Upward direction */
.gcl-dir-up .gcl-dropdown {
	top: auto;
	bottom: calc(100% + 8px);
	transform-origin: bottom left;
	transform: translateY(6px) scale(0.97);
}

/* Open state */
.gcl-wrapper.gcl-open .gcl-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* ── Dropdown items ── */
.gcl-dropdown-item {
	border-radius: 9px;
	overflow: hidden;
}

.gcl-dropdown-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	text-decoration: none;
	border-radius: 9px;
	transition: background-color 0.15s ease;
	cursor: pointer;
}



/* ── Dropdown flag ── */
.gcl-dropdown-flag-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #1a2a4a;
	border: 1.5px solid rgba(255,255,255,0.08);
}

.gcl-dropdown-emoji {
	font-size: 18px;
	line-height: 1;
	display: block;
}

.gcl-dropdown-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Dropdown label ── */
.gcl-dropdown-label {
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	flex: 1;
	letter-spacing: 0.01em;
}

/* ── Active check icon ── */
.gcl-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #4f72c4;
	margin-left: auto;
	flex-shrink: 0;
}

.gcl-check svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* ── Separator between items (subtle) ── */
.gcl-dropdown-item + .gcl-dropdown-item {
	border-top: 1px solid rgba(255,255,255,0.04);
}

.gcl-trigger,
.gcl-trigger:hover,
.gcl-trigger:focus,
.gcl-trigger:focus-visible,
.gcl-trigger:active,
.gcl-trigger:visited {
	background-color: transparent !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	border-color: #2a3a5c !important;
	color: inherit !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* ── Elementor editor: keep dropdown visible for editing ── */
/*.elementor-editor-active .gcl-dropdown {*/
/*	opacity: 1;*/
/*	visibility: visible;*/
/*	transform: none;*/
/*	position: static;*/
/*	margin-top: 8px;*/
/*	box-shadow: none;*/
/*}*/