/* Professional Flag Icons */
.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.flag-icon-lg {
    width: 24px;
    height: 18px;
}

.flag-icon-sm {
    width: 16px;
    height: 12px;
}

/* United States Flag */
.flag-icon-us {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cg fill='%23B22234'%3E%3Cpath d='M0 0h60v30H0z'/%3E%3Cpath d='M0 3.75h60v3.75H0zm0 7.5h60v3.75H0zm0 7.5h60v3.75H0zm0 7.5h60v3.75H0z' fill='%23fff'/%3E%3C/g%3E%3Cpath d='M0 0h25.5v15H0z' fill='%233C3B6E'/%3E%3C/svg%3E");
}

/* Spain Flag */
.flag-icon-es {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M0 0h60v30H0z' fill='%23AA151B'/%3E%3Cpath d='M0 7.5h60v15H0z' fill='%23F1BF00'/%3E%3C/svg%3E");
}

/* Flag with dark mode support */
.dark .flag-icon {
    border-color: rgba(255, 255, 255, 0.2);
}