/**
 * ElemenTrans - Flag Icon Styles
 *
 * Flag icon styling using SVG background images with CSS fallback.
 * Supports multiple sizes and graceful degradation when images
 * are unavailable.
 *
 * @package    ElemenTrans
 * @subpackage ElemenTrans/public/css
 * @since      1.0.0
 */

/* ==========================================================================
   Base Flag Styles
   ========================================================================== */

.elementrans-flag {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #E5E7EB;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
	flex-shrink: 0;
	position: relative;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Flag Icons - SVG Background Images
   Paths are relative from this CSS file (public/css/) to assets/images/flags/.
   ========================================================================== */

.elementrans-flag-en,
.elementrans-flag-us {
	background-image: url("../../assets/images/flags/us.svg");
}

.elementrans-flag-ar,
.elementrans-flag-sa {
	background-image: url("../../assets/images/flags/sa.svg");
}

/* Additional flag codes that may be used */
.elementrans-flag-gb {
	background-image: url("../../assets/images/flags/gb.svg");
}

.elementrans-flag-eg {
	background-image: url("../../assets/images/flags/eg.svg");
}

.elementrans-flag-ae {
	background-image: url("../../assets/images/flags/ae.svg");
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.elementrans-flag.flag-sm,
.elementrans-flag--sm {
	width: 16px;
	height: 16px;
}

.elementrans-flag.flag-md,
.elementrans-flag--md {
	width: 24px;
	height: 24px;
}

.elementrans-flag.flag-lg,
.elementrans-flag--lg {
	width: 32px;
	height: 32px;
}

.elementrans-flag.flag-xl,
.elementrans-flag--xl {
	width: 48px;
	height: 48px;
}

/* ==========================================================================
   Rectangular Flag Variant (non-circular)
   ========================================================================== */

.elementrans-flag--rect {
	border-radius: 3px;
	width: 24px;
	height: 16px;
}

.elementrans-flag--rect.flag-sm {
	width: 20px;
	height: 14px;
}

.elementrans-flag--rect.flag-md {
	width: 28px;
	height: 19px;
}

.elementrans-flag--rect.flag-lg {
	width: 36px;
	height: 24px;
}

.elementrans-flag--rect.flag-xl {
	width: 48px;
	height: 32px;
}

/* ==========================================================================
   Fallback: Language Code Text
   When SVG images fail to load, display the language code as text.
   Uses CSS pseudo-elements and the ::after trick with attr()
   alongside a colored background as a visual fallback.
   ========================================================================== */

/* Base fallback styling */
.elementrans-flag::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	color: #FFFFFF;
	letter-spacing: 0.5px;
	line-height: 1;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

/* Show fallback when image fails - triggered by JS adding this class */
.elementrans-flag--fallback::after {
	opacity: 1;
}

.elementrans-flag--fallback {
	background-image: none !important;
}

/* English fallback */
.elementrans-flag-en.elementrans-flag--fallback,
.elementrans-flag-us.elementrans-flag--fallback,
.elementrans-flag-gb.elementrans-flag--fallback {
	background: linear-gradient(135deg, #003087 0%, #1E40AF 100%);
}

.elementrans-flag-en.elementrans-flag--fallback::after,
.elementrans-flag-us.elementrans-flag--fallback::after {
	content: "EN";
}

.elementrans-flag-gb.elementrans-flag--fallback::after {
	content: "GB";
}

/* Arabic fallback */
.elementrans-flag-ar.elementrans-flag--fallback,
.elementrans-flag-sa.elementrans-flag--fallback {
	background: linear-gradient(135deg, #006C35 0%, #059669 100%);
}

.elementrans-flag-ar.elementrans-flag--fallback::after,
.elementrans-flag-sa.elementrans-flag--fallback::after {
	content: "AR";
}

.elementrans-flag-eg.elementrans-flag--fallback {
	background: linear-gradient(135deg, #C8102E 0%, #EF4444 100%);
}

.elementrans-flag-eg.elementrans-flag--fallback::after {
	content: "EG";
}

.elementrans-flag-ae.elementrans-flag--fallback {
	background: linear-gradient(135deg, #006C35 0%, #059669 100%);
}

.elementrans-flag-ae.elementrans-flag--fallback::after {
	content: "AE";
}

/* Scale fallback text for different sizes */
.elementrans-flag.flag-sm.elementrans-flag--fallback::after,
.elementrans-flag--sm.elementrans-flag--fallback::after {
	font-size: 7px;
}

.elementrans-flag.flag-lg.elementrans-flag--fallback::after,
.elementrans-flag--lg.elementrans-flag--fallback::after {
	font-size: 11px;
}

.elementrans-flag.flag-xl.elementrans-flag--fallback::after,
.elementrans-flag--xl.elementrans-flag--fallback::after {
	font-size: 14px;
}

/* ==========================================================================
   CSS-Only Flag Alternatives (no SVG required)
   These provide basic visual representation using CSS gradients.
   Used when data-fallback="css" attribute is present.
   ========================================================================== */

.elementrans-flag[data-fallback="css"].elementrans-flag-en,
.elementrans-flag[data-fallback="css"].elementrans-flag-us {
	background-image: none;
	background: linear-gradient(180deg,
		#B22234 0%, #B22234 7.7%,
		#FFFFFF 7.7%, #FFFFFF 15.4%,
		#B22234 15.4%, #B22234 23.1%,
		#FFFFFF 23.1%, #FFFFFF 30.8%,
		#B22234 30.8%, #B22234 38.5%,
		#FFFFFF 38.5%, #FFFFFF 46.2%,
		#B22234 46.2%, #B22234 53.8%,
		#FFFFFF 53.8%, #FFFFFF 61.5%,
		#B22234 61.5%, #B22234 69.2%,
		#FFFFFF 69.2%, #FFFFFF 76.9%,
		#B22234 76.9%, #B22234 84.6%,
		#FFFFFF 84.6%, #FFFFFF 92.3%,
		#B22234 92.3%, #B22234 100%
	);
	position: relative;
}

.elementrans-flag[data-fallback="css"].elementrans-flag-en::before,
.elementrans-flag[data-fallback="css"].elementrans-flag-us::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 53.8%;
	background: #3C3B6E;
}

.elementrans-flag[data-fallback="css"].elementrans-flag-ar,
.elementrans-flag[data-fallback="css"].elementrans-flag-sa {
	background-image: none;
	background: #006C35;
}

.elementrans-flag[data-fallback="css"].elementrans-flag-gb {
	background-image: none;
	background:
		linear-gradient(to bottom, #003087 33%, #FFFFFF 33%, #FFFFFF 40%, #C8102E 40%, #C8102E 60%, #FFFFFF 60%, #FFFFFF 67%, #003087 67%);
}

/* ==========================================================================
   Emoji Flag Alternative
   Applied when data-fallback="emoji" attribute is present.
   ========================================================================== */

.elementrans-flag[data-fallback="emoji"] {
	background-image: none !important;
	background: transparent;
	box-shadow: none;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
}

.elementrans-flag[data-fallback="emoji"].flag-sm {
	font-size: 14px;
	line-height: 16px;
}

.elementrans-flag[data-fallback="emoji"].flag-lg {
	font-size: 24px;
	line-height: 32px;
}

.elementrans-flag[data-fallback="emoji"].flag-xl {
	font-size: 36px;
	line-height: 48px;
}

/* ==========================================================================
   Animation for Flag Loading
   ========================================================================== */

.elementrans-flag--loading {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: etFlagShimmer 1.5s ease-in-out infinite;
}

@keyframes etFlagShimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ==========================================================================
   High DPI / Retina Support
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.elementrans-flag {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}