/* ==========================================================================
   مجمع الفارس التجاري — Section «وصف المجمع» (plan)
   Static plan image (no zoom / no tilt / no drag). Numbered pins reveal their
   tooltip on hover only (pure CSS). Loads AFTER elfares.css AND elfares-ui.css.
   Legacy .plan-marker* / .plan-marker__pop hooks are preserved and restyled here.
   RTL: logical properties throughout; never letter-space Arabic.
   ========================================================================== */

/* ---------- 1. Stage — matted frame on a soft pedestal ----------------- */
.pln-stage {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
    padding: clamp(8px, 1.2vw, 16px);
    background: #fff;
    border: 1px solid var(--smoke-color);
    border-radius: 30px;
    box-shadow: var(--elx-shadow-md);
}
/* soft radial pedestal shadow, grounded entirely below the frame */
.pln-stage::after {
    content: "";
    position: absolute;
    inset-inline: 8%;
    top: calc(100% + 6px);
    height: 42px;
    background: radial-gradient(ellipse at center, rgba(16, 38, 63, .22), rgba(16, 38, 63, 0) 72%);
    filter: blur(7px);
    pointer-events: none;
}

/* ---------- 2. Static figure — image + absolutely-placed pins ---------- */
.pln-figure {
    position: relative;                 /* positioning context for the pins */
    border-radius: 18px;
    background: linear-gradient(180deg, #f0f5fa, #e2ecf5);
}
.pln-figure__img {
    display: block;
    width: 100%;
    height: auto;                       /* natural size — no zoom in / out */
    border-radius: 18px;
}

/* ---------- 3. Markers — crisper hover halo over the baked pins -------- */
/* ghost dots overlay the pre-numbered pins; keep them transparent so the
   printed number/colour shows through, and elevate only the focus feedback. */
#plan .plan-marker--ghost .plan-marker__dot::after {
    opacity: .5;
    border-color: var(--theme-color2);
    animation-duration: 2.6s;
}
#plan .plan-marker--ghost:hover .plan-marker__dot {
    background: rgba(0, 165, 229, .14);
    border-color: rgba(0, 165, 229, .55);
    box-shadow: 0 0 0 5px rgba(0, 165, 229, .16),
                0 10px 22px rgba(0, 165, 229, .28);
    transform: scale(1.22);
}

/* ---------- 4. Tooltip pop — refined card -----------------------------  */
#plan .plan-marker__pop {
    width: 268px;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 22px 50px rgba(16, 38, 63, .24),
                inset 0 0 0 1px rgba(219, 230, 240, .9);
}
#plan .plan-marker__pop h5 {
    color: var(--theme-color);
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--smoke-color);
}
#plan .plan-marker__pop p {
    color: var(--body-color);
    line-height: 1.7;
}

/* ---------- 5. Legend — nine numbered unit cards ----------------------- */
.pln-legend {
    margin-top: clamp(34px, 4.5vw, 56px);
}
.pln-legend__item {
    display: flex;
    align-items: flex-start;
    gap: var(--elx-3);
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--smoke-color);
    border-radius: var(--elx-radius);
    box-shadow: var(--elx-shadow);
    transition: transform .35s var(--elx-ease),
                box-shadow .35s var(--elx-ease),
                border-color .35s var(--elx-ease);
}
.pln-legend__item:hover {
    transform: translateY(-5px);
    box-shadow: var(--elx-shadow-md);
    border-color: transparent;
}
/* number tile — outlined by default, fills with the brand gradient on hover */
.pln-legend__num {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--theme-color);
    background: #fff;
    border: 2px solid var(--theme-color);
    box-shadow: none;
    transition: background .35s var(--elx-ease),
                color .35s var(--elx-ease),
                border-color .35s var(--elx-ease),
                box-shadow .35s var(--elx-ease);
}
.pln-legend__item:hover .pln-legend__num {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(46, 96, 158, .24);
}
.pln-legend__body { min-width: 0; }
.pln-legend__title {
    display: block;
    margin-bottom: 3px;
    color: var(--title-color);
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.02rem;
}
.pln-legend__text {
    margin: 0;
    color: var(--body-color);
    font-size: .92rem;
    line-height: 1.7;
}

/* ---------- 6. Responsive + reduced-motion ----------------------------- */
@media (max-width: 575px) {
    .pln-stage { border-radius: 22px; }
    .pln-figure, .pln-figure__img { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .pln-legend__item { transition: none; }
    #plan .plan-marker--ghost .plan-marker__dot::after { animation: none; }
}