/* WWI-Era Flag Icons for Submarine Losses Map */
.flag-icon {
  width: 24px;
  height: 16px;
  display: inline-block;
  margin-right: 6px;
  border: 1px solid #ccc;
  vertical-align: middle;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f0f0; /* Light gray while loading */
}

/* Hybrid image/CSS system */
/* Images take priority when available */
.flag-icon.flag-loaded {
  /* JavaScript sets background-image inline - don't interfere! */
}

/* CSS fallbacks when images fail to load */
.flag-icon.flag-css-fallback,
.flag-icon:not(.flag-loaded) {
  /* Use CSS fallback patterns below */
}

/* CSS Flag Implementations - Fallbacks for when images aren't available */

.flag-icon.flag-css-fallback.flag-gbr,
.flag-icon:not(.flag-loaded).flag-gbr {
  background: #012169;
  background-image: 
    /* Red cross */
    linear-gradient(90deg, transparent 42%, #C8102E 42%, #C8102E 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, #C8102E 42%, #C8102E 58%, transparent 58%),
    /* White cross (slightly wider) */
    linear-gradient(90deg, transparent 38%, #fff 38%, #fff 62%, transparent 62%),
    linear-gradient(0deg, transparent 38%, #fff 38%, #fff 62%, transparent 62%);
}

.flag-icon.flag-css-fallback.flag-fra,
.flag-icon:not(.flag-loaded).flag-fra {
  background: linear-gradient(90deg, #002654 33%, #fff 33%, #fff 66%, #ED2939 66%);
}

.flag-icon.flag-css-fallback.flag-ita,
.flag-icon:not(.flag-loaded).flag-ita {
  background: linear-gradient(90deg, #009246 33%, #fff 33%, #fff 66%, #CE2B37 66%);
}

.flag-icon.flag-css-fallback.flag-rus,
.flag-icon:not(.flag-loaded).flag-rus {
  background: linear-gradient(0deg, #1C3578 33%, #fff 33%, #fff 66%, #fff 66%);
}

.flag-icon.flag-css-fallback.flag-ger,
.flag-icon:not(.flag-loaded).flag-ger {
  background: linear-gradient(0deg, #000 33%, #fff 33%, #fff 66%, #DD0000 66%);
}

.flag-icon.flag-css-fallback.flag-spa,
.flag-icon:not(.flag-loaded).flag-spa {
  background: linear-gradient(0deg, #C60B1E 25%, #FFC400 25%, #FFC400 75%, #C60B1E 75%);
}

.flag-icon.flag-css-fallback.flag-gre,
.flag-icon:not(.flag-loaded).flag-gre {
  background: #0D5EAF;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-gre::after,
.flag-icon:not(.flag-loaded).flag-gre::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}

.flag-icon.flag-css-fallback.flag-bel,
.flag-icon:not(.flag-loaded).flag-bel {
  background: linear-gradient(90deg, #000 33%, #FFD700 33%, #FFD700 66%, #ED2939 66%);
}

.flag-icon.flag-css-fallback.flag-nor,
.flag-icon:not(.flag-loaded).flag-nor {
  background: #EF2B2D;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-nor::after,
.flag-icon:not(.flag-loaded).flag-nor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 30%, #fff 30%, #fff 40%, #002868 40%, #002868 60%, #fff 60%, #fff 70%, transparent 70%),
    linear-gradient(0deg, transparent 40%, #fff 40%, #fff 45%, #002868 45%, #002868 55%, #fff 55%, #fff 60%, transparent 60%);
}

.flag-icon.flag-css-fallback.flag-swe,
.flag-icon:not(.flag-loaded).flag-swe {
  background: #006AA7;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-swe::after,
.flag-icon:not(.flag-loaded).flag-swe::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 30%, #FECC00 30%, #FECC00 40%, transparent 40%),
    linear-gradient(0deg, transparent 40%, #FECC00 40%, #FECC00 60%, transparent 60%);
}

.flag-icon.flag-css-fallback.flag-dan,
.flag-icon:not(.flag-loaded).flag-dan {
  background: #C60C30;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-dan::after,
.flag-icon:not(.flag-loaded).flag-dan::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 30%, #fff 30%, #fff 40%, transparent 40%),
    linear-gradient(0deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%);
}

.flag-icon.flag-css-fallback.flag-por,
.flag-icon:not(.flag-loaded).flag-por {
  background: linear-gradient(90deg, #046A38 40%, #DA020E 40%);
}

.flag-icon.flag-css-fallback.flag-usa,
.flag-icon:not(.flag-loaded).flag-usa {
  background: 
    repeating-linear-gradient(0deg, #B22234 0px, #B22234 1.2px, #fff 1.2px, #fff 2.4px),
    linear-gradient(90deg, #3C3B6E 0%, #3C3B6E 40%, transparent 40%);
}

.flag-icon.flag-css-fallback.flag-arg,
.flag-icon:not(.flag-loaded).flag-arg {
  background: linear-gradient(0deg, #74ACDF 33%, #fff 33%, #fff 66%, #74ACDF 66%);
}

.flag-icon.flag-css-fallback.flag-jap,
.flag-icon:not(.flag-loaded).flag-jap {
  background: #fff;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-jap::after,
.flag-icon:not(.flag-loaded).flag-jap::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #BC002D;
  transform: translateX(-50%);
}

.flag-icon.flag-css-fallback.flag-alb,
.flag-icon:not(.flag-loaded).flag-alb {
  background: #E41E20;
}

.flag-icon.flag-css-fallback.flag-egy,
.flag-icon:not(.flag-loaded).flag-egy {
  background: linear-gradient(0deg, #000 33%, #fff 33%, #fff 66%, #CE1126 66%);
}

.flag-icon.flag-css-fallback.flag-mon,
.flag-icon:not(.flag-loaded).flag-mon {
  background: linear-gradient(0deg, #C8102E 33%, #0033A0 33%, #0033A0 66%, #fff 66%);
}

.flag-icon.flag-css-fallback.flag-tun,
.flag-icon:not(.flag-loaded).flag-tun {
  background: #E70013;
}

.flag-icon.flag-css-fallback.flag-unknown,
.flag-icon:not(.flag-loaded).flag-unknown {
  background: #666;
  position: relative;
}

.flag-icon.flag-css-fallback.flag-unknown::after,
.flag-icon:not(.flag-loaded).flag-unknown::after {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}