/* Frontend styles for Map Points */

.amp-frontend-pin {
    position: absolute;
    width: 22px;
    height: 30px;
    transform: translate(-50%, -100%);
    z-index: 50;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    animation: amp-pin-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.amp-frontend-pin:hover {
    transform: translate(-50%, -100%) scale(1.25);
    filter: drop-shadow(0 2px 8px rgba(230, 57, 70, 0.6));
    z-index: 100;
}

@keyframes amp-pin-drop {
    from {
        opacity: 0;
        transform: translate(-50%, -200%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -100%);
    }
}

/* Popup card */
.amp-frontend-popup {
    position: absolute;
    z-index: 200;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    width: 260px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none;
}

.amp-frontend-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.amp-frontend-popup__image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

/* Container to match admin editor sizing */
.amp-map-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.amp-map-inner svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Island hover interactivity */
.amp-map-inner svg path {
    transition: fill 0.3s ease, transform 0.3s ease;
    transform-origin: center;
}

.amp-map-inner svg path:hover {
    fill: #3a1e1a !important; /* Slightly lighter espresso / red tint */
    opacity: 0.8;
    transform: translateY(-2px);
    cursor: pointer;
}

.amp-frontend-popup__body {
    padding: 12px 16px 16px;
}

.amp-frontend-popup__title {
    margin: 0 0 6px;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 700;
    color: #2a2421;
}

.amp-frontend-popup__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

/* Dark theme override for map section */
.map-section .amp-frontend-popup {
    background: #1f1313;
    color: #f7f5f0;
}

.map-section .amp-frontend-popup__title {
    color: #f7f5f0;
}

.map-section .amp-frontend-popup__desc {
    color: #c4b5a5;
}