/* =========================================================
   FLAG STATES MEGA MENU — FINAL COMPACT 4 × 4
   ========================================================= */

.mega-menu[data-mega="flags"] {
  overflow: hidden !important;
}


/* main dropdown composition */
.mega-menu[data-mega="flags"] .mega-layout {
  display: grid !important;

  grid-template-columns:
    300px minmax(0, 1fr) !important;

  gap: 26px !important;

  align-items: stretch !important;

  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* ---------------------------------------------------------
   LEFT INTRO
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-intro {
  min-height: 0 !important;
  height: auto !important;

  padding: 25px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  border-radius: 9px !important;
}


.mega-menu[data-mega="flags"] .mega-intro h3 {
  margin-top: 12px !important;

  font-size: 27px !important;
  line-height: 1.02 !important;
}


.mega-menu[data-mega="flags"] .mega-intro p {
  margin-top: 13px !important;

  font-size: 10.5px !important;
  line-height: 1.5 !important;
}


.mega-menu[data-mega="flags"] .mega-intro a {
  margin-top: 16px !important;
}



/* ---------------------------------------------------------
   FORCE TRUE 4 × 4 GRID
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-grid.flags,
.mega-menu[data-mega="flags"] .registry-mega-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  grid-template-rows:
    repeat(4, 58px) !important;

  grid-auto-flow: row !important;

  gap: 8px !important;

  width: 100% !important;

  align-self: center !important;
}



/* ---------------------------------------------------------
   COUNTRY CARD
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-grid.flags > a,
.mega-menu[data-mega="flags"] .registry-mega-grid > a {
  width: auto !important;
  height: 58px !important;

  min-width: 0 !important;
  min-height: 58px !important;
  max-height: 58px !important;

  padding: 7px 9px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 9px !important;

  border-radius: 6px !important;

  box-sizing: border-box !important;
}



/* ---------------------------------------------------------
   REAL COUNTRY FLAG
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini > i {
  width: 40px !important;
  height: 27px !important;

  min-width: 40px !important;
  min-height: 27px !important;

  flex: 0 0 40px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid rgba(12, 98, 138, .16) !important;

  border-radius: 3px !important;

  background: #ffffff !important;

  box-shadow:
    0 2px 5px rgba(5, 48, 70, .07) !important;
}


.mega-menu[data-mega="flags"] .flag-mini > i::before {
  display: none !important;
  content: none !important;
}


.mega-menu[data-mega="flags"] .flag-mini > i img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
}



/* ---------------------------------------------------------
   COUNTRY NAME
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini > span {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: center !important;
}


.mega-menu[data-mega="flags"] .flag-mini b {
  margin: 0 !important;

  color: #0a2638 !important;

  font-size: 10.5px !important;
  line-height: 1.13 !important;

  font-weight: 800 !important;

  white-space: normal !important;
}


/* No unnecessary subtitle in compact registry menu */
.mega-menu[data-mega="flags"] .flag-mini small {
  display: none !important;
}



/* ---------------------------------------------------------
   HOVER — INVERT
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini:hover {
  transform: translateY(-2px) !important;

  border-color:
    rgba(70, 205, 239, .46) !important;

  background:
    linear-gradient(
      145deg,
      #073651 0%,
      #07547a 58%,
      #086b91 100%
    ) !important;

  box-shadow:
    0 9px 18px rgba(4, 67, 97, .12) !important;
}


.mega-menu[data-mega="flags"] .flag-mini:hover b {
  color: #ffffff !important;
}


.mega-menu[data-mega="flags"] .flag-mini:hover > i {
  border-color:
    rgba(126, 231, 251, .65) !important;

  box-shadow:
    0 0 0 2px rgba(80, 215, 245, .07) !important;
}



/* ---------------------------------------------------------
   BACKGROUND TEXTURE — KEEP NOTICEABLE
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] {
  background:

    radial-gradient(
      ellipse at 72% 50%,
      transparent 0%,
      transparent 35%,
      rgba(18,139,190,.06) 35.3%,
      transparent 35.8%,
      transparent 48%,
      rgba(18,139,190,.04) 48.3%,
      transparent 49%
    ),

    repeating-linear-gradient(
      135deg,
      rgba(17,139,190,.027) 0,
      rgba(17,139,190,.027) 1px,
      transparent 1px,
      transparent 44px
    ),

    linear-gradient(
      rgba(12,130,180,.028) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(12,130,180,.023) 1px,
      transparent 1px
    ),

    linear-gradient(
      180deg,
      #f8fcfe,
      #eef7fb
    ) !important;

  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px,
    auto !important;
}



/* ---------------------------------------------------------
   NORMAL DESKTOP FALLBACK
   --------------------------------------------------------- */

@media (max-width: 1300px) {

  .mega-menu[data-mega="flags"] .mega-layout {
    grid-template-columns:
      250px minmax(0,1fr) !important;
  }

  .mega-menu[data-mega="flags"] .mega-grid.flags,
  .mega-menu[data-mega="flags"] .registry-mega-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}