/* ==========================================================
   WACHTEL SHARED PRODUCT HOTSPOTS V1
   ATLAS / COLUMBUS / INFRA / future products
   ========================================================== */

.wachtel-hotspot-component {
    position: relative;
}

.wachtel-hotspot-stage {
    position: relative;
}

/*
 * Neutral reset.
 * Product-specific CSS may still control coordinates,
 * dimensions and visual appearance of individual dots.
 */
.wachtel-hotspot {
    cursor: pointer;
}

button.wachtel-hotspot {
    font: inherit;
}

/* ----------------------------------------------------------
   POPUP
   ---------------------------------------------------------- */

.wachtel-hotspot-popup {
    display: none;

    position: absolute;
    z-index: 50;

    left: 50%;
    top: 50%;

    width: 300px;
    max-width: calc(100% - 30px);

    box-sizing: border-box;

    padding: 18px 40px 17px 18px;

    transform: translate(-50%, -50%);

    background: #fff;

    border-top: 3px solid #2187b8;

    box-shadow:
        0 7px 24px rgba(0,0,0,.22);

    text-align: left;
}

.wachtel-hotspot-popup.is-open {
    display: block;
}

.wachtel-hotspot-popup strong {
    display: block;

    margin: 0 0 8px;

    color: #2187b8;

    font-family:
        "Raleway",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 600;
}

.wachtel-hotspot-popup p {
    margin: 0;

    color: #333;

    font-size: 13px;
    line-height: 1.5;
}

/* ----------------------------------------------------------
   CLOSE
   ---------------------------------------------------------- */

.wachtel-hotspot-close {
    position: absolute;

    right: 8px;
    top: 7px;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #666;

    font-size: 24px;
    line-height: 24px;

    cursor: pointer;
}

.wachtel-hotspot-close:hover,
.wachtel-hotspot-close:focus {
    color: #2187b8;
    outline: none;
}

/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

.wachtel-hotspot:focus-visible {
    outline: 2px solid #2187b8;
    outline-offset: 3px;
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .wachtel-hotspot-popup {
        width: calc(100% - 24px);
        max-width: 360px;
    }
}