/**
 * Modawen Translator Pro - Frontend Styles
 *
 * @package Modawen_Translator_Pro
 */

/* ============================================================
 * محدد اللغات القياسي (Inline / Shortcode)
 * ============================================================ */
.modawen-lang-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	z-index: 9999;
}

.modawen-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	padding: 7px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.9rem;
	color: #1e293b;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease-in-out;
}

.modawen-lang-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.modawen-lang-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	padding: 6px;
	min-width: 170px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 100000;
	animation: modawenDropdownFade 0.2s ease-out;
}

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

.modawen-lang-dropdown.active {
	display: block;
}

.modawen-lang-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: #334155;
	font-size: 0.88rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.modawen-lang-item:hover {
	background: #f1f5f9;
	color: #0f766e;
}

.modawen-lang-item.current {
	background: #f0fdfa;
	color: #0f766e;
	font-weight: 700;
}

/* ============================================================
 * الأيقونة العائمة الاحترافية (Floating Language Switcher Widget)
 * ============================================================ */
.modawen-floating-widget {
	position: fixed;
	z-index: 999999;
	font-family: inherit;
	box-sizing: border-box;
}

/* المواضع على الشاشة (Positions) */
.modawen-floating-widget.pos-bottom_right {
	bottom: 25px;
	right: 25px;
	direction: rtl;
}

.modawen-floating-widget.pos-bottom_left {
	bottom: 25px;
	left: 25px;
	direction: ltr;
}

.modawen-floating-widget.pos-top_right {
	top: 25px;
	right: 25px;
	direction: rtl;
}

.modawen-floating-widget.pos-top_left {
	top: 25px;
	left: 25px;
	direction: ltr;
}

.modawen-floating-widget.pos-middle_right {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	direction: rtl;
}

.modawen-floating-widget.pos-middle_left {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	direction: ltr;
}

/* زر التفعيل العائم (Floating Trigger Button) */
.modawen-floating-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	outline: none;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
	user-select: none;
	text-decoration: none;
}

.modawen-floating-btn:hover {
	transform: scale(1.06) translateY(-2px);
}

.modawen-floating-btn:active {
	transform: scale(0.97);
}

/* أشكال الأيقونة العائمة (Shapes) */

/* 1. الدائري (Circle) */
.modawen-floating-widget.shape-circle .modawen-floating-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	padding: 0;
	box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

/* 2. المربع بحواف ناعمة (Squircle) */
.modawen-floating-widget.shape-squircle .modawen-floating-btn {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	padding: 0;
	box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.2);
}

/* 3. الكبسولة المستطيلة (Pill Capsule) */
.modawen-floating-widget.shape-pill .modawen-floating-btn {
	padding: 10px 18px;
	border-radius: 999px;
	gap: 8px;
	font-weight: 700;
	font-size: 0.92rem;
	box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.2);
}

/* 4. الزجاجي الشفاف الفاخر (Glassmorphism Luxury) */
.modawen-floating-widget.shape-glassmorphism .modawen-floating-btn {
	padding: 11px 18px;
	border-radius: 20px;
	gap: 8px;
	font-weight: 700;
	font-size: 0.92rem;
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 5. العصري المتوهج (Neon Glow) */
.modawen-floating-widget.shape-neon .modawen-floating-btn {
	padding: 10px 18px;
	border-radius: 16px;
	gap: 8px;
	font-weight: 800;
	font-size: 0.92rem;
	background: #090d16 !important;
	border: 2px solid var(--mdw-float-bg, #0f766e);
	box-shadow: 0 0 20px var(--mdw-float-bg, #0f766e), inset 0 0 10px rgba(0, 0, 0, 0.5);
	color: #ffffff !important;
}

/* 6. مينيمل هادئ (Minimal Clean) */
.modawen-floating-widget.shape-minimal .modawen-floating-btn {
	padding: 8px 14px;
	border-radius: 12px;
	gap: 6px;
	font-weight: 700;
	font-size: 0.88rem;
	background: #ffffff !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.modawen-floating-widget.pos-middle_right .modawen-floating-btn {
	border-radius: 12px 0 0 12px !important;
}

.modawen-floating-widget.pos-middle_left .modawen-floating-btn {
	border-radius: 0 12px 12px 0 !important;
}

/* قائمة اللغات المنبثقة للأيقونة العائمة (Floating Dropdown) */
.modawen-floating-dropdown {
	display: none;
	position: absolute;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 15px -5px rgba(0, 0, 0, 0.05);
	padding: 8px;
	min-width: 190px;
	max-height: 360px;
	overflow-y: auto;
	z-index: 1000000;
	box-sizing: border-box;
}

/* جهة فتح القائمة حسب موقع الأيقونة */
.modawen-floating-widget.pos-bottom_right .modawen-floating-dropdown {
	bottom: calc(100% + 12px);
	right: 0;
	animation: mdwFloatUp 0.25s ease-out;
}

.modawen-floating-widget.pos-bottom_left .modawen-floating-dropdown {
	bottom: calc(100% + 12px);
	left: 0;
	animation: mdwFloatUp 0.25s ease-out;
}

.modawen-floating-widget.pos-top_right .modawen-floating-dropdown {
	top: calc(100% + 12px);
	right: 0;
	animation: mdwFloatDown 0.25s ease-out;
}

.modawen-floating-widget.pos-top_left .modawen-floating-dropdown {
	top: calc(100% + 12px);
	left: 0;
	animation: mdwFloatDown 0.25s ease-out;
}

.modawen-floating-widget.pos-middle_right .modawen-floating-dropdown {
	top: 50%;
	right: calc(100% + 12px);
	transform: translateY(-50%);
	animation: mdwFloatLeft 0.25s ease-out;
}

.modawen-floating-widget.pos-middle_left .modawen-floating-dropdown {
	top: 50%;
	left: calc(100% + 12px);
	transform: translateY(-50%);
	animation: mdwFloatRight 0.25s ease-out;
}

@keyframes mdwFloatUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

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

@keyframes mdwFloatLeft {
	from { opacity: 0; transform: translate(8px, -50%); }
	to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes mdwFloatRight {
	from { opacity: 0; transform: translate(-8px, -50%); }
	to { opacity: 1; transform: translate(0, -50%); }
}

.modawen-floating-dropdown.active {
	display: block;
}

.modawen-floating-dropdown .modawen-dropdown-title {
	font-size: 0.75rem;
	font-weight: 800;
	color: #94a3b8;
	padding: 6px 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 4px;
}

.modawen-floating-dropdown a.modawen-dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: #334155;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.modawen-floating-dropdown a.modawen-dropdown-item:hover {
	background: #f1f5f9;
	color: #0f766e;
}

.modawen-floating-dropdown a.modawen-dropdown-item.active-lang {
	background: #f0fdfa;
	color: #0f766e;
	font-weight: 800;
}

.modawen-floating-dropdown a.modawen-dropdown-item .lang-flag {
	font-size: 1.15rem;
	line-height: 1;
}

/* إخفاء على شاشات الجوال في حال تفعيل خيار الإخفاء */
@media (max-width: 768px) {
	.modawen-hide-on-mobile {
		display: none !important;
	}
	.modawen-floating-widget.pos-bottom_right {
		bottom: 16px;
		right: 16px;
	}
	.modawen-floating-widget.pos-bottom_left {
		bottom: 16px;
		left: 16px;
	}
}