/* -------------------------------------------------------------------------- */
/*                                  Map Base                                  */
/* -------------------------------------------------------------------------- */
.map_Box { position: relative; width: 100%; overflow: hidden; }
.map_Inner { position: relative; width: 1300px; max-width: 100%; margin-inline: auto; transform: translateX(80px); z-index: 10; }
.map_Main { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
body:not(.rtl) .map_Main { transform: translateX(-11px); }

/* Projects Pins */
.map_Project { position: absolute; left: var(--x); top: var(--y); z-index: 3; transform: translate(-50%, -50%); }
.map_Project.active { z-index: 20; }

/* Connector Line */
.map_Connector { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; max-width: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; }
.map_Connector.active { opacity: 1; visibility: visible; }
.map_Connector_Path { fill: none; stroke: #ef4f23; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map_Connector_End { fill: #ef4f23; opacity: 0; transition: opacity 0.2s ease; }
.map_Connector.active .map_Connector_End { opacity: 1; }

/* Pin */
.map_Pin { position: relative; display: block; width: 50px; height: 50px; padding: 0; border: 0; cursor: pointer; outline: none; transition: width var(--transition, 0.3s), height var(--transition, 0.3s); }
.map_Pin::before { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; background: #95959554; transform: translate(-50%, -50%) scale(0.75); transform-origin: center; animation: mapPinPulse 1.8s ease-out infinite; z-index: -1; }
@keyframes mapPinPulse { 0% { transform: translate(-50%, -50%) scale(0.75); opacity: 0.7; } 70%, 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.map_Pin::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 19px; width: 10px; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>') no-repeat center/contain; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>') no-repeat center/contain; background: linear-gradient(180deg, #008cbc 0%, #009658 100%); transition: 0.3s; }
.map_Project.active .map_Pin::before { animation: none; opacity: 0; width: 0; height: 0; }
.map_Project.active .map_Pin::after { width: 14px; height: 26px; background: #ef4f23; }

/* Info Stack */
.map_Info_Stack { position: absolute; top: 50px; right: 12px; left: auto; z-index: 5; display: flex; width: 430px; flex-direction: column; gap: 12px; padding: 40px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s, transform 0.35s ease; max-height: 600px; overflow-y: auto; scrollbar-width: none; transform: translateY(-20px); }
.map_Info_Stack::-webkit-scrollbar { display: none; }
.map_Info_Stack.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.map_Info_Stack.map_Info_Stack_Left { left: -200px; right: auto; }
.map_Info_Stack.map_Info_Stack_Right { right: 12px; left: auto; }

/* Info Box Cards */
.map_Info_Stack .map_Info_Box { position: relative; display: block; width: 100%; min-height: 105px; padding: 1rem; color: inherit; text-decoration: none; background: #fff; box-shadow: 0 4px 40px 0 rgba(18, 18, 18, 0.12); transition: box-shadow 0.3s, transform 0.3s; }
.map_Info_Stack .map_Info_Box:hover { box-shadow: 0 8px 32px rgba(18, 18, 18, 0.18); }
.map_Info_Box::before { content: ""; position: absolute; left: 0; top: 1rem; width: 3px; height: 42px; background: #ef4f23; }
.map_Info_Title { line-height: 1.9; margin: 0 0 0.75rem 0; font-size: 1.1rem; color: #333; }
.map_Info_Bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.map_Info_Location { display: flex; align-items: center; gap: 0.35rem; color: #777; font-size: 0.9rem; }

/* Mobile */
@media (max-width: 991px) {
    .map_Connector { display: none !important; }
    .map_Inner { width: 100%; max-width: 520px; transform: translateX(10%) scale(1.4); }
    .map_Info_Stack { display: none !important; }
    .map_Pin { width: 20px; height: 20px; }
    .map_Pin::after { width: 8px; height: 14px; }
}