/**
 * Professional Language Badges for Smart Linguini
 *
 * Replaces emoji flags with professional ISO code badges
 * Based on 2025-2026 UI/UX best practices
 *
 * Sources:
 * - https://simplelocalize.io/blog/posts/ui-design-language-selector-examples/
 * - https://www.smashingmagazine.com/2022/05/designing-better-language-selector/
 * - https://anandchowdhary.github.io/language-icons/
 */

/* ==========================================
   OPTION 1: RECTANGULAR BADGES (RECOMMENDED)
   ========================================== */

.lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 200ms ease;
}

.lang-code {
    display: inline-block;
    min-width: 22px;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    text-align: center;
    color: inherit;
}

.lang-name {
    color: inherit;
    font-weight: 500;
}

/* Language-specific colors (flag-inspired) */

/* Polish - Red from flag */
.lang-badge[data-lang="pl"] {
    background: linear-gradient(135deg, #DC143C 0%, #C41230 100%);
    color: white;
}

/* English - Blue from UK flag */
.lang-badge[data-lang="en"] {
    background: linear-gradient(135deg, #012169 0%, #001a4d 100%);
    color: white;
}

/* German - Black from flag */
.lang-badge[data-lang="de"] {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    color: white;
}

/* French - Blue from flag */
.lang-badge[data-lang="fr"] {
    background: linear-gradient(135deg, #002395 0%, #001f7a 100%);
    color: white;
}

/* Spanish - Red from flag */
.lang-badge[data-lang="es"] {
    background: linear-gradient(135deg, #C60B1E 0%, #a00918 100%);
    color: white;
}

/* Italian - Green from flag */
.lang-badge[data-lang="it"] {
    background: linear-gradient(135deg, #009246 0%, #007a3a 100%);
    color: white;
}

/* Russian - Blue from flag */
.lang-badge[data-lang="ru"] {
    background: linear-gradient(135deg, #0039A6 0%, #002d85 100%);
    color: white;
}

/* Ukrainian - Blue from flag */
.lang-badge[data-lang="uk"] {
    background: linear-gradient(135deg, #005BBB 0%, #004a99 100%);
    color: white;
}

/* Czech - Blue from flag */
.lang-badge[data-lang="cs"] {
    background: linear-gradient(135deg, #11457E 0%, #0d3563 100%);
    color: white;
}

/* Slovak - Blue from flag */
.lang-badge[data-lang="sk"] {
    background: linear-gradient(135deg, #0B4EA2 0%, #093d80 100%);
    color: white;
}

/* Portuguese - Green from flag */
.lang-badge[data-lang="pt"] {
    background: linear-gradient(135deg, #006600 0%, #005200 100%);
    color: white;
}

/* Dutch - Orange */
.lang-badge[data-lang="nl"] {
    background: linear-gradient(135deg, #FF6C00 0%, #d95a00 100%);
    color: white;
}

/* Swedish - Blue from flag */
.lang-badge[data-lang="sv"] {
    background: linear-gradient(135deg, #006AA7 0%, #005485 100%);
    color: white;
}

/* Japanese - Red from flag */
.lang-badge[data-lang="ja"] {
    background: linear-gradient(135deg, #BC002D 0%, #9a0024 100%);
    color: white;
}

/* Chinese - Red from flag */
.lang-badge[data-lang="zh"] {
    background: linear-gradient(135deg, #DE2910 0%, #b8210d 100%);
    color: white;
}

/* Korean - Blue from flag */
.lang-badge[data-lang="ko"] {
    background: linear-gradient(135deg, #003478 0%, #002759 100%);
    color: white;
}

/* Arabic - Green (commonly associated) */
.lang-badge[data-lang="ar"] {
    background: linear-gradient(135deg, #007A3D 0%, #005d2e 100%);
    color: white;
}

/* Turkish - Red from flag */
.lang-badge[data-lang="tr"] {
    background: linear-gradient(135deg, #E30A17 0%, #b90812 100%);
    color: white;
}

/* Greek - Blue from flag */
.lang-badge[data-lang="el"] {
    background: linear-gradient(135deg, #0D5EAF 0%, #0a4b8a 100%);
    color: white;
}

/* Unknown/Fallback - Neutral gray */
.lang-badge[data-lang="unknown"] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
}

/* Hover effect (optional) */
.lang-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* ==========================================
   OPTION 2: MINIMAL BADGES (OUTLINED)
   ========================================== */

.lang-badge-minimal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #2E5C8A;
    background: #ffffff;
    transition: all 200ms ease;
}

.lang-badge-minimal:hover {
    border-color: #5B9BD5;
    background: #EBF4FB;
}

.lang-badge-minimal .lang-code {
    font-weight: 700;
    color: #5B9BD5;
    text-transform: uppercase;
    background: none;
    padding: 0;
    min-width: auto;
}


/* ==========================================
   OPTION 3: CIRCLE ICONS (COMPACT)
   ========================================== */

.lang-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    flex-shrink: 0;
    transition: all 200ms ease;
}

.lang-icon:hover {
    transform: scale(1.1);
}

/* Circle icon colors (same as badges) */
.lang-icon[data-lang="pl"] { background: #DC143C; }
.lang-icon[data-lang="en"] { background: #012169; }
.lang-icon[data-lang="de"] { background: #000000; }
.lang-icon[data-lang="fr"] { background: #002395; }
.lang-icon[data-lang="es"] { background: #C60B1E; }
.lang-icon[data-lang="it"] { background: #009246; }
.lang-icon[data-lang="ru"] { background: #0039A6; }
.lang-icon[data-lang="uk"] { background: #005BBB; }
.lang-icon[data-lang="cs"] { background: #11457E; }
.lang-icon[data-lang="sk"] { background: #0B4EA2; }
.lang-icon[data-lang="pt"] { background: #006600; }
.lang-icon[data-lang="nl"] { background: #FF6C00; }
.lang-icon[data-lang="sv"] { background: #006AA7; }
.lang-icon[data-lang="ja"] { background: #BC002D; }
.lang-icon[data-lang="zh"] { background: #DE2910; }
.lang-icon[data-lang="ko"] { background: #003478; }
.lang-icon[data-lang="ar"] { background: #007A3D; }
.lang-icon[data-lang="tr"] { background: #E30A17; }
.lang-icon[data-lang="el"] { background: #0D5EAF; }
.lang-icon[data-lang="unknown"] { background: #64748b; }


/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* Ensure language badges are accessible */
.lang-badge,
.lang-badge-minimal,
.lang-icon {
    /* Good for screen readers */
    font-variant-numeric: tabular-nums;
}

/* Tooltip for circle icons (since they don't have text label) */
.lang-icon[title] {
    cursor: help;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 640px) {
    /* Slightly smaller on mobile */
    .lang-badge {
        font-size: 0.7rem;
        padding: 3px 7px;
        gap: 5px;
    }

    .lang-code {
        font-size: 0.65rem;
        min-width: 20px;
    }

    .lang-icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }
}


/* ==========================================
   DARK MODE SUPPORT (OPTIONAL)
   ========================================== */

@media (prefers-color-scheme: dark) {
    .lang-badge-minimal {
        border-color: #334155;
        background: #1e293b;
        color: #e2e8f0;
    }

    .lang-badge-minimal:hover {
        border-color: #5B9BD5;
        background: #1D3A5A;
    }

    .lang-badge-minimal .lang-code {
        color: #7DB3E0;
    }
}