/**
 * Translio Language Switcher Styles
 * Responsive design for desktop and mobile
 */

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

.translio-switcher {
    position: relative;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.translio-switcher * {
    box-sizing: border-box;
}

.translio-switcher__name {
    display: inline-block;
    vertical-align: middle;
}

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

.translio-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-right: 6px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Flag images using emoji fallback - can be replaced with sprites */
.translio-flag--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }
.translio-flag--de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.translio-flag--fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.translio-flag--es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 500'%3E%3Cpath fill='%23c60b1e' d='M0 0h750v500H0z'/%3E%3Cpath fill='%23ffc400' d='M0 125h750v250H0z'/%3E%3C/svg%3E"); }
.translio-flag--it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce2b37' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.translio-flag--pt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cpath fill='%23006600' d='M0 0h240v400H0z'/%3E%3Cpath fill='%23ff0000' d='M240 0h360v400H240z'/%3E%3Ccircle cx='240' cy='200' r='80' fill='%23ffcc00'/%3E%3C/svg%3E"); }
.translio-flag--ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23fff' d='M0 0h9v3H0z'/%3E%3Cpath fill='%230039A6' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.translio-flag--zh { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23de2910' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23ffde00' d='M5 3l1 3-2.5-2h3L4 6z'/%3E%3C/svg%3E"); }
.translio-flag--ja { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cpath fill='%23fff' d='M0 0h900v600H0z'/%3E%3Ccircle cx='450' cy='300' r='180' fill='%23bc002d'/%3E%3C/svg%3E"); }
.translio-flag--ko { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cpath fill='%23fff' d='M0 0h900v600H0z'/%3E%3Ccircle cx='450' cy='300' r='150' fill='%23c60c30'/%3E%3C/svg%3E"); }
.translio-flag--ar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 0h12v2H0z'/%3E%3Cpath fill='%23fff' d='M0 2h12v2H0z'/%3E%3Cpath fill='%23007a3d' d='M0 4h12v2H0z'/%3E%3Cpath fill='%23ce1126' d='M0 0l4 3-4 3z'/%3E%3C/svg%3E"); }
.translio-flag--hi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cpath fill='%23f93' d='M0 0h900v200H0z'/%3E%3Cpath fill='%23fff' d='M0 200h900v200H0z'/%3E%3Cpath fill='%23128807' d='M0 400h900v200H0z'/%3E%3Ccircle cx='450' cy='300' r='60' fill='%23008'/%3E%3C/svg%3E"); }
.translio-flag--nl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%2321468B' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23fff' d='M0 0h9v4H0z'/%3E%3Cpath fill='%23AE1C28' d='M0 0h9v2H0z'/%3E%3C/svg%3E"); }
.translio-flag--pl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='%23fff' d='M0 0h16v5H0z'/%3E%3Cpath fill='%23dc143c' d='M0 5h16v5H0z'/%3E%3C/svg%3E"); }
.translio-flag--uk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath fill='%230057b7' d='M0 0h1200v400H0z'/%3E%3Cpath fill='%23ffd700' d='M0 400h1200v400H0z'/%3E%3C/svg%3E"); }
.translio-flag--tr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath fill='%23e30a17' d='M0 0h1200v800H0z'/%3E%3Ccircle cx='425' cy='400' r='200' fill='%23fff'/%3E%3Ccircle cx='475' cy='400' r='160' fill='%23e30a17'/%3E%3C/svg%3E"); }
.translio-flag--vi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cpath fill='%23da251d' d='M0 0h900v600H0z'/%3E%3Cpath fill='%23ff0' d='M450 120l103 317H244l103-127 103 127z'/%3E%3C/svg%3E"); }
.translio-flag--th { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cpath fill='%23A51931' d='M0 0h900v600H0z'/%3E%3Cpath fill='%23F4F5F8' d='M0 100h900v400H0z'/%3E%3Cpath fill='%232D2A4A' d='M0 200h900v200H0z'/%3E%3C/svg%3E"); }
.translio-flag--id { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23fff' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23ce1126' d='M0 0h3v1H0z'/%3E%3C/svg%3E"); }
.translio-flag--he { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cpath fill='%23fff' d='M0 0h220v160H0z'/%3E%3Cpath fill='%230038b8' d='M0 15h220v25H0zM0 120h220v25H0z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Dropdown Style
   ========================================================================== */

.translio-switcher--dropdown {
    position: relative;
}

.translio-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.translio-switcher__toggle:hover {
    border-color: #999;
}

.translio-switcher__toggle:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

.translio-switcher__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s;
}

.translio-switcher__toggle[aria-expanded="true"] .translio-switcher__arrow {
    transform: rotate(180deg);
}

.translio-switcher__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 100%;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.translio-switcher__toggle[aria-expanded="true"] + .translio-switcher__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.translio-switcher__dropdown .translio-switcher__item {
    margin: 0;
    padding: 0;
}

.translio-switcher__dropdown .translio-switcher__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.translio-switcher__dropdown .translio-switcher__link:hover {
    background-color: #f5f5f5;
}

/* ==========================================================================
   Inline Style
   ========================================================================== */

.translio-switcher--inline .translio-switcher__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.translio-switcher--inline .translio-switcher__item {
    margin: 0;
    padding: 0;
}

.translio-switcher--inline .translio-switcher__link,
.translio-switcher--inline .translio-switcher__current {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.translio-switcher--inline .translio-switcher__link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.translio-switcher--inline .translio-switcher__item--active .translio-switcher__current {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* Separator between items */
.translio-switcher--inline .translio-switcher__item:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    margin-left: 8px;
    background-color: #ddd;
    vertical-align: middle;
}

/* ==========================================================================
   Flags Only Style
   ========================================================================== */

.translio-switcher--flags .translio-switcher__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.translio-switcher--flags .translio-flag {
    width: 24px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.translio-switcher--flags .translio-flag:hover {
    opacity: 1;
    transform: scale(1.1);
}

.translio-switcher--flags .translio-switcher__item--active .translio-flag {
    opacity: 1;
    box-shadow: 0 0 0 2px #0073aa;
}

.translio-switcher--flags .translio-switcher__name {
    display: none;
}

/* ==========================================================================
   Nav Menu Integration
   ========================================================================== */

.menu-item-translio {
    position: relative;
}

.menu-item-translio > a {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.menu-item-translio .translio-flag {
    flex-shrink: 0;
}

.menu-item-translio-lang.current-lang > a {
    font-weight: 600;
}

/* ==========================================================================
   Widget Styles
   ========================================================================== */

.widget-translio-switcher .translio-switcher {
    display: block;
}

.widget-translio-switcher .translio-switcher--dropdown {
    display: block;
}

.widget-translio-switcher .translio-switcher__toggle {
    width: 100%;
    justify-content: space-between;
}

.widget-translio-switcher .translio-switcher__dropdown {
    right: 0;
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    .translio-switcher {
        font-size: 13px;
    }

    .translio-switcher__toggle {
        padding: 10px 14px;
    }

    .translio-flag {
        width: 18px;
        height: 13px;
    }

    /* Full-width dropdown on mobile */
    .translio-switcher--dropdown .translio-switcher__dropdown {
        position: fixed;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 10px;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 8px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }

    .translio-switcher--dropdown .translio-switcher__dropdown .translio-switcher__link {
        padding: 12px 16px;
    }

    /* Backdrop for mobile dropdown */
    .translio-switcher--dropdown.translio-switcher--open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    /* Inline becomes vertical on mobile */
    .translio-switcher--inline .translio-switcher__list {
        flex-direction: column;
        gap: 4px;
    }

    .translio-switcher--inline .translio-switcher__item::after {
        display: none;
    }

    .translio-switcher--inline .translio-switcher__link,
    .translio-switcher--inline .translio-switcher__current {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   Dark Theme Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .translio-switcher__toggle {
        background: #2d2d2d;
        border-color: #444;
        color: #fff;
    }

    .translio-switcher__toggle:hover {
        border-color: #666;
    }

    .translio-switcher__dropdown {
        background: #2d2d2d;
        border-color: #444;
    }

    .translio-switcher__dropdown .translio-switcher__link:hover {
        background-color: #3d3d3d;
    }

    .translio-switcher--inline .translio-switcher__link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .translio-switcher--inline .translio-switcher__item--active .translio-switcher__current {
        background-color: rgba(255, 255, 255, 0.15);
    }
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .translio-flag {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .translio-switcher__arrow {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .translio-switcher__dropdown {
    left: auto;
    right: 0;
}

[dir="rtl"] .translio-switcher--inline .translio-switcher__item:not(:last-child)::after {
    margin-left: 0;
    margin-right: 8px;
}

/* ==========================================================================
   JavaScript Toggle Helper
   ========================================================================== */

.translio-switcher--dropdown .translio-switcher__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}