/* Language Switcher Styles */
.lang-switcher {
    display: flex;
    gap: 10px;
}

.lang-btn {
    background: #5050c8;
    color: #a3a3ff;
    border: 2px solid #7c70da;
    padding: 8px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 2px 2px 0 #3e31a2;
}

.lang-btn .flag {
    display: inline-block;
    width: 40px;
    height: 28px;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 3px;
    flex-shrink: 0;
}

.flag-de {
    background: linear-gradient(to bottom, #000 33.33%, #dd0000 33.33%, #dd0000 66.66%, #ffce00 66.66%);
}

.flag-en {
    background-color: #012169;
    background-image:
        /* Red horizontal/vertical cross (on top) */
        linear-gradient(to bottom, transparent 40%, #c8102e 40%, #c8102e 60%, transparent 60%),
        linear-gradient(to right, transparent 40%, #c8102e 40%, #c8102e 60%, transparent 60%),
        /* White horizontal/vertical cross */
        linear-gradient(to bottom, transparent 32%, #fff 32%, #fff 68%, transparent 68%),
        linear-gradient(to right, transparent 32%, #fff 32%, #fff 68%, transparent 68%),
        /* Red diagonal cross */
        linear-gradient(to bottom right, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54%),
        linear-gradient(to bottom left, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54%),
        /* White diagonal cross */
        linear-gradient(to bottom right, transparent 42%, #fff 42%, #fff 58%, transparent 58%),
        linear-gradient(to bottom left, transparent 42%, #fff 42%, #fff 58%, transparent 58%);
}

.lang-btn:hover {
    background: #7c70da;
}

.lang-btn.active {
    background: #a3a3ff;
    color: #3e31a2;
    box-shadow: inset 2px 2px 0 #7c70da;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .lang-btn {
        font-size: 8px;
        padding: 6px 10px;
    }
}