/* Spanish Flag CSS Implementation */
.flag-spain-css {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(to bottom, 
        #AA151B 0%, #AA151B 25%, 
        #F1BF00 25%, #F1BF00 75%, 
        #AA151B 75%, #AA151B 100%);
    display: inline-block;
    border: 1px solid #ddd;
    vertical-align: middle;
}

/* Alternative implementation with more accurate proportions */
.flag-spain-alt {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    position: relative;
    background: #F1BF00;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
}

.flag-spain-alt::before,
.flag-spain-alt::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3.75px; /* 25% of 15px */
    background: #AA151B;
    left: 0;
}

.flag-spain-alt::before {
    top: 0;
}

.flag-spain-alt::after {
    bottom: 0;
}

/* Fallback for missing flag images */
.flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

.flag-icon[src*="flag-spain"]:not([src$=".png"]),
.flag-icon[alt="Español"]:not([src$=".png"]) {
    background: linear-gradient(to bottom, 
        #AA151B 0%, #AA151B 25%, 
        #F1BF00 25%, #F1BF00 75%, 
        #AA151B 75%, #AA151B 100%);
    border: 1px solid #ddd;
}