/* =========================================================================
   BLUE HEAVEN VILLAS — INTERACTIVE LAYOUT PLAN
   Premium, fully responsive master-plan section with dynamic SVG/HTML
   pointers, hover tooltips, area-highlight glow, and a mobile tap popup.
   All pointer positions are percentage-based (see layout-plan.js) so they
   stay correctly anchored to the image at every viewport size.
   ========================================================================= */

/* ---- Stage: the image + overlay layers share one coordinate system ---- */
.lp-stage {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 44px rgba(15, 40, 60, 0.14);
    line-height: 0; /* removes inline-image gap */
}

.lp-stage img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Highlight + pointer layers sit exactly over the image, percentage-scaled */
.lp-highlights,
.lp-pointers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.lp-highlights { pointer-events: none; }

/* =========================================================================
   AREA HIGHLIGHT (soft glow overlay, no extra images — pure CSS gradient)
   ========================================================================= */
.lp-highlight {
    position: absolute;
    width: 14%;
    height: 14%;
    transform: translate(-50%, -50%) scale(0.6);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(196, 165, 116, 0.55) 0%,
        rgba(196, 165, 116, 0.28) 40%,
        rgba(196, 165, 116, 0) 72%);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.lp-highlight.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================================================
   POINTERS
   ========================================================================= */
.lp-pointer {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.2%;
    aspect-ratio: 1 / 1;
    min-width: 22px;
    max-width: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    animation: lp-float 3.6s ease-in-out infinite;
    animation-delay: var(--lp-delay, 0s);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

@keyframes lp-float {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -4px; }
}

/* Pulse ring behind the badge — soft glowing "radar" effect */
.lp-pointer::before {
    content: '';
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 165, 116, 0.45) 0%, rgba(196, 165, 116, 0) 70%);
    animation: lp-pulse 2.4s ease-out infinite;
    animation-delay: var(--lp-delay, 0s);
    z-index: -1;
}
@keyframes lp-pulse {
    0%   { transform: scale(0.55); opacity: 0.9; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

.lp-pointer-dot {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #E8CE9C 0%, #C4A574 55%, #A8823F 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(9px, 1.4vw, 13px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 0 14px rgba(196, 165, 116, 0.7);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Hover / focus / active state (desktop) */
.lp-pointer:hover,
.lp-pointer:focus-visible,
.lp-pointer.is-selected {
    transform: translate(-50%, -50%) scale(1.28);
    z-index: 5;
    outline: none;
}
.lp-pointer:hover .lp-pointer-dot,
.lp-pointer:focus-visible .lp-pointer-dot,
.lp-pointer.is-selected .lp-pointer-dot {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 0 2px #fff,
        0 0 22px rgba(196, 165, 116, 1),
        0 0 40px rgba(196, 165, 116, 0.55);
    background: linear-gradient(145deg, #F3E1BB 0%, #D4B583 55%, #B4924E 100%);
}

/* When one pointer is active, fade the rest slightly so it reads as "selected" */
.lp-stage.has-active .lp-pointer:not(:hover):not(.is-selected) {
    opacity: 0.45;
}

/* =========================================================================
   TOOLTIP (desktop hover) — fades in + slides up
   ========================================================================= */
.lp-tooltip {
    position: absolute;
    left: 50%;
    bottom: 130%;
    transform: translate(-50%, 8px);
    min-width: 150px;
    max-width: 190px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(15, 40, 60, 0.22);
    border: 1px solid rgba(196, 165, 116, 0.25);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 6;
}
.lp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}
.lp-pointer:hover .lp-tooltip,
.lp-pointer:focus-visible .lp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.lp-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FAF3E7;
    color: var(--gold-accessible, #8A6A3A);
    margin-bottom: 6px;
}
.lp-tooltip-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--navy, #1F4B6E);
    line-height: 1.3;
    margin: 0;
}
.lp-tooltip-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    color: #8a8a8a;
    line-height: 1.35;
    margin: 2px 0 0;
}

/* =========================================================================
   MOBILE TAP POPUP
   ========================================================================= */
.lp-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 30, 45, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lp-popup-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.lp-popup-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 320px;
    width: 100%;
    padding: 32px 26px 28px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border-top: 4px solid var(--gold, #C4A574);
    transform: translateY(16px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lp-popup-backdrop.is-open .lp-popup-card {
    transform: translateY(0) scale(1);
}
.lp-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F5F0E8;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy, #1F4B6E);
    cursor: pointer;
}
.lp-popup-number {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #E8CE9C 0%, #C4A574 55%, #A8823F 100%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0 0 0 4px rgba(196, 165, 116, 0.18), 0 6px 16px rgba(196, 165, 116, 0.4);
}
.lp-popup-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy, #1F4B6E);
    margin: 0 0 6px;
}
.lp-popup-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    color: var(--text-light, #6b6b6b);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */
@media (max-width: 1024px) {
    .lp-pointer { width: 8.4%; min-width: 20px; max-width: 34px; }
}
@media (max-width: 768px) {
    .lp-pointer { width: 9.4%; min-width: 18px; max-width: 30px; }
    .lp-tooltip { display: none; } /* tooltips replaced by tap popup on touch devices */
}
@media (max-width: 480px) {
    .lp-pointer { width: 10.5%; min-width: 16px; max-width: 26px; }
    .lp-pointer-dot { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-pointer,
    .lp-pointer::before {
        animation: none !important;
    }
}