/* TEAMVIBE SVG MAP V2: load AFTER home-platinum.css and uae-map-refresh.css.
   The map SVG is always visible; only the title bubble appears on hover. */
#uae-map .tv-map-visual {
  position:absolute !important; top:-4px !important; right:-18px !important;
  width:min(1060px,84%) !important; height:auto !important; overflow:visible !important;
  display:block !important; visibility:visible !important; opacity:1 !important;
}
#uae-map .tv-map-illustration {
  position:relative !important; display:block !important;
  width:100% !important; height:auto !important;
  aspect-ratio:1346.21 / 641.84 !important;
  min-height:1px; overflow:visible !important;
  isolation:isolate; margin:0 !important; padding:0 !important;
  background:transparent !important;
}
/* Old PNG includes permanently printed city labels. Never show it. */
#uae-map .tv-map-illustration > img { display:none !important; }
/* Ensure old CSS cannot collapse or hide the SVG. */
#uae-map .tv-map-regions {
  position:absolute !important; inset:0 !important;
  display:block !important; visibility:visible !important; opacity:1 !important;
  width:100% !important; height:100% !important; max-width:none !important;
  z-index:3 !important; overflow:visible !important;
  pointer-events:none !important;
  filter:drop-shadow(0 8px 7px rgba(154,88,35,.22));
}
#uae-map .tv-map-region-link {
  display:inline !important; visibility:visible !important;
  pointer-events:all !important; cursor:pointer; outline:none;
}
/* Crucial: all 7 boundaries have a VISIBLE opaque fill by default. */
#uae-map .tv-map-regions .tv-map-region-link .tv-map-region-shape {
  display:inline !important; visibility:visible !important; opacity:1 !important;
  fill:#f7e9d8 !important; fill-opacity:1 !important;
  stroke:#caa987 !important; stroke-opacity:1 !important;
  stroke-width:2.3px !important; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  pointer-events:visiblePainted !important;
  transition:fill .18s ease,stroke .18s ease,stroke-width .18s ease,filter .18s ease;
}
#uae-map .tv-map-regions .tv-map-region-abu .tv-map-region-shape {
  fill:#ffcd91 !important; stroke:#f47720 !important; stroke-width:3 !important;
}
/* Strong, dark region outline ON TOP of its own geographical shape. */
#uae-map .tv-map-regions .tv-map-region-link:hover .tv-map-region-shape,
#uae-map .tv-map-regions .tv-map-region-link:focus-visible .tv-map-region-shape,
#uae-map .tv-map-regions .tv-map-region-link.is-active .tv-map-region-shape {
  fill:#ffaf64 !important;
  stroke:#d94c06 !important; stroke-opacity:1 !important;
  stroke-width:5.5px !important;
  filter:drop-shadow(0 0 3px rgba(234,79,0,.82)) drop-shadow(0 0 7px rgba(251,124,25,.68));
}
/* White city-name bubble, invisible until pointer/keyboard hover. */
#uae-map .tv-map-hover-name {
  position:absolute !important; z-index:12 !important;
  left:50%; top:50%; display:flex !important; align-items:center; gap:7px;
  width:max-content; max-width:220px; padding:9px 14px;
  border:1px solid rgba(244,112,28,.24); border-radius:22px;
  background:#fff; color:#0f2447; font-size:14px; font-weight:850;
  line-height:1.2; text-align:center;
  box-shadow:0 6px 19px rgba(28,36,56,.18);
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translate(-50%,calc(-100% - 28px)) scale(.94);
  transition:opacity .17s ease, transform .17s ease,visibility .17s;
}
#uae-map .tv-map-hover-name.is-visible {
  opacity:1 !important; visibility:visible !important;
  transform:translate(-50%,calc(-100% - 28px)) scale(1);
}
/* curved orange pointer from floating label to the selected region */
#uae-map .tv-map-hover-name::after {
  content:""; position:absolute; left:calc(50% - 4px); top:calc(100% - 2px);
  width:25px; height:21px; border-left:2px solid #f47720;
  border-bottom:2px solid #f47720; border-radius:0 0 0 100%;
  transform:rotate(-22deg); transform-origin:top left;
}
#uae-map .tv-map-hover-name::before {
  content:""; position:absolute; left:calc(50% + 11px); top:calc(100% + 14px);
  width:6px; height:6px; border-radius:50%; background:#f47720;
  box-shadow:0 0 0 3px rgba(244,119,32,.18);
}
#uae-map .tv-map-hotspot {display:none !important;}
@media(max-width:1100px){
  #uae-map .tv-map-visual{width:89% !important;right:-12px !important;top:15px !important;}
}
@media(max-width:767px){
  #uae-map .tv-map-visual{position:relative !important;top:auto !important;right:auto !important;width:100% !important;overflow-x:auto !important;overflow-y:hidden !important;}
  #uae-map .tv-map-illustration{width:740px !important;min-width:740px !important;}
  #uae-map .tv-map-hover-name{font-size:12px;padding:7px 11px;}
}
@media(prefers-reduced-motion:reduce){
  #uae-map .tv-map-region-shape,#uae-map .tv-map-hover-name{transition:none !important;}
}



/* ==============================================
   TEAMVIBE MAP - BIGGER NAME AND CURVED ARROW
   ============================================== */

/* Bigger city name bubble */
#uae-map .tv-map-hover-name {
    font-size: 19px !important;
    font-weight: 850 !important;
    padding: 12px 22px !important;
    border-radius: 30px !important;
    max-width: 300px !important;
    white-space: nowrap;

    box-shadow: 0 8px 24px rgba(28, 36, 56, 0.20);
}

/* Bigger curved orange connector */
#uae-map .tv-map-hover-name::after {
    content: "" !important;

    position: absolute !important;
    left: calc(50% - 5px) !important;
    top: calc(100% - 2px) !important;

    width: 55px !important;
    height: 43px !important;

    border-left: 3px solid #f47720 !important;
    border-bottom: 3px solid #f47720 !important;
    border-radius: 0 0 0 100% !important;

    transform: rotate(-22deg) !important;
    transform-origin: top left !important;
}

/* Larger orange endpoint dot */
#uae-map .tv-map-hover-name::before {
    content: "" !important;

    position: absolute !important;
    left: calc(50% + 31px) !important;
    top: calc(100% + 29px) !important;

    width: 10px !important;
    height: 10px !important;

    border-radius: 50% !important;
    background: #f47720 !important;

    box-shadow: 0 0 0 5px rgba(244, 119, 32, .18) !important;
}
