/* Shortwave Logbook country flags.
   The image itself keeps the country's real aspect ratio. */
.swlog-country-flag {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  line-height: 0;
  vertical-align: middle;
}

.swlog-country-flag img {
  display: block;
  height: 14px;
  width: auto;
  max-width: 23px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform-origin: left center;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
  cursor: zoom-in;
}

/* A modest preview: roughly 45px high for a typical flag, large enough to
   see emblems/details without turning into a lightbox. The same already-loaded
   image is scaled, so hovering does not trigger another download. */
.swlog-country-flag:hover {
  z-index: 100;
}

.swlog-country-flag:hover img {
  z-index: 100;
  transform: scale(3.2);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
  outline: 1px solid rgba(255, 255, 255, .30);
}

/* Touch devices have no useful hover state; keep the normal inline flag. */
@media (hover: none) {
  .swlog-country-flag img {
    cursor: default;
  }
  .swlog-country-flag:hover img {
    transform: none;
    box-shadow: none;
    outline: none;
  }
}