/* ============================================================
   WORLD MAP — interactive location markers
   ============================================================ */

.wmap {
    --wmap-bg:      #131b2d;
    --wmap-land:    #5c666f;
    --wmap-ink:     #ffffff;
    --wmap-ink-dim: #b3bcc9;
    --wmap-line:    rgba(255, 255, 255, .55);
    --wmap-card:    #1c2740;
    --wmap-border:  rgba(255, 255, 255, .14);

    position: relative;
    /* background: var(--wmap-bg); */
    isolation: isolate;
}

.wmap {
    z-index: 1;
}

.wmap__headline {
    margin: 0;
    padding: 32px 24px 0;
    color: var(--wmap-ink);
}

/* The canvas holds the SVG's aspect ratio, which is what lets every
   pin be positioned with a plain percentage and stay put at any size. */
.wmap__canvas {
    position: relative;
}

.wmap__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   PIN = square + line + label

   The pin is a zero-size anchor sitting exactly on the coordinate.
   Everything else hangs off it absolutely, which keeps the four
   design variants down to two modifiers.

   --wmap-x / --wmap-y : set by JS from latitude/longitude
   --wmap-len          : line length, from the backend field
   ============================================================ */
.wmap__pin {
    position: absolute;
    left: var(--wmap-x, 50%);
    top: var(--wmap-y, 50%);
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--wmap-ink);
    cursor: pointer;
    z-index: 1;
    /* Hidden until JS has projected the coordinates, so nothing
       flashes at 50%/50% on a slow connection. */
    opacity: 0;
    transition: opacity .25s ease;
}

.wmap__pin.is-placed {
    opacity: 1;
}

.wmap__pin:hover,
.wmap__pin:focus-visible {
    z-index: 3;
    outline: none;
}

/* --- the square --- */
.wmap__dot {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    background: var(--wmap-ink);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* A 6px square is far below the ~24px minimum touch target, so give
   it an invisible hit area. Nobody reports this as a bug — they just
   fail to tap the marker and give up. */
.wmap__dot::after {
    content: "";
    position: absolute;
    inset: -11px;
}

.wmap__pin:hover .wmap__dot,
.wmap__pin:focus-visible .wmap__dot,
.wmap__pin[aria-expanded="true"] .wmap__dot {
    transform: scale(1.6);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .14);
}

/* --- the connector line --- */
.wmap__line {
    position: absolute;
    left: -.5px;
    width: 1px;
    height: var(--wmap-len, 46px);
    background: var(--wmap-line);
    transition: background .18s ease;
}

.wmap__pin:hover .wmap__line,
.wmap__pin:focus-visible .wmap__line,
.wmap__pin[aria-expanded="true"] .wmap__line {
    background: var(--wmap-ink);
}

/* --- the label --- */
.wmap__label {
    position: absolute;
    white-space: nowrap;
    line-height: 1.18;
    font-size: clamp(9px, 1.15vw, 16px);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.wmap__city {
    display: block;
    color: var(--wmap-ink);
    font-weight: 500;
}

.wmap__country {
    display: block;
    /* color: var(--wmap-ink-dim); */
    color:#F9F9F9;
    font-weight: 400;
}

/* --- variant: which way does the line run? --- */
.wmap__pin--up   .wmap__line { bottom: 0; }
.wmap__pin--down .wmap__line { top: 0; }

/* --- variant: label sits at the far end of the line --- */
.wmap__pin--up   .wmap__label { top: calc(-1 * var(--wmap-len, 46px)); }
.wmap__pin--down .wmap__label { top: var(--wmap-len, 46px); transform: translateY(-100%); }

/* --- variant: which side of the line? --- */
.wmap__pin--right .wmap__label { left: 7px;  text-align: left; }
.wmap__pin--left  .wmap__label { right: 7px; text-align: right; }

/* --- focus ring, since the button itself has no box --- */
.wmap__pin:focus-visible .wmap__dot {
    outline: 2px solid var(--wmap-ink);
    outline-offset: 5px;
}

/* ============================================================
   POPUP
   ============================================================ */
/* .wmap__popup {
    position: absolute;
    z-index: 5;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--wmap-card);
    border: 1px solid var(--wmap-border);
    padding: 22px 24px 24px;
    color: var(--wmap-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
} */

.wmap__popup {
    position: absolute;
    z-index: 5;
    width: 350px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(180deg, #0d1519 0%, #11224d 100%) !important;
    border: 2px solid #455785;
    padding: 2rem;
    border-radius: 6px;
    color: var(--wmap-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
 

.wmap__popup[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wmap__popup-media {
    margin: -22px -24px 18px;
}

.wmap__popup-media img {
    display: block;
    width: 100%;
    height: auto;
}

.wmap__eyebrow {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wmap-ink-dim);
}

.wmap__popup-title {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .01em;
}

.wmap__popup-text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--wmap-ink-dim);
}

.wmap__popup-text p:first-child { margin-top: 0; }
.wmap__popup-text p:last-child  { margin-bottom: 0; }

.wmap__cta {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wmap-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--wmap-line);
    padding-bottom: 3px;
}

.wmap__cta:hover,
.wmap__cta:focus-visible {
    border-color: var(--wmap-ink);
}

.wmap__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--wmap-ink-dim);
    cursor: pointer;
}

.wmap__close:hover,
.wmap__close:focus-visible {
    color: var(--wmap-ink);
}

.wmap__popup-body{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}

.wmap__popup-body .font-light span{
  font-size: inherit !important;
}

.wmap__popup-body .font-light:last-of-type {
  font-size: 20px !important;
}
.wmap__popup-body .wmap__link{
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-direction: column;
}
.wmap__popup-body .wmap__link .transparent-btn{
    width: 158px;
    margin-top: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    height: 40px;
}

/* ============================================================
   RESPONSIVE

   Labels physically cannot all fit on a phone, so below 600px the
   markers become dots only. The popup carries the name, so no
   information is lost.
   ============================================================ */
@media (max-width: 600px) {

    .wmap__label,
    .wmap__line {
        display: none;
    }

    .wmap__dot {
        left: -5px;
        top: -5px;
        width: 10px;
        height: 10px;
    }

    /* Bottom sheet — a floating card on a 380px viewport is unusable. */
    .wmap__popup {
        position: fixed;
        left: 5%;
        right: 0;
        bottom: auto;
        top: 120px !important;
        width: 100%;
        max-width: 90%;
        max-height: 78vh;
        overflow-y: auto;
        transform: translateY(100%);
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .wmap__popup[data-open="true"] {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wmap__pin,
    .wmap__dot,
    .wmap__line,
    .wmap__popup {
        transition: none;
    }
}

@media (max-width: 1400px) {
    .wmap__popup-body .font-light:last-of-type {
    font-size: 16px !important;
    }
}