/* ZM Translations Frontend Styles */

/* Language Selector */
.zm-language-selector {
    position: relative;
    display: inline-block;
}

/* Dropdown Style */
.zm-lang-selector-dropdown select.zm-lang-switcher {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 150px;
}

.zm-lang-selector-dropdown select.zm-lang-switcher:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Flags Style */
.zm-lang-flags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.zm-lang-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.zm-lang-flag:hover {
    background: #f5f5f5;
    border-color: #2271b1;
}

.zm-lang-flag.active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.zm-lang-flag.active .zm-lang-name {
    color: #fff;
}

/* List Style */
.zm-lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zm-lang-list li {
    margin: 0;
    padding: 0;
}

.zm-lang-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: background 0.2s ease;
}

.zm-lang-link:hover {
    background: #f5f5f5;
}

.zm-lang-link.active {
    background: #2271b1;
    color: #fff;
}

.zm-lang-link.active .zm-lang-name {
    color: #fff;
}

/* Flag Icons */
.zm-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    vertical-align: middle;
}

/* Flag images using emoji flags or CSS flags */
.zm-flag.zm-flag-en {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="#012169" d="M0 0h640v480H0z"/><path fill="#FFF" d="M75 0l244 181L562 0h78v62L400 241l240 178v61H562L318 301 78 480H0v-60l239-178L0 64V0h75z"/><path fill="#C8102E" d="M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/><path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/><path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/></svg>');
}

.zm-flag.zm-flag-ar {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="#000" d="M0 0h640v160H0z"/><path fill="#FFF" d="M0 160h640v160H0z"/><path fill="#006233" d="M0 320h640v160H0z"/><path fill="#CE1126" d="M0 0l213.3 160L0 320z"/></svg>');
}

.zm-flag.zm-flag-ur {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="200" fill="#01411C"/><rect width="900" height="200" y="200" fill="#FFF"/><rect width="900" height="200" y="400" fill="#01411C"/><circle cx="450" cy="300" r="200" fill="#01411C"/><circle cx="450" cy="300" r="160" fill="#FFF"/><circle cx="450" cy="300" r="120" fill="#01411C"/><circle cx="450" cy="300" r="80" fill="#FFF"/></svg>');
}

.zm-flag.zm-flag-tr {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="600" fill="#E30A17"/><circle cx="450" cy="300" r="150" fill="#FFF"/><circle cx="500" cy="300" r="120" fill="#E30A17"/></svg>');
}

.zm-flag.zm-flag-ku {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="200" fill="#EF3340"/><rect width="900" height="200" y="200" fill="#FFF"/><rect width="900" height="200" y="400" fill="#00A859"/><circle cx="450" cy="300" r="100" fill="#FFD100"/></svg>');
}

.zm-flag.zm-flag-so {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="600" fill="#4189DD"/><path d="M0 0l900 600M900 0L0 600" stroke="#FFF" stroke-width="120"/><path d="M450 0v600M0 300h900" stroke="#FFF" stroke-width="100"/><circle cx="450" cy="300" r="150" fill="#4189DD"/><path d="M450 150l60 180-150-110h180l-150 110z" fill="#FFF"/></svg>');
}

.zm-lang-name {
    font-size: 14px;
    font-weight: 500;
}

/* RTL Support */
body.zm-rtl,
body.rtl {
    direction: rtl;
    text-align: right;
}

body.zm-rtl .zm-language-selector,
body.rtl .zm-language-selector {
    direction: rtl;
}

body.zm-rtl .zm-lang-flags,
body.rtl .zm-lang-flags {
    flex-direction: row-reverse;
}

body.zm-rtl .zm-lang-link,
body.rtl .zm-lang-link {
    flex-direction: row-reverse;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .zm-lang-flags {
        flex-direction: column;
        align-items: stretch;
    }
    
    .zm-lang-flag {
        width: 100%;
        justify-content: center;
    }
}

/* Loading state */
.zm-language-selector.loading {
    opacity: 0.6;
    pointer-events: none;
}

.zm-language-selector.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #2271b1;
    border-top-color: transparent;
    border-radius: 50%;
    animation: zm-spin 0.6s linear infinite;
}

@keyframes zm-spin {
    to { transform: rotate(360deg); }
}