/**
 * Language Switcher Styles
 * JSON Content Manager Plugin
 */

/* Base Styles */
.jcm-language-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.jcm-language-switcher li {
    margin: 0;
    padding: 0;
}

.jcm-language-switcher a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1.4;
}

.jcm-language-switcher a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.jcm-language-switcher li.active a,
.jcm-language-switcher li.current a {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* Horizontal Layout (default) */
.jcm-language-switcher.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Vertical Layout */
.jcm-language-switcher.vertical {
    flex-direction: column;
    align-items: stretch;
}

.jcm-language-switcher.vertical a {
    justify-content: flex-start;
}

/* Flag Styles - Global (applies to both list and dropdown) */
.flag {
    display: inline-block;
    width: 24px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
    flex-shrink: 0;
    vertical-align: middle;
}

/* Flag Icons using inline SVG data URLs - works on Windows and all platforms */
.flag-en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7410 3900'%3E%3Crect fill='%23b22234' width='7410' height='3900'/%3E%3Cg fill='%23fff'%3E%3Crect y='300' width='7410' height='300'/%3E%3Crect y='900' width='7410' height='300'/%3E%3Crect y='1500' width='7410' height='300'/%3E%3Crect y='2100' width='7410' height='300'/%3E%3Crect y='2700' width='7410' height='300'/%3E%3Crect y='3300' width='7410' height='300'/%3E%3C/g%3E%3Crect fill='%233c3b6e' width='2964' height='2100'/%3E%3C/svg%3E");
}

.flag-ja {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23fff' width='900' height='600'/%3E%3Ccircle fill='%23bc002d' cx='450' cy='300' r='180'/%3E%3C/svg%3E");
}

.flag-ko {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23fff' width='900' height='600'/%3E%3Ccircle fill='%23c60c30' cx='450' cy='300' r='150'/%3E%3Cpath fill='%23003478' d='M450 150a150 150 0 0 1 0 300 75 75 0 0 0 0-150 75 75 0 0 1 0-150'/%3E%3Ccircle fill='%23c60c30' cx='450' cy='225' r='75'/%3E%3Ccircle fill='%23003478' cx='450' cy='375' r='75'/%3E%3C/svg%3E");
}

.flag-de {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect fill='%23000' width='5' height='3'/%3E%3Crect fill='%23D00' y='1' width='5' height='2'/%3E%3Crect fill='%23FFCE00' y='2' width='5' height='1'/%3E%3C/svg%3E");
}

.flag-fr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23002395' width='300' height='600'/%3E%3Crect fill='%23fff' x='300' width='300' height='600'/%3E%3Crect fill='%23ED2939' x='600' width='300' height='600'/%3E%3C/svg%3E");
}

.flag-es {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 500'%3E%3Crect fill='%23c60b1e' width='750' height='500'/%3E%3Crect fill='%23ffc400' y='125' width='750' height='250'/%3E%3C/svg%3E");
}

.flag-ar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23006c35' width='900' height='600'/%3E%3Crect fill='%23fff' y='200' width='900' height='200'/%3E%3Crect y='400' width='900' height='200'/%3E%3C/svg%3E");
}

.flag-zh {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23de2910' width='900' height='600'/%3E%3Cg fill='%23ffde00' transform='translate(150,120) scale(3)'%3E%3Cpath d='m0-30 9.27 28.53-24.27-17.63h30l-24.27 17.63z'/%3E%3C/g%3E%3Cg fill='%23ffde00' transform='translate(300,60) scale(1)'%3E%3Cpath d='m0-30 9.27 28.53-24.27-17.63h30l-24.27 17.63z'/%3E%3C/g%3E%3Cg fill='%23ffde00' transform='translate(360,120) scale(1)'%3E%3Cpath d='m0-30 9.27 28.53-24.27-17.63h30l-24.27 17.63z'/%3E%3C/g%3E%3Cg fill='%23ffde00' transform='translate(360,210) scale(1)'%3E%3Cpath d='m0-30 9.27 28.53-24.27-17.63h30l-24.27 17.63z'/%3E%3C/g%3E%3Cg fill='%23ffde00' transform='translate(300,270) scale(1)'%3E%3Cpath d='m0-30 9.27 28.53-24.27-17.63h30l-24.27 17.63z'/%3E%3C/g%3E%3C/svg%3E");
}

.flag-zh-tw {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23fe0000' width='900' height='600'/%3E%3Crect fill='%23000095' width='450' height='300'/%3E%3Cg fill='%23fff' transform='translate(225,150)'%3E%3Ccircle r='75'/%3E%3C/g%3E%3Cg fill='%23000095' transform='translate(225,150)'%3E%3Ccircle r='45'/%3E%3C/g%3E%3C/svg%3E");
}

.flag-pt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Crect fill='%23006600' width='240' height='400'/%3E%3Crect fill='%23ff0000' x='240' width='360' height='400'/%3E%3Ccircle fill='%23ffcc00' cx='240' cy='200' r='60'/%3E%3C/svg%3E");
}

.flag-pt-br {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 504'%3E%3Crect fill='%23009b3a' width='720' height='504'/%3E%3Cpath fill='%23fedf00' d='M360 72 644 252 360 432 76 252z'/%3E%3Ccircle fill='%23002776' cx='360' cy='252' r='90'/%3E%3C/svg%3E");
}

.flag-ru {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23fff' width='900' height='200'/%3E%3Crect fill='%230039a6' y='200' width='900' height='200'/%3E%3Crect fill='%23d52b1e' y='400' width='900' height='200'/%3E%3C/svg%3E");
}

.flag-it {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%23009246' width='300' height='600'/%3E%3Crect fill='%23fff' x='300' width='300' height='600'/%3E%3Crect fill='%23ce2b37' x='600' width='300' height='600'/%3E%3C/svg%3E");
}

.flag-he {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20900%20600'%3E%3Crect%20width%3D'900'%20height%3D'600'%20fill%3D'%23ffffff'%2F%3E%3Crect%20y%3D'60'%20width%3D'900'%20height%3D'90'%20fill%3D'%230038b8'%2F%3E%3Crect%20y%3D'450'%20width%3D'900'%20height%3D'90'%20fill%3D'%230038b8'%2F%3E%3Cg%20fill%3D'none'%20stroke%3D'%230038b8'%20stroke-width%3D'18'%20transform%3D'translate(450%20300)'%3E%3Cpath%20d%3D'M0-100%20L86.6%2050%20L-86.6%2050%20Z'%2F%3E%3Cpath%20d%3D'M0%20100%20L86.6%20-50%20L-86.6%20-50%20Z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.flag-fa {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20900%20600'%3E%3Crect%20width%3D'900'%20height%3D'600'%20fill%3D'%23ffffff'%2F%3E%3Crect%20width%3D'900'%20height%3D'200'%20fill%3D'%23239f40'%2F%3E%3Crect%20y%3D'400'%20width%3D'900'%20height%3D'200'%20fill%3D'%23da0000'%2F%3E%3C%2Fsvg%3E");
}

.flag-nl {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect fill='%2321468b' width='900' height='600'/%3E%3Crect fill='%23fff' width='900' height='400'/%3E%3Crect fill='%23ae1c28' width='900' height='200'/%3E%3C/svg%3E");
}

/* Name Styles */
.jcm-language-switcher .name {
    white-space: nowrap;
}

/* Dropdown Style */
.jcm-language-switcher-dropdown {
    position: relative;
    display: inline-block;
}

.jcm-language-switcher-dropdown .jcm-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    font-family: inherit;
    color: #333;
}

/* Ensure flag in toggle displays correctly */
.jcm-language-switcher-dropdown .jcm-dropdown-toggle .flag {
    flex-shrink: 0;
}

.jcm-language-switcher-dropdown .jcm-dropdown-toggle:hover {
    border-color: #999;
    background: #f9f9f9;
}

.jcm-language-switcher-dropdown .jcm-dropdown-toggle:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.jcm-language-switcher-dropdown .jcm-dropdown-arrow {
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.jcm-language-switcher-dropdown.open .jcm-dropdown-arrow {
    transform: rotate(180deg);
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    padding-top: 8px; /* Visual spacing without breaking hover */
    display: none;
    flex-direction: column;
    z-index: 1000;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Create invisible bridge to maintain hover state */
.jcm-language-switcher-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px; /* Bridge area */
    background: transparent;
}

.jcm-language-switcher-dropdown.open .jcm-dropdown-menu,
.jcm-language-switcher-dropdown:hover .jcm-dropdown-menu,
.jcm-language-switcher-dropdown:focus-within .jcm-dropdown-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 0;
    color: #333;
    text-decoration: none;
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu a:hover {
    background-color: #f5f5f5;
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu li.active a {
    background-color: #e7f3ff;
    color: #0066cc;
}

.jcm-language-switcher-dropdown .jcm-dropdown-menu li.active a::before {
    content: "✓";
    margin-right: 4px;
}

/* Compact Style */
.jcm-language-switcher.compact a {
    padding: 4px 8px;
    font-size: 12px;
}

.jcm-language-switcher.compact .flag {
    width: 18px;
    height: 14px;
}

/* Pill Style */
.jcm-language-switcher.pills a {
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
}

.jcm-language-switcher.pills li.active a,
.jcm-language-switcher.pills li.current a {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* Dark Theme */
.jcm-language-switcher.dark {
    background-color: #222;
    padding: 8px;
    border-radius: 6px;
}

.jcm-language-switcher.dark a {
    color: #fff;
}

.jcm-language-switcher.dark a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.jcm-language-switcher.dark li.active a,
.jcm-language-switcher.dark li.current a {
    background-color: rgba(255, 255, 255, 0.2);
}

/* RTL Support */
[dir="rtl"] .jcm-language-switcher.horizontal {
    flex-direction: row-reverse;
}

[dir="rtl"] .jcm-language-switcher a {
    flex-direction: row-reverse;
}

[dir="rtl"] .jcm-language-switcher-dropdown .jcm-language-switcher {
    left: auto;
    right: 0;
}

/* Widget Styles */
.widget_jcm_language_switcher .widget-title {
    margin-bottom: 12px;
}

.widget_jcm_language_switcher .jcm-language-switcher {
    width: 100%;
}

.widget_jcm_language_switcher .jcm-language-switcher.vertical a {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .jcm-language-switcher.horizontal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .jcm-language-switcher a {
        padding: 8px 12px;
    }
}