/* ============================================================
   TEAMVIBE UAE MAP - FINAL CLEAN COMPOSITION
   Replace ALL previous uae-map-refresh.css content with this.
   Load AFTER home-platinum.css. No additional skyline pseudo layer.
   ============================================================ */
#uae-map.tv-map-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 34px 0 28px !important;
    overflow: hidden;
    isolation: isolate;
    background: #fffaf7 url('/assets_frontend/images/uae-map-background-no-text.png') center center / 100% 100% no-repeat !important;
}
#uae-map.tv-map-section::before,
#uae-map.tv-map-section::after { content: none !important; display: none !important; }
#uae-map > .tv-map-container {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100% - 52px));
    max-width: 1320px;
    margin-inline: auto;
    padding: 0;
}
#uae-map .tv-map-heading {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 0 2px !important;
    padding: 0 !important;
}
#uae-map .tv-map-heading-copy { max-width: 630px; }
#uae-map .tv-map-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: #f36b20;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .09em;
}
#uae-map .tv-map-heading h2 {
    margin: 0 0 8px;
    color: #10234a;
    font-size: clamp(25px,2.3vw,34px);
    font-weight: 850;
    line-height: 1.14;
    letter-spacing: -.035em;
}
#uae-map .tv-map-heading p {
    max-width: 490px;
    margin: 0;
    color: black;
    font-size: 13px;
    line-height: 1.5;
}
#uae-map .tv-map-see-all,
#uae-map .tv-map-highlight-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(110deg,#ff943c,#f3641a);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(225,93,25,.13);
}
#uae-map .tv-map-see-all { min-height: 39px; padding: 0 19px; }
#uae-map .tv-map-content {
    position: relative;
    display: block !important;
    width: 100%;
    height: 470px;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: visible;
}
/* Map is a TRUE transparent cutout (including its western coastline).
   Do not use any mask, blend-mode, object-fit:cover or negative left offset. */
#uae-map .tv-map-visual {
    position: absolute;
    z-index: 1;
    top: -4px;
    right: -18px;
    width: min(1060px,84%);
    height: auto;
    overflow: visible;
}
#uae-map .tv-map-illustration {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 650;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}
#uae-map .tv-map-illustration > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto !important;
    object-fit: contain !important;
    object-position: center;
    mix-blend-mode: normal !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: none !important;
    pointer-events: none;
}
#uae-map .tv-map-highlight {
    position: absolute;
    z-index: 4;
    top: 74px;
    left: 0;
    width: 325px;
    max-width: 325px;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ffdbc3;
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(88,57,30,.1);
}
#uae-map .tv-map-highlight-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
}
#uae-map .tv-map-highlight-thumbnail {
    display: block;
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    border-radius: 11px;
    background: #f2dfcf;
    overflow: hidden;
}
#uae-map .tv-map-highlight-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#uae-map .tv-map-highlight-info { flex: 1; min-width: 0; }
#uae-map .tv-map-highlight h3 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 850;
    color: #11244a;
}
#uae-map .tv-map-highlight p {
    margin: 0;
    color: #536074;
    font-size: 11px;
    line-height: 1.45;
}
#uae-map .tv-map-highlight-cta {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    font-size: 10px;
}
#uae-map .tv-map-hotspot {
    position: absolute;
    z-index: 4;
    display: block;
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
}
#uae-map .tv-map-hotspot:hover,
#uae-map .tv-map-hotspot:focus-visible {
    outline: 2px solid #f47720;
    background: rgba(255,143,57,.12);
}
/* Percentages correspond to label positions in the NEW 1440x650 PNG. */
#uae-map .tv-map-abu      { left: 22%; top: 45%; width: 21%; height: 11%; }
#uae-map .tv-map-dubai    { left: 34%; top: 30%; width: 14%; height: 10%; }
#uae-map .tv-map-sharjah  { left: 41%; top: 20%; width: 15%; height: 10%; }
#uae-map .tv-map-uaq      { left: 50%; top: 8%; width: 20%; height: 10%; }
#uae-map .tv-map-rak      { left: 72%; top: 4%; width: 21%; height: 11%; }
#uae-map .tv-map-ajman    { left: 76%; top: 17%; width: 16%; height: 11%; }
#uae-map .tv-map-fujairah { left: 80%; top: 32%; width: 18%; height: 11%; }

@media (max-width: 1100px) {
    #uae-map .tv-map-content { height: 415px; }
    #uae-map .tv-map-visual { width: 89%; right: -12px; top: 15px; }
    #uae-map .tv-map-highlight { top: 90px; width: 285px; }
}
@media (max-width: 767px) {
    #uae-map.tv-map-section { padding: 27px 0 35px !important; background-size: cover !important; background-position: center bottom !important; }
    #uae-map > .tv-map-container { width: calc(100% - 30px); }
    #uae-map .tv-map-heading { flex-direction: column; align-items: flex-start; gap: 13px; margin-bottom: 15px !important; }
    #uae-map .tv-map-heading h2 { font-size: 25px; }
    #uae-map .tv-map-heading p { font-size: 12px; }
    #uae-map .tv-map-content { display: flex !important; flex-direction: column; height: auto; gap: 14px; }
    #uae-map .tv-map-highlight { position: relative; top: auto; left: auto; width: 100%; max-width: 420px; }
    #uae-map .tv-map-visual { position: relative; top: auto; right: auto; width: 100%; height: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    #uae-map .tv-map-illustration { width: 740px; min-width: 740px; }
}



/* ==================================================
   UAE MAP - REMOVE UGLY HOTSPOT HOVER BORDER
   ================================================== */

/* Remove large outline and background on hover */
#uae-map .tv-map-hotspot,
#uae-map .tv-map-hotspot:hover,
#uae-map .tv-map-hotspot:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Keep keyboard focus accessible without a huge border */
#uae-map .tv-map-hotspot:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Show subtle focus indicator over map labels */
#uae-map .tv-map-hotspot:focus-visible::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 15%;
    height: 2px;
    border-radius: 2px;
    background: #f47720;
}

/* Keep pointer cursor */
#uae-map .tv-map-hotspot {
    cursor: pointer;
}







/* ==========================================================
   TEAMVIBE UAE MAP - CLICKABLE EMIRATE BORDERS
   ========================================================== */

/* Map illustration */
#uae-map .tv-map-illustration {
    position: relative !important;
    width: 100%;
    aspect-ratio: 1440 / 650;
    overflow: visible;
}

/* Keep image directly beneath SVG */
#uae-map .tv-map-illustration > img {
    display: block;
    width: 100%;
    height: auto !important;
    pointer-events: none;
}

/* SVG overlays the image without changing its position */
#uae-map .tv-map-regions {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: block;
    width: 100%;
    height: 100%;

    overflow: visible;
    pointer-events: none;
}

/* Individual clickable emirate */
#uae-map .tv-map-region-link {
    cursor: pointer;
    outline: none;
    pointer-events: auto;
}

/* Invisible by default */
#uae-map .tv-map-region-shape {
    fill: #ff8a2c;
    fill-opacity: 0;

    stroke: #ff751a;
    stroke-width: 3;
    stroke-opacity: 0;

    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;

    pointer-events: visibleFill;

    transition:
        fill-opacity .22s ease,
        stroke-opacity .22s ease,
        filter .22s ease;
}

/* Exact SVG region receives the visual effect */
#uae-map .tv-map-region-link:hover .tv-map-region-shape,
#uae-map .tv-map-region-link:focus-visible .tv-map-region-shape {
    fill-opacity: .10;
    stroke-opacity: 1;

    filter:
        drop-shadow(0 0 3px rgba(255, 117, 26, .75))
        drop-shadow(0 0 7px rgba(255, 117, 26, .35));
}

/* Stronger focus for keyboard users */
#uae-map .tv-map-region-link:focus-visible .tv-map-region-shape {
    stroke-width: 4;
    stroke-opacity: 1;
    fill-opacity: .14;
}

/* No rectangular label highlighting */
#uae-map .tv-map-hotspot,
#uae-map .tv-map-hotspot:hover,
#uae-map .tv-map-hotspot:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Responsive overlay alignment */
@media (max-width: 767px) {
    #uae-map .tv-map-regions {
        width: 100%;
        height: 100%;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #uae-map .tv-map-region-shape {
        transition: none;
    }
}