/* Professional CSS Flags for Language Switcher */

/* Base flag styling */
.flag {
    width: 24px;
    height: 16px;
    display: inline-block;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

/* German Flag (Deutschland) */
.flag.de {
    background: linear-gradient(180deg, 
        #000000 0%, #000000 33.33%, 
        #DD0000 33.33%, #DD0000 66.66%, 
        #FFCE00 66.66%, #FFCE00 100%);
}

/* UK Flag (Union Jack) - Properly symmetric */
.flag.en {
    background: #012169;
}

.flag.en::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* White diagonal crosses - symmetric */
        linear-gradient(45deg, transparent 45%, white 45%, white 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, white 45%, white 55%, transparent 55%),
        /* White horizontal and vertical bars */
        linear-gradient(to bottom, transparent 40%, white 40%, white 60%, transparent 60%),
        linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%);
}

.flag.en::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Red diagonal crosses - symmetric and offset */
        linear-gradient(45deg, transparent 47%, #C8102E 47%, #C8102E 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, #C8102E 47%, #C8102E 53%, transparent 53%),
        /* Red cross - centered */
        linear-gradient(to bottom, transparent 43%, #C8102E 43%, #C8102E 57%, transparent 57%),
        linear-gradient(to right, transparent 43%, #C8102E 43%, #C8102E 57%, transparent 57%);
}

/* Hover effects */
.flag:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}